/* ============================================================
   Changentum — base.css
   Shared structural CSS for the Changentum static site.

   DARK THEME is the site-wide default. The light page
   (threat-navigator.html) layers styles/threat-navigator.css
   ON TOP of this file to override the palette.

   PRINCIPLE: "preserve exactly". This file contains only the
   rules that are byte-identical across the pages that use them.
   Anything that differs per page (root font-size, body
   line-height, footer max-width, nav-right gap, button padding,
   the transparent-on-scroll nav on speaker/projects) stays
   INLINE in that page so linking this file changes nothing.

   Contents:
     1. Design tokens (:root — canonical dark palette)
     2. Reset
     3. Base typography (font families only — sizes stay per page)
     4. Navigation — logo + shared nav chrome
     5. Language toggle
     6. Footer (shared chrome; max-width/font-size set per page)
   ============================================================ */

/* ── 1. Design tokens — canonical dark palette ────────────── */
:root {
  --darker-bg: #0C2233;
  --dark-bg: #112B3F;
  --card-bg: #163448;
  --golden: #F4C542;
  --ocean-blue: #3E81A6;
  --deep-ocean: #1D4C6D;
  --sky-blue: #8BC4D1;
  --pale-blue: #CCE9F6;
  --sage: #D4D9CA;
  --text-primary: #E8EDF1;
  --text-secondary: #94A7B8;
  --text-muted: #5E7A8E;
  --border-subtle: rgba(62, 129, 166, 0.15);
}

/* ── 2. Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── 3. Base typography ───────────────────────────────────────
   Colours + font stack only. line-height and root font-size
   are left to each page (they legitimately differ) so this
   file never alters existing text sizing.                       */
body {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--darker-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ── 4. Navigation — shared chrome ────────────────────────────
   The logo, lang-toggle and these nav atoms are identical on
   every dark page. The .nav container itself differs (sticky vs
   transparent-fixed on speaker/projects), so it stays inline.   */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 0.6rem;
}

.nav-logo svg {
  width: 32px;
  height: 32px;
}

.nav-logo-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.nav-right {
  display: flex;
  align-items: center;
}

/* Back link used on privacy / threat-navigator nav */
.nav-back {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}

.nav-back:hover {
  color: var(--golden);
}

/* ── 5. Language toggle ───────────────────────────────────── */
.lang-toggle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lang-toggle span[data-lang] {
  cursor: pointer;
  transition: color 0.2s ease;
}

.lang-toggle .active {
  color: var(--text-primary);
}

.lang-toggle .inactive {
  color: var(--text-muted);
}

.lang-toggle .inactive:hover {
  color: var(--golden);
}

.lang-toggle .separator {
  color: var(--text-muted);
}

/* ── 6. Footer — shared chrome ────────────────────────────────
   Flex, two-column copyright | links layout, identical across
   the pages that have a footer. max-width and font-size differ
   per page, so set those inline (e.g. .footer{max-width:640px;
   font-size:0.8rem}). Privacy has no .footer (uses .back-link). */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 2rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-secondary);
}

.footer-links .sep {
  color: var(--text-muted);
}