/* ─────────────────────────────────────────────────────────────────────
 * info.css — shared stylesheet for static info pages:
 *   about.html, privacy.html, terms.html, vendors.html
 *
 * Matches the dark-blue/green palette from coming-soon.html and portal.html.
 * Kept intentionally small — these are long-read text pages, no JS, no
 * interactive widgets.
 * ───────────────────────────────────────────────────────────────────── */

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,sans-serif;
  background:#0f172a;
  color:#e2e8f0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Top nav ───────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem 1.5rem;
  background:rgba(15,23,42,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(148,163,184,.1);
}
.topbar .brand{
  font-size:1.25rem;font-weight:800;letter-spacing:-.5px;
  color:#fff;text-decoration:none;
}
.topbar .brand span{color:#22c55e}
.topbar nav{display:flex;gap:1.25rem;margin-left:auto;flex-wrap:wrap}
.topbar nav a{
  color:#94a3b8;text-decoration:none;font-size:.9rem;font-weight:500;
  transition:color .15s ease;
}
.topbar nav a:hover,.topbar nav a.active{color:#22c55e}

/* ── Language switcher (BS/EN/DE/FR/IT) ────────────────────── */
.topbar #lang-flags{
  display:flex;gap:.25rem;margin-left:.5rem;
}
.topbar #lang-flags button{
  background:transparent;
  border:1px solid rgba(148,163,184,.25);
  color:#94a3b8;
  font-size:.72rem;font-weight:600;letter-spacing:.5px;
  padding:.3rem .55rem;border-radius:6px;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar #lang-flags button:hover{
  color:#22c55e;border-color:rgba(34,197,94,.4);
}
.topbar #lang-flags button.active{
  color:#22c55e;border-color:#22c55e;background:rgba(34,197,94,.12);
}

/* ── Page container ────────────────────────────────────────── */
.page{
  max-width:760px;
  margin:0 auto;
  padding:3rem 1.5rem 6rem;
}

.page h1{
  font-size:2.25rem;font-weight:800;letter-spacing:-.5px;
  color:#fff;margin-bottom:.5rem;
}
.page .subtitle{
  color:#94a3b8;font-size:1.05rem;margin-bottom:2.5rem;
}
.page h2{
  font-size:1.35rem;font-weight:700;color:#fff;
  margin:2.5rem 0 .75rem;
}
.page h3{
  font-size:1.05rem;font-weight:600;color:#e2e8f0;
  margin:1.5rem 0 .5rem;
}
.page p{margin:.5rem 0 1rem;color:#cbd5e1}
.page ul,.page ol{margin:.5rem 0 1rem 1.25rem;color:#cbd5e1}
.page li{margin-bottom:.35rem}

.page a{color:#22c55e;text-decoration:none}
.page a:hover{text-decoration:underline}

.page code,.page kbd{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.9em;
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.18);
  border-radius:4px;
  padding:.1rem .35rem;
}
.page pre{
  margin:1rem 0;padding:1rem 1.25rem;
  background:#0b1220;border:1px solid rgba(148,163,184,.18);
  border-radius:8px;overflow-x:auto;
}
.page pre code{
  background:none;border:none;padding:0;font-size:.88rem;color:#cbd5e1;
}

.page .updated{
  display:inline-block;margin-top:-1rem;margin-bottom:2rem;
  font-size:.85rem;color:#64748b;
}

.page .callout{
  margin:1.5rem 0;padding:1rem 1.25rem;
  background:rgba(34,197,94,.08);
  border-left:3px solid #22c55e;border-radius:4px;
  color:#cbd5e1;
}
.page .callout strong{color:#22c55e}

.page .warn{
  margin:1.5rem 0;padding:1rem 1.25rem;
  background:rgba(250,204,21,.08);
  border-left:3px solid #facc15;border-radius:4px;
  color:#cbd5e1;
}

hr{
  border:none;border-top:1px solid rgba(148,163,184,.15);
  margin:3rem 0 2rem;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer{
  text-align:center;padding:2rem 1.5rem;
  color:#64748b;font-size:.85rem;
  border-top:1px solid rgba(148,163,184,.1);
}
.site-footer a{color:#94a3b8;text-decoration:none;margin:0 .5rem}
.site-footer a:hover{color:#22c55e}

@media(max-width:560px){
  .page h1{font-size:1.75rem}
  .page{padding:2rem 1.25rem 4rem}
  .topbar{gap:.5rem;padding:.75rem 1rem;flex-wrap:wrap}
  .topbar nav{gap:.85rem}
  .topbar #lang-flags{margin-left:0;flex-basis:100%;justify-content:flex-end;order:3}
  .topbar #lang-flags button{font-size:.68rem;padding:.25rem .45rem}
}