/* ============================================================================
   CreatorDB site-wide navigation — SINGLE SOURCE OF TRUTH (styles).
   Markup is stamped into every page by _reference/inject_nav.py (between the
   <!-- CDB-NAV:start --> / <!-- CDB-NAV:end --> markers); behaviour lives in
   /assets/site-nav.js. Edit here to restyle the nav across the whole site.
   Colours are hard-coded (not CSS vars) so this file is page-independent.
   ============================================================================ */

.nav{position:fixed;inset:14px 0 auto 0;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.nav-inner{
  pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:1180px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(28,28,28,.06);
  border-radius:999px;padding:10px 12px 10px 22px;
  box-shadow:0 8px 24px -8px rgba(28,28,28,.1);
}
.nav .brand{display:flex;align-items:center;font-weight:800;font-size:17px;color:#1c1c1c;text-decoration:none}
.nav .brand img{height:52px;width:auto;display:block;margin:-20px 0}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-block;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:rgba(28,28,28,.72);text-decoration:none;transition:background .2s,color .2s}
.nav-links a:hover,.nav-links a.active{background:rgba(28,28,28,.06);color:#1c1c1c}
.nav .has-sub{position:relative}
.nav .has-sub > a{display:inline-flex;align-items:center;gap:4px}
.nav .has-sub .caret{font-size:10px;opacity:.6;transition:transform .2s}
.nav .has-sub.open .caret{transform:rotate(180deg);opacity:1}
.nav .sub{position:absolute;top:100%;left:0;display:none;min-width:230px;background:#fff;border:1px solid rgba(28,28,28,.06);border-radius:18px;padding:16px 8px 8px;box-shadow:0 16px 40px -10px rgba(28,28,28,.18);list-style:none;margin:0;flex-direction:column;gap:2px;z-index:60}
.nav .has-sub.open .sub{display:flex}
.nav .sub a{display:block;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;color:rgba(28,28,28,.78);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.nav .sub a:hover{background:rgba(28,28,28,.06);color:#1c1c1c}
.nav-cta{padding:10px 20px;border-radius:999px;background:#ff7b3e;color:#1c1c1c;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}
.nav-cta:hover{background:#ff9358;transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,123,62,.4)}
@media (max-width:920px){.nav-links{display:none}}

/* hamburger button (hidden on desktop) */
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;border-radius:50%;transition:background .15s;margin-left:auto}
.nav-toggle:hover{background:rgba(28,28,28,.06)}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#1c1c1c;border-radius:2px;position:relative;transition:transform .25s,opacity .2s,top .25s}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#1c1c1c;border-radius:2px;transition:transform .25s,opacity .2s,top .25s}
.nav-toggle .bar::before{top:-7px}
.nav-toggle .bar::after{top:7px}
.nav-toggle[aria-expanded="true"] .bar{background:transparent}
.nav-toggle[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.mobile-drawer{position:fixed;inset:0;z-index:49;background:rgba(255,245,233,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:100px 28px 40px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .25s ease-out,transform .25s ease-out;visibility:hidden;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mobile-drawer.open{opacity:1;pointer-events:auto;transform:none;visibility:visible}
.mobile-drawer a{display:block;padding:16px 18px;border-radius:18px;font-weight:700;font-size:18px;color:#1c1c1c;transition:background .15s,transform .15s;text-decoration:none}
.mobile-drawer a:hover,.mobile-drawer a:focus{background:rgba(28,28,28,.06)}
.mobile-drawer .group-label{font-family:"Staatliches","Manrope",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(28,28,28,.5);padding:18px 18px 6px}
.mobile-drawer .drawer-cta{margin-top:18px;text-align:center;background:#ff7b3e;color:#1c1c1c;padding:18px 24px;border-radius:999px;font-weight:800;font-size:16px}
.mobile-drawer .drawer-cta:hover{background:#ff9358}
body.drawer-open{overflow:hidden}

@media (max-width:920px){
  .nav .sub,.nav .has-sub .caret{display:none}
  .nav-toggle{display:inline-flex}
  .nav-cta{padding:9px 16px;font-size:13.5px}
}
@media (max-width:560px){
  .nav-inner{gap:10px!important;padding:8px 8px 8px 16px!important}
  .nav-cta{padding:8px 12px;font-size:12.5px}
  .nav .brand img{height:44px;margin:-16px 0}
}
@media (max-width:380px){
  .nav-cta{padding:7px 10px;font-size:11.5px}
}