/* ==========================================================================
   GNC SG — Header Layout
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  height: var(--header-height-mobile);
}

/*
 * The scroll shadow, drawn by a pseudo-element and faded with opacity rather
 * than being a `transition: box-shadow` on the bar itself.
 *
 * The two look identical — this is a transparent box the exact size of the
 * header, so the only thing it paints is the same outer shadow. What differs is
 * the cost: a box-shadow transition repaints the whole 64px-tall, full-width bar
 * on every frame it runs, and it runs *while the page is mid-scroll*, on the
 * main thread, against a scroll the browser is compositing. That repaint is what
 * makes a sticky header look like it wobbles on a phone. An opacity transition
 * on a promoted layer is composited instead, so the bar is rasterised once and
 * never touched again.
 *
 * will-change goes here, on the pseudo-element, and deliberately not on
 * .site-header — promoting the header would make it the containing block for
 * position: fixed descendants, and .mobile-menu and .mobile-menu-scrim are both
 * fixed and both live inside <header>. The scrim's `bottom: 0` would collapse to
 * the height of the bar.
 */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition-base);
  will-change: opacity;
}

.site-header.is-scrolled::after {
  opacity: 1;
}

@media (min-width: 768px) {
  .site-header {
    height: var(--header-height);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  gap: var(--space-8);
}

/*
 * Mobile bar order: hamburger, logo, then the search toggle hard right
 * (home-mobile.png). The markup keeps the logo first so it stays the first
 * thing in the tab order on desktop, so mobile reorders with flex instead of
 * duplicating the markup.
 */
@media (max-width: 767px) {
  .site-header__inner {
    gap: var(--space-3);
    padding: 0 var(--space-2) 0 var(--space-1);
  }

  .site-header__hamburger { order: 1; }
  .site-header__logo      { order: 2; }
  .site-header__search-toggle {
    order: 3;
    margin-left: auto;
  }
}

/* ---- Logo ---- */

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  height: 26px;  /* design/mobile/icon/GNC Logo.svg is 84x26 */
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 40px;
  }
}

/* ---- Main navigation ---- */

.site-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
  }
}

/*
 * Main nav is TB Mega Menu; see css/components/mega-menu.css for the bar and
 * dropdown panels. Only the region wrappers are handled here.
 */

/* Strip Drupal's block/nav wrappers so the menu is a direct flex child.
   (.nav-collapse is handled in mega-menu.css.) */
.site-header__nav > nav,
.site-header__nav > div,
.site-header__nav .block {
  display: contents;
}

/* ---- Search bar (header region) ---- */

.site-header__search {
  display: none;
}

@media (min-width: 768px) {
  .site-header__search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
  }
}

/*
 * Drupal search form styles:
 * The search block renders <form><div class="form-item"><input></div>
 * <div class="form-actions"><input type="submit"></div></form>
 */
.site-header__search form,
.site-header__search .header-search {
  display: flex;
  align-items: center;
  position: relative;
}

/* The text input */
.site-header__search input[type="search"],
.site-header__search input[type="text"],
.site-header__search .form-search,
.site-header__search .form-text {
  width: 200px;
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-grey-100);
  transition: width var(--transition-base), border-color var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-header__search input[type="search"]:focus,
.site-header__search input[type="text"]:focus,
.site-header__search .form-search:focus,
.site-header__search .form-text:focus {
  width: 280px;
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

.site-header__search input[type="search"]::placeholder,
.site-header__search input[type="text"]::placeholder {
  color: var(--color-text-light);
}

/* Hide the submit button — use CSS icon instead */
.site-header__search input[type="submit"],
.site-header__search .form-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--space-8);
  overflow: hidden;
}

.site-header__search .form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.site-header__search input[type="submit"] {
  width: var(--space-8);
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* Magnifying glass icon via the wrapper pseudo-element */
.site-header__search .header-search__wrapper,
.site-header__search form > div:first-child {
  position: relative;
}

.site-header__search form::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Hide Drupal form-item wrapper divs padding/margin */
.site-header__search .form-item {
  margin: 0;
  padding: 0;
}

/* Hide label if present */
.site-header__search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ---- Mobile hamburger ---- */

.site-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .site-header__hamburger {
    display: none;
  }
}

/*
 * Geometry from design/mobile/icon/menu-hamburger.svg: three 18x2 bars with
 * rx=1, drawn at y=5/11/17 in a 24x24 box — so 6px between bar centres. The
 * source paints black at opacity .6; that is baked into --color-icon here
 * rather than set as `opacity`, which would otherwise fade the whole control
 * including its focus ring.
 */
.hamburger-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-icon);
  transition: background-color var(--transition-fast);
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-icon);
  transition: transform var(--transition-base);
}

.hamburger-icon::before { top: -6px; }
.hamburger-icon::after  { top: 6px; }

/* Open state: the three bars are replaced by the cross from
   design/icon/cross.svg. It is applied as a mask rather than a background so
   the glyph takes --color-icon and stays in step with the hamburger it
   replaces, instead of being pinned to the asset's black fill. */

.site-header__hamburger[aria-expanded="true"] .hamburger-icon {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: transparent;
}

.site-header__hamburger[aria-expanded="true"] .hamburger-icon::before {
  display: none;
}

.site-header__hamburger[aria-expanded="true"] .hamburger-icon::after {
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 0;
  transform: none;
  background-color: var(--color-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.2929 3.29289C15.6834 2.90237 16.3164 2.90237 16.707 3.29289C17.0975 3.68342 17.0975 4.31643 16.707 4.70696L11.414 9.99992L16.707 15.2929C17.0975 15.6834 17.0975 16.3164 16.707 16.707C16.3164 17.0975 15.6834 17.0975 15.2929 16.707L9.99992 11.414L4.70696 16.707C4.31643 17.0975 3.68342 17.0975 3.29289 16.707C2.90237 16.3164 2.90237 15.6834 3.29289 15.2929L8.58586 9.99992L3.29289 4.70696C2.90237 4.31643 2.90237 3.68342 3.29289 3.29289C3.68342 2.90237 4.31643 2.90237 4.70696 3.29289L9.99992 8.58586L15.2929 3.29289Z' fill='black'/%3E %3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15.2929 3.29289C15.6834 2.90237 16.3164 2.90237 16.707 3.29289C17.0975 3.68342 17.0975 4.31643 16.707 4.70696L11.414 9.99992L16.707 15.2929C17.0975 15.6834 17.0975 16.3164 16.707 16.707C16.3164 17.0975 15.6834 17.0975 15.2929 16.707L9.99992 11.414L4.70696 16.707C4.31643 17.0975 3.68342 17.0975 3.29289 16.707C2.90237 16.3164 2.90237 15.6834 3.29289 15.2929L8.58586 9.99992L3.29289 4.70696C2.90237 4.31643 2.90237 3.68342 3.29289 3.29289C3.68342 2.90237 4.31643 2.90237 4.70696 3.29289L9.99992 8.58586L15.2929 3.29289Z' fill='black'/%3E %3C/svg%3E") center / contain no-repeat;
}

/* ---- Mobile menu panel ---- */

/*
 * The panel drops out of the header and is only as tall as its content — the
 * page stays visible underneath behind a scrim (menu.png). That is why this is
 * not a full-height sheet: `bottom` is deliberately unset, and the max-height
 * only kicks in when every section is expanded.
 */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  max-height: calc(100vh - var(--header-height-mobile));
  background-color: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

.mobile-menu.is-open {
  display: block;
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

/* The drawer in menu.png is links only — search lives in the header bar. */
.mobile-menu__search {
  display: none;
}

/* ==========================================================================
   Mobile search (home-search.png)

   Tapping the magnifier turns the header bar itself into the search field —
   the logo gives up its space and the page behind is untouched. It is not an
   overlay or a dropdown: the hero stays exactly where it was, which is what
   the design shows.

   Measured at 375px: the field runs x48–358 (311×40) with the magnifier inside
   its right edge, and the hamburger keeps its place.
   ========================================================================== */

.header-search__submit {
  display: none;
}

@media (max-width: 767px) {
  .site-header.is-searching .site-header__logo,
  .site-header.is-searching .site-header__search-toggle {
    display: none;
  }

  /* The field butts straight up against the hamburger's 44px tap target and
     stops at the page gutter — x48 to x358 at 375px. */
  .site-header.is-searching .site-header__inner {
    gap: 0;
    padding-right: var(--space-4);
  }

  .site-header.is-searching .site-header__search {
    display: flex;
    order: 2;
    flex: 1;
    min-width: 0;
    margin-left: 0;
  }

  .site-header.is-searching .site-header__search > * {
    width: 100%;
  }

  .site-header.is-searching .header-search,
  .site-header.is-searching .header-search__wrapper {
    position: relative;
    width: 100%;
  }

  /* The desktop bar grows its input on focus; here it always fills the bar. */
  .site-header.is-searching .site-header__search input[type="search"],
  .site-header.is-searching .site-header__search input[type="search"]:focus {
    width: 100%;
    height: 40px;
    padding: 0 44px 0 14px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-grey-200);
    /* 16px minimum, or iOS zooms the whole page in on focus. */
    font-size: var(--font-size-base);
  }

  /* The decorative magnifier is replaced by the real submit button, which has
     to be tappable. */
  .site-header.is-searching .site-header__search form::after {
    display: none;
  }

  /* Overlays the field's right end rather than sitting beside it, so the input
     keeps the full width and the icon reads as being inside the pill. */
  .site-header.is-searching .header-search__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-icon);
    cursor: pointer;
  }
}

/* Catches taps outside the panel so they close the menu.
   Deliberately transparent: comparing open-menu.png against home-mobile.png
   pixel for pixel below the panel, 96% are identical — the design does not
   dim or wash the page behind, it just covers the top of it. */
.mobile-menu-scrim {
  display: none;
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-overlay) - 1);
  background-color: transparent;
}

.mobile-menu-scrim.is-open {
  display: block;
}

@media (min-width: 768px) {
  .mobile-menu-scrim {
    display: none !important;
  }
}

/* ---- Drawer rows ----
   The drawer renders the TB Mega Menu block (the same block the desktop bar
   uses), so the row selectors target that markup; see the max-width: 767px
   block in components/mega-menu.css for the stacking rules. */

.mobile-menu ul.menu,
.mobile-menu .nav-main {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu ul.menu > li,
.mobile-menu .nav-main__item {
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu ul.menu > li > a,
.mobile-menu .nav-main__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  text-decoration: none;
}

/* ---- Mobile search toggle ---- */

/* Nothing to open, so nothing to show.

   page.html.twig already gates this button on page.header, which covers a
   region with no blocks in it. It does not cover the other case: the search
   block carries request_path visibility, and on a page it is hidden from, the
   region still renders as a non-empty array — truthy in Twig — while producing
   no form. Testing the region with |render would answer correctly but breaks
   lazy-built blocks, so the absent form is detected here instead.

   Degrades safely: without :has() the icon reappears on those pages, which is
   the behaviour that already shipped. */
.site-header__inner:not(:has(.header-search)) .site-header__search-toggle {
  display: none;
}

.site-header__search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-icon);
  cursor: pointer;
}

@media (min-width: 768px) {
  .site-header__search-toggle {
    display: none;
  }
}