/* ---------------------------------------------------------------------------
   De kop van alle pagina's (7 oktober 2026)

   Gelijk aan de kop van de hoofdpagina scripta.media, en net als die van
   variascripta.nl en iustitiascripta.com opgezet als titelpagina: woordmerk
   en leus op één regel, een dunne lijn, en daaronder het menu in kleine
   kapitalen. Geen afbeeldingen, geen pictogrammen, geen schaduw.

   Vervangt shared/header.css (de vier sites) en landing-header.css (de
   platformpagina's). Daar stonden drie losse afbeeldingen in de kop - het
   scripta.media-logo met slagschaduw, het logo van de site, pictogramknoppen
   - en op de telefoon een hamburgermenu met Font Awesome, een schaduw en
   "Logout". De knop was een div met een klikfunctie: niet met het
   toetsenbord te bedienen, en voor schermlezers geen knop.

   Op een smal scherm (tot 860 px, zoals Iustitia) krijgen de koppen met een
   menu (.met-menu) een knop "Menu" in de stijl van de knop "Winkelmand" op
   iustitiascripta.com. Die opent het menu onder de kop en duwt de pagina
   omlaag. De hoofdpagina zelf heeft geen .met-menu en houdt haar eigen
   gedrag (zie landing.css).
   --------------------------------------------------------------------------- */

.sm-kop {
    background: var(--sm-papier);
    font-family: var(--sm-schreefloos);
    color: var(--sm-inkt);
}

.sm-kop a {
    text-decoration: none;
}

/* De tekstbreedte van het platform: 1120 px met 24 px zijmarge, op elk
   scherm, zoals .omhulsel op variascripta.nl en iustitiascripta.com. Ook
   gebruikt door de voet en de hoofdpagina. */
.sm-breed {
    max-width: var(--sm-breedte);
    margin: 0 auto;
    padding: 0 24px;
}

.sm-kop-balk {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 26px;
    padding-bottom: 22px;
}

/* Het woordmerk, met erboven klein de naam van het platform. */
.sm-merk {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sm-merk-boven {
    justify-self: start;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--sm-grijs-licht);
}

.sm-merk-boven:hover {
    color: var(--sm-accent);
}

.sm-woordmerk {
    font-family: var(--sm-schreef);
    font-size: 27px;
    line-height: 1.15;
    color: var(--sm-accent);
    white-space: nowrap;
}

.sm-woordmerk .punt {
    color: var(--sm-grijs-licht);
}

/* Ook op de hoofdpagina: daar gaf .landing-v2 a (color: inherit) het
   woordmerk de inktkleur, terwijl landing.css de accentkleur bedoelde. */
.sm-kop a.sm-woordmerk {
    color: var(--sm-accent);
}

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

.sm-kop-streep {
    flex: none;
    width: 1px;
    height: 34px;
    background: var(--sm-lijn);
}

.sm-kop-zin {
    flex-grow: 1;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sm-grijs);
}

.sm-kop-knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Een beheerder heeft drie knoppen. Tussen telefoon en breed scherm is
   daarvoor naast de leus geen plaats: dan wijkt de leus, in plaats van dat
   de knoppen over twee regels breken. */
@media (max-width: 1080px) {
    .sm-kop-balk:has(.sm-kop-knoppen > :nth-child(3)) > .sm-kop-streep,
    .sm-kop-balk:has(.sm-kop-knoppen > :nth-child(3)) > .sm-kop-zin {
        display: none;
    }
}

/* De knop met een rand: hetzelfde als op de hoofdpagina, nu met rechte hoeken. */
.sm-knop-rand {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--sm-rand);
    border-radius: 0;
    background: transparent;
    font-family: var(--sm-schreefloos);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #5b554b;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

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

.sm-knop-rand[aria-current="page"] {
    border-color: var(--sm-accent);
    color: var(--sm-accent);
}

.sm-lijn {
    height: 1px;
    background: var(--sm-lijn);
}

.sm-menubalk {
    background: var(--sm-papier);
    border-bottom: 1px solid var(--sm-lijn);
}

.sm-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.sm-menu a {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    color: var(--sm-grijs);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
}

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

.sm-menu a[aria-current="page"],
.sm-menu a.hier {
    color: var(--sm-accent);
    border-bottom-color: var(--sm-accent);
}

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

/* Alleen op de telefoon: de knop "Menu" en de knoppen onder het menu. */
.sm-menuknop,
.sm-menu-account {
    display: none;
}

.sm-menuknop {
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--sm-rand);
    border-radius: 0;
    background: var(--sm-wit);
    font-family: var(--sm-schreefloos);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 1.75px;
    text-transform: uppercase;
    color: var(--sm-inkt);
    cursor: pointer;
}

.sm-menuknop:hover,
.sm-menuknop[aria-expanded="true"] {
    border-color: var(--sm-accent);
    color: var(--sm-accent);
}

.sm-streepjes {
    display: grid;
    gap: 3px;
    width: 16px;
}

.sm-streepjes i {
    display: block;
    height: 1.5px;
    background: currentColor;
}

@media (max-width: 860px) {
    .sm-kop.met-menu .sm-kop-balk {
        justify-content: space-between;
        gap: 12px;
        padding-top: 18px;
        padding-bottom: 16px;
    }

    .sm-kop.met-menu .sm-kop-streep,
    .sm-kop.met-menu .sm-kop-zin,
    .sm-kop.met-menu .sm-kop-knoppen {
        display: none;
    }

    .sm-kop.met-menu .sm-woordmerk {
        font-size: clamp(19px, 5.6vw, 23px);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sm-kop.met-menu .sm-menuknop {
        display: inline-flex;
    }

    /* Het menu als lijst onder elkaar. Zonder JavaScript blijft het gewoon
       zichtbaar; met JavaScript (de klasse sm-js op html, zie head.html)
       gaat het dicht tot iemand op "Menu" drukt. */
    .sm-js .sm-kop.met-menu .sm-menubalk {
        display: none;
    }

    .sm-js .sm-kop.met-menu .sm-menubalk.open {
        display: block;
    }

    /* alleen boven en onder: de zijmarge komt van .sm-breed */
    .sm-kop.met-menu .sm-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sm-kop.met-menu .sm-menu a {
        display: block;
        padding: 13px 0;
        font-size: 12px;
        border-bottom: 1px solid var(--sm-lijn-fijn);
    }

    .sm-kop.met-menu .sm-menu a[aria-current="page"] {
        padding-left: 12px;
        border-bottom-color: var(--sm-lijn-fijn);
        border-left: 2px solid var(--sm-accent);
    }

    .sm-kop.met-menu .sm-menu-account {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 16px;
        padding-bottom: 18px;
    }
}