/* =========================================================
   header.css
   Wildridge — compact centered floating nav (logo-centered)
   Hamburger pattern adapted from SecureLynx header.php
   ========================================================= */

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

.nav-island{pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;width:calc(100% - 60px);max-width:860px;
  padding:2px 2px;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:30px}
.nav-left{justify-self:end}
.nav-right{justify-self:start}
.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)}

/* logo is pulled OUT OF FLOW (absolute) so its height no longer drives the bar.
   the center cell only reserves horizontal space (width); height collapses to 0,
   so the island sizes to the text links and the 100px badge overhangs it. */
.nav-logo{justify-self:center;position:relative;width:200px;height:0}
.nav-logo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);
  height:150px;width:auto;display:block}
.nav-hamburger{display:none;justify-self:end;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)}

/* mobile drawer */
.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:768px){
  .nav-island{grid-template-columns:1fr auto 1fr;max-width:none;width:calc(100% - 28px)}
  .nav-left,.nav-right{display:none}
  .nav-logo{justify-self:center;grid-column:2}
  .nav-logo img{height:100px; width:125px}
  .nav-hamburger{display:flex}
  .nav-drawer.is-open{display:block}
}

/* =========================================================
   PRODUCTS DROPDOWN (desktop) + nested drawer group (mobile)
   Behavior lives in js/site.js — CSP is enforced, so no inline
   handlers. Click-to-open, not hover: the same markup has to
   work on touch, and hover has no touch equivalent.
   ========================================================= */
.nav-item{position:relative;display:flex;align-items:center}

/* the toggle is a <button> (it opens a menu, it isn't a destination),
   so reset the UA chrome back onto the .nav-link look. */
button.nav-link{background:none;border:0;padding:0;cursor:pointer;line-height:inherit;
  display:inline-flex;align-items:center;gap:.5em}
.nav-link.is-current{opacity:1;color:var(--ink)}

.nav-drop-toggle::after{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  opacity:.7;transition:transform var(--transition-fast)}
.nav-drop-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}

.nav-drop{display:none;position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  min-width:186px;background:var(--bone);border:1px solid var(--border-primary);
  border-radius:var(--radius-md);padding:8px;
  box-shadow:0 18px 40px -22px rgba(43,33,24,.55)}
.nav-drop.is-open{display:block}
.nav-drop a{display:block;white-space:nowrap;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding:11px 14px;border-radius:var(--radius-sm);transition:background var(--transition-fast),color var(--transition-fast)}
.nav-drop a:hover,.nav-drop a[aria-current="page"]{background:rgba(63,94,65,.08);color:var(--pine-deep)}

/* mobile drawer: Products is a label, its children sit indented under it */
.drawer-group{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);padding:12px 14px 4px}
.nav-drawer a.drawer-sub{padding-left:28px}
.nav-drawer a.drawer-sub::before{content:"";display:inline-block;width:10px;height:1px;
  background:var(--border-primary);vertical-align:middle;margin:0 8px 0 -18px}