/* ═══ nav.css — site-wide floating glass nav ("nav.bar", Anchor Desk redesign, Aug 2026) ═══
   One stylesheet, linked from every page, that restyles the existing .optb-nav markup
   into the approved floating glass bar. No page's nav MARKUP changes — this file wins
   over each page's local .optb-nav rules via the doubled-class selector (.optb-nav.optb-nav),
   which beats a single class regardless of source order.

   Back pocket: the old full-width live-site nav ("nav.flat") is one class away — add
   class="optb-nav nav-flat" (or remove this stylesheet link) and the page falls back
   to its own local nav rules below the doubled-class overrides guarded by :not(.nav-flat).

   Signed-in / signed-out controls are injected by /account/nav-auth.js into
   .optb-nav-right; the auth-state styles at the bottom restyle those injected
   elements to the redesign spec (plain "Log in" text + solid green "Sign up" pill,
   green avatar). Keep selectors in sync with nav-auth.js.

   Hero zone is always dark in both themes, so colors here are fixed rgba whites
   (hero-token philosophy) — same rule as the wire. */

.optb-nav.optb-nav:not(.nav-flat){
  position:absolute;top:14px;left:20px;right:20px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:58px;padding:0 28px;margin:0;
  border-radius:14px;
  background:rgba(17,17,17,.62);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.optb-nav.optb-nav:not(.nav-flat) .optb-logo{
  font-family:'Alfa Slab One',serif;font-size:19px;color:#fff;letter-spacing:.01em;white-space:nowrap;text-decoration:none;
}
.optb-nav.optb-nav:not(.nav-flat) .optb-nav-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.optb-nav.optb-nav:not(.nav-flat) .optb-links{display:flex;gap:20px;align-items:center}
.optb-nav.optb-nav:not(.nav-flat) .optb-links a{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);text-decoration:none;padding:0;transition:color .15s;
}
.optb-nav.optb-nav:not(.nav-flat) .optb-links a:hover{color:#fff}

/* Search — round trigger, green-ring input, quick-jump dropdown */
.optb-nav.optb-nav .search-btn{
  background:none;border:none;cursor:pointer;padding:6px;color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .15s;
}
.optb-nav.optb-nav .search-btn:hover{color:#fff;background:none;border:none}
.optb-nav.optb-nav .search-btn svg{width:17px;height:17px}
.optb-nav.optb-nav .search-input-wrap input{
  padding:8px 16px;border-radius:999px;border:1px solid rgba(34,197,94,.5);
  background:#1a1a1d;color:#fff;font-size:13px;outline:none;
}
.optb-nav.optb-nav .search-input-wrap input:focus{border-color:rgba(34,197,94,.5)}
.optb-nav.optb-nav .search-input-wrap.open{width:320px}
.optb-nav.optb-nav .search-dropdown{
  top:calc(100% + 12px);width:360px;background:#1f1f23;border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.optb-nav.optb-nav .search-result{gap:10px;padding:8px 10px;border-radius:7px;transition:background .15s}
.optb-nav.optb-nav .search-result:hover,.optb-nav.optb-nav .search-result:first-child{background:rgba(34,197,94,.08)}
.optb-nav.optb-nav .search-result img{width:24px;height:36px;border-radius:3px}
.optb-nav.optb-nav .search-result-title{font-size:12.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.optb-nav.optb-nav .search-result-title .sr-year{color:rgba(255,255,255,.45);font-weight:400;margin-left:5px}
.optb-nav.optb-nav .search-result .sr-gross{font-size:11.5px;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0}
.optb-nav.optb-nav .search-no-results{padding:14px 16px;font-size:12.5px;color:rgba(255,255,255,.5);text-align:left}

/* Hamburger + dropdown menu (under 1280px the links fold; nav-auth also ships this rule) */
.optb-nav.optb-nav .hamburger-btn .bar{background:#fff;width:18px;height:2px;margin-bottom:4px}
.optb-nav.optb-nav .hamburger-btn .bar:last-child{margin-bottom:0}
.optb-menu.optb-menu{
  top:84px;right:32px;width:220px;background:#1f1f23;border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.optb-menu.optb-menu .hamburger-menu-item{
  padding:9px 12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);border-radius:8px;
}
.optb-menu.optb-menu .hamburger-menu-item:hover{color:#fff;background:rgba(34,197,94,.08)}

/* Auth controls injected by nav-auth.js: plain "Log in" + solid green "Sign up" pill.
   (No display here — nav-auth's own responsive rules keep control of visibility.) */
.optb-nav.optb-nav .acc-auth-links{align-items:center;gap:20px}
.optb-nav.optb-nav .acc-nav-login{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-decoration:none;background:none;border:none;padding:0;
}
.optb-nav.optb-nav .acc-nav-login:hover{color:rgba(255,255,255,.8)}
.optb-nav.optb-nav .acc-nav-signup{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#052e16;background:#22c55e;border:none;border-radius:999px;padding:7px 16px;
  text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .15s;
}
.optb-nav.optb-nav .acc-nav-signup:hover{background:#4ade80;border:none;color:#052e16}
.optb-nav.optb-nav .nav-avatar{
  width:30px;height:30px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#22c55e;
}

/* Under 1280px the links fold into the hamburger (design nav state --hamburger).
   These repeat the pages' own 1280px fold rules at HIGHER specificity, because the
   doubled-class display:flex above would otherwise outrank every page's local
   `.optb-nav:has(.hamburger-btn) .optb-links{display:none}` copy — the exact bug
   where links overflowed the bar with the burger already showing. The :has guard
   keeps links visible on any page that has no hamburger to fold them into. */
@media(max-width:1280px){
  .optb-nav.optb-nav:not(.nav-flat):has(.hamburger-btn) .optb-links{display:none}
  .optb-nav.optb-nav:not(.nav-flat) .hamburger-btn{display:block}
}

/* Mobile header (<=700px): plain row over the hero — logo + search + burger, no bar */
@media(max-width:700px){
  .optb-nav.optb-nav:not(.nav-flat){
    top:0;left:0;right:0;height:48px;padding:0 16px;margin:0;
    border-radius:0;background:transparent;border:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;gap:14px;
  }
  .optb-nav.optb-nav:not(.nav-flat) .optb-logo{font-size:16px}
  .optb-nav.optb-nav:not(.nav-flat) .optb-links{display:none}
  /* design mobile header keeps the Sign up pill (states sheet §9); Log in
     lives in the burger menu */
  .optb-nav.optb-nav .acc-auth-links{display:flex}
  .optb-nav.optb-nav .acc-nav-login{display:none}
  .optb-nav.optb-nav .acc-nav-signup{padding:6px 12px;font-size:10px}
  .optb-menu.optb-menu{top:52px;right:12px}
  .optb-nav.optb-nav .search-input-wrap{
    position:fixed;top:0;left:0;right:0;transform:none;height:48px;padding:6px 16px;
    background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:400;
  }
  .optb-nav.optb-nav .search-input-wrap.open{width:auto}
  .optb-nav.optb-nav .search-dropdown{position:fixed;top:52px;left:8px;right:8px;width:auto;max-height:60vh;z-index:400}
}