/* Sectie: klaagmuur.
   Bovenop basis.css. Gebruikt de tokens van de basis en definieert er twee bij
   die alleen hier betekenis hebben: de kleur van een oordeel en die van een
   weerwoord. Verder is dit alleen opmaak - de betekenis zit in de HTML en in
   de gestructureerde data. */

:root {
    --klacht:   #8c3b2e;
    --weerwoord-rand: #b08a3c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --klacht:   #d9856f;
        --weerwoord-rand: #c8a457;
    }
}

/* -- De sectiepagina ----------------------------------------------------- */

.sectie-kop {
    max-width: var(--measure);
    margin-bottom: 3.5rem;
}

.sectie-titel {
    font-size: clamp(2rem, 5.5vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.sectie-inleiding > * + * {
    margin-top: 1rem;
}

.sectie-inleiding:empty {
    display: none;
}

.muur {
    list-style: none;
    border-top: 1px solid var(--rule);
}

.muur-regel {
    border-bottom: 1px solid var(--rule);
}

.muur-stuk {
    padding: 1.75rem 0;
    max-width: var(--measure);
}

.muur-titel {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.muur-titel a {
    text-decoration: none;
}

.muur-titel a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.muur-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.9rem;
    margin-top: 0.5rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.muur-soort {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--klacht);
}

.muur-gericht .geadresseerde {
    color: var(--ink-soft);
}

.muur-oordeel {
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    color: var(--ink-soft);
}

.muur-samenvatting {
    margin-top: 0.7rem;
    color: var(--ink-soft);
}

.muur-samenvatting:empty {
    display: none;
}

.muur-leeg {
    color: var(--ink-faint);
    margin-bottom: 2rem;
}

/* -- Een stuk ------------------------------------------------------------ */

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

.stuk-kop {
    padding-bottom: 1.75rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid var(--rule);
}

.kruimel {
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.terug {
    color: var(--ink-faint);
    text-decoration: none;
}

.terug:hover {
    color: var(--ink);
}

.stuk-soort {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--klacht);
    margin-bottom: 0.75rem;
}

.stuk-soort.soort-opinie {
    color: var(--ink-faint);
}

.stuk-titel {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 600;
}

.gericht-aan {
    margin-top: 1.1rem;
    font-size: 1.05rem;
}

.gericht-label {
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-right: 0.5rem;
}

.geadresseerde {
    font-weight: 600;
}

a.geadresseerde {
    color: var(--accent);
    text-underline-offset: 2px;
}

.oordeel {
    margin-top: 0.9rem;
}

.sterren {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
}

.sterren-beeld {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    color: var(--klacht);
}

.sterren-tekst {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
}

.stuk-datum {
    margin-top: 1.1rem;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

/* -- Weerwoord ----------------------------------------------------------- */

.weerwoord {
    max-width: var(--measure);
    margin-top: 3rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--weerwoord-rand);
    border-radius: 3px;
}

.weerwoord-kop {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.weerwoord-citaat > * + * {
    margin-top: 0.9rem;
}

.weerwoord-van {
    margin-top: 0.9rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.weerwoord-van::before {
    content: '- ';
}

/* -- Voorbehoud ---------------------------------------------------------- */

.voorbehoud {
    max-width: var(--measure);
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink-faint);
}

.voorbehoud > * + * {
    margin-top: 0.6rem;
}

.voorbehoud a {
    color: var(--ink-soft);
}

/* -- Vorige en volgende -------------------------------------------------- */

.stuk-nav {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    max-width: var(--measure);
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

.buur {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
}

.buur-label {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.buur-titel {
    color: var(--accent);
    line-height: 1.35;
}

.buur:hover .buur-titel {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.buur[rel='next'] {
    text-align: right;
}