/* site.css — shared styles for every babelstreamer.com page.
   Loaded via <link rel="stylesheet" href="site.css"> right after the Google
   Fonts stylesheet, BEFORE each page's own inline <style> block, so a page
   can still override anything here (same-specificity + later-in-source
   wins) without needing !important. Keep this file to things that are
   genuinely identical (or safe-as-a-shared-default) across pages — anything
   page-specific belongs in that page's own <style>, not here.

   Paired with site-header.js, which renders the actual brand-mark logo and
   the quick-nav dropdown into <span data-site-brandmark></span> /
   <span data-site-navmenu></span> placeholders, so the ~1KB fish-icon SVG
   and the 6-link menu aren't hand-copied into every page's HTML. */

:root{
  --ink:#0A1420;
  --ink-2:#0D1C2B;
  --panel:#102436;
  --panel-2:#132A3F;
  --teal:#3FE0C5;
  --teal-deep:#12594A;
  --teal-dim:#1B4D45;
  --coral:#FF6F86;
  --amber:#FFC65C;
  --fish:#FF8A3D;
  --fish-deep:#B8490F;
  --text:#EAF3F2;
  --muted:#7E96A2;
  --hair:rgba(234,243,242,0.09);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(63,224,197,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 10%, rgba(255,111,134,0.10), transparent 55%),
    var(--ink);
  color:var(--text);
  font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}

/* ---------- nav ---------- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 24px;
  max-width:1080px; margin:0 auto;
}
.brandmark{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brandmark svg{width:34px; height:23px; flex-shrink:0;}
.brandmark span{
  font-family:'Unbounded', sans-serif; font-weight:600; font-size:16px;
  letter-spacing:0.01em; color:var(--text);
}
.brandmark b{color:var(--teal);}

/* ---------- nav-right (login link + quick-nav icon, grouped together) ---------- */
.nav-right{display:flex; align-items:center; gap:20px;}
.nav-account-link{
  /* Unbounded, not Manrope: everything else in the nav bar (and the hero
     tagline) is Unbounded, so Manrope here read as a foreign element.
     Weight 500 keeps it subordinate to the 600/16px brandmark beside it. */
  font-family:'Unbounded', sans-serif; font-weight:500; font-size:14px;
  letter-spacing:0.01em;
  color:var(--text); text-decoration:none;
  transition:color 0.15s ease;
}
.nav-account-link:hover{color:var(--teal);}

/* ---------- quick nav (person icon + dropdown) ---------- */
.nav-menu{position:relative;}
.nav-menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--panel); border:1px solid var(--hair); color:var(--muted);
  cursor:pointer; padding:0;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"]{
  color:var(--teal); border-color:rgba(63,224,197,0.35);
}
.nav-menu-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:230px;
  background:var(--panel); border:1px solid var(--hair); border-radius:14px;
  padding:8px; box-shadow:0 12px 32px rgba(0,0,0,0.35);
  z-index:50;
}
.nav-menu-dropdown[hidden]{display:none;}
.nav-menu-dropdown a{
  display:block; padding:10px 14px; border-radius:8px;
  font-family:'Manrope', sans-serif; font-size:14px; color:var(--text);
  text-decoration:none; transition:background 0.15s ease, color 0.15s ease;
}
.nav-menu-dropdown a:hover{background:var(--panel-2); color:var(--teal);}
.nav-menu-dropdown a[aria-current="page"]{color:var(--teal);}

/* Submenu groups (Viewer / Streamer / OBS) — same <details>/<summary>
   disclosure pattern as faq.html's accordion, nested inside the dropdown. */
.nav-submenu{margin:2px 0;}
.nav-submenu summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-radius:8px;
  font-family:'Manrope', sans-serif; font-weight:600; font-size:14px; color:var(--text);
  cursor:pointer; list-style:none;
  transition:background 0.15s ease, color 0.15s ease;
}
.nav-submenu summary::-webkit-details-marker{display:none;}
.nav-submenu summary:hover{background:var(--panel-2); color:var(--teal);}
.nav-submenu summary .chevron{
  width:14px; height:14px; flex-shrink:0; color:var(--muted);
  transition:transform 0.15s ease, color 0.15s ease;
}
.nav-submenu[open] summary .chevron{transform:rotate(180deg); color:var(--teal);}
.nav-menu-dropdown .nav-submenu-items a{padding-left:26px; font-size:13.5px;}

/* ---------- back-link (small "← foo" links on sub-pages) ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted);
  text-decoration:none; margin-bottom:18px;
}

/* ---------- footer ---------- */
footer{
  text-align:center; padding:42px 24px 50px;
  font-size:13px; color:var(--muted);
}

@media (max-width:520px){
  nav{padding:20px 18px;}
}