/* ============================================
   Legal pages (privacy, terms, refund).

   One stylesheet for the three policy pages, so their layout cannot drift
   apart. Colours, radii and shadows come from the design tokens in
   styles.css; this file only adds the document layout those pages share:
   a short hero, a sticky table of contents, and a readable measure for the
   body copy with tables and pull-out notes.
   ============================================ */

.legal-hero {
    padding: 132px 0 0;
    background: linear-gradient(180deg, var(--bg-blue-tint) 0%, var(--bg-white) 100%);
}

.legal-hero-inner { max-width: 900px; }

.legal-hero h1 {
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    line-height: 1.15;
    color: var(--text-dark);
    margin: 14px 0 16px;
}

.legal-lede {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-medium);
    max-width: 780px;
    margin: 0;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 24px;
    font-size: 0.94rem;
    color: var(--text-light);
}

.legal-meta strong { color: var(--text-dark); font-weight: 600; }

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 56px;
    padding: 56px 0 84px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 96px;
    border-left: 3px solid var(--primary);
    padding-left: 20px;
}

.legal-toc h2 {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 14px;
}

.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin-bottom: 9px; font-size: 0.94rem; line-height: 1.5; }
.legal-toc a { color: var(--text-medium); text-decoration: none; }
.legal-toc a:hover { color: var(--primary); text-decoration: underline; }

.legal-body { max-width: 860px; font-size: 1.02rem; line-height: 1.8; color: var(--text-medium); }

.legal-body h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 48px 0 14px;
    padding-top: 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    scroll-margin-top: 96px;
}

.legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 { font-size: 1.1rem; color: var(--text-dark); margin: 28px 0 10px; }
.legal-body p { margin: 0 0 16px; }

/* styles.css resets `ul { list-style: none }` site-wide, so the markers have to
   be restored here for a policy's own lists to read as lists. */
.legal-body ul { list-style: disc; margin: 0 0 18px; padding-left: 24px; }
.legal-body ol { list-style: decimal; margin: 0 0 18px; padding-left: 26px; }
.legal-body li { margin-bottom: 9px; padding-left: 4px; }
.legal-body li::marker { color: var(--primary); }
.legal-body strong { color: var(--text-dark); }
.legal-body a { color: var(--primary-dark); }

.legal-note {
    background: var(--bg-blue-tint);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    margin: 28px 0;
}

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

.legal-table-wrap {
    overflow-x: auto;
    margin: 22px 0 30px;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}

.legal-table { width: 100%; border-collapse: collapse; min-width: 580px; font-size: 0.98rem; }

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: top;
    line-height: 1.65;
}

.legal-table thead th { background: var(--bg-light); color: var(--text-dark); font-weight: 600; }
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--text-dark); font-weight: 500; }

.legal-contact {
    background: var(--bg-light);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    margin: 26px 0;
}

.legal-contact p { margin: 0 0 10px; }
.legal-contact p:last-child { margin-bottom: 0; }

.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

@media (max-width: 980px) {
    .legal-hero { padding-top: 112px; }
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 40px 0 64px; }
    .legal-toc { position: static; }
}

/* Printing: the sticky chrome would otherwise repeat on every sheet, and the
   sidebar wastes half the page. Print the policy itself, in one column. */
@media print {
    .top-bar, .navbar, .mobile-menu, .footer, .skip-link, .legal-toc, .legal-actions {
        display: none !important;
    }

    .legal-hero { padding: 0; background: none; }
    .legal-layout { display: block; padding: 0; }
    .legal-body { max-width: none; font-size: 11pt; }
    .legal-table-wrap { overflow: visible; border: none; border-radius: 0; }
    .legal-table { min-width: 0; font-size: 9.5pt; }
    .legal-body h2 { break-after: avoid; }
    .legal-body h3 { break-after: avoid; }
    .legal-table tr { break-inside: avoid; }
}