/* ============================================================
   Legal pages — imprint, privacy policy, terms of service
   ============================================================

   A legal document is read the way print is read: long, linear, mostly by
   someone looking for one particular clause. So the page is a single measured
   column with an index beside it, not a dashboard. Everything here answers to
   one of three things — find the clause, read the clause, cite the clause.

   Colours come from the global tokens, so light and dark mode follow the rest
   of the app. There is no `prefers-color-scheme` block: this project switches
   on `html.dark-mode`, and the version of this file that queried the media
   feature only ever changed a padding value.
   ============================================================ */

/* ── Page frame ─────────────────────────────────────────────── */

.legal-page {
    /* The measure the body column is allowed to reach. Named because the grid
       below has to reserve the index rail out of the same budget. */
    --legal-measure: 68ch;
    --legal-rail: 15rem;
    --legal-gutter: 3.5rem;

    max-width: calc(var(--legal-measure) + var(--legal-rail) + var(--legal-gutter));
    margin: 0 auto;
    /* The navbar is sticky, not fixed — the page already starts below it. The
       9rem this replaces was clearing a bar that was never overlapping, and
       opened a 144px band of nothing above the back link. */
    padding: 2.5rem 2rem 5rem;
}

.legal-body {
    display: block;
}

.legal-content {
    max-width: var(--legal-measure);
}

/* ── Back link ──────────────────────────────────────────────── */

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-left: -0.4rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.legal-back:hover {
    color: var(--primary);
    background: var(--at-06);
}

.legal-back svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.legal-back:hover svg {
    transform: translateX(-2px);
}

/* ── Masthead ───────────────────────────────────────────────── */

.legal-hero {
    /* Left-aligned, not centred. A centred masthead over a left-aligned body
       column reads as a title card that belongs to some other page; aligning
       them puts the title at the top of the same column as the text it names. */
    margin: 1.5rem 0 3.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--at-20);
    border-radius: 999px;
    background: var(--at-08);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-badge-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.legal-hero h1 {
    margin-bottom: 0.85rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 4vw + 1rem, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.legal-hero-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Sections ───────────────────────────────────────────────── */

.legal-section {
    /* Clears the sticky navbar when an anchor is jumped to. Without it the
       heading lands underneath the bar and the reader sees the paragraph after
       the one they asked for. */
    scroll-margin-top: 6rem;
}

/* The rhythm the previous version had none of: sections carried no margin at
   all, so the gap between two of them was whatever the last paragraph's
   margin-bottom happened to be — the same distance as between two paragraphs
   inside one section. */
.legal-section + .legal-section {
    margin-top: 3rem;
}

.legal-section:focus {
    outline: none;
}

.legal-section h2 {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 1.4vw + 0.9rem, 1.55rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Every heading is its own permalink — that is how a clause gets cited. The
   link looks like plain text until you approach it, so the affordance costs
   the reading view nothing. */
.legal-anchor {
    position: relative;
    color: inherit;
    text-decoration: none;
}

.legal-anchor::after {
    content: '#';
    position: absolute;
    left: 100%;
    margin-left: 0.4em;
    color: var(--primary);
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.legal-anchor:hover::after,
.legal-anchor:focus-visible::after {
    opacity: 0.65;
}

.legal-section h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.15rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.legal-section p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
}

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

.legal-section a:not(.legal-anchor) {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.legal-section ul {
    list-style: none;
    margin: 0.75rem 0 1rem;
}

.legal-section ul li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.4rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.legal-section ul li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 1.05em;
    width: 0.5rem;
    height: 1px;
    background: var(--primary);
    opacity: 0.55;
}

/* ── Table of contents ──────────────────────────────────────── */

.legal-toc {
    /* styles.css styles the bare `nav` element as the site navigation bar: flex
       row, sticky, z-index 100, drop shadow, bottom border. All of it landed on
       this <nav> too — the heading sat beside the list instead of above it, and
       on phones the index floated over the text it was indexing. The element is
       still the right one semantically, so the bar's properties are reset here
       rather than the markup being downgraded to a <div>. */
    display: block;
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
    margin-bottom: 2.75rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--at-15);
    border-radius: 12px;
    background: var(--at-04);
}

.legal-toc[hidden] {
    display: none;
}

.legal-toc-title {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.legal-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.legal-toc-list a {
    display: block;
    padding: 0.4rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease;
}

.legal-toc-list a:hover {
    color: var(--primary);
}

/* ── Contact card ───────────────────────────────────────────── */

.legal-contact-box {
    display: block;
    margin-top: 3.5rem;
    padding: 1.75rem;
    border: 1px solid var(--at-15);
    border-radius: 14px;
    background: var(--at-04);
}

.legal-contact-title {
    margin-bottom: 0.6rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.legal-contact-box p {
    margin: 0 0 0.9rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
}

.legal-contact-email {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    /* break-all was splitting addresses mid-word; break-word only breaks when
       the line genuinely cannot hold it. */
    overflow-wrap: break-word;
}

.legal-contact-email:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── Wide screens: the index becomes a rail ─────────────────── */

@media (min-width: 1100px) {
    .legal-body {
        display: grid;
        grid-template-columns: var(--legal-rail) minmax(0, 1fr);
        gap: var(--legal-gutter);
        align-items: start;
    }

    .legal-toc {
        position: sticky;
        /* Sticky navbar height plus breathing room. */
        top: 6rem;
        margin-bottom: 0;
        padding: 0 0 0 1rem;
        border: none;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background: none;
        /* Fifteen sections do not fit beside a viewport; the rail scrolls
           inside itself rather than pushing the page taller. */
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .legal-toc-list a {
        position: relative;
        padding-left: 0.1rem;
    }

    /* The reading position, marked on the rail rather than in the text. */
    .legal-toc-list a.is-current {
        color: var(--primary);
        font-weight: 600;
    }

    .legal-toc-list a.is-current::before {
        content: '';
        position: absolute;
        left: -1rem;
        top: 0.4rem;
        bottom: 0.4rem;
        width: 2px;
        background: var(--primary);
        border-radius: 2px;
    }
}

/* ── Small screens ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .legal-page {
        padding: 1.5rem 1.25rem 3.5rem;
    }

    .legal-hero {
        margin: 1rem 0 2.5rem;
        padding-bottom: 1.5rem;
    }

    .legal-section + .legal-section {
        margin-top: 2.25rem;
    }

    .legal-section p,
    .legal-section ul li {
        font-size: 0.9rem;
    }

    .legal-contact-box {
        margin-top: 2.5rem;
        padding: 1.25rem;
    }

    /* The "#" would sit off the right edge of a wrapped heading. */
    .legal-anchor::after {
        content: none;
    }
}

/* ── Print ──────────────────────────────────────────────────── */

@media print {
    .legal-page {
        max-width: none;
        padding: 0 0 2rem;
    }

    .legal-body {
        display: block;
    }

    /* An index of anchors is dead weight on paper, and so is the "get in touch"
       card once the address is already in the imprint section. */
    .legal-toc,
    .legal-back {
        display: none;
    }

    .legal-section {
        page-break-inside: avoid;
    }

    .legal-contact-box {
        border: 1px solid var(--border);
        background: none;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .legal-back,
    .legal-back svg,
    .legal-anchor::after,
    .legal-toc-list a {
        transition: none;
    }

    .legal-back:hover svg {
        transform: none;
    }
}