/* NKO brand colours, taken from the Nasaem Khair logo (assets/images/nko-logo.png). */
:root > * {
  --md-primary-fg-color:        #1A6280; /* dark blue: the Arabic name and the circle */
  --md-primary-fg-color--light: #1D7196; /* top of the circle */
  --md-primary-fg-color--dark:  #1A5A75; /* bottom of the circle */
  --md-accent-fg-color:              #33B19B; /* teal: the drop and "NASAEM KHAIR" */
  --md-accent-fg-color--transparent: #33B19B1A;
  --nko-title-color: #1A6280;
}

/* Dark mode: the brand blue is too dark to read as text on the slate background. */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #5EA7C6;
  --md-accent-fg-color:              #46B8A6;
  --md-accent-fg-color--transparent: #46B8A61A;
  --nko-title-color: #5EA7C6;
}

/* Wider page. Material's default (61rem) leaves the content column about 690px wide on a
   1366px screen, which breaks routes and permission keys mid-word in the API tables. */
.md-grid {
  max-width: 80rem;
}

/* Code in table cells wraps only where overrides/hooks.py allows it (after "/", ".", ",", "<"
   and between words), not at any letter. */
.md-typeset table code {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Narrow screens: Material keeps only the arrow for "Previous"; show its label and page title as
   "Next" does, with the two links sharing the footer width. */
@media screen and (max-width: 44.984375em) {
  .md-footer__link--prev {
    flex-shrink: 1;
  }

  .md-footer__link--prev .md-footer__title {
    display: block;
  }

  /* Room for both titles: tighter padding, and long titles wrap instead of being cut off. */
  .md-footer__title,
  .md-footer__direction {
    padding: 0 0.6rem;
  }

  .md-footer__title,
  .md-footer__title .md-ellipsis {
    white-space: normal;
  }
}

/* Page titles in the brand blue instead of Material's pale grey. */
.md-typeset h1 {
  color: var(--nko-title-color);
  font-weight: 400;
}

/* Header logo: the mark sits on its own white tile, so show it larger and trim the padding
   to keep the header at its normal height. */
.md-header__button.md-logo {
  padding: 0.2rem;
}

.md-header__button.md-logo img {
  height: 1.6rem;
}

/* The documentation version, shown after the site name in the header.
   Keep it in step with `copyright` in mkdocs.yml. */
.md-header__topic:first-child .md-ellipsis::after {
  content: "v1.0";
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0 0.45rem;
  border: 0.05rem solid rgba(255, 255, 255, 0.4);
  border-radius: 0.6rem;
  background-color: rgba(255, 255, 255, 0.12);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

/* Home page: the full logo under "Home" in the left-hand navigation (overrides/main.html). */
.nko-sidebar-logo {
  display: block;
  width: 8rem;
  height: auto;
  margin: 1.2rem 0.6rem 0;
}

/* On the dark background the dark-blue Arabic name would disappear, so the logo gets a card in
   its own background colour. */
[data-md-color-scheme="slate"] .nko-sidebar-logo {
  padding: 0.6rem;
  border-radius: 0.4rem;
  background-color: #F7F7F7;
}

/* Below this width the navigation becomes the slide-out drawer, which already shows the header
   logo. */
@media screen and (max-width: 76.234375em) {
  .nko-sidebar-logo {
    display: none;
  }
}

/* Where the logo shows, centre "Home" over it: the link takes the logo's width. */
@media screen and (min-width: 76.25em) {
  .md-sidebar__inner:has(.nko-sidebar-logo) .md-nav__item--active > .md-nav__link {
    width: 8rem;
    justify-content: center;
    text-align: center;
  }
}