/* =============================================================
   ico-nav.css — ONE top navigation for every public ICO page.
   Brand-explicit + theme-aware so it looks identical regardless of
   each page's own palette/token system. Pair with ico-nav.js.
   Markup:
     <nav class="ico-nav"> <a href>…</a> … <button class="ico-tt" data-ico-toggle>…</button>
       <a class="ico-signin" href="/signin">Sign in</a> </nav>
   Colors: brand hexes that exist in tokens.css (canonical) are written
   var(--token, #hex) — the hex fallback keeps pages that do not load
   tokens.css rendering identically. The remaining literals (#ede4dc,
   #3a2a22, #9a2709, the rgba() tints) have no tokens.css equivalent.
   ============================================================= */
.ico-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:'Archivo','PT Sans',system-ui,Arial,sans-serif;}
.ico-nav a{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:7px;
  text-decoration:none;font-weight:600;font-size:12.5px;line-height:1;white-space:nowrap;
  color:#ede4dc;background:transparent;border:1px solid rgba(237,214,165,.26);
  transition:background .15s,border-color .15s,color .15s;}
.ico-nav a:hover{border-color:var(--cherry-500,#b12e0b);color:var(--cherry-500,#b12e0b);background:rgba(177,46,11,.09);}
.ico-nav a.active{background:linear-gradient(135deg,var(--cherry-500,#b12e0b),var(--cherry-400,#c95227));border-color:transparent;color:var(--cream-50,#faf3e1);}
.ico-nav a.active:hover{color:#fff;background:linear-gradient(135deg,#9a2709,var(--cherry-500,#b12e0b));}
.ico-nav .lock{font-size:10px;line-height:1;opacity:.9;}
.ico-nav .ico-signin{border-style:dashed;opacity:.92;}
/* the globe section trio appended by ico-nav.js — one flex unit so the group
   gets its own gap and, when the row is tight, wraps whole instead of tearing */
.ico-nav .ico-apps{display:inline-flex;align-items:center;gap:6px;margin-left:6px;}
.ico-nav .ico-tt{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 11px;border-radius:7px;cursor:pointer;background:transparent;
  border:1px solid rgba(237,214,165,.26);color:#ede4dc;font:600 12px 'Archivo',sans-serif;
  transition:background .15s,border-color .15s,color .15s;}
.ico-nav .ico-tt:hover{border-color:var(--cherry-500,#b12e0b);color:var(--cherry-500,#b12e0b);background:rgba(177,46,11,.09);}
.ico-nav .ico-tt svg{width:15px;height:15px;display:block;}

/* Light theme */
[data-theme="light"] .ico-nav a,
[data-theme="light"] .ico-nav .ico-tt{color:#3a2a22;border-color:rgba(81,42,36,.20);}
[data-theme="light"] .ico-nav a:hover,
[data-theme="light"] .ico-nav .ico-tt:hover{color:var(--cherry-500,#b12e0b);border-color:var(--cherry-500,#b12e0b);background:rgba(177,46,11,.06);}
[data-theme="light"] .ico-nav a.active{color:var(--cream-50,#faf3e1);}

/* Language toggle (injected by ico-i18n.js) */
.ico-nav .ico-lang{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(237,214,165,.26);
  border-radius:7px;overflow:hidden;}
.ico-nav .ico-lang button{appearance:none;background:transparent;border:0;cursor:pointer;
  padding:6px 8px;font:700 11px 'Archivo',sans-serif;letter-spacing:.04em;color:#ede4dc;
  transition:background .15s,color .15s;}
.ico-nav .ico-lang button:hover{color:var(--cherry-500,#b12e0b);}
.ico-nav .ico-lang button.on{background:linear-gradient(135deg,var(--cherry-500,#b12e0b),var(--cherry-400,#c95227));color:var(--cream-50,#faf3e1);}
[data-theme="light"] .ico-nav .ico-lang{border-color:rgba(81,42,36,.20);}
[data-theme="light"] .ico-nav .ico-lang button{color:#3a2a22;}
[data-theme="light"] .ico-nav .ico-lang button:hover{color:var(--cherry-500,#b12e0b);}
[data-theme="light"] .ico-nav .ico-lang button.on{color:var(--cream-50,#faf3e1);}

@media (max-width:720px){
  .ico-nav a,.ico-nav .ico-tt{padding:6px 10px;font-size:12px;}
  .ico-nav .ico-lang button{padding:5px 6px;font-size:10px;}
}