/* Make the logo larger in the header */
.md-header__button.md-logo img {
  height: 80px;
}

/* Make content use full available area */
.md-grid {
  max-width: initial;
}

/* Add styling for the card grids individually */
.md-typeset .grid.cards > ul > li {
  background-color: var(--renesas-primary-color-bg-blue) !important;
}

/* Make logo smaller */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1rem;
}

/* The stylesheet below has been sourced from: https://github.com/renesas-rz/rz_linux_bsp_plus/blob/da81f24e97e127f8cff64dc297152697f35fb5fe/docs/assets/stylesheets/extra.css */
:root {
  /* https://www.color-blindness.com/color-name-hue/ */
  /* renesas primary colors */
  --renesas-primary-color-fg-blue:            rgb(42, 40, 157);   /* #282a9d Cerulean Blue */
  --renesas-primary-color-fg-grey:            rgb(112, 111, 111); /* #706f6f Dim Gray */

  /* https://www.colorhexa.com/<hex> --> tint color variatian -> 2 from last (right) */
  /* check using https://simplecss.eu/rgbatohex.html to alpha 0.1 */
  --renesas-primary-color-bg-blue:            rgb(224, 225, 247); /* rgba(42, 40, 157, 0.1);   --> #e0e1f7 */
  --renesas-primary-color-bg-grey:            rgb(239, 239, 239); /* rgba(112, 111, 111, 0.1); --> #efefef */

  /* --renesas-primary-color-bg-blue--softer:    rgba(42, 40, 157, 0.075); */

  /* renesas secondary colors */
  --renesas-secondary-color-fg-grey:          rgb(124, 144, 156); /* #7c909c Light Slate Grey */
  --renesas-secondary-color-fg-violet-purple: rgb(97, 94, 142);   /* #615e8e Kimberly */
  --renesas-secondary-color-fg-blue:          rgb(67, 171, 226);  /* #43abe2 Summer Sky */
  --renesas-secondary-color-fg-blue-teal:     rgb(96, 169, 180);  /* #60a9b4 Fountain Blue */
  --renesas-secondary-color-fg-blue-sky:      rgb(48, 102, 131);  /* #306683 Astral */
  --renesas-secondary-color-fg-yellow:        rgb(223, 177, 24);  /* #dfb118 Sunflower */
  --renesas-secondary-color-fg-red-orange:    rgb(235, 98, 9);    /* #eb6209 Persimmon */
  --renesas-secondary-color-fg-red:           rgb(183, 25, 33);   /* #b71921 Fire Brick */
  --renesas-secondary-color-fg-violet:        rgb(136, 61, 144);  /* #883d90 Vivid Violet */
  --renesas-secondary-color-fg-green:         rgb(96, 154, 59);   /* #609a3b Apple */
  --renesas-secondary-color-fg-green-shade:   rgb(117, 136, 89);  /* #758859 Highland */
  --renesas-secondary-color-fg-black:         rgb(0, 0, 0);       /* #000000 Black */

  --renesas-secondary-color-bg-grey:          rgb(236, 239, 240); /* rgba(124, 144, 156, 0.1); --> #eceff0 */
  --renesas-secondary-color-bg-violet-purple: rgb(232, 232, 240); /* rgba(97, 94, 142, 0.1);   --> #e8e8f0 */
  --renesas-secondary-color-bg-blue:          rgb(237, 247, 252); /* rgba(67, 171, 226, 0.1);  --> #edf7fc */
  --renesas-secondary-color-bg-blue-teal:     rgb(229, 241, 243); /* rgba(96, 169, 180, 0.1);  --> #e5f1f3 */
  --renesas-secondary-color-bg-blue-sky:      rgb(228, 239, 245); /* rgba(48, 102, 131, 0.1);  --> #e4eff5 */
  --renesas-secondary-color-bg-yellow:        rgb(252, 247, 230); /* rgba(223, 177, 24, 0.1);  --> #fcf7e6 */
  --renesas-secondary-color-bg-red-orange:    rgb(254, 237, 226); /* rgba(235, 98, 9, 0.1);    --> #feede2 */
  --renesas-secondary-color-bg-red:           rgb(252, 231, 232); /* rgba(183, 25, 33, 0.1);   --> #fce7e8 */
  --renesas-secondary-color-bg-violet:        rgb(245, 234, 246); /* rgba(136, 61, 144, 0.1);  --> #f5eaf6 */
  --renesas-secondary-color-bg-green:         rgb(243, 249, 239); /* rgba(96, 154, 59, 0.1);   --> #f3f9ef */
  --renesas-secondary-color-bg-green-shade:   rgb(241, 243, 237); /* rgba(117, 136, 89, 0.1);  --> #f1f3ed */
  --renesas-secondary-color-bg-black:         rgb(245, 245, 245); /* rgba(0, 0, 0, 0.1);       --> #f5f5f5 */

  /* https://www.colorhexa.com/282a9d */
  /* material for mkdocs - primary color */
  --md-primary-fg-color:                      var(--renesas-primary-color-fg-blue);
  --md-primary-fg-color--light:               #4543cf;
  --md-primary-fg-color--dark:                #1a1860;
}

/* admonitions */
/* =========== */

.md-typeset .admonition,
.md-typeset details {
  border: none !important;
  background-color: var(--renesas-primary-color-bg-blue) !important;
  position: relative !important;
  top: 0.1rem !important;
  left: 0.1rem !important;
}

.md-typeset .admonition:not(:has(.admonition-title)) {
  top: 0 !important;
  left: 0 !important;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: var(--renesas-primary-color-fg-blue) !important;
  display: inline-block !important;
  color: white !important;
  padding: 0.1rem 0.3rem !important;
  border-radius: 0.1rem !important;
  position: relative !important;
  top: -0.1rem !important;
  left: -0.1rem !important;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  display: none !important;
}

.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  background-color: var(--renesas-secondary-color-bg-blue) !important;
}

.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary {
  background-color: var(--renesas-secondary-color-fg-blue) !important;
}

.md-typeset .admonition.info,
.md-typeset details.info {
  background-color: var(--renesas-secondary-color-bg-blue-sky) !important;
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: var(--renesas-secondary-color-fg-blue-sky) !important;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: var(--renesas-secondary-color-bg-blue-teal) !important;
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: var(--renesas-secondary-color-fg-blue-teal) !important;
}

.md-typeset .admonition.success,
.md-typeset details.success {
  background-color: var(--renesas-secondary-color-bg-green) !important;
}

.md-typeset .success > .admonition-title,
.md-typeset .success > summary {
  background-color: var(--renesas-secondary-color-fg-green) !important;
}

.md-typeset .admonition.question,
.md-typeset details.question {
  background-color: var(--renesas-secondary-color-bg-green-shade) !important;
}

.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: var(--renesas-secondary-color-fg-green-shade) !important;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  background-color: var(--renesas-secondary-color-bg-yellow) !important;
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: var(--renesas-secondary-color-fg-yellow) !important;
}

.md-typeset .admonition.failure,
.md-typeset details.failure {
  background-color: var(--renesas-secondary-color-bg-red-orange) !important;
}

.md-typeset .failure > .admonition-title,
.md-typeset .failure > summary {
  background-color: var(--renesas-secondary-color-fg-red-orange) !important;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  background-color: var(--renesas-secondary-color-bg-red) !important;
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: var(--renesas-secondary-color-fg-red) !important;
}

.md-typeset .admonition.bug,
.md-typeset details.bug {
  background-color: var(--renesas-secondary-color-bg-violet) !important;
}

.md-typeset .bug > .admonition-title,
.md-typeset .bug > summary {
  background-color: var(--renesas-secondary-color-fg-violet) !important;
}

.md-typeset .admonition.example,
.md-typeset details.example {
  background-color: var(--renesas-secondary-color-bg-violet-purple) !important;
}

.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
  background-color: var(--renesas-secondary-color-fg-violet-purple) !important;
}

.md-typeset .admonition.quote,
.md-typeset details.quote {
  background-color: var(--renesas-secondary-color-bg-grey) !important;
}

.md-typeset .quote > .admonition-title,
.md-typeset .quote > summary {
  background-color: var(--renesas-secondary-color-fg-grey) !important;
}

/* tables */
/* ====== */

.md-typeset__table {
  table {
    /* border: 0.025rem solid !important; */
    /* border-color: var(--renesas-primary-color-fg-grey) !important; */
    border-collapse: separate;
    border-radius: 0.5rem !important;
    border-spacing: 0;
  }

  thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
    background-color: var(--renesas-primary-color-fg-blue);
    color: white !important;
  }

  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: var(--renesas-primary-color-fg-grey) !important;
    border: 0 !important;
    /* background-color: var(--renesas-primary-color-bg-blue--softer); */
  }

  th,
  td {
    vertical-align: top;
    padding: .5375em 0.75em !important;
  }

  th {
    text-align: center !important;
    /* border: 0.025rem solid !important; */
    border-color: var(--renesas-primary-color-fg-grey) !important;
  }

  th::after {
    background-color: white !important;
    opacity: 1;
  }

  th:hover:after,
  th[aria-sort=ascending]:hover:after,
  th[aria-sort=descending]:hover:after {
    background-color: var(--renesas-secondary-color-fg-yellow) !important;
  }

  th[aria-sort=ascending]:after,
  th[aria-sort=descending]:after {
    background-color: var(--renesas-secondary-color-fg-red-orange) !important;
  }

  th > code {
    background-color: var(--md-primary-fg-color--light);
    color: white;
  }

  td {
    /* border: 0.025rem solid !important; */
    /* border-color: var(--renesas-primary-color-fg-grey) !important; */
    vertical-align: middle !important;
  }
}

/* admonitions used as content-wrapper, and its extension (sub) class */
/* ================================================================== */

.md-typeset .content-wrapper > .admonition-title,
.md-typeset .content-wrapper > summary,
.md-typeset .content-wrapper > .admonition-title::before,
.md-typeset .content-wrapper > summary::before {
  display: none !important;
}

.md-typeset .admonition.content-wrapper,
.md-typeset details.content-wrapper {
  top: 0 !important;
  left: 0 !important;
  margin: 0;
  border: none;
  box-shadow: none;
  background-color: transparent !important;

  & > .md-typeset__scrollwrap {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    line-height: .76rem;
    color: var(--md-default-fg-color--light);
    font-size: .64rem;
    margin-left: 0.6em;
  }

  li:target,
  li:has(p:target) {
    color: var(--md-default-fg-color);
  }

  [id^="tfref:"]:target > a {
    outline: auto;
  }

  a {
    outline-offset: .1rem;
  }

  .tf-backref {
    color: var(--md-typeset-a-color);
    display: inline-block;
    font-size: 0;
    opacity: 0;
    transform: translateX(.25rem);
    transition: color .25s, transform .25s .25s, opacity 125ms .25s;
    vertical-align: text-bottom;
  }

  .tf-backref::before {
    background-color: currentcolor;
    content: "";
    display: inline-block;
    height: .6rem;
    -webkit-mask-image: var(--md-footnotes-icon);
    mask-image: var(--md-footnotes-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: .8rem;
    position: absolute;
  }

  .tf-backref:hover {
    color: var(--md-accent-fg-color);
  }

  li:has(.tf-backref):hover,
  li:target,
  li:has(p:target) {
    .tf-backref {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.no-indent {
  padding: 0 !important;
}

.table-no-sort {
  /* nothing */
}

.table-no-hover {
  tr:hover {
    background-color: transparent !important;
  }
}

.tabbed-block > .admonition.content-wrapper:first-child {
  margin-top: 0.6rem;
}

/* headings */
/* ======== */

.md-typeset h1 {
  background-color: var(--renesas-primary-color-fg-blue);
  color: white !important;
  font-style: italic;
  font-weight: 500 !important;
  padding: 0.6rem 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 .0735rem .075rem var(--renesas-primary-color-bg-blue) !important;
}

.md-typeset h1 > .headerlink {
  color: var(--renesas-secondary-color-fg-yellow) !important;
}

.md-typeset h1 > .headerlink:focus,
.md-typeset h1 > .headerlink:hover,
.md-typeset h1:target>.headerlink {
  color: var(--renesas-secondary-color-fg-red-orange) !important;
}

.md-typeset h1 > code {
  background-color: var(--md-primary-fg-color--light);
  color: white;
  font-style: normal;
}

.md-typeset h2 {
  border-bottom-width: 0.1em;
  border-bottom-style: solid;
  border-bottom-color: var(--renesas-primary-color-fg-blue);
}

.md-typeset h3 {
  border-bottom-width: 0.05em;
  border-bottom-style: solid;
  border-bottom-color: var(--renesas-primary-color-fg-grey);
}

.md-typeset h4 .headerlink,
.md-typeset h5 .headerlink,
.md-typeset h6 .headerlink {
    display: none !important;
    opacity: 0 !important;
}

/* Colour formatting for Switch Setting tables */
.green {
  background-color: var(--renesas-secondary-color-bg-green);
}

.green:hover {
  background-color: var(--renesas-secondary-color-fg-green);
}

.red {
  background-color: var(--renesas-secondary-color-bg-red);
}

.red:hover {
  background-color: var(--renesas-secondary-color-fg-red);
}

.green:hover,
.red:hover {
  font-weight: bold;
  color: white;
}

/* footers */
/* ======= */

.footer-link {
  margin: 0.3em 0.7em;
  padding: 0 0.3em;
}

a.md-source[target=_blank].footer-link::after {
  margin-top: 0.375em;
}