/* bramluiken.nl - de gedeelde basis.
   Hier staat wat op elke pagina hetzelfde is: de kleuren, de typografie, de
   kopbalk, de voettekst, de lopende tekst en het beheer. Een sectie laadt dit
   en zet er zijn eigen stylesheet bovenop; die mag de tokens hieronder
   gebruiken maar hoort ze niet te herdefinieren.

   Zustersite van bramluiken.org: dezelfde bouw, een eigen palet. Daar is het
   papier, hier is het kalk en inkt. */

:root {
    --paper:        #f7f7f4;
    --paper-raised: #ffffff;
    --ink:          #17181a;
    --ink-soft:     #4e5157;
    --ink-faint:    #85888f;
    --rule:         #e0e0dc;
    --rule-strong:  #c6c6c1;
    --accent:       #2f4858;
    --accent-soft:  #e6ecef;
    --waarschuwing: #8c3b2e;

    /* De statuscodes in het beheer, één paar per klasse: inkt en het vlak
       eronder. Gedempt gehouden - het zijn er veel op één scherm, en dit blijft
       kalk en inkt met één accentkleur. De 3xx leent die accentkleur en de 4xx
       de waarschuwingskleur, zodat er geen vijfde kleur bij hoeft. */
    --status-2xx:      #38614a;
    --status-2xx-soft: #e3ede7;
    --status-3xx:      #2f4858;
    --status-3xx-soft: #e6ecef;
    --status-4xx:      #8c3b2e;
    --status-4xx-soft: #f3e5e1;
    --status-5xx:      #6b2334;
    --status-5xx-soft: #f0e0e3;

    --shadow:       0 1px 2px rgba(23, 24, 26, 0.04), 0 8px 24px -12px rgba(23, 24, 26, 0.18);
    --shadow-lift:  0 2px 4px rgba(23, 24, 26, 0.05), 0 18px 40px -18px rgba(23, 24, 26, 0.28);

    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
    --sans:  ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --measure: 36rem;
    --wide: 58rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #121316;
        --paper-raised: #1a1c20;
        --ink:          #e8e8e4;
        --ink-soft:     #a9adb4;
        --ink-faint:    #7c8087;
        --rule:         #2a2c31;
        --rule-strong:  #3d4046;
        --accent:       #8fb4c9;
        --accent-soft:  #1e262c;
        --waarschuwing: #d9856f;

        --status-2xx:      #8fc0a1;
        --status-2xx-soft: #1a231e;
        --status-3xx:      #8fb4c9;
        --status-3xx-soft: #1e262c;
        --status-4xx:      #d9856f;
        --status-4xx-soft: #2a1f1c;
        --status-5xx:      #dd8b98;
        --status-5xx-soft: #291b1f;
        --shadow:       0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
        --shadow-lift:  0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    }
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: inherit;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--paper-raised);
    color: var(--ink);
    padding: 0.6rem 1rem;
    border: 1px solid var(--rule-strong);
    z-index: 10;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

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

/* -- Kopbalk ------------------------------------------------------------- */

.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 2rem;
    max-width: var(--wide);
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.merk {
    display: block;
    width: 26px;
    height: 26px;
}

/* -- De pagina ----------------------------------------------------------- */

.page {
    flex: 1;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

/* Ook als <h1>, want op de homepage is dit regeltje de kop: zie heroKop() in
   src/server.js. Vandaar font-weight en font-size expliciet - anders zet de
   browser er zijn eigen h1-formaat op. */
.eyebrow {
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.85rem;
}

.eyebrow:empty {
    display: none;
}

.hero {
    max-width: var(--measure);
    margin-bottom: 4rem;
}

.hero-title {
    font-size: clamp(2.1rem, 6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.hero-lead p + p {
    margin-top: 1rem;
}

.hero-lead:empty {
    display: none;
}

.section-heading {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    padding-bottom: 0.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
}

/* -- Sectiekaarten op de homepage ---------------------------------------- */

.sectie-kaarten {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.sectie-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.6rem 1.5rem 1.4rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.sectie-kaart:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.sectie-kaart-naam {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sectie-kaart-regel {
    color: var(--ink-soft);
}

.sectie-kaart-meta {
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.sectie-kaart-meer {
    margin-top: 0.75rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.arrow {
    font-family: var(--sans);
}

/* -- Lopende tekst ------------------------------------------------------- */

.prose {
    max-width: var(--measure);
    font-size: 1.09rem;
}

.prose > * + * {
    margin-top: 1.15rem;
}

.prose h2 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 2.5rem;
    scroll-margin-top: 1.5rem;
}

.prose h3 {
    font-size: 1.12rem;
    font-weight: 600;
    margin-top: 2rem;
    scroll-margin-top: 1.5rem;
}

.prose ul,
.prose ol {
    padding-left: 1.3rem;
}

.prose li + li {
    margin-top: 0.4rem;
}

.prose blockquote {
    padding-left: 1.1rem;
    border-left: 2px solid var(--rule-strong);
    color: var(--ink-soft);
    font-style: italic;
}

.prose code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--accent-soft);
    padding: 0.1em 0.35em;
    border-radius: 2px;
}

.prose pre {
    overflow-x: auto;
    padding: 1rem;
    background: var(--accent-soft);
    border-radius: 3px;
}

.prose pre code {
    background: none;
    padding: 0;
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

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

/* -- Media --------------------------------------------------------------- */
/*
   Een ![...](/media/...) in de markdown wordt een <img>, <video> of <audio>,
   en staat het alleen in zijn alinea dan zit het in een <figure> met de tekst
   tussen de haakjes als onderschrift. Zie dot-shared/markdown.js.

   Daarom twee lagen opmaak: `.media` geldt ook voor een beeld midden in een
   zin en houdt zich dus in, en `.media-figuur .media` mag het blok vullen.
*/

.media {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.media-figuur {
    margin: 2rem 0;
}

.media-figuur .media {
    display: block;
    border-radius: 3px;
}

/* Video vult de kolom; een foto blijft op zijn eigen maat, want opgerekt is
   hij alleen maar waziger dan hij was. */
.media-figuur .media-video,
.media-figuur .media-muziek {
    width: 100%;
}

.media-video {
    background: #000;
}

.media-muziek {
    height: 2.75rem;
}

.media-figuur figcaption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* -- Voettekst ----------------------------------------------------------- */

.site-footer {
    max-width: var(--wide);
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.footer-name {
    color: var(--ink);
    font-size: 1.05rem;
}

.footer-line,
.footer-contact,
.footer-zakelijk {
    margin-top: 0.3rem;
}

.footer-meta {
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
}

/* -- Concept en beheerbalk ----------------------------------------------- */

.beheerbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1.5rem;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--rule-strong);
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.beheerbalk-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.beheerbalk button {
    font: inherit;
    color: var(--ink-soft);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.concept-vlag {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.05rem 0.45rem;
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--waarschuwing);
    border: 1px solid currentColor;
    border-radius: 2px;
    vertical-align: 0.15em;
}

.concept-melding {
    margin-bottom: 1.75rem;
    padding: 0.7rem 1rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--waarschuwing);
    font-family: var(--sans);
    font-size: 0.86rem;
    color: var(--ink-soft);
}

/* -- Beheer -------------------------------------------------------------- */

body.beheer {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.6;
}

.beheer-kop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    max-width: var(--wide);
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.beheer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.85rem;
}

.beheer-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.beheer-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--rule-strong);
}

.beheer-uitloggen {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.beheer-inhoud {
    flex: 1;
    width: 100%;
    max-width: var(--wide);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.beheer-titel {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

.beheer-kopje {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.beheer-inleiding {
    max-width: var(--measure);
    color: var(--ink-soft);
    margin-bottom: 1.75rem;
}

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

.beheer-kaarten {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.beheer-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.beheer-kaart:hover {
    box-shadow: var(--shadow-lift);
}

.beheer-kaart-naam {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.beheer-kaart-regel {
    color: var(--ink-soft);
}

.beheer-kaart-adres {
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.beheer-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.beheer-tabel th,
.beheer-tabel td {
    text-align: left;
    padding: 0.6rem 0.75rem 0.6rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.beheer-tabel th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
}

.beheer-tabel .getal {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Een user-agent is een lange, onhandige tekenreeks. Die tonen we heel, want
   afkappen is ook een aanname over wat er niet toe doet. */
.beheer-tabel .ua {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: break-word;
    max-width: 34rem;
}

.beheer-tabel .ua-leeg {
    font-family: var(--sans);
    color: var(--ink-faint);
}

.kolom-actie {
    text-align: right;
}

.rij-adres {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.beheer-subkopje {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    margin: 1.75rem 0 0.75rem;
}

/* Twee chips met dezelfde vorm: een signaal (bij een adres) en het antwoord dat
   een pad de laatste keer gaf. De vorm staat één keer, de kleur verschilt. */
.signaal,
.antwoord {
    font-family: var(--mono);
    font-size: 0.8rem;
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
}

.signaal {
    background: var(--accent-soft);
}

/* De klasse is het eerste cijfer, dus een code die hier nog nooit langskwam
   krijgt vanzelf de kleur van zijn soort. */
.antwoord-2xx { color: var(--status-2xx); background: var(--status-2xx-soft); }
.antwoord-3xx { color: var(--status-3xx); background: var(--status-3xx-soft); }
.antwoord-4xx { color: var(--status-4xx); background: var(--status-4xx-soft); }
.antwoord-5xx { color: var(--status-5xx); background: var(--status-5xx-soft); }

/* -- Het mediascherm ----------------------------------------------------- */

.media-tabel td {
    vertical-align: middle;
}

.media-voorbeeld {
    width: 4rem;
}

/* Een vaste maat, zodat de rijen even hoog blijven bij portret naast landschap.
   `cover` snijdt daarvoor bij: dit is een herkenningsplaatje en geen weergave. */
.media-thumb {
    display: block;
    width: 4rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 2px;
    background: var(--accent-soft);
}

.media-soort {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--accent-soft);
    padding: 0.6rem 0.4rem;
    border-radius: 2px;
}

/* `user-select: all` selecteert de hele regel in één klik: dit is er om te
   kopiëren, niet om in te lezen. */
.media-snippet {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
    user-select: all;
}

.status-live,
.status-concept {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-live {
    color: var(--accent);
}

.status-concept {
    color: var(--waarschuwing);
}

/* -- Formulieren --------------------------------------------------------- */

.beheer-form {
    max-width: 44rem;
}

.veld-groep {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.veld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.veld-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.veld-uitleg {
    font-size: 0.8rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

.veld input[type='text'],
.veld input[type='url'],
.veld input[type='date'],
.veld input[type='file'],
.veld input[type='password'],
.veld select,
.veld textarea {
    font: inherit;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.55rem 0.7rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
}

.veld textarea {
    font-family: var(--mono);
    font-size: 0.88rem;
    line-height: 1.6;
    resize: vertical;
}

.veld-vink {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    align-items: center;
}

.veld-vink input {
    grid-row: span 2;
}

.beheer-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.beheer-acties {
    margin-bottom: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.knop {
    display: inline-block;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 1.2rem;
    color: var(--paper-raised);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
}

.knop:hover {
    filter: brightness(1.12);
}

/* Een knop uit de markdown ([knop: ...] in dot-shared/markdown.js) staat in
   lopende tekst, en daar gelden andere regels dan in het beheer.

   Vandaar dat dit op de prozacontainers staat en niet kaal op `a.knop`: het
   beheer gebruikt dezelfde klasse en hoort hier niets van te merken. Dit zijn
   de twee plekken waar markdown landt: `.prose` is een stuk of een pagina,
   `.hero-lead` de inleiding op de homepage.

   Wat er hier bij moet:
   - de kleur, want `.prose a` weegt even zwaar als `.knop` en zou hem de
     accentkleur van een gewone link opdringen;
   - het lettertype, want `.knop` erft dat van zijn omgeving en dat is hier de
     serif van het zetwerk. Een knop is bediening, geen zin: die hoort schreefloos;
   De ruimte eromheen staat bewust NIET hier maar op de alinea hieronder. */
.prose a.knop,
.hero-lead a.knop {
    color: var(--paper-raised);
    font-family: var(--sans);
}

/* Een alinea die alleen uit knoppen bestaat is geen zin maar een rij.

   De klasse `knoppen` wordt gezet door de markdown-renderer in dot-shared, niet
   hier afgeleid. Dat moet ook wel: CSS kan geen tekstknopen zien, dus in
   `<p>Deze zin bevat <a class="knop">...</a> middenin</p>` is die link het
   enige *element* en zou `:only-child` ook op die gewone zin grijpen. De
   renderer kijkt naar de tokens en weet het verschil wél.

   `flex` in plaats van marges, want dat regelt drie dingen tegelijk: `gap` zet
   de ruimte tussen de knoppen zonder dat de spatie uit de bron meetelt,
   `flex-wrap` laat ze op een smal scherm teruglopen, en `gap` geldt dan óók
   tussen die regels - bij inline-blocks zouden teruggelopen knoppen tegen
   elkaar aan plakken.

   De ruimte eromheen staat op de alinea en niet op de knop: marges van een
   inline-block vallen niet samen met die van de buren, dus een marge op de knop
   zelf kwam bovenop de alineamarge en gaf 1.15rem erboven en 2.90rem eronder.
   Op de alinea valt hij wel samen, en dan is het aan beide kanten 1.75rem. */
.prose p.knoppen,
.hero-lead p.knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

.knop-tekst {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.knop-gevaar {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    color: var(--waarschuwing);
    background: none;
    border: 1px solid currentColor;
    border-radius: 3px;
    cursor: pointer;
}

.verwijder-form {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.melding {
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    font-size: 0.88rem;
}

.weggelaten {
    border-left-color: var(--ink-faint);
    color: var(--ink-soft);
}

.melding-fout {
    border-left-color: var(--waarschuwing);
    color: var(--waarschuwing);
}

/* -- Inloggen ------------------------------------------------------------ */

body.inlogpagina {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.inlogkaart {
    width: 100%;
    max-width: 22rem;
    padding: 2rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow);
}

.inlogkop {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.inlogkaart .knop {
    margin-top: 1.25rem;
    width: 100%;
}

.inlog-voet {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
}