/* Block: legal-page
 *
 * Long-form prose pages — the Cookies & Privacy Policy, and any other page
 * whose content is wrapped in a core/group carrying .legal-page. A centred
 * section-heading title over white cards on the cream page, one card per
 * policy section.
 *
 * page.php adds no width wrapper, so the measure is set here. This file loads
 * on every page like the rest of styles/blocks/, so every selector is scoped
 * under .legal-page.
 */
.block-page > .legal-page {
    margin-block: 0;
}

.legal-page {
    max-width: calc(1120 * var(--tgc-u) + 2 * var(--tgc-gutter));
    margin-inline: auto;
    padding: calc(80 * var(--tgc-u)) var(--tgc-gutter) var(--tgc-section);
}

/*
 * appearanceTools gives every group a flow-layout block gap. The rhythm is set
 * explicitly below, so clear it first — same as service-page.css does.
 */
.legal-page > *,
.legal-page__card > * {
    margin-block: 0;
}

.legal-page > .legal-page__card {
    margin-top: var(--tgc-heading-gap);
}

.legal-page > .legal-page__card + .legal-page__card {
    margin-top: calc(40 * var(--tgc-u));
}

.legal-page__card {
    padding: calc(70 * var(--tgc-u)) calc(80 * var(--tgc-u));
    border-radius: var(--tgc-radius);
    background-color: var(--tgc-card);
    font-size: var(--tgc-text-body);
    line-height: 1.6;
    color: var(--tgc-ink-muted);
    text-wrap: pretty;
}

/* Headings */
.legal-page__card h2 {
    font-size: var(--tgc-text-h2);
    font-weight: 400;
    line-height: 1.28;
}

.legal-page__card h3 {
    font-size: calc(24 * var(--tgc-ut));
    font-weight: 600;
    line-height: 1.4;
}

.legal-page__card h4 {
    font-size: var(--tgc-text-body);
    font-weight: 600;
    line-height: 1.5;
}

.legal-page__card > h2 + * {
    margin-top: calc(30 * var(--tgc-u));
}

.legal-page__card > * + h3 {
    margin-top: calc(50 * var(--tgc-u));
}

.legal-page__card > * + h4 {
    margin-top: calc(34 * var(--tgc-u));
}

.legal-page__card > h3 + *,
.legal-page__card > h4 + * {
    margin-top: calc(14 * var(--tgc-u));
}

/* Prose */
.legal-page__card > p + p,
.legal-page__card > p + ul,
.legal-page__card > ul + p {
    margin-top: calc(18 * var(--tgc-u));
}

.legal-page__card strong,
.legal-page__card b {
    font-weight: 600;
    color: var(--tgc-ink);
}

.legal-page__card a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

.legal-page__card ul {
    padding-left: 1.25em;
}

.legal-page__card li + li {
    margin-top: calc(8 * var(--tgc-u));
}

.legal-page__card li::marker {
    color: var(--tgc-violet);
}

@media (max-width: 768px) {
    .legal-page {
        padding: 40px 16px 64px;
    }

    .legal-page > .legal-page__card {
        margin-top: 32px;
    }

    .legal-page > .legal-page__card + .legal-page__card {
        margin-top: 20px;
    }

    .legal-page__card {
        padding: 28px 20px;
    }

    .legal-page__card > * + h3 {
        margin-top: 32px;
    }

    .legal-page__card > * + h4 {
        margin-top: 24px;
    }
}