/*
 * Legal pages — terms.html and privacy.html.
 *
 * WHY THIS FILE EXISTS. Both pages carried this as an inline <style> block in
 * their <head>. The site is served under a CSP of `style-src 'self'` with no
 * 'unsafe-inline' (aws_cloudfront_response_headers_policy.client_sites_security_headers
 * in the infrastructure repo), so in production the browser blocked both
 * blocks outright: no max-width, no top padding to clear the fixed navbar, no
 * list indent — the pages rendered as edge-to-edge unstyled text with the
 * heading behind the nav bar. Nothing about them looked broken locally,
 * because the dev server did not send the CSP. It does now.
 *
 * ONE component, not two. The two blocks were byte-identical apart from the
 * class prefix (.terms-content vs .privacy-content) and the table rules,
 * which only privacy.html used. They are `.legal-content` here, so the next
 * legal page is a class name rather than a third copy.
 */

/* ── Base, inherited from the deleted css/styles.css ─────────────────────────
   These two pages were the only thing still loading styles.css, and once they
   took index.html's header and footer every class and id in that 323-line file
   was dead — navbar, footer, hamburger, container, logo, all of it. What was
   still load-bearing was this much: the variables the rules below read, and two
   base declarations. The rest of body{} it carried (font-family, color,
   background) was already being overridden by the Tailwind classes on <body>,
   and its line-height by .legal-content's own 1.8. */
:root {
    --primary-color: #0066cc;

    --text-dark: #1a202c;
    --text-medium: #2d3748;
    --text-light: #4a5568;
    --text-lighter: #718096;

    --bg-light: #f7fafc;
    --border-color: #e2e8f0;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Belt and braces against a wide child widening the whole document — the
       job .legal-table-scroll does properly for the one element that can. */
    overflow-x: hidden;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    /* 3rem, not the old 120px. That figure existed to clear the pre-redesign
       navbar, which was POSITION: FIXED and therefore out of flow — without it
       the h1 sat underneath the bar. These pages carry index.html's header now,
       and that one is `sticky`: it takes up its own space in the flow, so the
       content already starts below it and 120px would just be empty page. */
    padding: 3rem 20px 80px;
}

.legal-content h1 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.legal-content .last-updated {
    color: var(--text-lighter);
    margin-bottom: 2rem;
    font-style: italic;
}

.legal-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* Anchored headings only. The page header is `sticky top-0` and h-20 (80px),
   so a jump to #cancellation-refunds would otherwise park the heading
   underneath it and the section would read as starting at 7.1. 6rem clears the
   80px and leaves a little air above it. Scoped to [id] because these are the
   only headings anything links to — an unanchored h2 must keep its own
   margin-top rhythm. */
.legal-content h2[id] {
    scroll-margin-top: 6rem;
}

.legal-content h3 {
    font-size: 1.3rem;
    color: var(--text-medium);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content p,
.legal-content li {
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--text-light);
}

/* The markers are stated, not inherited from the browser.

   These rules only ever set the indent and relied on the UA default for the
   bullet itself. That held while these pages loaded css/styles.css alone; the
   moment the header was ported from index.html they also started loading
   Tailwind, whose preflight does `ul, ol { list-style: none; margin: 0;
   padding: 0 }` — and every bullet and number on both legal documents silently
   disappeared, indent and all. Nothing in the markup changed, so nothing looked
   wrong in the source. */
.legal-content ul,
.legal-content ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    padding-left: 0;
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content strong {
    color: var(--text-dark);
}

/* Tables — privacy.html's data-retention and cookie tables. */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.legal-content table th,
.legal-content table td {
    padding: 12px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.legal-content table th {
    background-color: var(--bg-light);
    font-weight: 600;
    color: var(--text-dark);
}

/* A four-column table cannot fit 390px, and the fallback the browser picks is
   to widen the PAGE — so the whole document scrolls sideways and every
   paragraph on it moves. Scrolling the table inside its own box keeps that
   contained. The wrapper is a <div class="legal-table-scroll"> around each
   table in the markup. */
.legal-table-scroll {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.legal-table-scroll table {
    margin: 0;
}

/* The "← Back to Home" line that closes both pages. Was two style attributes
   — also blocked by the CSP, so the rule and the spacing above it vanished
   and the link came out as default browser blue with an underline. */
.legal-back {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.legal-back a {
    color: var(--primary-color);
    text-decoration: none;
}

.legal-back a:hover {
    text-decoration: underline;
}