/* ===========================================================================
   Dial In Doctor — legal document pages
   ===========================================================================

   One stylesheet for all six public policy pages rather than six copies of the
   same rules. It is loaded only by those pages, so the marketing bundle does
   not carry it.

   No new framework and no new tokens: every colour, radius, shadow and font
   here comes from the variables marketing.css already defines. If the brand
   changes there, these pages follow.

   The measure is deliberately narrower than the marketing container. Policy
   text is read in long paragraphs, and a 1180px line of 10pt legal prose is
   unreadable; 940px lands around 80-90 characters, which is the range long-form
   text is comfortable at.
   =========================================================================== */

.legal-page {
    --legal-measure: 940px;
    background: var(--dd-bg-soft);
    padding: 40px 0 72px;
}

.legal-page__inner {
    max-width: var(--legal-measure);
    margin: 0 auto;
    /* 16px side gutter on phones so text never touches the edge. */
    padding: 0 16px;
}

/* ---------- header ---------- */

.legal-page__header {
    margin-bottom: 24px;
}

.legal-page__header h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    line-height: 1.2;
    color: var(--dd-ink);
    margin: 0 0 12px;
}

.legal-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: .9rem;
    color: var(--dd-muted);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-page__meta strong {
    color: var(--dd-ink-soft);
    font-weight: 600;
}

/* ---------- notice / callout ---------- */

.legal-page__notice {
    background: var(--dd-bg);
    border: 1px solid var(--dd-line);
    border-left: 4px solid var(--dd-teal);
    border-radius: var(--dd-r);
    padding: 16px 20px;
    margin: 24px 0;
    box-shadow: var(--dd-shadow-sm);
}

.legal-page__notice h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dd-teal);
    margin: 0 0 8px;
}

.legal-page__notice p {
    margin: 0 0 8px;
    color: var(--dd-ink-soft);
    font-size: .95rem;
    line-height: 1.6;
}

.legal-page__notice p:last-child { margin-bottom: 0; }

/* An emergency warning is the one thing on these pages somebody may need to
   see without reading, so it is the one thing allowed to use the brand red. */
.legal-page__notice--urgent {
    border-left-color: var(--dd-primary);
    background: var(--dd-primary-050);
}

.legal-page__notice--urgent h2 { color: var(--dd-primary-700); }

/* ---------- table of contents ---------- */

.legal-page__toc {
    background: var(--dd-bg);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r);
    padding: 20px 24px;
    margin: 24px 0 32px;
}

.legal-page__toc h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dd-muted);
    margin: 0 0 12px;
}

.legal-page__toc ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 32px;
    font-size: .95rem;
}

.legal-page__toc li {
    margin-bottom: 6px;
    break-inside: avoid;
}

.legal-page__toc a {
    color: var(--dd-ink-soft);
    text-decoration: none;
}

.legal-page__toc a:hover,
.legal-page__toc a:focus { color: var(--dd-primary-700); text-decoration: underline; }

@media (max-width: 640px) {
    .legal-page__toc ol { columns: 1; }
}

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

.legal-page__content {
    background: var(--dd-bg);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r-lg);
    padding: 32px 36px;
    box-shadow: var(--dd-shadow-sm);
    color: var(--dd-ink-soft);
    line-height: 1.7;
}

@media (max-width: 640px) {
    .legal-page__content { padding: 24px 20px; border-radius: var(--dd-r); }
}

.legal-page__content h2 {
    font-size: 1.15rem;
    color: var(--dd-ink);
    margin: 36px 0 12px;
    padding-top: 4px;
    /* Anchored headings land under the fixed nav without this. */
    scroll-margin-top: calc(var(--dd-nav-h) + 16px);
}

.legal-page__content h2:first-child { margin-top: 0; }

.legal-page__content h3 {
    font-size: 1rem;
    color: var(--dd-ink);
    margin: 24px 0 8px;
    scroll-margin-top: calc(var(--dd-nav-h) + 16px);
}

.legal-page__content p { margin: 0 0 14px; }

.legal-page__content ul,
.legal-page__content ol { margin: 0 0 16px; padding-left: 1.4rem; }

.legal-page__content li { margin-bottom: 6px; }

.legal-page__content a {
    color: var(--dd-primary-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__content a:hover,
.legal-page__content a:focus { color: var(--dd-primary-800); }

.legal-page__content strong { color: var(--dd-ink); font-weight: 600; }

.legal-page__content code {
    background: var(--dd-bg-soft);
    border: 1px solid var(--dd-line);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: .9em;
}

.legal-page__content blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--dd-line);
    background: var(--dd-bg-soft);
    border-radius: 0 var(--dd-r) var(--dd-r) 0;
    color: var(--dd-muted);
    font-size: .95rem;
}

.legal-page__content blockquote p:last-child { margin-bottom: 0; }

/* ---------- tables ----------
   Wrapped in .legal-table-wrap so a wide table scrolls inside its own box
   instead of making the whole page scroll sideways on a phone. */

.legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 20px;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r);
    -webkit-overflow-scrolling: touch;
}

.legal-table-wrap table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .93rem;
}

.legal-table-wrap th,
.legal-table-wrap td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dd-line);
    vertical-align: top;
}

.legal-table-wrap thead th {
    background: var(--dd-bg-soft);
    color: var(--dd-ink);
    font-weight: 600;
    white-space: nowrap;
}

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

/* ---------- contact block ---------- */

.legal-page__contact {
    margin-top: 32px;
    background: var(--dd-bg);
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-r-lg);
    padding: 28px 36px;
    box-shadow: var(--dd-shadow-sm);
}

@media (max-width: 640px) {
    .legal-page__contact { padding: 22px 20px; border-radius: var(--dd-r); }
}

.legal-page__contact h2 {
    font-size: 1.05rem;
    color: var(--dd-ink);
    margin: 0 0 14px;
}

.legal-page__contact dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0;
    font-size: .95rem;
}

.legal-page__contact dt {
    color: var(--dd-muted);
    font-weight: 600;
}

.legal-page__contact dd {
    margin: 0;
    color: var(--dd-ink-soft);
}

.legal-page__contact a {
    color: var(--dd-primary-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Two columns collapse on a phone, where a max-content label column would
   squeeze the value into a two-word ribbon. */
@media (max-width: 560px) {
    .legal-page__contact dl { grid-template-columns: 1fr; gap: 2px 0; }
    .legal-page__contact dd { margin-bottom: 10px; }
}

/* ---------- related policies ---------- */

.legal-page__related {
    margin-top: 28px;
    font-size: .92rem;
    color: var(--dd-muted);
}

.legal-page__related h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 10px;
    color: var(--dd-muted);
}

.legal-page__related ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.legal-page__related a {
    color: var(--dd-primary-700);
    text-decoration: none;
}

.legal-page__related a:hover,
.legal-page__related a:focus { text-decoration: underline; }