/* ==============================================================
   H3 — Two-tier header

   Dark utility strip over a white main bar. The main bar is a
   three-column grid rather than a flex row with space-between,
   because the reference centres the nav on the BAR (its centre sits
   within 1px of the box centre) rather than in the space left over
   between the logo and the CTA. Those are only the same thing when
   the logo and the CTA happen to be equal widths, and here they are
   not — 140 against 158.
   ============================================================== */

.tierheader {
  background: var(--color-surface);
  color: var(--color-ink);
}


/* --- Utility strip -------------------------------------------------
   The tier has no padding of its own: the link carries it, so the
   same value produces both the 35px tier height and a touch target
   comfortably over the 24px minimum. Padding on the tier would have
   given the height without the target.
   --------------------------------------------------------------------- */

.tierheader__utility {
  background: var(--color-tierheader-utility);
  color: var(--color-tierheader-utility-ink);
}

.tierheader__utility-inner {
  max-width: var(--tierheader-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  /* One right-aligned item in the reference. flex-end rather than
     space-between so a second item lands beside it rather than being
     flung to the opposite edge. */
  justify-content: flex-end;
}

.tierheader__utility-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.tierheader__utility-link {
  display: inline-block;
  padding-block: var(--tierheader-utility-pad);
  font-size: var(--text-tierheader-utility);
}

.tierheader__utility-link:hover,
.tierheader__utility-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}


/* --- Main bar -------------------------------------------------------- */

.tierheader__main-inner {
  max-width: var(--tierheader-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--tierheader-main-pad);

  display: grid;
  /* Equal outer tracks are what actually centres the middle one. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}


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

.tierheader__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
}

.tierheader__wordmark {
  font-size: var(--text-tierheader-wordmark);
  line-height: var(--leading-none);
}


/* --- Nav -------------------------------------------------------------- */

.tierheader__nav-list {
  display: flex;
  align-items: center;
  gap: var(--tierheader-nav-gap);
}

/* Vertical padding only. It lifts the target past 24px without
   widening the boxes, so the gap between links stays the 15px the
   reference draws rather than growing by twice the inline padding. */
.tierheader__nav-link {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-tierheader-nav);
  font-weight: var(--weight-semibold);
}

.tierheader__nav-link:hover,
.tierheader__nav-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}


/* --- CTA -------------------------------------------------------------- */

/* Through the button's own custom property, not a padding override, so
   the transparent-border trick that keeps solid and outline the same
   height survives. */
.tierheader__cta {
  justify-self: end;
  --btn-pad-y: var(--tierheader-cta-pad-y);
}



/* ==============================================================
   H4 — Responsive: burger + menu panel

   One row on desktop; logo and burger below the breakpoint, with the
   nav and CTA behind the menu. That is two states rather than the
   four the earlier stacked version produced, and it is what the
   mobile reference draws.

   The threshold comes from the gap, not from an overflow — the three
   columns never collide, they just run out of air:

       1000px bar  ->  107px between nav and CTA
        850px bar  ->   40px
        768px bar  ->    3px      <- nav touching a solid button
        700px bar  ->    0px, and the bar grows as the CTA label wraps

   Nothing there trips a scrollbar check, which is how §1 ended up
   switching its drawer 40px later than its nav actually fits.

   Those figures were taken when the CTA carried an arrow and measured
   200px. It is now 172px, so at the 815px threshold there is ~104px of
   air rather than the ~50px this was tuned for — the row is given up
   earlier than it needs to be. Deliberately left: a header that
   collapses with room to spare is a smaller fault than one that
   collapses too late, and the number should be re-derived if the CTA
   label changes again.

   A CONTAINER query, not a media query: --container-pad is fluid and
   the style guide wraps this in a second padded box, so the viewport
   width at which the bar reaches 815px differs between the guide and
   a real page. The container is true in both.
   ============================================================== */

.tierheader {
  /* On the header rather than the bar, so the menu panel — a sibling
     of the bar — is inside the same container. Both are full width, so
     the threshold is unchanged. */
  container-type: inline-size;
}


/* --- Burger --------------------------------------------------------
   Always in the DOM so disclosure.js binds it at load; CSS decides
   whether it is shown. Both glyphs ship and one is displayed, keyed
   off the ARIA state — the same approach §8 and §20 use for their
   accordion signs, and for the same reason: aria-expanded is already
   correct and a second class would need syncing.
   --------------------------------------------------------------------- */

/* Groups the quick-contact icon with the burger so the pair reads as
   one action cluster (Gestalt: proximity), and keeps the mobile grid
   at exactly two tracks (logo, then this) rather than needing a third
   auto-placed column for the icon on its own. */
.tierheader__actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

/* Hidden on desktop until the mobile breakpoint drops it in.
   Targeted with higher specificity and !important to prevent .btn / a.btn
   defaults from overriding display: none in WordPress or theme cascades. */
.tierheader__whatsapp,
a.tierheader__whatsapp,
.tierheader__actions .tierheader__whatsapp {
  display: none !important;
}

.tierheader__whatsapp-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  stroke-width: var(--icon-stroke);
}

.tierheader__burger {
  display: none;
  /* Padding, not a fixed box: it lifts the 22px icon past the 24px
     target minimum without hard-coding a size. */
  padding: var(--space-2);
  color: inherit;
}

.tierheader__burger-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  stroke-width: var(--icon-stroke);
}

.tierheader__burger-icon--close {
  display: none;
}

.tierheader__burger[aria-expanded='true'] .tierheader__burger-icon--open {
  display: none;
}

.tierheader__burger[aria-expanded='true'] .tierheader__burger-icon--close {
  display: block;
}


/* --- Menu panel -----------------------------------------------------
   In flow rather than absolutely positioned: it pushes the page down
   instead of covering it, which needs no stacking context and cannot
   end up underneath anything. An overlay is the other reasonable
   choice and would only change these few rules.
   --------------------------------------------------------------------- */

.tierheader__menu {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--container-pad) var(--space-5);
}

.tierheader__menu-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tierheader__menu-link {
  display: block;
  padding-block: var(--space-3);
  font-size: var(--text-tierheader-nav);
  font-weight: var(--weight-semibold);
}

.tierheader__menu-link:hover,
.tierheader__menu-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}

.tierheader__menu-cta {
  --btn-pad-y: var(--tierheader-cta-pad-y);
  width: 100%;
}


@container (max-width: 815px) {

  .tierheader__main-inner {
    grid-template-columns: 1fr auto;
  }

  /* The bar's copies go; the panel's are the only ones exposed. */
  .tierheader__nav,
  .tierheader__cta {
    display: none !important;
  }

  .tierheader__actions {
    display: flex;
  }

  .tierheader__whatsapp,
  a.tierheader__whatsapp,
  .tierheader__actions .tierheader__whatsapp,
  .tierheader__burger {
    display: inline-flex !important;
  }
}

/* Viewport media query fallback for DevTools and environments without container query support */
@media (max-width: 815px) {

  .tierheader__main-inner {
    grid-template-columns: 1fr auto;
  }

  .tierheader__nav,
  .tierheader__cta {
    display: none;
  }

  .tierheader__actions {
    display: flex;
  }

  .tierheader__whatsapp,
  a.tierheader__whatsapp,
  .tierheader__actions .tierheader__whatsapp,
  .tierheader__burger {
    display: inline-flex !important;
  }
}

/* Above the breakpoint the burger is unreachable, so the panel can
   only be open if the window was widened while it was — this closes
   that case rather than leaving a stray menu on a desktop layout. */
@container (min-width: 816px) {

  .tierheader__menu {
    display: none;
  }
}

@media (min-width: 816px) {

  .tierheader__menu {
    display: none;
  }
}