/*
 * Shared styles for the legal pages in website/legal/.
 *
 * Served at /legal/legal.css, next to the pages, so the legal-only sync
 * (aws s3 sync website/legal s3://<bucket>/legal) uploads it with them.
 * Each page loads it last, after the marketing site's main.css, shared.css
 * and output.css.
 *
 * Layout, navigation and footer only. Nothing here may add, hide or reorder
 * legal text; `npm run check:legal-versions` guards the text itself.
 */

body {
    margin: 0;
}

/* Navigation logo, at the marketing pages' size (the PNG's natural 133x47). */
.navbar .nav-brand a {
    display: flex;
    align-items: center;
}
.navbar .nav-brand img {
    display: block;
    width: auto;
    height: 47px;
}

/* Page layout */
.legal-page {
    padding: 120px 0 80px;
    background-color: var(--color-gray-50);
}
.legal-container {
    max-width: 800px;
    margin: 0 auto;
}
.legal-header {
    text-align: center;
    margin-bottom: 48px;
}
.legal-header h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: 12px;
}
.legal-meta {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}
.legal-body {
    background: white;
    border-radius: var(--radius-xl);
    padding: 48px 56px;
    box-shadow: var(--shadow-lg);
}
.legal-body h2 {
    font-size: var(--font-size-2xl);
    margin-top: 40px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-200);
}
.legal-body h2:first-child {
    margin-top: 0;
}
.legal-body h3 {
    font-size: var(--font-size-lg);
    margin-top: 28px;
    margin-bottom: 12px;
}
.legal-body p {
    margin-bottom: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-700);
}
.legal-body ul, .legal-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}
.legal-body ul {
    list-style: disc;
}
.legal-body ol {
    list-style: decimal;
}
.legal-body li {
    margin-bottom: 8px;
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-700);
}
.legal-body strong {
    color: var(--color-gray-900);
}
.legal-body a {
    color: var(--color-primary);
    text-decoration: underline;
}
.legal-body a:hover {
    color: var(--color-primary-dark);
}
.legal-body code {
    background-color: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: var(--font-size-sm);
}
.legal-body th, .legal-body td {
    border: 1px solid var(--color-gray-200);
    padding: 10px 14px;
    text-align: left;
}
.legal-body th {
    background-color: var(--color-gray-50);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}
.legal-body td {
    color: var(--color-gray-700);
}
.legal-body hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: 32px 0;
}
.legal-body .caps-block {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--color-gray-900);
}

/* "Other Legal Documents" list at the end of each page */
.legal-nav {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-200);
}
.legal-nav h4 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.legal-nav ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.legal-nav li {
    margin-bottom: 0;
}
.legal-nav a {
    font-size: var(--font-size-sm);
    text-decoration: none;
}

@media (max-width: 768px) {
    .legal-body {
        padding: 32px 24px;
    }
    .legal-header h1 {
        font-size: var(--font-size-3xl);
    }
}

/*
 * Tables scroll inside their own box on narrow screens, so the page body never
 * scrolls sideways (cookies was 658px wide at a 390px screen). The wrapper is
 * focusable so keyboard users can scroll it too.
 */
.legal-body .table-scroll {
    overflow-x: auto;
    margin-bottom: 20px;
}
.legal-body .table-scroll table {
    margin-bottom: 0;
}
.legal-body .table-scroll:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* On phones, wider tables keep readable columns and scroll, instead of
   squeezing every column down to one word per line. */
@media (max-width: 768px) {
    .legal-body .table-scroll table:has(tr > :nth-child(3)) {
        min-width: 32rem;
    }
    .legal-body .table-scroll table:has(tr > :nth-child(4)) {
        min-width: 40rem;
    }
}

/* Tap targets: the "Other Legal Documents" links were 17px tall. */
.legal-nav ul {
    gap: 0 16px;
}
.legal-nav a {
    display: inline-block;
    padding: 12px 0;
}

/* Tap targets in the nav: taller links, and 45px rows in the phone menu. */
@media (min-width: 769px) {
    .navbar .nav-menu .nav-link:not(.nav-link--cta) {
        padding-block: 8px;
    }
}
@media (max-width: 768px) {
    .navbar .nav-menu {
        gap: var(--spacing-1);
    }
    .navbar .nav-menu .nav-link {
        display: block;
        padding: 12px 16px;
    }
}

/*
 * Footer: the marketing footer markup (green-200 background from output.css,
 * gray-900 text from main.css), plus the fixes it needs to pass AA here.
 * Without output.css the background falls back to white, which still reads.
 */
@media (min-width: 769px) {
    /* A wider Legal column, so the nine document names don't wrap. */
    .legal-footer .footer-content {
        grid-template-columns: 3fr 1fr 1fr 2fr;
    }
}
.legal-footer .footer-brand img {
    display: block;
    width: auto;
    height: 47px;
}
.legal-footer .footer-links {
    gap: 0;
}
/* 44px tall tap targets instead of 24px text lines 12px apart. */
.legal-footer .footer-links a {
    display: inline-block;
    padding: 10px 0;
}
/* main.css turns hovered links white (1.83:1 on green-200). */
.legal-footer .footer-links a:hover,
.legal-footer .footer-links a:focus-visible,
.legal-footer .footer-links a[aria-current="page"] {
    color: var(--color-gray-900);
    text-decoration: underline;
}
.legal-footer .footer-links a:focus-visible {
    outline: 2px solid var(--color-gray-900);
    outline-offset: 2px;
}
/* main.css uses gray-500 here (2.59:1 on green-200). */
.legal-footer .footer-bottom {
    color: var(--color-gray-700);
}