/* Shared styling for Gameeba legal pages (privacy, terms) — mirrors index.html. */
:root {
  --cream: #F5EFE0; --cream-dark: #EDE4CE; --cream-darker: #DDD0B5;
  --mid-brown: #8B6147; --gold: #D4A843; --green: #4A7C59;
  --text-dark: #2E1F0F; --text-mid: #5C3D2E; --surface: #FFFFFF;
  --shadow: rgba(92,61,46,0.1);
  --gold-soft: rgba(212,168,67,0.12); --gold-border: rgba(212,168,67,0.4);
}
/* Dark values, shared by an explicit user choice (data-theme="dark") and by the
   OS setting when the user hasn't overridden it (:not([data-theme="light"])). */
:root[data-theme="dark"] {
  --cream: #1F1710; --cream-dark: #261D14; --cream-darker: #453723;
  --mid-brown: #B39A82; --gold: #E2BC63; --green: #6FA980;
  --text-dark: #F2E8D8; --text-mid: #D3BEA6; --surface: #33281B;
  --shadow: rgba(0,0,0,0.3);
  --gold-soft: rgba(226,188,99,0.14); --gold-border: rgba(226,188,99,0.4);
}
:root[data-theme="dark"] .wordmark { filter: brightness(1.15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1F1710; --cream-dark: #261D14; --cream-darker: #453723;
    --mid-brown: #B39A82; --gold: #E2BC63; --green: #6FA980;
    --text-dark: #F2E8D8; --text-mid: #D3BEA6; --surface: #33281B;
    --shadow: rgba(0,0,0,0.3);
    --gold-soft: rgba(226,188,99,0.14); --gold-border: rgba(226,188,99,0.4);
  }
  :root:not([data-theme="light"]) .wordmark { filter: brightness(1.15); }
}

.theme-toggle {
  background: transparent; border: 1px solid var(--cream-darker);
  border-radius: 999px; width: 36px; height: 36px; font-size: 15px;
  line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.theme-toggle:hover { border-color: var(--gold); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cream); color: var(--text-mid);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}

/* ── Header (same as landing) ── */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-darker);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1060px; margin: 0 auto; }
.wordmark { height: 30px; display: block; }
/* Light shows the brown wordmark with Meeby; dark shows the flat green one. */
.wordmark-dark { display: none; }
:root[data-theme="dark"] .wordmark-light { display: none; }
:root[data-theme="dark"] .wordmark-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-light { display: none; }
  :root:not([data-theme="light"]) .wordmark-dark { display: block; }
}
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--text-mid); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { background: var(--gold); color: #fff !important; padding: 8px 16px; border-radius: 999px; font-weight: 700 !important; }

@media (max-width: 640px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ── Title block ── */
.title-block { text-align: center; padding: 56px 24px 8px; }
.eyebrow {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 4px 14px; margin-bottom: 16px;
}
h1 { font-family: 'Fraunces', Georgia, serif; color: var(--text-dark); font-size: clamp(32px, 5vw, 44px); font-weight: 600; line-height: 1.15; }
h1 em { font-style: italic; color: var(--gold); }
.updated { font-size: 13px; color: var(--mid-brown); margin-top: 10px; }

/* ── Body ── */
main { max-width: 720px; margin: 0 auto; padding: 28px 24px 80px; }
.lead {
  background: var(--surface); border: 1px solid var(--gold-border);
  border-radius: 16px; padding: 18px 20px; margin-bottom: 34px;
  box-shadow: 0 2px 10px var(--shadow); font-size: 15px;
}
h2 {
  font-family: 'Fraunces', Georgia, serif; color: var(--text-dark);
  font-size: 22px; font-weight: 600; margin: 40px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--cream-darker);
}
main > h2:first-of-type { border-top: none; padding-top: 0; }
h3 { color: var(--text-dark); font-size: 15.5px; margin: 22px 0 6px; }
p, ul { margin-bottom: 12px; font-size: 15px; }
ul { list-style: none; padding-left: 0; }
li { margin-bottom: 8px; padding-left: 24px; position: relative; }
li::before { content: '✦'; position: absolute; left: 2px; color: var(--gold); font-size: 12px; }
a { color: var(--gold); }
strong { color: var(--text-dark); }

/* ── Table as a card ── */
table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0;
  font-size: 14px; background: var(--surface); border-radius: 14px;
  overflow: hidden; box-shadow: 0 2px 10px var(--shadow);
}
th, td { text-align: left; padding: 11px 14px; vertical-align: top; }
th {
  color: var(--gold); font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--gold-soft); border-bottom: 1px solid var(--gold-border);
}
td { border-bottom: 1px solid var(--cream-dark); }
tr:last-child td { border-bottom: none; }
td:first-child { font-weight: 600; color: var(--text-dark); white-space: nowrap; }

/* ── Footer (same as landing) ── */
footer { border-top: 1px solid var(--cream-darker); padding: 30px 24px 40px; }
.foot { max-width: 1060px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mid-brown); }
.foot a { color: var(--mid-brown); text-decoration: none; margin-left: 18px; }
.foot a:hover { color: var(--gold); }

/* ── Mobile ──
   Kept last on purpose: media queries add no specificity, so these overrides
   only win by source order. Moving this block above the table/footer rules
   silently un-does the ones that share their selectors. */
@media (max-width: 640px) {
  /* The wordmark had a fixed height and no width limit, so it refused to shrink
     and pushed the controls out of the flex row — the CTA overlapped the logo
     and the theme toggle was clipped off the right edge. */
  .nav { padding: 10px 16px; gap: 12px; }
  .wordmark { height: 26px; max-width: 46vw; object-fit: contain; }
  .nav-links { gap: 10px; flex-shrink: 0; }
  .nav-cta { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
  /* Was being squeezed to 22px wide (an oval) by the flex row. */
  .theme-toggle { flex: 0 0 36px; }

  /* Two columns on a phone left the descriptions ~20 characters wide (nowrap on
     the first column reserved half the row for one-word provider names). Stack
     each row into a card so the text gets the full width; the header row is
     redundant once the provider name sits directly above its description. */
  table { display: block; font-size: 14px; padding: 2px 0; }
  table tr:first-child { display: none; }
  tbody, tr, td { display: block; width: auto; }
  tr { padding: 11px 14px; border-bottom: 1px solid var(--cream-dark); }
  tr:last-child { border-bottom: none; }
  td { border-bottom: none; padding: 0; }
  td:first-child { white-space: normal; margin-bottom: 3px; }

  /* Footer links were 16px tall — well under a comfortable touch target. */
  .foot { gap: 10px; }
  .foot a { margin-left: 0; margin-right: 18px; padding: 6px 0; display: inline-block; }
}