/* ============================================================
   FABBRUCCIO: NAV CHROME (section)

   Ported from the approved build: beta2 site.css:50-63 (the bar),
   :274-282 (the invert variant), :241-243 (the 900px switch) and
   :407-425 (the mobile panel). Structure from
   design-language/components.md section 1.

   Markup: parts/header.html, the SINGLE source of truth for the nav on
   both render paths (FSE via wp:template-part, classic via header.php ->
   block_header_area()).
   Behaviour: assets/js/fab-site.js.

   beta2 -> here
     .nav          -> .fab-nav
     .nav--invert  -> .fab-nav--invert
     .solid        -> .is-solid
     .nav-links    -> .fab-nav__links
     .burger       -> .fab-nav__burger
     .nav-logo     -> .fab-nav__logo
     .nav-right    -> .fab-nav__end
     .logo         -> .fab-nav__wordmark
     .is-open      -> .is-open   (unchanged)

   ------------------------------------------------------------
   LANDMINE 1: WHY THE BAR IS FIXED AND A SPACER PAYS ITS SPACE
   ------------------------------------------------------------
   The parent's own chrome escapes its container with
   `margin-inline: calc(-1 * var(--gutter))` (instawhew/assets/css/
   header.css:14), UNCONDITIONALLY. That only works inside
   .wp-site-blocks, which is the wrapper that pays the gutter back as
   padding, and .wp-site-blocks EXISTS ONLY ON FSE ROUTES. instawhew is a
   hybrid theme: our front page, /contact/ and search render through
   classic PHP templates, where the wrapper does not exist and the
   negative margin becomes a raw pull past the viewport edge. Measured on
   the previous build before the fix: body.scrollWidth 1472 at a 1440
   viewport.

   The bar sidesteps the whole question by being `position: fixed`, which
   is already viewport-relative and needs no escape at all. It then takes
   no flow space, so .fab-nav__spacer gives that space back, sized from
   the same --fab-nav-height token as the bar so the two cannot drift.
   No negative margin, and NO 100vw anywhere (100vw includes the
   scrollbar, so it overflows by ~15px on any desktop that has one, and
   the parent's body{overflow-x:hidden} would then swallow it silently).
   ============================================================ */

.fab-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--fab-nav-height);

  /* 3 columns of 1fr auto 1fr so the wordmark is OPTICALLY CENTRED
     regardless of how many links sit either side of it. Exactly three
     grid items are ever present: above 900px they are links / wordmark /
     end, and below 900px the links are display:none (so not a grid item
     at all) and the burger takes column one. That is why the burger and
     the links can share a column with no wrapper between them. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--fab-gutter);

  /* The two switches the invert variant flips. Every child below reads
     them, so a route can re-colour the whole bar with one declaration. */
  --fab-nav-ink: var(--fab-ink);
  --fab-nav-opacity: .72;
  color: var(--fab-nav-ink);

  /* Default state is transparent, for sitting over a full-bleed hero.
     THE TRANSPARENT BORDER IS LOAD-BEARING: it reserves the 1px so the
     page does not shift when the bar solidifies. */
  background: transparent;
  border-bottom: 1px solid transparent;

  transition: background var(--fab-nav-solidify-duration) var(--fab-ease),
              border-color var(--fab-nav-solidify-duration) var(--fab-ease),
              backdrop-filter var(--fab-nav-solidify-duration) var(--fab-ease);
}

/* Solidified past 24px of scroll. One passive scroll listener toggles the
   class; no sentinel element, no observer. */
.fab-nav.is-solid {
  background: var(--fab-veil-nav);
  backdrop-filter: var(--fab-blur-chrome);
  -webkit-backdrop-filter: var(--fab-blur-chrome);
  border-bottom-color: var(--fab-hairline);
}

/* The spacer. Height from the same token as the bar. */
.fab-nav__spacer {
  height: var(--fab-nav-height);
  flex: 0 0 auto; /* the parent makes body a flex column, layout.css:13 */
}

/* The front page is the one route whose hero is MEANT to run under the
   transparent bar, so it pays no spacer. Keyed off body.home rather than
   a class on the spacer, because the spacer lives in a block template
   part and a template part cannot know which route rendered it. */
body.home .fab-nav__spacer { display: none; }

/* LINKS. --fab-size-small at opacity .72, going to 1 on hover. No
   underline, no colour change, no weight change. */
.fab-nav__links,
.fab-nav__end {
  display: flex;
  align-items: center;
  gap: var(--fab-space-xl);
  font-size: var(--fab-size-small);
  letter-spacing: var(--fab-track-nav);
}
.fab-nav__end { justify-self: end; }

.fab-nav__links a,
.fab-nav__end a {
  color: var(--fab-nav-ink);
  opacity: var(--fab-nav-opacity);
  text-decoration: none;
  transition: opacity var(--fab-hover-duration) var(--fab-ease);
}
.fab-nav__links a:hover,
.fab-nav__end a:hover { opacity: 1; }
.fab-nav__links a:focus-visible,
.fab-nav__end a:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Account appears twice in the markup and exactly ONE copy ever renders.
   Above 900px it is in the end slot; below, the end slot keeps the Bag
   alone (there is no room for both beside a centred wordmark) so the
   panel copy takes over. Two elements rather than one moved by JS,
   because the panel is a different place in the document and moving a
   node between slots on resize is how focus gets lost mid-interaction. */
.fab-nav__panel-only { display: none; }

/* THE WORDMARK. 17px tall in the bar. It is an inline SVG <use> of a
   symbol whose paths are fill=currentColor, so the bar and the footer
   control its colour from ONE asset, which is what makes the invert
   variant below possible without a second file. It is the only display
   moment on the page. */
.fab-nav__logo {
  justify-self: center;
  display: block;
  color: var(--fab-nav-ink);
  line-height: 0;
}
.fab-nav__wordmark {
  display: block;
  height: 17px;
  width: auto;
  color: currentColor;
}

/* THE BURGER. A TEXT button reading "Menu". No hamburger glyph, because
   the system has no icon set at all (design-language/rules.md, 4). */
.fab-nav__burger {
  display: none;
  justify-self: start;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--fab-nav-ink);
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-small);
  letter-spacing: var(--fab-track-nav);
  cursor: pointer;
}
.fab-nav__burger:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ------------------------------------------------------------
   THE INVERT VARIANT (beta2 .nav--invert)
   ------------------------------------------------------------
   For a bar sitting over a dark full-bleed hero: paper ink on the links,
   the wordmark and the burger, but ONLY while not solid. The :not() is
   what makes the handoff automatic. The moment the bar solidifies the
   invert stops applying and normal ink returns, with no JS involved
   beyond the class that was already being toggled.

   WHY IT IS DRIVEN BY TWO CUSTOM PROPERTIES RATHER THAN BY REPEATING
   EVERY CHILD SELECTOR: the nav is authored ONCE, in parts/header.html,
   which is a block template part and runs no PHP, so it cannot know which
   route rendered it and cannot add a modifier class on the front page
   alone. The alternative was toggling the class from JavaScript, which
   would leave ink-on-a-dark-hero for anyone with JS off, i.e. an
   unreadable nav. Routing the colour through --fab-nav-ink means the
   route can flip it from CSS with ONE selector (body.home below), and the
   .fab-nav--invert class still works for any future template that wants
   to opt in explicitly.

   WHY :not(.is-open) IS HERE, AND WHY IT IS NOT OPTIONAL.
   The open mobile panel turns the bar opaque paper. Paper ink on a paper
   bar is an invisible wordmark and an invisible burger, so the open state
   has to get normal ink back. The mobile block below does set both
   properties back, and for the .fab-nav--invert branch that is enough:
   0,0,2,0 against 0,0,2,0, later in the file, source order decides, which
   is what the note down there describes.

   It was NEVER enough for this second branch. `body.home .fab-nav:not(...)`
   is 0,0,3,1. `.fab-nav.is-open` is 0,0,2,0. Specificity is settled before
   source order is ever consulted, so on the front page, and ONLY on the
   front page, the open panel kept paper ink: the bar went opaque and the
   wordmark and burger vanished into it. The 1440/390 audit caught it in
   navcheck-home--390.png while the same interaction on /store/ and on a
   PDP was correct, which is exactly the signature of a rule that is scoped
   to body.home.

   Fixed by excluding the open state HERE rather than by raising the
   specificity of the rule below, because that reuses the mechanism this
   block already documents: the invert stops applying and normal ink
   returns. It is the same handoff as .is-solid, for the same reason, and
   it keeps the open state free of !important. Do not drop either :not().
   ------------------------------------------------------------ */
.fab-nav--invert:not(.is-solid):not(.is-open),
body.home .fab-nav:not(.is-solid):not(.is-open) {
  --fab-nav-ink: var(--fab-ground);
  --fab-nav-opacity: .82;
}

/* ============================================================
   THE MOBILE MENU. MANDATORY, AND IT IS WHY THIS BLOCK IS LAST.

   Below 900px the links are hidden and the burger is shown, so THE
   BURGER MUST HAVE A HANDLER AND A PANEL OR THE SITE HAS NO NAVIGATION
   AT ALL ON A PHONE. It shipped inert once, sitewide, which is why
   design-language/components.md section 1 carries it as a hard rule
   rather than a nicety.

   SOURCE ORDER IS THE MECHANISM. The .is-open rules have to beat the
   .fab-nav--invert:not(.is-solid) ink overrides above, and they do it by
   coming after them at equal specificity. NOT with !important: an
   !important here would also win against the solidified state, and the
   panel would then be stuck on paper ink over a paper background the
   moment the reader scrolled.
   ============================================================ */
@media (max-width: 900px) {

  .fab-nav__links { display: none; }
  .fab-nav__burger { display: block; }

  /* Open: the bar goes opaque so the panel reads as one surface with it.
     backdrop-filter is switched OFF rather than left on, because a blur
     behind an opaque panel costs a compositor layer for nothing. */
  .fab-nav.is-open {
    background: var(--fab-ground);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--fab-hairline);
    /* Resetting the two switches is the whole override: every child
       already reads them, so there is no per-child rule to repeat and no
       !important anywhere. This wins over the invert block above BY
       SOURCE ORDER at equal specificity, which is the mechanism the
       design language names. An !important here would also beat the
       solidified state, and the panel would then be stuck on paper ink
       over a paper background the moment the reader scrolled. */
    --fab-nav-ink: var(--fab-ink);
    --fab-nav-opacity: .86;
  }

  /* The panel. position:fixed, so it leaves the grid entirely and the bar
     is still exactly three grid items. Links stacked, each with a
     hairline top rule: the same divider language as everywhere else. */
  .fab-nav.is-open .fab-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--fab-nav-height);
    padding: 2px var(--fab-gutter) 16px;
    background: var(--fab-ground);
    border-bottom: 1px solid var(--fab-hairline);
    font-size: .92rem;
    letter-spacing: 0;
  }
  .fab-nav.is-open .fab-nav__links a {
    color: var(--fab-ink);
    opacity: .86;
    padding: 15px 2px;
    border-top: 1px solid var(--fab-hairline);
  }
  .fab-nav.is-open .fab-nav__links a:hover { opacity: 1; }

  /* The panel's own Account copy. See the note beside .fab-nav__panel-only. */
  .fab-nav__panel-only { display: block; }
  .fab-nav__end a[href="/my-account/"] { display: none; }
}

/* ------------------------------------------------------------
   PARENT CHROME THAT MUST NOT PAINT

   Our header part replaces the parent's .site-header outright, so none of
   its rules should match anything. One exception is worth unsetting
   explicitly: `.iw-cart-count` is kept as a CLASS on our Bag count span
   because it is the FRAGMENT KEY that makes the number live
   (inc/minicart.php re-registers that same key through
   woocommerce_add_to_cart_fragments). It carries the parent's pill paint,
   which we do not want. The class is doing data-binding work here, not
   paint work, so the paint is stripped and the binding is kept.
   ------------------------------------------------------------ */
.fab-nav .iw-cart-count {
  all: unset;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}