/*
 * Legal and policy pages: privacy, terms, cookies, warranty.
 *
 * WHAT WAS WRONG (measured on staging, 3 Aug 2026)
 *
 * All four pages were typeset with the marketing scale - --text-h1 (56px) and
 * --text-h2 (44px) at weight 800, both with `margin: 0`, so a 44px heading sat
 * flush against the sentence under it. Body copy was 16px at weight 600 on a
 * 1.4 line-height; list items 14px with no space between them.
 *
 * On top of that the four pages did not agree with each other. Privacy and
 * Cookies are block pages; Terms and Warranty predate the block rebuild and
 * carried their own <style> blocks inside post_content - 1000px containers,
 * hard-coded #333 / #00aac4 / #000, their own font stack and their own heading
 * sizes. Those blocks were removed from post_content on 3 Aug 2026 (five of
 * them, two of which were duplicates and one of which was a copy of the Terms
 * CSS sitting on the Warranty page). This file replaces them.
 *
 * WHAT THIS DOES
 *
 * A contract is not a landing page. It is read in long runs by someone hunting
 * for one clause, so it wants a document scale: a quiet heading hierarchy, real
 * space above each section, one body size, and a measure short enough to track
 * from the end of a line back to the start of the next.
 *
 * Everything sits on the type scale in tokens.css - 4xl / 2xl / lg / base - and
 * on the colour tokens. No literal colours, no !important.
 *
 * The measure is set on the CONTAINER, not on each element. WordPress emits
 * `margin-left:auto !important; margin-right:auto !important` for children of a
 * constrained group, so any element given its own max-width gets centred inside
 * the group instead of aligning with the headings - which is exactly how the
 * paragraphs ended up indented ~47px from the h2s. Narrowing the container
 * instead leaves every child flush on both edges.
 *
 * Scoped to body.ff-legal, added by fixfactor_is_legal_page() in functions.php.
 * The body-class prefix is deliberate: theme heading styles land at (0,1,1) and
 * would otherwise win on source order.
 */

body.ff-legal {
    /* 688px of text plus 24px of gutter each side. 688px is ~68ch in the theme
       stack, at the top of the comfortable 45-75ch band for continuous prose. */
    --ff-legal-column: 736px;
}

/* --------------------------------------------------------------- the column
 * One width for all four pages: the block group on Privacy and Cookies, the
 * hand-written containers on Terms and Warranty.
 */
body.ff-legal .entry-content > .wp-block-group,
body.ff-legal .terms-container,
body.ff-legal .warranty-container {
    box-sizing: border-box;
    max-width: var(--ff-legal-column);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* Terms and Warranty had no vertical padding of their own once their inline
   CSS went; the block pages get theirs from the group's own block settings. */
body.ff-legal .terms-container,
body.ff-legal .warranty-container {
    padding-block: var(--space-12);
}

/* ---------------------------------------------------------------- headings */

body.ff-legal h1 {
    font-size: var(--text-4xl);     /* 36px, down from 56 */
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--content);
    margin: 0 0 var(--space-2);
}

body.ff-legal h2 {
    font-size: var(--text-2xl);     /* 24px, down from 44 */
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--content);
    /* The space above a section is what makes a long document scannable.
       Zero was the single worst thing about these pages. */
    margin: var(--space-12) 0 var(--space-3);
    /* The old inline CSS put a 2px teal rule under every h2 on Terms and
       Warranty and nothing on the other two. Four pages, two languages. The
       48px above the heading does the sectioning on all four now. */
    border-bottom: 0;
    padding-bottom: 0;
}

body.ff-legal h3 {
    font-size: var(--text-lg);      /* 18px */
    line-height: 1.4;
    font-weight: 600;
    color: var(--content);
    margin: var(--space-8) 0 var(--space-2);
}

/* Nothing pushes the first heading down - the container already spaces the top. */
body.ff-legal h1:first-child,
body.ff-legal .entry-content > .wp-block-group > *:first-child,
body.ff-legal .terms-container > *:first-child,
body.ff-legal .warranty-container > *:first-child { margin-top: 0; }

/* ------------------------------------------------------------------- body */

body.ff-legal p {
    font-size: var(--text-base);    /* 16px */
    line-height: 1.7;               /* was 1.4 */
    font-weight: 400;               /* was 600 - every paragraph was semi-bold */
    color: var(--content-body);
    margin: 0 0 var(--space-4);
}

/* No font-size presets on these pages. WordPress emits them fluid AND with
   !important, so a "large" lead rendered 18px at 1440 and 14.3px at 390 -
   smaller than the body text under it, and unfixable from here. The preset was
   removed from the Cookies page content on 3 Aug 2026 instead. */

body.ff-legal .last-updated,
body.ff-legal .last-updated strong {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--content-secondary);
}
body.ff-legal .last-updated { margin: 0 0 var(--space-8); }

body.ff-legal strong { font-weight: 600; color: var(--content); }

body.ff-legal a {
    color: var(--action);
    text-decoration: underline;     /* was bare colour - insufficient on its own */
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
body.ff-legal a:hover { color: var(--action-hover); }

/* ------------------------------------------------------------------ lists */

body.ff-legal ul,
body.ff-legal ol {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--content-body);
    margin: 0 0 var(--space-4);
    padding-left: 1.35em;
}

body.ff-legal li { margin: 0 0 var(--space-2); }
body.ff-legal li:last-child { margin-bottom: 0; }
body.ff-legal li > ul,
body.ff-legal li > ol { margin: var(--space-2) 0 0; }

/* ------------------------------------------------------------------ table */

body.ff-legal .wp-block-table {
    margin: var(--space-6) 0 var(--space-8);
    /* Five columns of prose do not fit a phone. Scroll rather than crush. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.ff-legal .wp-block-table table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: 1.55;
}

body.ff-legal .wp-block-table th {
    text-align: left;
    vertical-align: bottom;
    font-weight: 600;
    color: var(--content);
    padding: 0 var(--space-4) var(--space-2) 0;
    border-bottom: 2px solid var(--border-neutral);
}

body.ff-legal .wp-block-table td {
    vertical-align: top;
    color: var(--content-body);
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--border-neutral);
}

body.ff-legal .wp-block-table th:last-child,
body.ff-legal .wp-block-table td:last-child { padding-right: 0; }

/* Stripes belong on data, not on six rows of prose. */
body.ff-legal .wp-block-table.is-style-stripes table,
body.ff-legal .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
body.ff-legal .wp-block-table.is-style-stripes td { border-bottom: 1px solid var(--border-neutral); }

/* ------------------------------------------------- Terms and Warranty -----
 * These two wrap each clause group in a div. The headings carry the rhythm, so
 * the wrappers only need to stay out of the way.
 */
body.ff-legal .terms-section,
body.ff-legal .warranty-section,
body.ff-legal .warranty-point { margin: 0; }

/* The summary callout at the top of the Warranty page, rebuilt on tokens. */
body.ff-legal .warranty-summary {
    background: var(--surface-fill);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-6);
    margin: 0 0 var(--space-8);
}
body.ff-legal .warranty-summary h2 { margin-top: 0; font-size: var(--text-lg); }
body.ff-legal .warranty-summary p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- mobile */

@media (max-width: 767px) {
    body.ff-legal .terms-container,
    body.ff-legal .warranty-container { padding-block: var(--space-8); }
    body.ff-legal h1 { font-size: var(--text-3xl); }              /* 30px */
    body.ff-legal h2 { font-size: var(--text-xl); margin-top: var(--space-8); }  /* 20px */
    body.ff-legal h3 { margin-top: var(--space-6); }
}