/* =========================================================
   header.css
   Wildridge - floating brand, centered nav pill, floating cart.

   ONE HEADER FOR THE WHOLE PROPERTY (S30). This file and the store's
   copy are the same file, and they are meant to stay that way: the
   brochure pages and the shop are one site to a visitor, and a header
   that changes shape when you click Products says otherwise.

   It began as the store's own copy, built to the go-live shape while
   the live site still carried the old one. At the cutover it was ported
   up and the live header retired, exactly as it was written to be.

   WHAT THE SHAPE IS, AND WHY:

   The logo is OUT of the nav island. Six items would not fit around
   it - measured, the five links plus a 200px logo cell need a 1054px
   island against the 860px it had, so every desktop width wrapped.
   Floating the brand frees exactly that space and the links sit on one
   row inside the pill at its existing width, with the type untouched.

   The cart is a floating control for the same reason, and better for
   it: visible on every page rather than one link among six.

   The Products dropdown is gone. The store index IS the products page,
   so Products is a destination again rather than a menu. (S17 built
   that dropdown for a site with no store; the store is the thing it
   was standing in for.)

   NO NEW JAVASCRIPT ANYWHERE IN THIS. The brand shrinks on .scrolled,
   which both js/site.js and store/js/store.js have set on #site-header
   at scrollY > 20 since long before this file existed. That shared
   class is the only contract between the two trees' scripts - if one of
   them is ever rewritten, it keeps that line.
   ========================================================= */


.site-header{position:sticky;top:0;z-index:var(--z-nav);display:flex;justify-content:center;
  padding-top:26px;pointer-events:none}
.site-header.scrolled .nav-island{box-shadow:0 14px 34px -20px rgba(43,33,24,.6)}

/* The pill is now only the links. No grid, no logo cell — it sizes to
   its content and centers itself in the viewport, which is what keeps
   it centered independently of how wide the brand mark is. */
.nav-island{pointer-events:auto;position:relative;display:flex;align-items:center;
  padding:10px 26px;border-radius:var(--radius-pill);
  background:var(--cream);backdrop-filter:blur(10px);
  border:1px solid var(--border-primary);box-shadow:0 10px 28px -20px rgba(43,33,24,.5);
  transition:background var(--transition-fast),box-shadow var(--transition-fast)}

.nav-group{display:flex;align-items:center;gap:28px}
.nav-link{font-family:var(--lilita);font-size:1.1rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--pine);opacity:.98;transition:opacity var(--transition-fast),color var(--transition-fast)}
.nav-link:hover,.nav-link[aria-current="page"]{opacity:1;color:var(--ink)}


/* ---------------------------------------------------------
   FLOATING BRAND
   Large on arrival, smaller once you start reading.

   Fixed rather than absolute so it holds its place while the page
   moves under it, and inside .site-header so the .scrolled class the
   existing scroll handler already sets drives the shrink. No new
   JavaScript: js/store.js toggles .scrolled past 20px and always has.

   pointer-events:auto because .site-header disables them so the
   transparent area around the pill does not swallow clicks.
   --------------------------------------------------------- */
.brand-fab{position:fixed;top:16px;left:26px;pointer-events:auto;display:block;
  z-index:calc(var(--z-nav) + 1)}
.brand-fab img{display:block;width:auto;height:118px;
  transition:height var(--transition-medium)}
.site-header.scrolled .brand-fab img{height:82px}

/* Someone who asked not to be moved at gets the small mark from the
   start rather than a jump on first scroll. */
@media(prefers-reduced-motion:reduce){
  .brand-fab img{transition:none}
}


/* ---------------------------------------------------------
   FLOATING CART
   Top right on desktop, sitting in the empty space beside the pill.

   On narrow screens it moves to the BOTTOM right: the top right is
   where the hamburger lives, and a cart button is worth having under
   a thumb rather than at the far corner of a phone screen.
   --------------------------------------------------------- */
.cart-fab{position:fixed;top:26px;right:26px;pointer-events:auto;z-index:calc(var(--z-nav) + 1);
  display:inline-grid;place-items:center;width:52px;height:52px;
  border-radius:var(--radius-pill);background:var(--cream);color:var(--pine);
  border:1px solid var(--border-primary);box-shadow:0 10px 28px -20px rgba(43,33,24,.55);
  transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.cart-fab:hover{transform:translateY(-1px);box-shadow:0 14px 30px -18px rgba(43,33,24,.6)}
.cart-fab svg{width:22px;height:22px}
.cart-fab .cart-count{position:absolute;top:-3px;right:-3px}


/* ---------------------------------------------------------
   THE VEIL
   Content fades into the page color as it passes under the header
   rather than sliding behind it at full contrast.

   Fixed, never interactive, and one step below the nav so the pill and
   both floating controls sit on top of it. The gradient ends fully
   transparent, so it reads as the page dissolving rather than as a
   band with an edge.
   --------------------------------------------------------- */
.header-veil{position:fixed;top:0;left:0;right:0;height:172px;pointer-events:none;
  z-index:calc(var(--z-nav) - 1);
  background:linear-gradient(to bottom,
    var(--bg-primary) 0%,
    var(--bg-primary) 32%,
    color-mix(in srgb,var(--bg-primary) 74%,transparent) 56%,
    color-mix(in srgb,var(--bg-primary) 32%,transparent) 78%,
    transparent 100%)}

/* color-mix is well supported now, but a browser without it would drop
   the whole declaration and show no veil at all — which is the old
   behavior, not a broken one. This keeps a plainer fade for that case. */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .header-veil{background:linear-gradient(to bottom,
    var(--bg-primary) 0%, var(--bg-primary) 34%, transparent 100%)}
}


/* ---------------------------------------------------------
   HAMBURGER + DRAWER
   The breakpoint is set by the BRAND, not the links. At full size the
   mark is ~195px wide, and the centered pill's left edge reaches it
   before the links ever run out of room.
   --------------------------------------------------------- */
.nav-hamburger{display:none;background:none;border:0;cursor:pointer;
  width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px;padding:6px}
.nav-hamburger span{display:block;height:2px;width:100%;background:var(--pine);border-radius:2px;
  transition:transform var(--transition-fast),opacity var(--transition-fast)}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:var(--bone);border:1px solid var(--border-primary);border-radius:var(--radius-md);
  padding:10px;box-shadow:0 18px 40px -22px rgba(43,33,24,.55)}
.nav-drawer a{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:12px 14px;border-radius:var(--radius-sm)}
.nav-drawer a:hover{background:rgba(63,94,65,.08);color:var(--pine-deep)}

@media(max-width:1300px){
  .nav-group{display:none}
  .nav-hamburger{display:flex}
  .nav-island{width:calc(100% - 28px);justify-content:flex-end}
  .nav-drawer.is-open{display:block}

  /* The pill is full width here, so the brand sits ON its left end and
     the hamburger holds the right.

     NOT absolute + translateY(-50%). Centring on the island puts the top
     of the mark ABOVE the island, and the island's top edge is only 26px
     from the viewport, so anything taller than ~52px got its top sliced
     off. Fixed with an explicit top cannot do that: 25 + 52 = 77, which
     is exactly the island's bottom edge, so it sits centred on the band
     and clear of the top of the screen. */
  .brand-fab{position:fixed;top:25px;left:20px;transform:none}
  .brand-fab img,
  .site-header.scrolled .brand-fab img{height:52px}

  .cart-fab{top:auto;bottom:20px;right:18px;width:56px;height:56px}
  .cart-fab svg{width:24px;height:24px}

  .header-veil{height:130px}
}

@media(max-width:520px){
  .site-header{padding-top:16px}
  .brand-fab{top:16px;left:16px}
  .brand-fab img,
  .site-header.scrolled .brand-fab img{height:46px}
  .cart-fab{right:14px;bottom:16px}
  .header-veil{height:100px}
}