/* =============================================================================
   Gridwell - theme-forge "tf-reincon-nav" NAV-BAR COMPONENT
   LIKENESS build of the Reincon (ThemeHT) header ONLY. Two-layer split header:
   full-height white logo column + navy topbar + white main bar + full-height
   navy GET A QUOTE block reading as one L-shaped navy column. Lemon accent squares.
   Black dropdown panels with a 2px lemon lid. Original CSS/JS/copy, own Geologica
   family, own hexes in-family. Fictional demo brand. IP guardrail: README.md.
   ============================================================================= */

/* ---- fonts ---- */
@font-face { font-family:"Geologica"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/geologica-400.woff2") format("woff2"); }
@font-face { font-family:"Geologica"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/geologica-600.woff2") format("woff2"); }
@font-face { font-family:"Geologica"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/geologica-700.woff2") format("woff2"); }

/* ---- tokens ---- */
:root{
  --lemon:#FFE01A;        /* primary accent */
  --lemon-hi:#FFE94D;     /* dropdown hover (lighter lemon) */
  --navy:#071E3D;         /* secondary / topbar / CTA */
  --ink:#0A1626;          /* headings */
  --body:#6A6F78;         /* nav link rest / body copy */
  --drawer:#050505;       /* dropdown + mobile drawer black */
  --paper:#ffffff;
  --wash:#F6F7F8;
  --line:#ECEDEF;
  --white-hair:rgba(255,255,255,.10);

  --nav-h:134px;          /* full header at rest (1440) */
  --logo-col:181px;
  --topbar-h:48px;
  --mainbar-h:86px;
  --cta-w:174px;

  --ease:cubic-bezier(.32,.32,.15,1.17);   /* springy overshoot for dropdown items */
  --t-swap:.5s ease-in-out;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Geologica",system-ui,sans-serif;
  color:var(--body);background:var(--paper);
  line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
img{max-width:100%;display:block}

/* =============================================================================
   HEADER  (rest state, desktop >=992)
   ============================================================================= */
.hdr{
  position:relative;z-index:800;
  display:flex;align-items:stretch;
  height:var(--nav-h);
  background:var(--paper);
}

/* Layer A - full-height white logo column */
.hdr__logo{
  flex:0 0 var(--logo-col);width:var(--logo-col);
  display:flex;align-items:center;
  padding-left:30px;background:var(--paper);
}
.brand{display:flex;align-items:center;gap:9px}
.brand__mark{width:40px;height:40px;flex:0 0 40px}
.brand__type{
  display:flex;flex-direction:column;line-height:1;
}
.brand__word{
  font-weight:700;font-size:19px;letter-spacing:.01em;
  color:var(--navy);text-transform:none;
}
.brand__sub{
  font-weight:600;font-size:7px;letter-spacing:.14em;
  color:var(--body);text-transform:uppercase;margin-top:4px;white-space:nowrap;
}
/* compact logo shown only when stuck */
.brand--compact{display:none}

/* Layer container - topbar over mainbar */
.hdr__main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}

/* Layer B - navy topbar */
.topbar{
  height:var(--topbar-h);flex:0 0 var(--topbar-h);
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 50px;
}
.topbar__info{display:flex;align-items:center;gap:34px}
.topbar__info li{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:26px;white-space:nowrap}
.topbar__info svg{width:18px;height:18px;color:var(--lemon);flex:0 0 18px}
.topbar__util{display:flex;align-items:center;gap:0;margin-left:auto}
.topbar__search{width:18px;height:18px;margin-right:16px;color:#fff}
.topbar__search svg{width:18px;height:18px}
.topbar__social{display:flex;align-items:center;gap:20px}
.topbar__social a{color:#fff;opacity:.92;transition:color .5s ease-in-out,opacity .5s ease-in-out}
.topbar__social svg{width:15px;height:15px}
.topbar__social a:hover{color:var(--lemon);opacity:1}

/* Layer C - white main bar */
.mainbar{
  height:var(--mainbar-h);flex:0 0 var(--mainbar-h);
  background:var(--paper);
  display:flex;align-items:center;
  padding-left:30px;
}

/* primary menu */
.menu{display:flex;align-items:center}
.menu>li{position:relative;margin:0 15px}
.menu>li>a{
  display:flex;align-items:center;gap:4px;
  font-size:16px;font-weight:600;line-height:16px;text-transform:uppercase;
  color:var(--body);
  transition:color var(--t-swap);
  padding:6px 0;
}
.menu>li>a .chev{width:14px;height:14px;transition:transform .5s ease-in-out}
.menu>li>a:hover,.menu>li.is-current>a{color:var(--navy)}

/* dropdown (black panel, lemon lid) */
.sub{
  position:absolute;top:calc(100% + 12px);left:0;
  min-width:224px;
  background:var(--drawer);
  border-top:2px solid var(--lemon);
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .5s ease-in-out,visibility .5s ease-in-out;
}
.menu>li:hover>.sub,.menu>li:focus-within>.sub{opacity:1;visibility:visible}
.sub li{margin:10px 0}
.sub a{
  font-size:14px;font-weight:600;line-height:26px;text-transform:uppercase;color:#fff;
  transition:color .9s var(--ease);
}
.sub a:hover{color:var(--lemon-hi)}

/* cart square */
.cart{
  margin-left:auto;margin-right:15px;
  position:relative;width:40px;height:40px;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lemon);color:var(--navy);
}
.cart svg{width:20px;height:20px}
.cart__count{
  position:absolute;top:-9px;right:-9px;
  width:20px;height:20px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

/* CTA full-height navy block flush right */
.cta{
  align-self:stretch;flex:0 0 var(--cta-w);width:var(--cta-w);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--navy);color:#fff;
  font-size:14px;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.02em;
  transition:background var(--t-swap),color var(--t-swap);
}
.cta__ico{position:relative;width:14px;height:14px;overflow:hidden;display:block}
.cta__ico svg{width:14px;height:14px;position:absolute;inset:0;transition:transform .45s var(--ease)}
.cta__ico svg:nth-child(2){transform:translate(-120%,120%)}
.cta:hover{background:var(--lemon);color:var(--navy)}
.cta:hover .cta__ico svg:nth-child(1){transform:translate(120%,-120%)}
.cta:hover .cta__ico svg:nth-child(2){transform:translate(0,0)}

/* the CTA sits at bottom-right; topbar navy already covers above it -> L-shape.
   To make the CTA span from topbar bottom to header bottom (86px) flush right,
   it lives inside .mainbar as the last child with the mainbar height. */

/* =============================================================================
   STICKY  (only the 86px main bar fixes full-width)
   ============================================================================= */
@keyframes smoothScroll{
  0%{opacity:0;transform:translateY(-20px)}
  100%{opacity:1;transform:translateY(0)}
}
.hdr.is-stuck .mainbar{
  position:fixed;top:0;left:0;right:0;width:100%;
  z-index:900;
  box-shadow:0 25px 70px rgba(0,0,0,.07);
  animation:smoothScroll .5s linear;
  padding-left:30px;
}
.hdr.is-stuck .brand--compact{display:flex;align-items:center;margin-right:22px}
.hdr.is-stuck .menu{margin-left:0}
.brand--compact .brand__mark{width:40px;height:40px;flex:0 0 40px}
/* keep body from jumping: the mainbar leaving flow removes 86px but we are already
   scrolled >300px, so no visible shift at the top. */

/* =============================================================================
   SEARCH OVERLAY
   ============================================================================= */
.search{
  position:fixed;top:0;left:0;right:0;height:243px;z-index:9999;
  overflow-x:clip;
  background:var(--paper);
  border-bottom:2px solid var(--lemon);
  opacity:0;visibility:hidden;transform:translateY(-16px);
  transition:opacity .5s ease-in-out,transform .5s ease-in-out,visibility .5s ease-in-out;
}
.search.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.search__form{
  position:absolute;top:80px;left:50%;transform:translateX(-50%);
  width:636px;max-width:calc(100% - 80px);
  display:flex;align-items:center;
  border-bottom:1px solid var(--line);
}
.search__input{
  flex:1;height:52px;border:0;background:none;
  font-family:inherit;font-size:16px;color:var(--ink);
}
.search__input::placeholder{color:var(--body)}
.search__input:focus{outline:none}
.search__submit{width:22px;height:22px;color:var(--ink)}
.search__submit svg{width:22px;height:22px}
.search__close{
  position:absolute;top:170px;left:50%;transform:translateX(288px);
  width:26px;height:26px;color:var(--ink);
}
.search__close svg{width:22px;height:22px}

/* =============================================================================
   MOBILE  ( <=991 )
   ============================================================================= */
.burger,.cart--m{display:none}
.drawer,.drawer-bg{display:none}

@media (max-width:991px){
  .hdr{height:110px;align-items:center;padding:0 20px}
  .hdr__logo{flex:0 0 auto;width:auto;padding-left:0}
  .brand__mark{width:52px;height:52px;flex:0 0 52px}
  .brand__word{font-size:23px}
  .hdr__main{display:none}
  .cta{display:none}

  .m-cluster{display:flex;align-items:center;gap:24px;margin-left:auto}
  .burger{
    display:flex;align-items:center;justify-content:center;
    width:50px;height:51px;flex:0 0 50px;
    background:var(--navy);color:var(--lemon);
  }
  .burger svg{width:26px;height:26px}
  .cart--m{
    display:flex;align-items:center;justify-content:center;position:relative;
    width:50px;height:50px;flex:0 0 50px;
    background:var(--lemon);color:var(--navy);
  }
  .cart--m svg{width:24px;height:24px}
  .cart--m .cart__count{top:-8px;right:-8px}

  /* full-screen lemon overlay (signature moment) */
  .drawer-bg{
    display:block;position:fixed;inset:0;z-index:990;
    background:var(--lemon);opacity:0;visibility:hidden;
    transition:opacity .9s ease,visibility .9s ease;
  }
  .drawer-bg.is-open{opacity:.8;visibility:visible}

  /* black drawer, RIGHT side, 300px. Reveal via clip-path wipe + opacity so no
     element's bounding right edge ever exceeds 390 mid-animation (gate + ref fix).
     Box stays pinned at right:0 (x90..390) at all times; visibility toggled. */
  .drawer{
    display:block;position:fixed;top:0;right:0;bottom:0;z-index:1000;
    width:300px;background:var(--drawer);
    overflow-y:auto;overflow-x:hidden;
    padding:80px 30px 40px;
    opacity:0;visibility:hidden;
    clip-path:inset(0 0 0 100%);
    transition:opacity .9s ease,visibility .9s ease,clip-path .9s ease;
  }
  .drawer.is-open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
  .drawer__close{
    position:absolute;top:26px;right:26px;
    width:34px;height:34px;color:var(--lemon);
  }
  .drawer__close svg{width:26px;height:26px}

  .m-menu li{border-bottom:1px solid var(--white-hair)}
  .m-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 0;
  }
  .m-row>a,.m-row>span{
    font-size:16px;font-weight:600;text-transform:uppercase;color:#fff;
  }
  .m-toggle{
    width:26px;height:26px;flex:0 0 26px;color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .m-toggle svg{width:14px;height:14px;transition:transform .4s ease}
  .m-toggle svg{transform:rotate(-90deg)}
  .m-item.is-open .m-toggle svg{transform:rotate(0deg)}
  .m-sub{display:none;padding:4px 0 16px}
  .m-item.is-open .m-sub{display:block}
  .m-sub a{display:block;font-size:14px;font-weight:400;color:rgba(255,255,255,.82);padding:8px 0;text-transform:none;text-align:center}

  /* hide desktop-only search overlay trigger context (search still works via any hook if present) */
}

/* =============================================================================
   SCAFFOLD  (dummy page under the nav to demo sticky/scroll - clearly labeled)
   ============================================================================= */
.scaffold-hero{
  min-height:420px;
  background:linear-gradient(135deg,#0B1526,#132743);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);text-align:center;padding:40px;
}
.scaffold-hero span{
  font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
}
.scaffold-band{
  min-height:640px;display:flex;align-items:center;justify-content:center;
  color:#B7BCC4;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.scaffold-band--a{background:var(--wash)}
.scaffold-band--b{background:#EDEFF2}
.scaffold-band--c{background:#E4E7EB}
.scaffold-note{
  max-width:520px;margin:0 auto;padding:0 24px;
  font-weight:400;letter-spacing:normal;text-transform:none;font-size:14px;line-height:1.7;color:#7A828C;
}
.demo-footer{
  background:var(--navy);color:rgba(255,255,255,.72);
  padding:34px 24px;text-align:center;font-size:12.5px;font-weight:400;line-height:1.7;
}
.demo-footer a{color:var(--lemon)}

/* =============================================================================
   REDUCED MOTION - dropdowns/drawer/search appear instantly, no keyframes
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .sub,.search,.drawer,.drawer-bg{transition:none !important}
  .drawer{clip-path:none}
  .drawer:not(.is-open){clip-path:inset(0 0 0 100%)}
  .hdr.is-stuck .mainbar{animation:none}
}