/* nav.css — the shared site navigation: fixed navbar, language dropdown, mobile menu.
 *
 * SINGLE SOURCE OF TRUTH. index.html links it (its generated /en and /pt copies inherit
 * the link automatically) and gen_static.js links it from bilingual.html and from every
 * generated landing page (/es /fr /ar /bilingual/en /bilingual/pt).
 * Never copy these rules back into a page's inline <style> — the two copies would drift.
 *
 * The nav carries its own --nv-* colour variables so it renders identically on top of any
 * palette: index.html and the landing pages define different --gold-bright / --text / …
 * values, and the nav must not change colour from page to page.
 */
#navbar,#mobile-menu{
  --nv-gold:#c9a84c;--nv-gold-bright:#f0c060;--nv-gold-glow:rgba(201,168,76,.4);
  --nv-bg-deep:#080602;--nv-text:#f2ead8;--nv-text-2:#a89870;--nv-text-muted:#5a5040;
  --nv-border:rgba(201,168,76,.18);--nv-border-gold:rgba(201,168,76,.55);
  --nv-tr:.3s cubic-bezier(.4,0,.2,1);--nv-font-ui:'Segoe UI',system-ui,sans-serif
}
/* landing pages have no full-viewport hero to sit under the fixed bar */
body.nav-offset{padding-top:70px}
#navbar a,#mobile-menu a{text-decoration:none}

/* NAVBAR */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(7,8,15,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--nv-border);padding:0 2rem;height:70px;display:flex;align-items:center;justify-content:space-between;transition:background var(--nv-tr)}
#navbar.scrolled{background:rgba(7,8,15,.97);box-shadow:0 4px 30px rgba(0,0,0,.6)}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--nv-gold),var(--nv-gold-bright));border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px var(--nv-gold-glow);flex-shrink:0}
.nav-logo-text{font-size:1rem;font-weight:700;color:var(--nv-gold-bright);line-height:1.2}
.nav-logo-sub{font-size:.65rem;color:var(--nv-text-2);font-weight:400}
.nav-center{display:flex;align-items:center;gap:2rem}
.nav-link{font-size:.92rem;font-weight:500;color:var(--nv-text);transition:color var(--nv-tr);position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--nv-gold);transform:scaleX(0);transition:transform var(--nv-tr);transform-origin:right}
.nav-link:hover{color:var(--nv-gold-bright)}.nav-link:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:6px}
.lang-btn{background:transparent;border:1px solid var(--nv-border-gold);color:var(--nv-text-2);padding:5px 12px;border-radius:20px;font-size:.78rem;cursor:pointer;transition:all var(--nv-tr);font-family:var(--nv-font-ui);letter-spacing:.05em}
.lang-btn:hover,.lang-btn.active{background:var(--nv-gold);border-color:var(--nv-gold);color:var(--nv-bg-deep);font-weight:700;box-shadow:0 0 12px var(--nv-gold-glow)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--nv-gold);border-radius:2px}
#mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(7,8,15,.98);backdrop-filter:blur(20px);z-index:999;padding:1.5rem 2rem;border-bottom:1px solid var(--nv-border);flex-direction:column;gap:1rem}
#mobile-menu.open{display:flex}
.mobile-nav-link{font-size:1.1rem;font-weight:500;color:var(--nv-text);padding:.5rem 0;border-bottom:1px solid var(--nv-border)}
.mobile-nav-link:hover{color:var(--nv-gold-bright)}
.mobile-lang-row{display:flex;gap:8px;margin-top:.5rem}

/* LANGUAGE DROPDOWN */
.lang-dd{position:relative}
.lang-dd-btn{background:rgba(201,168,76,.08);border:1px solid var(--nv-gold);color:var(--nv-gold-bright);padding:7px 14px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:.85rem;letter-spacing:.03em;display:flex;align-items:center;gap:6px;transition:all .2s}
.lang-dd-btn:hover{background:rgba(201,168,76,.18)}
.dd-arrow{font-size:.7rem;opacity:.8}
.lang-dd-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;min-width:235px;background:#0d0f1a;border:1px solid rgba(201,168,76,.35);border-radius:8px;padding:8px;display:none;z-index:300;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.lang-dd.open .lang-dd-menu{display:block}
.lang-dd.open .lang-dd-btn{background:rgba(201,168,76,.2)}
.lang-dd-group{color:var(--nv-gold-bright);font-size:.8rem;font-weight:600;letter-spacing:.09em;padding:9px 10px 4px;border-bottom:1px solid rgba(201,168,76,.18);margin-bottom:3px}
.lang-dd-item{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--nv-text);text-decoration:none;padding:8px 10px;border-radius:5px;font-size:.92rem;border:1px solid transparent}
.lang-dd-item:hover{background:rgba(201,168,76,.12);color:var(--nv-gold-bright)}
.lang-dd-item.active{color:var(--nv-gold-bright);border-color:rgba(201,168,76,.4)}
.dd-count{color:var(--nv-text-muted);font-size:.75rem}
.mobile-bi-row{margin-top:6px}
.mobile-bi-label{color:var(--nv-text-muted);font-size:.8rem;margin-inline-end:6px}

@media(max-width:900px){.nav-center{display:none}.hamburger{display:flex}}
@media(max-width:600px){#navbar{padding:0 1rem}.lang-dd{display:none}}