/* =========================================================
   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}
}