/* =====================================================================================================
   Legal pages (legal/legal-notice.html, legal/privacy.html, legal/cookies.html).
   Loaded after css/base.css and css/sections/footer.css (the pages reuse the landing footer).
   ===================================================================================================== */

.legal-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ----- Top bar: wordmark back to the home page -------------------------------------------------------- */

.legal-topbar {
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--line);
}

.legal-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

.legal-topbar__brand {
    display: inline-block;
    border-radius: 2px;
}
.legal-topbar__brand img {
    width: clamp(8.5rem, 7rem + 4vw, 11.25rem);
    height: auto;
}

.legal-topbar__back {
    font-size: var(--text-sm);
    color: var(--text);
    text-decoration: none;
    border-radius: 2px;
}
.legal-topbar__back:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* ----- Content column --------------------------------------------------------------------------------- */

.legal {
    flex: 1;
    width: 100%;
    max-width: calc(45rem + 2 * var(--gutter));   /* ~720px of text */
    margin-inline: auto;
    padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--gutter) clamp(3.5rem, 3rem + 3vw, 6rem);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text);
}

.legal h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-strong);
}

.legal__updated {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.legal__intro { margin-top: 1.75rem; }

.legal h2 {
    margin-top: 2.5rem;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-strong);
}

.legal h3 {
    margin-top: 1.5rem;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-strong);
}

.legal p,
.legal ul,
.legal dl,
.legal .legal__table-wrap { margin-top: 0.9rem; }

.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.35rem; }

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

.legal a {
    color: var(--brand-violet);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}
.legal a:hover { color: var(--brand-magenta); }

/* Identification data (owner / controller): label + value pairs. */
.legal__facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.5rem 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.legal__facts dt { font-weight: 500; color: var(--text-strong); }
.legal__facts dd { overflow-wrap: anywhere; }

@media (max-width: 35rem) {
    .legal__facts { grid-template-columns: 1fr; gap: 0; padding: 1rem 1.25rem; }
    .legal__facts dd + dt { margin-top: 0.6rem; }
}

/* Cookie table: scrolls sideways on narrow screens instead of widening the page. */
.legal__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
}
.legal table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.legal th,
.legal td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.legal tr:last-child td { border-bottom: 0; }
.legal th { font-weight: 600; color: var(--text-strong); }
.legal code { font-size: 0.95em; }