/* Legal documents (Terms, Privacy, Cookies, Refunds, Consent).
   Uses the shared theme tokens so the pages follow light/dark mode. */

.legal-page {
    padding: 2rem 0 3.5rem;
    background: var(--pp-surface-app, #F4F4F5);
    color: var(--pp-text, #09090B);
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.legal-nav {
    position: sticky;
    top: 5.5rem;
    background: var(--pp-surface-card, #FFFFFF);
    border: 1px solid var(--pp-border, #E4E4E7);
    border-radius: 1rem;
    padding: 1rem;
}

.legal-nav__title {
    font-family: 'Bebas Neue', 'Outfit', system-ui, sans-serif;
    letter-spacing: .06em;
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.legal-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25rem;
}

.legal-nav a {
    display: block;
    padding: .55rem .75rem;
    border-radius: .65rem;
    color: var(--pp-text, #09090B);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}

.legal-nav a:hover,
.legal-nav a:focus-visible {
    background: var(--pp-surface-hover, #F4F4F5);
}

.legal-nav a.is-active {
    background: var(--pp-ink-900, #09090B);
    color: #FFFFFF;
}

.legal-doc {
    background: var(--pp-surface-card, #FFFFFF);
    border: 1px solid var(--pp-border, #E4E4E7);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    max-width: 52rem;
    line-height: 1.7;
    font-size: 1rem;
}

.legal-doc__kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--pp-text-muted, #52525B);
    margin: 0 0 .25rem;
}

.legal-doc h1 {
    font-family: 'Bebas Neue', 'Outfit', system-ui, sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    letter-spacing: .02em;
    line-height: 1.05;
    margin: 0 0 .5rem;
}

.legal-doc h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 2rem 0 .6rem;
}

.legal-doc h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.25rem 0 .4rem;
}

.legal-doc p,
.legal-doc li {
    color: var(--pp-text, #09090B);
}

.legal-doc ul,
.legal-doc ol {
    padding-left: 1.25rem;
}

.legal-doc a {
    color: var(--pp-brand-text-deep, #0F766E);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-doc__meta {
    font-size: .88rem;
    color: var(--pp-text-muted, #52525B);
    margin: 0 0 1rem;
}

.legal-doc__intro {
    font-size: 1.05rem;
}

.legal-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    min-width: 32rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--pp-border, #E4E4E7);
    padding: .6rem .75rem;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--pp-surface-slate-50, #F8FAFC);
    font-weight: 700;
}

.legal-callout {
    border-left: 4px solid var(--pp-accent-bg, #D9F114);
    background: var(--pp-surface-slate-50, #F8FAFC);
    padding: .85rem 1rem;
    border-radius: .5rem;
    margin: 1rem 0;
}

.legal-notice {
    border: 1px solid var(--pp-border-warn, #F59E0B);
    background: var(--pp-warn-bg-50, #FFFBEB);
    color: var(--pp-warn-text-3, #92400E);
    padding: .6rem .85rem;
    border-radius: .6rem;
    font-size: .9rem;
    font-weight: 600;
}

.legal-missing {
    background: var(--pp-warn-bg-50, #FFFBEB);
    color: var(--pp-warn-text-3, #92400E);
    border-radius: .3rem;
    padding: 0 .3rem;
    font-weight: 700;
}

.legal-doc__foot {
    border-top: 1px solid var(--pp-border, #E4E4E7);
    margin-top: 2.5rem;
    padding-top: .5rem;
}

.legal-contact {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: .35rem 1rem;
    margin: 0;
}

.legal-contact dt {
    font-weight: 700;
}

.legal-contact dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 860px) {
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-nav {
        position: static;
    }

    .legal-nav ul {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .legal-contact {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-contact dt {
        margin-top: .5rem;
    }
}

@media print {
    .legal-nav,
    .pp-topnav,
    .pp-footer {
        display: none !important;
    }

    .legal-doc {
        border: 0;
        max-width: none;
    }
}

/* Phones: stack table rows into labelled cards instead of squeezing columns. */
@media (max-width: 600px) {
    .legal-table {
        min-width: 0;
    }

    .legal-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .legal-table,
    .legal-table tbody,
    .legal-table tr,
    .legal-table td {
        display: block;
        width: 100%;
    }

    .legal-table tr {
        border: 1px solid var(--pp-border, #E4E4E7);
        border-radius: .75rem;
        margin-bottom: .75rem;
        overflow: hidden;
    }

    .legal-table td {
        border: 0;
        border-top: 1px solid var(--pp-border, #E4E4E7);
    }

    .legal-table td:first-child {
        border-top: 0;
        font-weight: 700;
        background: var(--pp-surface-slate-50, #F8FAFC);
    }

    .legal-table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--pp-text-muted, #52525B);
        margin-bottom: .15rem;
    }
}