/* ==========================================================================
   Grit Blueprint - site chrome (header + footer)
   Loaded globally on every page. All selectors are .gbn-* prefixed so they
   cannot collide with gb-home.css generic classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER OFFSET RETUNE
   The coded nav bar is 78px tall and is the point of truth. Every page
   template's offset math is expressed via --gb-header-h, so retuning the
   variable here pulls every hero up under the new bar with no per-page edits.
   -------------------------------------------------------------------------- */
:root { --gb-header-h: 78px; }
body[class*="-tpl"] { --gb-header-h: 78px !important; }

/* --------------------------------------------------------------------------
   2. FOUNDATION SAFETY NET (foundation-gap trap)
   The nav/footer use these tokens. They exist in the design-system master,
   but confirm they are present in the LIVE assets/colors_and_type.css. If any
   are missing there, these fallbacks keep the chrome correct. If they are
   already defined live, delete this block (the live values win on load order
   only if these are removed, so keep this block ONLY for tokens that are
   genuinely absent live).
   -------------------------------------------------------------------------- */
/*
:root{
  --gb-navy:#18355E; --gb-pink:#FF1894; --gb-plaster:#F9F7F2;
  --gb-line:#DCDBD4; --gb-concrete:#94989B; --gb-blue-500:#0092D6;
}
*/

/* --------------------------------------------------------------------------
   3. DESKTOP MEGA MENUS
   Open state is driven by .open on the .gbn-group (set by chrome.js with a
   140ms close delay). Panels are centered in the relative nav container.
   -------------------------------------------------------------------------- */
.gbn-mega{
  position:absolute; top:calc(100% + 12px); left:50%;
  width:min(900px, calc(100vw - 40px)); z-index:70;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.gbn-mega--wide{ width:min(912px, calc(100vw - 40px)); }
.gbn-group.open > .gbn-mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* trigger button: hover + active (open) highlight */
.gbn-trigger:hover,
.gbn-group.open .gbn-trigger{ color:#fff; background:rgba(255,255,255,.07); }

/* Grit Guide standalone link */
.gbn-grit:hover{ background:rgba(255,24,148,.14); color:#fff; }

/* mega link rows + nested title */
.gbn-ml:hover{ background:var(--gb-plaster) !important; }
.gbn-ml:hover .gbn-mt{ color:var(--gb-pink) !important; }

/* promo "chip" CTA inside a mega (if present) */
.gbn-chip:hover{ border-color:var(--gb-pink) !important; color:var(--gb-pink) !important; }

/* --------------------------------------------------------------------------
   4. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.gbn-drawer{
  position:fixed; inset:0; z-index:200; background:#0B1730;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.gbn-drawer.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
body.gbn-noscroll{ overflow:hidden; }

/* mobile accordions */
.gbn-acc-pan{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.gbn-acc-pan.open{ max-height:1600px; transition:max-height .35s ease; }
/* plus/minus swap (lucide adds .lucide-<name> to the rendered svg) */
.gbn-acc .lucide-minus{ display:none; }
.gbn-acc.open .lucide-plus{ display:none; }
.gbn-acc.open .lucide-minus{ display:inline-block; }

/* --------------------------------------------------------------------------
   5. FOOTER hovers
   -------------------------------------------------------------------------- */
.gbn-soc:hover{ opacity:1 !important; transform:translateY(-2px); border-color:rgba(255,255,255,.4) !important; }
.gbn-fl:hover{ color:#fff !important; }
.gbn-news input:focus{ outline:none; border-color:var(--gb-pink); }

/* --------------------------------------------------------------------------
   6. RESPONSIVE SWITCH (nav <-> burger) + pulse
   -------------------------------------------------------------------------- */
@keyframes gbnPulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.65);} }

@media (max-width:1100px){
  .gbn-desknav{ display:none !important; }
  .gbn-bookbtn{ display:none !important; }
  .gbn-burger{ display:inline-flex !important; align-items:center; justify-content:center; }
}
@media (min-width:1101px){
  .gbn-drawer{ display:none !important; }
}

/* --------------------------------------------------------------------------
   7. CHROME BUTTON LIBRARY (scoped)
   The live gb-home.css scopes its buttons under .gb-app, and the nav + footer
   sit OUTSIDE .gb-app, so the site's button styles never reach them. These
   rules supply them, scoped to header / .gbn-drawer / footer so they can NEVER
   touch .gb-app content buttons (that leak, via min-height, was the bug).
   Values are copied verbatim from gb-home.css -- note: NO min-height.
   -------------------------------------------------------------------------- */
/* Box-sizing for the chrome BUTTONS only. gb-home.css scopes border-box to
   `.gb-app *`, and the chrome lives OUTSIDE .gb-app, so width:100% buttons would
   fall back to content-box and overflow by their padding. Scoped to .btn only so
   it does NOT touch the promo card/cover-image (which rely on a 1px overscan to
   hide the rounded-corner hairline). */
:is(header, .gbn-drawer, footer) .btn{ box-sizing:border-box; }

:is(header, .gbn-drawer, footer) .btn{
  min-height:auto !important; /* immunity: neutralizes any stray global .btn{min-height} bleed (even !important) onto the chrome */
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:700; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; border:none; border-radius:var(--radius-pill);
  padding:16px 30px; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
             background var(--dur), border-color var(--dur), color var(--dur);
}
:is(header, .gbn-drawer, footer) .btn svg{ width:17px; height:17px; }
:is(header, .gbn-drawer, footer) .btn:active{ transform:translateY(1px); }
:is(header, .gbn-drawer, footer) .btn-pink{ background:var(--gb-pink); color:#fff; box-shadow:var(--shadow-pink-glow); }
:is(header, .gbn-drawer, footer) .btn-pink:hover{ box-shadow:0 16px 40px -10px rgba(255,24,148,.6); transform:translateY(-2px); }
:is(header, .gbn-drawer, footer) .btn-pink:active{ background:var(--gb-pink-600); }
:is(header, .gbn-drawer, footer) .btn-white{ background:#fff; color:var(--gb-navy); }
:is(header, .gbn-drawer, footer) .btn-white:hover{ background:#eef2f7; transform:translateY(-2px); }
:is(header, .gbn-drawer, footer) .btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
:is(header, .gbn-drawer, footer) .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
:is(header, .gbn-drawer, footer) .btn-lg{ padding:19px 38px; font-size:15px; }
:is(header, .gbn-drawer, footer) .btn-sm{ padding:11px 20px; font-size:12.5px; }