/* ---------------------------------------------------------------------------
   De thuispagina's van de vier sites

   Hiervoor bestond dit vier keer: staatsbladen/home.css, tuchtrecht/home.css,
   voorouders/home.css en wwft/home.css. De eerste drie waren bijna letterlijke
   kopieën van elkaar — tachtig regels, met als enig verschil één regel bij
   Tuchtrecht — en de vierde een uitgeklede versie. Vier bestanden onderhouden
   voor één opmaak is drie kansen te veel om ze uit elkaar te laten lopen, en
   dat was bij de abonnementskaart al gebeurd.

   Nu één bestand. Wat per site verschilt zit in de inhoud en in de
   afbeeldingen, niet in de opmaak.

   Twee dingen die bij het samenvoegen zijn rechtgezet:

   - De lopende tekst stond op text-align: justify. Een browser breekt geen
     woorden af, dus uitvullen levert witte rivieren door de kolom op. Geen
     van beide uitgeverijsites doet dat; die zetten alles links uitgelijnd.
   - De links in de lopende tekst waren alleen op Tuchtrecht onderstreept.
     Nu overal, want in een lopende tekst hoort een verwijzing herkenbaar te
     zijn zonder dat je er met de muis overheen moet.
   --------------------------------------------------------------------------- */

.desktop-content-container {
    display: flex;
    justify-content: center;
}

.content-wrap {
    max-width: 750px;
    padding: 0 20px;
}

/* In een lopende tekst hoort een verwijzing zichtbaar te zijn. Buiten de
   tekstkolom geldt de gewone regel uit main.css: pas onderstrepen bij
   aanwijzen. Links met een klasse zijn knoppen (zoals .sm-knop in het blok
   "Probeer gratis") en blijven zonder streep. */
.content-wrap a:not([class]) {
    text-decoration: underline;
}

.content-wrap p {
    line-height: 1.75;
}

.img-book {
    width: 250px;
}

.para-last {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    text-align: left;
    color: var(--sm-grijs);
}

.bottom-brands img {
    max-height: 80px;
}

@media screen and (max-width: 768px) {
    .bottom-brands img {
        max-width: 130px;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   De nieuwsberichten op een thuispagina

   Die staan niet in het sjabloon maar in één veld met HTML, dat via TinyMCE
   in het CMS wordt bewerkt. Er is geen bericht als record, geen datum als
   veld en geen titel als veld; het is letterlijk één document. Daardoor liep
   alles aan elkaar: twaalf berichten onder elkaar met als enige markering een
   cursief regeltje "Geplaatst op ...".

   De opbouw bleek wel consequent: steeds <p><em>Geplaatst op ...</em></p>
   gevolgd door een <h3>. Daar is met :has() precies op te mikken, zonder het
   sjabloon of de inhoud aan te raken. De datum wordt een bovenregel in kleine
   kapitalen met een scheidingslijn erboven, zoals de berichten op
   iustitiascripta.com, en de kop erna krijgt Georgia in de accentkleur.

   Browsers die :has() niet kennen negeren deze regels; dan ziet het eruit
   zoals voorheen. Nooit stuk, hooguit ouderwets.

   De echte oplossing is een nieuwsbericht een record maken met een eigen
   datum en titel. Dat is een klus apart; dit maakt het leesbaar in de
   tussentijd.
   --------------------------------------------------------------------------- */

.content-wrap p:has(> em:only-child):has(+ h3) {
    margin: 40px 0 8px;
    padding-top: 28px;
    border-top: 1px solid var(--sm-lijn);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sm-grijs-licht);
}

.content-wrap p:has(> em:only-child):has(+ h3) em {
    font-style: normal;
}

/* Het eerste bericht hoeft geen lijn boven zich: daar staat de foto al. */
.content-wrap > div + p:has(> em:only-child):has(+ h3) {
    border-top: none;
    padding-top: 0;
    margin-top: 28px;
}

.content-wrap p:has(> em:only-child):has(+ h3) + h3 {
    margin: 0 0 14px;
    font-family: var(--sm-schreef);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.3;
    color: var(--sm-accent);
}

.content-wrap h4 {
    font-family: var(--sm-schreef);
    font-weight: 400;
    color: var(--sm-accent);
}

/* ---------------------------------------------------------------------------
   De homepages in de huisstijl (7 oktober 2026)

   Een tekstpagina (.sm-pagina) zoals de homepage van iustitiascripta.com:
   bovenaan een opening met etiket, titel en knoppen, daaronder de tekst uit
   het beheer (.sm-cms). Die tekst blijft in het beheer zoals hij is; hier
   wordt alleen bepaald hoe hij eruitziet. De regels voor .content-wrap
   hierboven gelden nog voor Voorouders.online, dat later aan de beurt is.

   De tekst komt uit de editor in het beheer en is deels overgenomen van de
   oude Wix-site. Daardoor staan er losse uitlijningen en lettergroottes in
   (text-align: center, font-size: 14pt). Die worden hier genegeerd, met
   !important, want inline-opmaak gaat anders altijd voor. En de koppen zijn
   op drie manieren gemaakt: een gecentreerde h3 (Tuchtrecht), een
   gecentreerde h2 (WWFT) en een alinea in 14 punt (Staatsbladen). Alle drie
   worden ze dezelfde sectiekop.
   --------------------------------------------------------------------------- */

.sm-home-opening {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--sm-lijn);
}

.sm-home-opening h1 {
    margin-bottom: .35em;
}

.sm-home-opening .sm-aanhef {
    margin-bottom: 0;
}

.sm-home-opening .sm-knoppen {
    margin-top: 1.2em;
}

/* De inhoudsopgave (17 oktober 2026): knoppen naar de kopjes van de pagina, en rechtsonder een
   knop terug naar deze opgave zodra die uit beeld is (Inhoudsopgave, pages/staatsbladen/home.html). */
.sm-inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: -10px 0 30px;
}

.sm-inhoud-kop {
    margin-right: 4px;
    font-family: var(--sm-schreefloos);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

.sm-inhoud a {
    padding: 5px 12px;
    border: 1px solid var(--sm-lijn);
    border-radius: 999px;
    font-family: var(--sm-schreefloos);
    font-size: .85rem;
    color: var(--sm-accent);
    text-decoration: none;
    white-space: nowrap;
}

.sm-inhoud a:hover,
.sm-inhoud a:focus-visible {
    border-color: var(--sm-accent);
    background: var(--sm-accent);
    color: var(--sm-wit);
}

/* Een kopje waar de inhoudsopgave heen springt, staat niet tegen de rand van het venster. */
.sm-cms h2[id],
.zoekuitleg h2,
.sm-inhoud {
    scroll-margin-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.sm-inhoud) {
        scroll-behavior: smooth;
    }
}

.sm-naar-boven {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sm-accent);
    color: var(--sm-wit);
    font-size: 1.3rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}

.sm-naar-boven.zichtbaar {
    opacity: 1;
    visibility: visible;
}

.sm-naar-boven:hover,
.sm-naar-boven:focus-visible {
    background: var(--sm-accent-donker);
    color: var(--sm-wit);
}

/* Op de telefoon één rij die opzij schuift, zodat de opgave niet acht regels hoog wordt. */
@media (max-width: 620px) {
    .sm-inhoud {
        flex-wrap: nowrap;
        gap: 6px;
        margin-right: -16px;
        padding-right: 16px;
        padding-bottom: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sm-inhoud::-webkit-scrollbar { display: none; }
    .sm-inhoud-kop { align-self: center; flex: none; }
    .sm-inhoud a { flex: none; padding: 4px 10px; font-size: .8rem; }
    .sm-naar-boven { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* Een sectiekop in het sjabloon zelf, zoals "Wat biedt Tuchtrecht.online?". */
.sm-pagina .sm-home-sectie {
    margin-top: 2.2em;
    padding-top: .9em;
    border-top: 1px solid var(--sm-lijn);
}

.sm-cms [style*="text-align"],
.sm-cms .text-center {
    text-align: left !important;
}

.sm-cms [style*="font-size"] {
    font-size: inherit !important;
}

/* Links in de tekst, ook die met een klasse van de oude Wix-site
   (class="wixui-rich-text__text"). Die vielen buiten .sm-pagina
   a:not([class]) en hadden dus de kleur van de tekst, zonder streep
   eronder (main.css); tot 7 oktober 2026 niet als link te herkennen. */
.sm-cms a {
    color: var(--sm-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sm-cms a:hover {
    color: var(--sm-accent-donker);
}

/* De sectiekoppen, hoe ze in het beheer ook gemaakt zijn. */
.sm-cms h2,
.sm-cms h3[style*="text-align"],
.sm-cms p:has(> span[style*="font-size"]) {
    margin: 2.2em 0 .6em;
    padding-top: .9em;
    border-top: 1px solid var(--sm-lijn);
    font-family: var(--sm-schreef);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sm-accent);
}

.sm-cms > :first-child,
.sm-cms > h2:first-child,
.sm-cms > p:first-child:has(> span[style*="font-size"]) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Overige koppen in de tekst, zoals de titels van de nieuwsberichten. */
.sm-cms h3:not([style*="text-align"]),
.sm-cms h4 {
    margin: 1.6em 0 .5em;
    font-family: var(--sm-schreef);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sm-accent);
}

/* "Geplaatst op ..." boven een nieuwsbericht: steeds <p><em>...</em></p>
   gevolgd door een <h3>. Een bovenregel in kleine kapitalen met een lijn
   erboven, zoals boven een artikel op iustitiascripta.com. */
.sm-cms p:has(> em:only-child):has(+ h3) {
    margin: 2em 0 .3em;
    padding-top: 1.4em;
    border-top: 1px solid var(--sm-lijn);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-grijs);
}

.sm-cms p:has(> em:only-child):has(+ h3) em {
    font-style: normal;
}

/* Direct onder een sectiekop geen tweede lijn. */
.sm-cms h3[style*="text-align"] + p:has(> em:only-child),
.sm-cms h2 + p:has(> em:only-child) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sm-cms p:has(> em:only-child):has(+ h3) + h3 {
    margin-top: 0;
}

/* De logo's onder de tekst van Staatsbladen ("wordt onder meer gebruikt
   door:"): in kleur, op één hoogte. */
.sm-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 44px;
    margin: .6em 0 2.6em;
}

.sm-logos img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 54px;
    object-fit: contain;
}

/* De boeken op de homepage van WWFT, zoals een boek op iustitiascripta.com:
   bovenaan de omslag met titel, ondertitel en knoppen ernaast, daaronder de
   gegevens over de volle breedte van de kolom (de lange teksten, zoals de
   inhoud, lezen dan als gewone alinea's). */
.sm-boek {
    margin-top: 1.6em;
}

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

.sm-boek-kop {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 28px;
    align-items: end;
}

.sm-pagina .sm-boek img {
    display: block;
    width: 150px;
    height: auto;
    border: 1px solid var(--sm-lijn);
}

.sm-pagina .sm-boek h3 {
    margin: 0 0 .15em;
    font-family: var(--sm-schreef);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sm-accent);
}

.sm-boek-ondertitel {
    margin: 0 0 .4em;
    color: var(--sm-grijs);
}

.sm-boek .sm-gegevens {
    margin: 1.4em 0 0;
}

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

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

    .sm-logos img {
        height: 44px;
    }
}

/* "Zo zoekt u in de Staatsbladen" (7 oktober 2026): een rustig blok in de
   tekstkolom, met de dubbele lijn van de zoekschermen erboven. */
.zoekuitleg {
    /* onder de logo's, die al ruimte onder zich hebben; ruimte voor het beeld eronder */
    margin: 8px 0 48px;
    border-top: 4px double var(--sm-inkt);
    padding-top: 18px;
}

.zoekuitleg h2 {
    font-family: var(--sm-schreef);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--sm-accent);
    margin: 0 0 .5em;
}

.zoekuitleg dl {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 10px 24px;
    margin: 18px 0;
}

.zoekuitleg dt {
    font-size: .74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sm-grijs);
    padding-top: .25em;
}

.zoekuitleg dd {
    margin: 0;
    line-height: 1.7;
}

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

@media (max-width: 620px) {
    .zoekuitleg dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .zoekuitleg dd { margin-bottom: 12px; }
}

/* De aantallen per beroepsgroep op de thuispagina van Tuchtrecht (8 oktober 2026). */
.sm-pagina .sm-aantallen {
    border-collapse: collapse;
    margin: .4em 0 1.2em;
}
.sm-pagina .sm-aantallen th,
.sm-pagina .sm-aantallen td {
    padding: .3em 1.6em .3em 0;
    border-bottom: 1px solid var(--sm-lijn);
    text-align: left;
    font-weight: normal;
}
.sm-pagina .sm-aantallen td {
    text-align: right;
    padding-right: 0;
    font-variant-numeric: tabular-nums;
}

/* Een afbeelding in de tekst van een homepage (editor: knop Afbeelding; 14 oktober 2026). */
.sm-cms img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rule, #ddd);
    margin: 1em 0;
}