/* Ported from the prototype's old layout/legal.css. Template-owned, not a block's own
   CSS (docs/PLAN.md §8/§31) — lives here at the top level, loaded by template-legal.php's
   own .legal-content wrapper around the_content(). The quick-nav .legal-toc-list pill
   styling already moved to tt360/legal-toc's own components/legal-toc.css, not here. */

.legal-header {
    padding: 56px 0 40px;
}

.legal-header .headline {
    margin: 0;
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.96px;
}

.legal-header .updated {
    margin: 16px 0 0;
    font-size: 14px;
    color: rgba(var(--warm-gray), 1);
}

.legal-content {
    padding: 56px 0 96px;
}

/* So a jump from a quick-nav pill doesn't land a heading right under the sticky header. */
.legal-content h2 {
    scroll-margin-top: 120px;
}

.legal-content h2 {
    max-width: 860px;
    margin: 56px 0 16px;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* :first-child, not :first-of-type: only the very first thing in the content should lose
   its top margin — not simply the first heading, regardless of what comes before it. Privacy
   Policy opens with an intro paragraph, then its first heading ("Scope of this Notice"); that
   heading is not the first thing in the content, so it keeps its normal top margin (its gap
   comes from the intro paragraph's own absence of a bottom margin plus the heading's own
   margin-top, not from this reset). Terms of Service has no intro paragraph, so its first
   heading ("Introduction") genuinely is the first thing in the content, and :first-child
   correctly reaches it. (An earlier version of this rule used :first-of-type, from when
   tt360/legal-toc's own section still sat inside this same container ahead of the first
   heading — :first-child couldn't reach past that sibling then. Now that the quick-nav
   renders directly from the template instead, outside this container entirely, the simpler
   :first-child is correct again, and was the real fix needed both times.) */
.legal-content > .container > h2:first-child,
.legal-content .intro {
    margin-top: 0;
}

.legal-content p {
    max-width: 860px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.legal-content p:first-child {
    margin-top: 0;
}

.legal-content ul,
.legal-content ol {
    max-width: 860px;
    margin: 16px 0 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.6;
}

.legal-content li + li {
    margin-top: 8px;
}

.legal-content li > ul,
.legal-content li > ol {
    margin-top: 8px;
}

/* Terms of Service's lettered sub-clauses (a, b, c...), one level only: nested ol inside an
   li.alpha stays plain decimal, matching the JPG's own numbered sub-lists (e.g. Acceptable Use). */
.legal-content ol.alpha {
    list-style-type: lower-alpha;
}

/* Bold lead-in text inside a paragraph stays the same charcoal, just heavier weight — it
   does not change color the way <strong> does elsewhere on the site (card titles, etc.). */
.legal-content strong {
    font-weight: 600;
}

.legal-table-wrap {
    max-width: 860px;
    margin: 16px 0 0;
    overflow-x: auto;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.12);
}

.legal-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.legal-table th,
.legal-table td {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(var(--terra-green), 0.12);
}

.legal-table th {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    /* Sampled from Figma's dev-mode screenshot of this table, not a reused brand token:
       doesn't match any existing color exactly. */
    background-color: rgb(220, 220, 207);
}

.legal-table tr:last-child td {
    border-bottom: 0;
}

/* md: the Data We Collect table has no Tablet reference of its own for Privacy Policy
   (only Desktop and Mobile), so this stacked-card transform is treated as holding for the
   whole range below 768px, same default used elsewhere on the site. */
@media (max-width: 767.98px) {
    .legal-header .headline {
        font-size: 30px;
    }

    .legal-table-wrap {
        background-color: transparent;
        border: 0;
    }

    .legal-table,
    .legal-table thead,
    .legal-table tbody,
    .legal-table tr,
    .legal-table td {
        display: block;
        width: auto;
        min-width: 0;
    }

    .legal-table thead {
        display: none;
    }

    .legal-table tr {
        margin-bottom: 16px;
        padding: 16px;
        background-color: rgba(var(--white), 1);
        border: 1px solid rgba(var(--terra-green), 0.15);
        border-radius: 4px;
    }

    .legal-table tr:last-child {
        margin-bottom: 0;
    }

    .legal-table td {
        padding: 0;
        border: 0;
    }

    .legal-table td:first-child {
        font-weight: 600;
        color: rgba(var(--charcoal), 1);
    }

    .legal-table td[data-label] {
        margin-top: 12px;
    }

    .legal-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        color: rgba(var(--warm-gray-dark), 1);
    }
}

/* sm */
@media (max-width: 575.98px) {
    .legal-header {
        padding: 28px 0 24px;
    }

    .legal-content {
        padding: 24px 0 48px;
    }

    .legal-content h2 {
        margin-top: 40px;
        font-size: 24px;
    }
}

/* Editor-only companion, scoped under .editor-styles-wrapper the same way every other
   editor-parity override in this theme is (see style.css's own subpage safety-net
   companion for the precedent), so this can never reach the front end. The editor canvas
   only ever shows the post's own content — never template-legal.php's own .legal-content
   wrapper div, which is server-rendered PHP markup around the_content(), not part of the
   post itself — so every ".legal-content h2"-style selector above matches nothing there.
   Confirmed live: without this, the editor showed headings/paragraphs/lists at the full
   1208px container width instead of the real 860px reading cap, and ol.alpha rendered
   plain decimal instead of lower-alpha. assets/js/editor-template-class.js toggles
   tt360-template-legal on the editor canvas iframe's own body to match the page's real
   selected template, the same mechanism already used for the Subpage template's own
   safety net. */
.editor-styles-wrapper.tt360-template-legal h2.wp-block-heading {
    max-width: 860px;
    margin: 56px 0 16px;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.editor-styles-wrapper.tt360-template-legal p.wp-block-paragraph {
    max-width: 860px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Same :first-child reasoning as the front-end rule above: only a heading block that is
   itself the very first block in the editor canvas's own root container loses its top
   margin — not simply the first heading regardless of what precedes it. (The editor canvas
   puts the data-block attribute directly on the content element itself, e.g.
   <h2 data-block="..." class="...wp-block-heading">, not on a separate wrapper div around
   it — confirmed live — so the plain :first-child on the heading element itself is enough,
   no extra wrapper selector needed.) The front-end .legal-content .intro rule further up is
   scoped to .legal-content, which doesn't exist in the editor canvas, so the intro paragraph
   needs its own plain reset here too. */
.editor-styles-wrapper.tt360-template-legal .block-editor-block-list__layout.is-root-container > h2.wp-block-heading:first-child,
.editor-styles-wrapper.tt360-template-legal p.wp-block-paragraph.intro {
    margin-top: 0;
}

.editor-styles-wrapper.tt360-template-legal ul.wp-block-list,
.editor-styles-wrapper.tt360-template-legal ol.wp-block-list {
    max-width: 860px;
    margin: 16px 0 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.6;
}

.editor-styles-wrapper.tt360-template-legal ol.alpha {
    list-style-type: lower-alpha;
}