/*
 * legal-page.css - the shared shell (resources/views/components/legal/page.blade.php)
 * behind the four legal pages: Privacy Policy, Terms of Use, Legal Disclaimer,
 * Accessibility Statement.
 *
 * The column was capped at 72ch for readability; Terry wants the full width of
 * col-lg-8 instead, so the cap is gone. The Privacy Policy and Terms of Use are
 * HTML edited in the panel, so they carry no Bootstrap classes: the rules below
 * give the bare elements the site's rhythm and make the cookie table readable on
 * a phone.
 */

.legal-page {
    max-width: inherit;
}

/* Document headings, not marketing ones: template.css sizes h2 for a home
   page section, which on a fourteen-heading policy reads as fourteen titles. */
.legal-page h2 {
    font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-page h2:first-of-type {
    margin-top: 1.5rem;
}

.legal-page h3 {
    font-size: 1.0625rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-page p {
    margin-bottom: 1rem;
}

.legal-page ul,
.legal-page ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.legal-page li {
    margin-bottom: 0.375rem;
}

/* Long email addresses and URLs must wrap rather than push the page wider
   than a phone screen. */
.legal-page a {
    overflow-wrap: anywhere;
}

/* Cookie names in the table: the site's ink on the page ground, not
   Bootstrap's magenta. */
.legal-page code {
    padding: 0.125rem 0.375rem;
    color: var(--site-text);
    background-color: var(--site-bg);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    font-size: 0.875em;
}

.legal-page blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 0.25rem solid var(--site-border);
    color: var(--site-muted);
}

/* The cookie table. The renderer wraps every table in a focusable
   .table-responsive region, so on a narrow screen it scrolls sideways - by
   touch or keyboard - and keeps its table semantics at every width. */
.legal-page .table-responsive {
    margin-bottom: 1.5rem;
}

.legal-page table {
    width: 100%;
    /* Four columns need a readable measure; below it the wrapper scrolls. */
    min-width: 30rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal-page th,
.legal-page td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--site-border);
    text-align: left;
    vertical-align: top;
}

.legal-page th {
    background-color: var(--site-bg);
    font-weight: 600;
}