/* Merge the navbar into the single header row (see docs/overrides/partials/header.html). */

/*
 * With navigation.tabs (non-sticky), mkdocs-material's JS only toggles the header
 * drop-shadow on scroll — designed for tabs in a separate row that hide when scrolled.
 * Here the tabs live in the always-visible header row, so the shadow should always be
 * present. Force material's default shadow regardless of scroll state.
 */
.md-header {
  box-shadow:
    0 0 0.2rem #0000001a,
    0 0.2rem 0.4rem #0000001a;
}

.md-header__inner {
  flex-wrap: nowrap;
}

.md-header__tabs {
  flex-grow: 1;
  overflow-x: auto;
  margin: 0 1rem;
}

.md-header__tabs .md-tabs {
  width: auto;
  /* Drop the grey divider mkdocs-material draws under the tab row. */
  border-bottom: none;
  box-shadow: none;
}

/*
 * mkdocs-material's tabs component toggles a [hidden] attribute based on scroll
 * offset, designed for tabs living in their own row below the header. Nested inside
 * the (always sticky) header row here, that math no longer applies and leaves the
 * links permanently faded out / unclickable — force the always-visible rest state.
 */
.md-header__tabs .md-tabs[hidden] {
  pointer-events: auto !important;
}

.md-header__tabs .md-tabs[hidden] .md-tabs__link {
  opacity: .7 !important;
  transform: none !important;
}

.md-header .md-logo img {
  height: 1.8rem;
}

/*
 * mkdocs-material renders the header tab links at .7rem. Match the main text
 * size (.md-typeset is .8rem) so the header reads at the same scale as the body.
 */
.md-header__tabs .md-tabs__link {
  font-size: 0.8rem;
}

/*
 * Center the tab items on the page grid (like the banner text), not within the
 * flex strip. The left (logo) and right (search/source) clusters have unequal
 * widths, so the flex strip is off-center; absolutely position the list at the
 * center of .md-header__inner (the same md-grid the banner uses).
 */
.md-header__inner {
  position: relative;
}

.md-header__tabs .md-tabs__list {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/*
 * The mobile slide-out drawer repeats the branding as logo image + "GEMSEO"
 * text, just like the (now title-less) header. The logo already carries the
 * branding, so drop the redundant text. font-size:0 hides the bare text node
 * without affecting the <img>; scoped to [for="__drawer"] so nested section
 * titles keep their labels.
 */
.md-nav__title[for="__drawer"] {
  font-size: 0;
}

/*
 * mkdocs-material shows a wide inline search box on desktop (>= 60em). We want
 * the magnifying-glass icon only there too, like on mobile; clicking it still
 * expands the same search panel via the existing [data-md-toggle=search]:checked
 * rules, which are untouched.
 */
@media screen and (min-width: 60em) {
  .md-header__button[for="__search"] {
    display: inline-block;
  }

  .md-header .md-search__inner {
    width: 0;
    padding: 0;
    overflow: hidden;
    /* visibility:hidden pulls the collapsed input out of the keyboard tab order,
       so a keyboard user reaches the magnifier button, not an invisible field. */
    visibility: hidden;
  }

  /* Restore focusability once the panel expands. */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    visibility: visible;
    overflow: visible;
  }

  /* Once the panel expands, its own icon is enough — hide the toggle button. */
  [data-md-toggle="search"]:checked ~ .md-header .md-header__button[for="__search"] {
    display: none;
  }
}