/* =========================================================
   Taxi2u — Inhoudspagina's (juridische pagina's + gemeentepagina's)
   ---------------------------------------------------------
   Laadt NA home.css (header, footer, knoppen, tokens en de
   licht/donker-modus) en vóór /theme.css. Enkel de opmaak van
   de leesinhoud staat hier; kleuren komen uit de tokens van
   home.css (--paper, --ink, ...), dus de huisstijl en de
   donkere modus werken mee.
   ========================================================= */

.legal-main {
    padding: 56px 0 84px;
    background:
        radial-gradient(900px 360px at 85% -8%, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 60%),
        var(--paper-2);
    color: var(--ink);
}

.legal-container {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px;
}

.legal-header { margin-bottom: 26px; }
.legal-header .eyebrow {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--chip-dark);
    color: var(--yellow);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.legal-header .section-title {
    font-size: clamp(1.9rem, 4.4vw, 2.7rem);
    color: var(--ink);
    margin: 14px 0 6px;
}
.legal-header .section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--yellow));
}
.legal-meta { color: var(--ink-dim); font-size: 0.92rem; margin: 10px 0 0; }

.legal-content {
    background: var(--paper);
    border: 1px solid var(--line-light);
    border-radius: var(--radius-card, 18px);
    padding: clamp(22px, 4vw, 40px);
    box-shadow: 0 2px 4px rgba(21, 19, 13, 0.03), 0 14px 34px rgba(21, 19, 13, 0.06);
    color: var(--ink);
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.legal-content > :first-child { margin-top: 0; }
.legal-content h2 {
    font-size: 1.35rem;
    color: var(--ink);
    margin: 30px 0 10px;
}
.legal-content h3 { font-size: 1.05rem; color: var(--ink); margin: 20px 0 6px; font-family: var(--font-body); font-weight: 700; }
.legal-content p,
.legal-content li { color: var(--ink-dim); }
.legal-content ul,
.legal-content ol { padding-left: 1.2em; }
.legal-content li { margin: 4px 0; }
.legal-content strong { color: var(--ink); }
.legal-content a { color: var(--gold-ink, #8a6a10); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--ink); }
.legal-content a.btn { text-decoration: none; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 18px;
    font-size: 0.95rem;
}
.legal-table th,
.legal-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-light);
}
.legal-table th {
    color: var(--ink-dim);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--paper-2) 60%, var(--paper));
}
.legal-table td { color: var(--ink); }

/* Knoppen op inhoudspagina's (de gemeentepagina's gebruiken btn-primary). */
.btn-primary {
    background: linear-gradient(135deg, var(--yellow), var(--yellow-deep));
    color: var(--on-yellow);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--yellow) 30%, transparent);
}
.legal-content .btn { margin: 4px 8px 4px 0; }
.legal-content .btn-ghost {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-light);
}
.legal-content .btn-ghost:hover { border-color: var(--yellow); color: var(--ink); }

/* Donkere modus: links in goud i.p.v. de donkere goudinkt. */
html[data-mode="dark"] .legal-content a:not(.btn) { color: var(--gold); }
html[data-mode="dark"] .legal-content { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }