/* ---------------------------------------------------------------------------
   Tekstpagina's (7 oktober 2026)

   De pagina's met vooral tekst: contact, over ons, helpdesk, abonnementen,
   de uitleg over AI-zoeken, de disclaimers en "geen toegang". Opgezet als de
   tekstpagina's van iustitiascripta.com: een kolom van 760 px, een etiket
   in kleine kapitalen, de titel links in Georgia in de accentkleur, en
   daaronder lopende tekst in Jost. Dezelfde kop als op de zoekschermen
   (.zk-kop in zoeken.css).

   Wordt op elke pagina geladen (includes/head.html), net als kop.css en
   voet.css: het zijn een handvol regels, en zo hoeft een pagina niet te
   kiezen tussen dit en haar eigen stylesheet.

   Gebruik:
     <main class="sm-pagina">
       <span class="sm-etiket">Tuchtrecht.online</span>
       <h1>Contact</h1>
       <p>...</p>
     </main>
   --------------------------------------------------------------------------- */

.sm-pagina {
    width: 100%;
    max-width: calc(760px + 48px);
    margin: 0 auto;
    padding: 44px 24px 72px;
    color: var(--sm-inkt);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}

/* Voor pagina's met kaarten naast elkaar, zoals de abonnementen. */
.sm-pagina.breed {
    max-width: var(--sm-breedte);
}

.sm-etiket {
    display: block;
    margin-bottom: 8px;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

.sm-pagina h1,
.sm-pagina h2 {
    font-family: var(--sm-schreef);
    font-weight: 700;
    color: var(--sm-accent);
    text-wrap: balance;
}

.sm-pagina h1 {
    margin: 0 0 .5em;
    font-size: 2.3rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.sm-pagina h2 {
    margin: 1.8em 0 .6em;
    font-size: 1.4rem;
    line-height: 1.3;
}

.sm-pagina h3 {
    margin: 1.6em 0 .5em;
    font-family: var(--sm-schreefloos);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sm-inkt);
}

.sm-pagina p {
    margin: 0 0 1em;
}

.sm-pagina ul,
.sm-pagina ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
}

.sm-pagina li {
    margin-bottom: .5em;
}

.sm-pagina li::marker {
    color: var(--sm-grijs-licht);
}

.sm-pagina strong,
.sm-pagina b {
    font-weight: 500;
}

/* Links in de lopende tekst; knoppen en dergelijke hebben een klasse. */
.sm-pagina a:not([class]) {
    color: var(--sm-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sm-pagina a:not([class]):hover {
    color: var(--sm-accent-donker);
}

.sm-pagina img {
    max-width: 100%;
    height: auto;
}

.sm-pagina a:focus-visible,
.sm-pagina button:focus-visible,
.sm-pagina summary:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
}

/* De eerste alinea onder de titel, iets groter en grijzer. */
.sm-aanhef {
    max-width: 62ch;
    font-size: 1.1rem;
    color: var(--sm-grijs);
}

.sm-kleine-letters {
    font-size: .88rem;
    color: var(--sm-grijs);
}

/* Terug naar waar de lezer vandaan kwam, boven het etiket. */
.sm-terug {
    display: inline-block;
    margin-bottom: 22px;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-accent);
    text-decoration: none;
}

.sm-terug:hover {
    color: var(--sm-accent-donker);
    text-decoration: none;
}

/* De knop van de zoekschermen (.zk-knop klein), voor tekstpagina's. */
.sm-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 22px;
    border: 1px solid var(--sm-accent);
    border-radius: 0;
    background: var(--sm-accent);
    color: var(--sm-wit);
    font-family: var(--sm-schreefloos);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sm-knop:hover {
    background: var(--sm-accent-donker);
    border-color: var(--sm-accent-donker);
    color: var(--sm-wit);
    text-decoration: none;
}

.sm-knop.leeg {
    background: transparent;
    color: var(--sm-accent);
}

.sm-knop.leeg:hover {
    background: var(--sm-accent);
    color: var(--sm-wit);
}

.sm-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.4em;
}

/* Een melding of aanbod: een streep in de accentkleur, geen schaduw. */
.sm-melding {
    margin: 1.6em 0;
    padding: 20px 24px;
    border-left: 2px solid var(--sm-accent);
    background: var(--sm-papier);
}

.sm-melding > :last-child {
    margin-bottom: 0;
}

.sm-melding h2,
.sm-melding h3 {
    margin: 0 0 .4em;
    font-family: var(--sm-schreef);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sm-accent);
}

/* Een lijst om naar een andere pagina te gaan, zoals het overzicht van de
   beroepsgroepen van Tuchtrecht: een regel per pagina, dunne lijnen ertussen,
   rechts een afkorting en een pijl. */
.sm-wegwijzer {
    list-style: none;
    margin: 1.4em 0 0;
    padding: 0;
    border-top: 1px solid var(--sm-lijn);
}

.sm-wegwijzer li {
    margin: 0;
    border-bottom: 1px solid var(--sm-lijn);
}

/* .sm-pagina ervoor: anders wint de regel voor links in de lopende tekst */
.sm-pagina .sm-wegwijzer a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 4px;
    font-family: var(--sm-schreef);
    font-size: 1.15rem;
    color: var(--sm-inkt);
    text-decoration: none;
}

.sm-pagina .sm-wegwijzer a::after {
    content: "\2192";
    font-family: var(--sm-schreefloos);
    color: var(--sm-accent);
}

.sm-pagina .sm-wegwijzer a:hover {
    color: var(--sm-accent);
    text-decoration: none;
}

.sm-wegwijzer-code {
    margin-left: auto;
    font-family: var(--sm-schreefloos);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

/* Twee (of meer) keuzes naast elkaar, zoals op het zoekmenu van WWFT: een blok
   per keuze met een dubbele lijn bovenaan, zoals het zoekpaneel; geen schaduw. */
.sm-keuzes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 1.4em;
}

.sm-keuze {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px 20px;
    border: 1px solid var(--sm-lijn);
    border-top: 4px double var(--sm-inkt);
    background: var(--sm-wit);
    color: var(--sm-inkt);
    text-decoration: none;
    transition: border-color .15s ease;
}

.sm-keuze:hover {
    border-color: var(--sm-accent);
    color: var(--sm-inkt);
    text-decoration: none;
}

.sm-keuze:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
}

.sm-keuze-titel {
    font-family: var(--sm-schreef);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sm-accent);
}

.sm-keuze-titel::after {
    content: "\00a0\2192";
    font-family: var(--sm-schreefloos);
    font-weight: 400;
}

.sm-keuze-tekst {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--sm-grijs);
}

/* Gegevens bij een uitspraak, zoals boven de redactionele noot: links het
   etiket in kleine kapitalen, rechts de waarde, met dunne lijnen ertussen;
   op de telefoon onder elkaar. */
.sm-gegevens {
    margin: 1.6em 0 2.2em;
    border-top: 1px solid var(--sm-lijn);
}

.sm-gegevens > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sm-lijn);
}

.sm-gegevens dt {
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

.sm-gegevens dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .sm-gegevens > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Een persoon met foto, zoals de redactie van Tuchtrecht: de foto links in
   een staand kader met een dunne lijn, naam en tekst ernaast, en een lijn
   tussen twee personen; op de telefoon de foto erboven. Zoals de
   auteurskaarten op iustitiascripta.com. */
.sm-persoon {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 2.4em;
}

.sm-persoon + .sm-persoon {
    padding-top: 2.4em;
    border-top: 1px solid var(--sm-lijn);
}

.sm-pagina .sm-persoon img {
    display: block;
    width: 140px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--sm-lijn);
}

.sm-persoon h2 {
    margin-top: 0;
}

@media (max-width: 520px) {
    .sm-persoon {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sm-pagina .sm-persoon img {
        width: 120px;
    }
}

/* Een korte lijst in twee kolommen, zoals de onderdelen van een redactionele
   bijdrage op de overzichtpagina's. */
.sm-kolommen {
    columns: 2;
    column-gap: 32px;
}

.sm-pagina .sm-kolommen li {
    break-inside: avoid;
}

@media (max-width: 620px) {
    .sm-kolommen {
        columns: 1;
    }
}

/* Een citaat, duidelijk anders dan de lopende tekst: cursief in Georgia, met
   een streep in de accentkleur op een licht vlak, en de bron eronder in kleine
   kapitalen. Zoals blockquote op iustitiascripta.com, maar als losstaand blok.
   Eerst gebruikt voor het citaat van De Pinto op de homepage van Staatsbladen. */
.sm-citaat {
    margin: 2.4em 0 1.6em;
    padding: 26px 30px 24px;
    border-left: 3px solid var(--sm-accent);
    background: var(--sm-papier);
}

.sm-citaat blockquote {
    margin: 0;
}

/* 1.05rem sinds 7 oktober 2026 (was 1.18rem): op verzoek iets kleiner. */
.sm-citaat blockquote p {
    margin: 0;
    font-family: var(--sm-schreef);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
    color: var(--sm-inkt);
    text-wrap: pretty;
}

.sm-citaat figcaption {
    margin-top: 14px;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

.sm-citaat figcaption::before {
    content: "\2014\00a0";
}

@media (max-width: 620px) {
    .sm-citaat {
        padding: 20px 18px 18px;
    }

    .sm-citaat blockquote p {
        font-size: 1rem;
    }
}

/* Wat er misging, op de foutpagina; alleen voor beheerders (7 oktober 2026). */
.sm-foutdetail {
    margin: 6px 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--sm-lijn);
    background: var(--sm-wit);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Vragen die openklappen, zoals op de helpdesk. Een <details> per vraag:
   werkt zonder JavaScript en met het toetsenbord. */
.sm-uitklap {
    border-top: 1px solid var(--sm-lijn);
}

.sm-uitklap:last-of-type {
    border-bottom: 1px solid var(--sm-lijn);
}

.sm-uitklap summary {
    position: relative;
    display: block;
    padding: 16px 36px 16px 0;
    list-style: none;
    font-weight: 400;
    color: var(--sm-inkt);
    cursor: pointer;
}

.sm-uitklap summary::-webkit-details-marker {
    display: none;
}

.sm-uitklap summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--sm-accent);
    border-bottom: 1.5px solid var(--sm-accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .15s ease;
}

.sm-uitklap[open] summary::after {
    transform: translateY(-20%) rotate(-135deg);
}

.sm-uitklap summary:hover {
    color: var(--sm-accent);
}

.sm-uitklap-inhoud {
    padding: 0 0 18px;
}

.sm-uitklap-inhoud > :last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sm-uitklap summary::after {
        transition: none;
    }
}

/* Video's, zoals de demonstraties op de helpdesk. */
.sm-video {
    margin: 0 0 1.6em;
}

.sm-video video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sm-lijn);
    background: var(--sm-papier);
}

@media (max-width: 620px) {
    .sm-pagina {
        padding-top: 32px;
        padding-bottom: 56px;
        font-size: 16px;
    }

    .sm-pagina h1 {
        font-size: 1.85rem;
    }

    .sm-pagina h2 {
        font-size: 1.25rem;
    }
}