/* Shared stylesheet for /privacy, /cookies and /terms.
   These three are plain static HTML rather than React routes, so they render
   with no JavaScript at all. That makes them fully crawlable, gives the site
   real internal links (the audit graded Links F, partly because a single
   scrolling page only has same-page anchors), and needs no routing config on
   Cloudflare Pages.

   Brand tokens copied from src/index.css. Keep them in step. */

:root {
  --navy: #14213d;
  --gold: #c8a85c;
  --paper: #fafaf8;
  --surface: #ffffff;
  --ink: #4a5268;
  --hairline: #e3e0d6;
  /* Real control boundaries and focus rings. See src/index.css for the
     contrast reasoning: hairline is decorative only. */
  --line-strong: #7f889d;
  --focus: #a8843c;
  --sans: 'Inter', 'Inter Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Same measured metric-compatible fallback as the app (src/index.css), so the
   static pages do not reflow when Inter swaps in either. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 105.12%;
  ascent-override: 92.28%;
  descent-override: 22.83%;
  line-gap-override: 0%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem); /* matches .t-body */
  line-height: 1.65;
  caret-color: var(--navy);
  scrollbar-color: color-mix(in oklab, var(--navy) 32%, transparent) transparent;
  -webkit-font-smoothing: antialiased;
}

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

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--hairline);
  background: rgb(250 250 248 / 92%);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  height: 4rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-header__logo svg {
  display: block;
  height: 2rem;
  width: auto;
}

.site-header__back {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.site-header__back:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Content ----------------------------------------------------------------- */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.42rem + 3.6vw, 3.4rem); /* matches .t-display */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.updated {
  margin: 1rem 0 0;
  font-size: 0.875rem; /* matches .t-meta */
  font-weight: 500;
  color: var(--ink);
}

h2 {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.375rem, 1.28rem + 0.42vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

h3 {
  margin: 2rem 0 0;
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* matches .t-subhead */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p,
li {
  color: var(--ink);
  /* Readable measure, matching the 34rem cap used on the app side. Not
     expressed in ch: that unit measures Inter's "0" glyph, which is wider
     than the average letter, so 68ch resolved to 686px and ~86 characters. */
  max-width: 34rem;
  text-wrap: pretty;
}

p {
  margin: 1rem 0 0;
}

ul {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

li {
  margin-top: 0.5rem;
}

strong {
  color: var(--navy);
  font-weight: 700;
}

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}

code {
  /* The UA stylesheet defaults <code> to monospace, which would reintroduce a
     second typeface. One family across the site: the tinted chip is what marks
     it as a literal now. */
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: rgb(20 33 61 / 6%);
  color: var(--navy);
}

/* The one visually distinct block: the plain-language summary that opens the
   privacy and cookie policies. */
.summary {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  /* No side stripe. A thick coloured left border on a callout is decoration
     pretending to be structure; the tinted fill and full border do the same
     job without it. */
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: rgb(200 168 92 / 8%);
}

.summary > :first-child {
  margin-top: 0;
}

.summary h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

/* Tables scroll inside their own container rather than pushing the page
   sideways on a phone. */
.table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

th {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* Placeholders still waiting on a real value. Deliberately loud so none of
   them reach a published page unnoticed. */
.todo {
  font-size: 0.85em;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  background: rgb(164 85 63 / 12%);
  color: #a4553f;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--navy);
  padding: 3rem 1.25rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 0 auto;
}

.site-footer a,
.site-footer p {
  color: rgb(250 250 248 / 70%);
  font-size: 0.875rem;
}

.site-footer a:hover {
  color: var(--gold);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer__legal {
  width: 100%;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(250 250 248 / 10%);
  font-size: 0.75rem;
}

@media (min-width: 640px) {
  .site-header__inner,
  main,
  .site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}