/*
  Shared styles for the LottoManager support site (lottomanager.richardholland.com).

  Layout: "variant A" from the layout prototype (LottoManager issue #150): a sticky top bar,
  one centred readable column and a footer that repeats the links.

  Colours, spacing, radii, the type scale and the font stacks are copied by hand from the app's
  Syndicate design system tokens. Only those core tokens are used here; the app's native-only
  pieces (money figures, lottery balls, cards) are deliberately left out. If a token changes in
  the app, change it here too.
*/

/* ---- Tokens: light theme ---- */
:root {
  color-scheme: light dark;

  --surface: #f6f7fb;
  --surface-raised: #ffffff;
  --surface-sunken: #eceff6;
  --line: #d6dbe6;
  --ink: #131b33;
  --ink-muted: #545f78;
  --brand: #1560d4;
  --brand-soft: #e2edff;
  --on-brand: #ffffff;
  --focus-ring: #1560d4;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --control-height: 44px;

  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* The width of the one text column: a comfortable line length for reading. */
  --readable: 680px;
}

/* ---- Tokens: dark theme (a deep navy, with the hues lifted) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0d1324;
    --surface-raised: #161e33;
    --surface-sunken: #090e1b;
    --line: #2b3654;
    --ink: #eef2fb;
    --ink-muted: #a6b0c7;
    --brand: #6ea8ff;
    --brand-soft: #16294d;
    --on-brand: #0d1324;
    --focus-ring: #6ea8ff;
  }
}

/* ---- Base type ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* keeps the footer at the bottom of short pages */
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/24px var(--font-sans);
}

h1 { font: 700 34px/40px var(--font-display); margin: 0 0 var(--space-2); }
h2 { font: 600 22px/28px var(--font-display); margin: var(--space-6) 0 var(--space-2); }
p, ul { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
a { color: var(--brand); }

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Anything with the hidden attribute stays hidden, even if a class gives it a display. */
[hidden] { display: none !important; }

/* Small grey text: "Last updated", footnotes, the copyright line. */
.meta { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* An arrow after any link that leaves this site. */
.external::after { content: " \2197"; font-size: 0.85em; }

/* Hidden until focused, so keyboard users can jump past the nav. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  z-index: 10;
}
.skip-link:focus { top: var(--space-2); }

/* The one call to action on a page, e.g. "Email support". */
.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-brand);
  font: 600 17px/22px var(--font-sans);
  text-decoration: none;
}

/* ---- Top bar: sticky and translucent, wordmark left, links right ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  max-width: var(--readable);
  margin: 0 auto;
  padding: 0 var(--space-4);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wordmark {
  font: 700 20px/25px var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.site-nav { display: flex; gap: var(--space-1); }

.site-nav a {
  font: 400 15px/20px var(--font-sans);
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
}

/* The page you are on sits in a soft brand-coloured pill. */
.site-nav a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* Phones: keep the three links on one line beside the wordmark. */
@media (max-width: 480px) {
  .site-nav { gap: 0; }
  .site-nav a { padding: var(--space-2); }
}

/* ---- The one text column ---- */
main {
  flex: 1;
  width: 100%;
  max-width: var(--readable);
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
}

.lead { color: var(--ink-muted); font: 400 20px/28px var(--font-sans); }

/* ---- Footer: repeats the links, plus the copyright line ---- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}

.site-footer-inner {
  max-width: var(--readable);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.site-footer a { font: 400 15px/20px var(--font-sans); }