/* Legal pages: cookie policy, privacy policy, terms of service, GDPR/CCPA addendum.

   The markup came across from the old project unchanged, so this file styles the classes that
   markup already uses rather than the other way round. Several of them (ds-page-title,
   ds-section-title, ds-number, badge-gdpr, badge-ccpa) had NO rules anywhere in the old project -
   the badges rendered as transparent pills - so they are given real ones here for the first time.

   Long prose read cold, usually to check one specific thing, so measure is capped and the headings
   are given enough space to be scannable. */

.legal-body {
    color: var(--fg-dim);
    line-height: 1.7;
}

    .legal-body p {
        margin: 0 0 1rem;
    }

    .legal-body a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

        .legal-body a:hover {
            color: var(--accent-bright);
        }

    .legal-body strong,
    .legal-body b {
        color: var(--fg-strong);
    }

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

.legal-body .ds-page-title {
    color: var(--fg-strong);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.legal-body header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--hairline-soft);
}

.legal-body .ds-section-title,
.legal-body h2 {
    color: var(--fg-strong);
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.legal-body h3 {
    color: var(--fg-strong);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

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

.legal-body ul,
.legal-body ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

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

/* a numbered clause reference inside a heading, e.g. "1." before the section name */
.legal-body .ds-number {
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.35rem;
}

/* ---------- tables ---------- */

/* the cookie policy lists each cookie in a table; it must scroll rather than widen the page */
.legal-body table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.legal-body th,
.legal-body td {
    border: 1px solid var(--hairline-soft);
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

.legal-body th {
    background: var(--surface);
    color: var(--fg-strong);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- jurisdiction badges ----------
   Marking which section applies to whom. These had no styling at all in the old project. */

.legal-body .badge-gdpr,
.legal-body .badge-ccpa {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.legal-body .badge-gdpr {
    background: rgba(var(--tint-rgb), 0.18);
    color: var(--accent);
}

.legal-body .badge-ccpa {
    background: rgba(255, 86, 102, 0.16);
    color: var(--accent-warn);
}

/* .text-light is on these badges from the old markup, where it was needed against a dark pill;
   here the badge is a soft tint, so the token colour above has to win */
.legal-body .badge-gdpr.text-light,
.legal-body .badge-ccpa.text-light {
    color: var(--accent) !important;
}

.legal-body .badge-ccpa.text-light {
    color: var(--accent-warn) !important;
}