/*
 * In de stijl van de oude WordPress-site (thema Twenty Twenty met rode accentkleur
 * en lichtgrijze achtergrond): witte kop met het menu, een grote gecentreerde
 * titel, een smalle kolom met serif-tekst en een witte voet.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/site/inter-latin.woff2") format("woff2");
}

/*
 * Uit Twenty Twenty: een lettertype met alleen de harde spatie, zo breed als een
 * gewone spatie. Hoefler Text heeft een heel brede harde spatie, en de oude
 * teksten zijn uitgelijnd met rijen  .
 */
@font-face {
    font-family: NonBreakingSpaceOverride;
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format("woff");
}

:root {
    --accent: #e00a0a;
    --accent-dark: #b50808;
    --text: #000;
    --secondary: #6d6d6d;
    --line: #dbdbdb;
    --page: #f4f4f4;
    --header: #fff;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    --serif: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;
    --column: 36.25rem;
    --heading-spacing: -0.0415625em;
    color-scheme: light;
}

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

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

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font: 400 1.125rem/1.5 var(--sans);
    letter-spacing: -0.015em;
}

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

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: var(--heading-spacing); line-height: 1.25; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 20; }

/* Kop met de naam links en het menu rechts */
.site-header { background: var(--header); }
.header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem 3rem;
    max-width: 120rem;
    margin-inline: auto;
    padding: 2.2rem 2.5rem;
}
.brand {
    flex: 0 0 auto;
    max-width: 6rem;
    color: var(--text);
    font: 700 1.5rem/1 var(--sans);
    letter-spacing: var(--heading-spacing);
    text-decoration: none;
}
.brand:hover { color: var(--text); text-decoration: underline; }
.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem 1.55rem;
    margin-left: auto;
}
.nav a {
    color: var(--accent);
    font-size: 1.125rem;
    line-height: 1.25;
    text-decoration: none;
}
.nav a:hover, .nav a.active { text-decoration: underline; }

/* Titel van de pagina: groot en gecentreerd op wit */
.entry-header { background: var(--header); text-align: center; }
.entry-header-inner { max-width: 62rem; margin-inline: auto; padding: 4.5rem 1.25rem 5.5rem; }
.entry-title {
    margin: 0;
    font-size: clamp(2.4rem, 1.2rem + 4.5vw, 5.25rem);
    font-weight: 800;
    line-height: 1.138;
}
.entry-meta { margin: 1.5rem 0 0; color: var(--secondary); font-size: 1rem; }
.entry-meta a { color: inherit; }

/* De kolom met de tekst */
.entry-content {
    width: min(100% - 2.5rem, var(--column));
    margin-inline: auto;
    padding-block: 5rem 6rem;
}

.prose {
    font-family: var(--serif);
    font-size: 1.3125rem;
    line-height: 1.476;
    letter-spacing: normal;
}
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1.25em; }
.prose li { margin-bottom: .4em; }
.prose h2, .prose h3, .prose h4 { margin: 2.5rem 0 1rem; }
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.6rem; }
.prose sup, .prose sub { line-height: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: .25rem solid var(--accent); }
.prose figure { margin: 0 0 2.5rem; }
.prose figure img { display: block; }
.prose figcaption { margin-top: .9rem; color: var(--secondary); font: 500 .95rem/1.4 var(--sans); }
.prose .has-text-align-center { text-align: center; }
.prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 1rem; line-height: 1.4; }
.prose th, .prose td { padding: .5rem .6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem; }
.prose .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.cover { display: block; margin-bottom: 2.5rem; }

/* Overzicht van berichten */
.summary { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.summary:last-child { border-bottom: 0; margin-bottom: 0; }
.summary img { display: block; margin-bottom: 1.5rem; }
.summary h2 { margin: 0; font-size: 2.25rem; font-weight: 800; }
.summary h2 a { color: var(--text); text-decoration: none; }
.summary h2 a:hover { text-decoration: underline; }
.summary-meta { margin: .6rem 0 1rem; color: var(--secondary); font-size: 1rem; }
.summary p:last-child { margin: 0; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.476; letter-spacing: normal; }
.empty { color: var(--secondary); text-align: center; }

.related { width: min(100% - 2.5rem, var(--column)); margin: 0 auto 6rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 1rem; font-size: 1.5rem; }
.related ul { margin: 0; padding: 0; list-style: none; }
.related li { margin-bottom: .5rem; }
.related time { color: var(--secondary); font-size: .9rem; margin-left: .4rem; }

/* Wachtwoord */
.password-form { display: grid; gap: .6rem; max-width: 26rem; font-family: var(--sans); font-size: 1rem; }
.password-form label { font-weight: 600; }
.password-form input {
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
}
.password-form input[aria-invalid="true"] { border-color: var(--accent); }
.password-form button {
    justify-self: start;
    padding: 1rem 1.8rem;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: 600 .95rem/1 var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.password-form button:hover { background: var(--accent-dark); }
.form-error { margin: 0; color: var(--accent); }

/* Voet */
.site-footer { background: var(--header); }
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 120rem;
    margin-inline: auto;
    padding: 2.6rem 5rem;
    font-size: 1.125rem;
}
.footer-copy { margin: 0; font-weight: 700; }
.footer-copy a { color: var(--text); text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }
.to-top { color: var(--secondary); text-decoration: none; }
.to-top:hover { color: var(--text); }

@media (max-width: 760px) {
    .header-inner { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.25rem; gap: 1rem; }
    .brand { max-width: none; }
    .nav { justify-content: flex-start; margin-left: 0; gap: .4rem 1.1rem; }
    .nav a { font-size: 1rem; }
    .entry-header-inner { padding: 3rem 1.25rem 3.5rem; }
    .entry-content { padding-block: 3rem 4rem; }
    .prose, .summary p:last-child { font-size: 1.125rem; }
    .summary h2 { font-size: 1.75rem; }
    .footer-inner { padding: 2rem 1.25rem; font-size: 1rem; }
}