/* nav.css — single source for the shared top-bar nav (was duplicated inline
   across 10 marketing pages with 4 drifting variants). Canonical version taken
   from index.html. Loaded after granary.css on every marketing page; the
   dashboard keeps its own sidebar nav. Vars resolve via granary.css :root, with
   literal fallbacks so the bar never renders unstyled if a token is missing. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:64px;
  background:rgba(13,13,12,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(224,168,46,0.08);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.1rem;color:var(--white,#fff);letter-spacing:-0.02em;text-decoration:none}
.nav-logo:hover{text-decoration:none}
.logo-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--gfo-gold,#e0a82e),var(--gfo-gold-dim,#b9851f));
  border-radius:6px;display:grid;place-items:center;
  font-size:0.85rem;font-weight:900;color:#000;
  flex-shrink:0;
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--text2,#b8b2a6);font-size:0.88rem;font-weight:600;transition:color .15s}
.nav-links a:hover{color:var(--white,#fff);text-decoration:none}
a.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 22px;
  background:var(--gfo-gold,#e0a82e);color:#000;
  font-weight:700;font-size:0.86rem;
  border-radius:var(--radius,8px);
  transition:all .15s;cursor:pointer;
}
a.nav-cta:hover{background:var(--gfo-gold-bright,#f0bf4e);transform:translateY(-1px);text-decoration:none;color:#000}
.nav-mobile-btn{display:none;background:none;border:none;color:var(--text,#ece6da);font-size:1.5rem;cursor:pointer;padding:10px 14px;margin:-10px -14px -10px 0;min-width:44px;min-height:44px}

/* "More ▾" dropdown — holds the secondary links so the visible bar stays ≤6 items.
   Desktop: opens on hover/focus-within. Mobile: the .nav-more-menu just stacks inline
   inside the expanded panel (no absolute positioning), so every link is reachable. */
.nav-more{position:relative;display:flex;align-items:center}
.nav-more-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  color:var(--text2,#b8b2a6);font-size:0.88rem;font-weight:600;font-family:inherit;
  padding:0;transition:color .15s;
}
.nav-more-btn:hover,.nav-more:focus-within .nav-more-btn{color:var(--white,#fff)}
.nav-more-btn .caret{font-size:0.7em;transition:transform .15s}
.nav-more:hover .nav-more-btn .caret,.nav-more:focus-within .nav-more-btn .caret{transform:rotate(180deg)}
.nav-more-menu{
  position:absolute;top:calc(100% + 12px);right:0;
  min-width:180px;display:flex;flex-direction:column;gap:2px;
  background:rgba(20,18,15,0.98);backdrop-filter:blur(20px);
  border:1px solid rgba(224,168,46,0.14);border-radius:10px;
  padding:8px;box-shadow:0 16px 40px rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,visibility .15s,transform .15s;z-index:101;
}
.nav-more:hover .nav-more-menu,.nav-more:focus-within .nav-more-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-more-menu a{
  display:block;padding:9px 12px;border-radius:6px;
  color:var(--text2,#b8b2a6);font-size:0.86rem;font-weight:600;white-space:nowrap;transition:background .12s,color .12s;
}
.nav-more-menu a:hover{background:rgba(224,168,46,0.1);color:var(--white,#fff);text-decoration:none}

@media(max-width:768px){
  .nav{padding:0 20px}
  .nav-links{display:none!important}
  .nav-links.open{
    display:flex!important;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:flex-start;background:rgba(13,13,12,0.98);
    padding:20px;gap:16px;border-bottom:1px solid rgba(224,168,46,0.1);z-index:99;
  }
  .nav-links.open > a{text-align:left;width:100%}
  .nav-links.open .nav-cta{align-self:flex-start;width:auto}
  .nav-mobile-btn{display:block!important}
  /* On mobile the dropdown flattens into the stacked panel — show every link inline. */
  .nav-more{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .nav-more-btn{display:none}
  .nav-more-menu{
    position:static;opacity:1!important;visibility:visible!important;transform:none!important;
    min-width:0;width:100%;background:none;border:none;box-shadow:none;padding:0;gap:14px;
  }
  .nav-more-menu a{padding:0;font-size:0.88rem;font-weight:600;color:var(--text2,#b8b2a6)}
  .nav-more-menu a:hover{background:none}
}