/* Stijl A+B: de keuze van Maaike — de bovenkant van Atelier (A), de rest van Moodboard (B).
   Bovenkant: ivoor, de titel groot in goud, het marmer in een boogvenster, een rustig menu met een gouden lijn.
   Rest: warm papier met stippen, werk als foto's met goudtape (scheef, recht bij hover), koppen met een gouden
   markeerstreep, projecten als polaroidkaarten.
   Voor WordPress: plak dit hele bestand in Weergave → Aanpassen → Extra CSS. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@300;400;500&family=DM+Sans:wght@400;500;700&family=DM+Serif+Display:ital@0;1&family=Caveat:wght@500;700&display=swap");

/* The site has its own dark version (block "Donkere modus" at the end), so phones in dark mode use that instead of
   darkening and dimming the light version themselves (Chrome on Android, Samsung Internet) */
:root { color-scheme: light dark; }

:root {
  --gold: #ad8d00;
  --gold-light: #d8bd5a;
  --gold-line: rgba(173, 141, 0, 0.35);
  --gold-gradient: linear-gradient(100deg, #8a6d00 0%, #d8bd5a 45%, #ad8d00 70%, #f1dc8b 100%);
  --gold-soft: rgba(216, 189, 90, 0.45);
  --tape: rgba(222, 198, 112, 0.78);
  --ivory: #fbf8f2;
  --paper: var(--ivory);
  --ink: #232019;
  --ink-soft: #5c574e;
  --card: #fff;
  --panel: #f6f1e4;
  --shadow-rgb: 35, 32, 25;
  --shadow: 0 12px 28px rgba(var(--shadow-rgb), 0.13);
}

body {
  background: var(--paper) radial-gradient(rgba(173, 141, 0, 0.2) 1px, transparent 1.3px) 0 0 / 24px 24px;
  color: var(--ink); font-family: "DM Sans", Arial, sans-serif;
}
::selection { background: var(--gold-soft); }

/* ---------- Header: links ivoor met de titel, rechts het marmer in een boogvenster ---------- */
.entry-header { position: relative; }
.entry-header:not(.html-image) { height: 500px !important; }
.entry-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 58%; background: var(--ivory); z-index: 1; }
/* The arch: an ivory shadow covers everything around it, so only the marble inside the arch stays visible */
.entry-header::after {
  content: ""; position: absolute; z-index: 1; top: 48px; bottom: 0; right: 7%; width: 29%;
  border-radius: 999px 999px 0 0; box-shadow: 0 0 0 9999px var(--ivory); outline: 1px solid var(--gold); outline-offset: 12px;
  /* Her MW logo, cut out (_tools/logo-vrijstaand.mjs), standing on the marble with a soft ivory glow behind it */
  background: url("https://i0.wp.com/maaikeweerman.com/wp-content/uploads/2026/10/logo-mw-vrijstaand.png?w=800&ssl=1") 50% 52% / 68% auto no-repeat, radial-gradient(closest-side, color-mix(in srgb, var(--ivory) 85%, transparent), color-mix(in srgb, var(--ivory) 0%, transparent) 100%) 50% 52% / 100% 55% no-repeat;
}
/* A second, thinner arch that sits half behind the first, like a drawn construction line */
.entry-header .cvr-container::after {
  content: ""; position: absolute; top: 96px; bottom: -1px; right: calc(-60.3% + 44px); width: 50%;
  border: 1px solid var(--gold-line); border-bottom: none; border-radius: 999px 999px 0 0; pointer-events: none;
}
.entry-header .cvr-container { position: relative; z-index: 2; display: flex !important; align-items: center; width: 58% !important; height: 100%; padding-left: 7%; }
.entry-header .cvr-outer, .entry-header .cvr-inner { display: block !important; width: 100%; height: auto !important; text-align: left; }
.header-logo { text-align: left; }
/* The school year comes from a small script (_local/schooljaar.js) that sets --schooljaar-label */
.header-logo::before { content: var(--schooljaar-label, "Portfolio"); display: block; margin-bottom: 26px; font: 500 11px "Jost", sans-serif; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); }
.header-logo .site-title {
  display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: clamp(110px, 12.5vw, 160px) !important; line-height: 0.95; letter-spacing: -0.01em;
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-logo .site-description { margin-top: 22px; font-family: "Jost", sans-serif; font-size: 14px !important; font-weight: 400; letter-spacing: 0.5em; text-transform: uppercase; color: var(--ink); }
.header-logo .site-description::before { content: ""; display: inline-block; width: 60px; height: 1px; margin-right: 18px; vertical-align: middle; background: var(--gold); }
.header-logo .site-description::after { content: "Media Vormgeving"; display: block; margin-top: 14px; padding-left: 78px; font: italic 500 24px "Cormorant Garamond", serif; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); }

/* ---------- Menu: dun, ruim gespatieerd, een gouden lijn die onder de tekst uitgroeit ---------- */
#main-nav { background: var(--ivory); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); box-shadow: none; }
/* The line is a background, because the theme already uses ::after for the dropdown arrows */
#main-menu > li > a {
  font-family: "Jost", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 50% calc(100% - 14px) / 0 1px; transition: background-size 0.3s, color 0.2s;
}
#main-menu > li:hover > a, #main-menu > li.current-menu-ancestor > a, #main-menu > li.current-post-ancestor > a { background-size: calc(100% - 30px) 1px; color: var(--gold); }
#main-menu .sub-menu { background: var(--card); border: 1px solid var(--gold-line); box-shadow: 0 18px 40px rgba(31, 28, 23, 0.08); }
/* "Stages" (with Serviceplan and AH studio) has no projects yet, so its pages are empty: hidden until it has.
   Remove this rule once Maaike has put her internship work there. */
#main-menu > li:has(> a[href$="/category/stages/"]), #mobile-menu li:has(> a[href$="/category/stages/"]) { display: none !important; }
#main-menu .sub-menu a { font-family: "Jost", sans-serif; font-size: 14px; letter-spacing: 0.04em; text-transform: none; color: var(--ink); transition: padding 0.2s, color 0.2s; }
#main-menu .sub-menu a:hover { color: var(--gold); padding-left: 26px; }
/* Font Awesome swaps each <i> for an <svg> that takes the parent text colour, so the containers get the colour */
#main-nav .main-nav-icons, #main-nav .main-nav-icons a, #main-nav .main-nav-search, #main-nav .main-nav-socials-trigger, #main-nav .mobile-menu-btn { color: var(--ink); }
#main-nav .main-nav-icons svg, #main-nav .main-nav-socials-trigger svg, #main-nav .mobile-menu-btn svg { color: inherit !important; }
/* Light/dark button left of the LinkedIn icon (_local/thema-keuze.js): a moon in light mode, a sun in dark mode */
#main-nav .thema-knop { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 4px 0 0; padding: 0; border: none; background: none; color: var(--ink); vertical-align: middle; cursor: pointer; transition: color 0.2s, transform 0.3s; }
#main-nav .thema-knop svg { width: 16px; height: 16px; }
#main-nav .thema-knop:hover { color: var(--gold); transform: rotate(-20deg); }

/* ---------- Homepage: kop met markeerstreep, foto als polaroid met onderschrift, tekst als notitiekaart ---------- */
.home .main-content { padding-top: 40px; }
.home .post-content > p.has-large-font-size { position: relative; margin: 30px 0 40px; text-align: center; }
.home .post-content > p.has-large-font-size strong {
  padding: 0 12px; font: 400 70px/1.2 "DM Serif Display", serif; color: var(--ink);
  background: linear-gradient(transparent 60%, var(--gold-soft) 60%, var(--gold-soft) 88%, transparent 88%);
}
.home .post-content > p.has-large-font-size::after { content: "hoi! ↓"; position: absolute; top: -18px; left: calc(50% + 230px); font: 700 30px "Caveat", cursive; color: var(--gold); transform: rotate(10deg); }
.home .wp-block-columns:not(.werk-overzicht) { gap: 60px !important; align-items: center; }
.home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image) {
  position: relative; float: none; width: fit-content; margin: 20px auto; padding: 14px 14px 70px; background: var(--card);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.18); transform: rotate(-3deg); transition: transform 0.35s ease;
}
.home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image):hover { transform: rotate(0) scale(1.02); }
/* Same photo size as the original (285px wide), also when a new photo is placed as a plain image block */
.home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image) img { width: 285px; max-width: 100%; height: auto; }
.home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image)::before { content: ""; position: absolute; top: -16px; left: 50%; width: 120px; height: 32px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); z-index: 2; }
.home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image)::after { content: "dat ben ik!"; position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 700 34px "Caveat", cursive; color: var(--ink); }
.home .wp-block-columns:not(.werk-overzicht) > .wp-block-column:last-child {
  position: relative; padding: 46px 48px 40px 64px; background: var(--card); box-shadow: var(--shadow); transform: rotate(0.6deg);
  background-image: linear-gradient(90deg, transparent 38px, rgba(173, 141, 0, 0.45) 38px, rgba(173, 141, 0, 0.45) 40px, transparent 40px);
}
.home .wp-block-columns:not(.werk-overzicht) > .wp-block-column:last-child::before { content: ""; position: absolute; top: -14px; right: 40px; width: 90px; height: 28px; transform: rotate(5deg); background: var(--tape); }
.home .wp-block-columns:not(.werk-overzicht) > .wp-block-column:last-child p:first-child { font: 400 25px/1.4 "DM Serif Display", serif; color: var(--ink); }

/* ---------- Homepage: de slider van het thema (projecten met een uitgelichte afbeelding) tussen "Mijn werk" en de tegels ---------- */
/* _local/slider-plek.js moves it there; without the script it stays at the bottom instead of above everything */
.home .page-content { display: flex; flex-direction: column; }
.home .featured-slider-area { order: 2; align-self: center; width: 100%; margin-top: 20px; margin-bottom: 60px; }
/* The slider sets its slides to a fixed width; inline-size containment keeps that from widening the page text around it */
.home .post-content > .featured-slider-area.in-mijn-werk { width: 100%; max-width: 100%; margin: 0 0 56px; padding: 0; contain: inline-size; overflow: hidden; }
.home .post-content > .featured-slider-area.in-mijn-werk > .slick-slider { width: 100%; max-width: 100%; }
/* Each slide as a work card: the whole image on the left (contain, so posters are not cropped or zoomed in) on a light
   panel, the title, text and button on the right; on phones the image on top and the text below */
.home .featured-slider-area .slider-item { display: flex !important; width: 100% !important; align-items: stretch; height: 520px; background: var(--card); }
.home .featured-slider-area .slider-item-bg {
  flex: 0 0 58%; width: 58% !important; height: 100% !important; box-sizing: border-box; padding: 28px; background-color: var(--panel);
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-origin: content-box;
}
.home .featured-slider-area .cv-container.image-overlay { position: static !important; flex: 1 1 0; min-width: 0; width: auto !important; display: flex !important; align-items: center; height: auto !important; background: var(--card) !important; }
.home .featured-slider-area .cv-container.image-overlay::before, .home .featured-slider-area .cv-container.image-overlay::after { display: none !important; }
.home .featured-slider-area .cv-outer, .home .featured-slider-area .cv-inner { width: 100% !important; height: 100% !important; }
.home .featured-slider-area .slider-info { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 40px; text-align: left; }
.home .featured-slider-area .slider-info, .home .featured-slider-area .slider-info * { opacity: 1 !important; }
.home .featured-slider-area .slider-categories, .home .featured-slider-area .slider-read-more { text-align: left; }
.home .featured-slider-area .slider-title { font-size: 34px !important; line-height: 1.15; }
.home .featured-slider-area .slider-title a, .home .featured-slider-area .slider-categories a, .home .featured-slider-area .slider-date { color: var(--ink) !important; }
/* The dots go under the slide instead of over the image; the current one is filled gold */
.home .featured-slider-area .slider-dots { position: static !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 18px 0 14px !important; padding: 0 !important; }
.home .featured-slider-area .slider-dots li { border-color: var(--ink-soft) !important; transition: background 0.2s, border-color 0.2s; }
.home .featured-slider-area .slider-dots li.slick-active { background: var(--gold) !important; border-color: var(--gold) !important; }
/* The slide as a card that stands out from the page, also in light mode: a shadow and a thin gold line (drawn inside the
   slide, because the slider area cuts off whatever is outside it) */
.home .featured-slider-area .slick-list { position: relative !important; box-shadow: var(--shadow); }
/* (a border on a layer over the slide; the theme sets outline: 0 !important on every element, so an outline would not show) */
.home .featured-slider-area .slick-list::after { content: ""; position: absolute; inset: 0; z-index: 1000; /* above the fading slides (z-index 999) */ border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); pointer-events: none; }
/* The arrows sat on the left and right edge of the slide, over the image and the text: now round buttons under the slide.
   The CSS puts them at the outer ends of the row of dots; _local/slider-pijlen.js then moves them right next to the first
   and last dot. The theme hides them on phones, where you swipe. */
.home .featured-slider-area .slick-arrow {
  top: auto !important; bottom: -12px !important; display: flex !important; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important; margin: 0 !important; transform: none !important; opacity: 1 !important; z-index: 5;
  border: 1.5px solid var(--gold-line); border-radius: 50%; color: var(--ink) !important; background: var(--card) !important;
  font-size: 13px !important; line-height: 1 !important; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.home .featured-slider-area .slick-arrow.prev-arrow { left: 0 !important; right: auto !important; }
.home .featured-slider-area .slick-arrow.next-arrow { right: 0 !important; left: auto !important; }
.home .featured-slider-area .slick-arrow:hover { background: var(--gold) !important; border-color: var(--gold); color: #1f1c17 !important; }
/* The date is the upload date (most projects were uploaded in September 2025), not when the work was made: left out */
.home .featured-slider-area .slider-date { display: none !important; }
/* The theme's English "Read more" becomes "Bekijk project →" (the link text is replaced, the button keeps its look) */
.home .featured-slider-area .slider-read-more a { font-size: 0 !important; letter-spacing: 0 !important; }
.home .featured-slider-area .slider-read-more a::after { content: "Bekijk project →"; font-size: 13px; letter-spacing: 0.12em; }
@media (max-width: 768px) {
  .home .featured-slider-area .slider-item { flex-direction: column; height: auto !important; }
  .home .featured-slider-area .slider-item-bg { flex: 0 0 auto; width: 100% !important; height: 260px !important; padding: 16px; }
  .home .featured-slider-area .cv-container.image-overlay { flex: 0 0 auto; }
  .home .featured-slider-area .slider-info { padding: 22px 20px 30px; }
  .home .featured-slider-area .slider-title { font-size: 26px !important; }
}

/* ---------- Homepage: "Mijn werk", een tegel per categorie die naar het overzicht linkt ---------- */
/* Made from normal blocks in the homepage (a paragraph with class werk-kop, columns with class werk-overzicht) */
.home .post-content > p.werk-kop { position: relative; margin: 90px 0 46px; text-align: center; }
.home .post-content > p.werk-kop::before { content: "bekijk mijn werk ↓"; display: block; margin-bottom: 6px; font: 700 30px "Caveat", cursive; color: var(--gold); transform: rotate(-2deg); }
.home .post-content > p.werk-kop { font: 400 60px/1.2 "DM Serif Display", serif !important; color: var(--ink); }
.home .post-content > p.werk-kop span, .home .post-content > p.werk-kop { background: none; }
.home .werk-overzicht { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 40px !important; margin-bottom: 40px; }
/* Contact block at the bottom of the homepage (_tools/wp-homepagina-contact.mjs): heading like "Mijn werk", one sentence,
   two links as buttons (mail filled gold, LinkedIn outlined) and the address itself underneath */
.home .post-content > p.contact-kop { margin: 90px 0 14px !important; font: 400 60px/1.2 "DM Serif Display", serif !important; color: var(--ink) !important; text-align: center; }
.home .post-content > p.contact-kop::before { content: "zullen we kennismaken? ↓"; display: block; margin-bottom: 6px; font: 700 30px "Caveat", cursive; color: var(--gold); transform: rotate(-2deg); }
.home .post-content > p.contact-tekst { max-width: 560px; margin: 0 auto 26px !important; text-align: center; font-size: 18px; color: var(--ink-soft); }
.home .post-content > p.contact-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 16px !important; }
.home .post-content > p.contact-knoppen a {
  display: inline-block; padding: 13px 30px; border: 1.5px solid var(--gold); border-radius: 999px; background: none !important;
  font: 700 15px "DM Sans", sans-serif; letter-spacing: 0.04em; color: var(--ink) !important; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.home .post-content > p.contact-knoppen a:first-child { background: var(--gold) !important; color: #1f1c17 !important; }
.home .post-content > p.contact-knoppen a:hover { background: var(--ink) !important; border-color: var(--ink); color: var(--card) !important; transform: translateY(-2px); }
.home .post-content > p.contact-mail { margin: 0 0 60px !important; text-align: center; font-size: 14px; }
.home .post-content > p.contact-mail a { color: var(--ink-soft) !important; background: none !important; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .home .post-content > p.contact-kop { margin-top: 70px !important; font-size: 44px !important; }
}
.home .werk-overzicht > .wp-block-column {
  position: relative; margin: 0 !important; padding: 12px 12px 22px; background: var(--card); box-shadow: var(--shadow); text-align: center;
  transform: rotate(-1.4deg); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home .werk-overzicht > .wp-block-column:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.home .werk-overzicht > .wp-block-column:hover { transform: rotate(0) scale(1.04); box-shadow: 0 24px 50px rgba(var(--shadow-rgb), 0.2); z-index: 2; }
.home .werk-overzicht > .wp-block-column::after { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: var(--tape); }
.home .werk-overzicht figure.wp-block-image { width: 100% !important; height: 200px; margin: 0 0 18px !important; padding: 0; background: var(--panel); box-shadow: none; transform: none !important; }
.home .werk-overzicht figure.wp-block-image::before, .home .werk-overzicht figure.wp-block-image::after { display: none; }
.home .werk-overzicht figure.wp-block-image img { width: 100%; height: 200px; object-fit: contain; }
/* The image is wrapped in a link; no marker stripe under it (the general link style adds one) */
.home .werk-overzicht figure.wp-block-image a { display: block; height: 100%; background: none !important; }
/* A tile without an image (the CV) gets a dotted panel with large handwriting instead */
.home .werk-overzicht > .wp-block-column:not(:has(figure))::before {
  content: "cv"; display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: 18px;
  background: var(--panel) radial-gradient(rgba(173, 141, 0, 0.25) 1px, transparent 1.3px) 0 0 / 18px 18px; font: 700 72px "Caveat", cursive; color: var(--gold);
}
.home .werk-overzicht p { margin: 0 !important; text-align: center !important; }
.home .werk-overzicht p:first-of-type a { font: 400 24px/1.25 "DM Serif Display", serif; color: var(--ink); text-decoration: none; background: linear-gradient(transparent 62%, var(--gold-soft) 62%, var(--gold-soft) 90%, transparent 90%); }
/* The whole tile is clickable through the title link */
.home .werk-overzicht p:first-of-type a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.home .werk-overzicht p + p { margin-top: 8px !important; font-size: 14px !important; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Titels: groot en strak, met een gouden markeerstreep alsof hij met een stift is aangestreept ---------- */
.post-title, .post-title a, .post-content h2, .post-content h3 { font-family: "DM Serif Display", serif; font-weight: 400; color: var(--ink); }
.single .post-header, .page .post-header { margin: 20px 0 40px; text-align: center; }
.single .post-header::before { content: "project"; display: block; margin-bottom: 4px; font: 700 28px "Caveat", cursive; color: var(--gold); transform: rotate(-3deg); }
.single .post-title, .page .post-title {
  display: inline; padding: 0 10px; font-size: 56px; line-height: 1.35;
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 88%, transparent 88%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.single .post-header::after { content: "✦  ✦  ✦"; display: block; margin-top: 18px; font-size: 14px; letter-spacing: 0.4em; color: var(--gold); }
.post-content strong { color: var(--ink); background: linear-gradient(transparent 65%, rgba(216, 189, 90, 0.35) 65%); }

.post-content p, .post-content li { font-family: "DM Sans", sans-serif; font-size: 17px; line-height: 1.75; text-align: left; color: var(--ink-soft); }
.single .post-content > p, .single .post-content > ul, .single .post-content > ol { max-width: 760px; margin-left: auto; margin-right: auto; }
.post-content a { color: var(--ink); text-decoration: none; background: linear-gradient(transparent 70%, var(--gold-soft) 70%); }

/* Afbeeldingen als foto's op een bord: witte rand, schaduw, licht scheef, een stuk goudtape erop */
.post-content figure.wp-block-image { position: relative; width: fit-content; max-width: calc(100% - 12px); margin: 14px auto 36px; padding: 10px 10px 14px; background: var(--card); box-shadow: var(--shadow); transform: rotate(-1.4deg); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.post-content figure.wp-block-image:nth-of-type(2n) { transform: rotate(1.2deg); }
.post-content figure.wp-block-image:nth-of-type(3n) { transform: rotate(-0.6deg); }
.post-content figure.wp-block-image::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); z-index: 2; }
.post-content figure.wp-block-image:hover { transform: rotate(0) scale(1.02); box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.2); z-index: 3; }

/* ---------- Overzichtspagina's: elk project als polaroidkaart op het bord, schuin, recht bij hover ---------- */
/* The article's parts become direct flex items (display: contents), so image, title and text can be reordered */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 56px 44px; padding-top: 20px; }
.blog-grid > li { width: auto !important; margin: 0 !important; display: block !important; }
.blog-grid:has(> li:only-child) { display: block; }
/* When the theme loads more projects (infinite scroll), its script also drops the bullet points from inside those projects
   loose into the grid, plus an empty loading block. Only real projects belong in the grid; the lists stay on the project pages. */
.blog-grid > :not(li:has(> article), .no-result-found) { display: none !important; }
.blog-grid > li .blog-post { position: relative; padding: 36px 30px 26px; background: var(--card); box-shadow: var(--shadow); }
.blog-grid > li .blog-post::before { content: ""; position: absolute; top: -12px; left: 50%; z-index: 6; width: 96px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: var(--tape); }
.blog-grid:not(:has(> li:only-child)) .blog-post { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 14px 14px 22px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-grid:not(:has(> li:only-child)) > li:nth-child(3n + 1) .blog-post { transform: rotate(-1.6deg); }
.blog-grid:not(:has(> li:only-child)) > li:nth-child(3n + 2) .blog-post { transform: rotate(1.1deg) translateY(10px); }
.blog-grid:not(:has(> li:only-child)) > li:nth-child(3n) .blog-post { transform: rotate(-0.5deg); }
.blog-grid:not(:has(> li:only-child)) > li:nth-child(4n) .blog-post::before { left: auto; right: -18px; transform: rotate(38deg); }
.blog-grid:not(:has(> li:only-child)) > li .blog-post:hover { transform: rotate(0) scale(1.03); box-shadow: 0 24px 50px rgba(var(--shadow-rgb), 0.2); z-index: 3; }
.blog-grid:not(:has(> li:only-child)) .post-content { display: contents; }
.blog-grid:not(:has(> li:only-child)) .post-content > :is(.wp-block-image, .wp-block-embed, .wp-block-columns) { order: 1; display: flex; gap: 6px !important; height: 230px; margin: 0; padding: 0; overflow: hidden; background: var(--card); box-shadow: none; transform: none; }
.blog-grid:not(:has(> li:only-child)) .post-content > :is(.wp-block-image, .wp-block-embed, .wp-block-columns) ~ :is(.wp-block-image, .wp-block-embed, .wp-block-columns),
.blog-grid:not(:has(> li:only-child)) .post-content > :not(p, .wp-block-image, .wp-block-embed, .wp-block-columns),
.blog-grid:not(:has(> li:only-child)) .post-content > p ~ p, .blog-grid:not(:has(> li:only-child)) .post-content > p:empty,
.blog-grid:not(:has(> li:only-child)) .wp-block-column > * ~ *, .blog-grid:not(:has(> li:only-child)) .post-media,
.blog-grid:not(:has(> li:only-child)) .read-more, .blog-grid:not(:has(> li:only-child)) .sharedaddy, .blog-grid:not(:has(> li:only-child)) .post-footer { display: none !important; }
.blog-grid:not(:has(> li:only-child)) .wp-block-column { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; }
/* Videos (YouTube): the embed keeps its 16:9 shape with an empty box plus an absolutely placed player; in the card that box
   would get no width, so it fills the image area instead. YouTube shows its own still image and play button. */
.blog-grid:not(:has(> li:only-child)) .post-content > .wp-block-embed { background: #111; }
.blog-grid:not(:has(> li:only-child)) .wp-block-embed__wrapper { position: relative; flex: 1 1 auto; width: 100%; height: 100%; }
.blog-grid:not(:has(> li:only-child)) .wp-block-embed__wrapper::before { display: none; }
.blog-grid:not(:has(> li:only-child)) .wp-block-embed iframe { position: absolute; inset: 0; }
/* Projects without any image or video (text only) get a calm filler, so every card has the same rhythm */
.blog-grid:not(:has(> li:only-child)) .blog-post:not(:has(.post-content > :is(.wp-block-image, .wp-block-embed, .wp-block-columns)))::after {
  content: "lees het verhaal ✎"; order: 1; display: flex; align-items: center; justify-content: center; height: 230px;
  background: var(--panel) radial-gradient(rgba(173, 141, 0, 0.25) 1px, transparent 1.3px) 0 0 / 18px 18px;
  font: 700 32px "Caveat", cursive; color: var(--gold);
}
/* The whole image stays visible (scaled to fit, not cropped), so logos, posters and documents stay readable */
.blog-grid:not(:has(> li:only-child)) .post-content :is(img, iframe) { width: 100% !important; height: 230px !important; object-fit: contain; object-position: center; }
.blog-grid:not(:has(> li:only-child)) .post-content figure { width: 100% !important; height: 100%; margin: 0; padding: 0; box-shadow: none; transform: none !important; }
.blog-grid:not(:has(> li:only-child)) .post-content figure::before { display: none; }
.blog-grid:not(:has(> li:only-child)) .post-header { order: 2; margin: 20px 6px 8px; text-align: center; }
.blog-grid:not(:has(> li:only-child)) .post-title { font-size: 26px; line-height: 1.2; }
.blog-grid:not(:has(> li:only-child)) .post-title a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.blog-grid:not(:has(> li:only-child)) .post-content > p { order: 3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 6px; font-size: 15px; line-height: 1.6; text-align: center; }
.blog-grid:not(:has(> li:only-child)) .post-content::after { content: "bekijk →"; order: 4; margin-top: auto; padding-top: 12px; text-align: center; font: 700 26px "Caveat", cursive; color: var(--gold); }
.blog-grid .post-title a { font-size: inherit; }
.blog-grid:has(> li:only-child) .post-title a { font-size: 40px; }

/* Sharing (X, Facebook) and the likes are removed at Maaike's request; the related projects below stay */
.sharedaddy.sd-sharing-enabled, .sharedaddy.sd-like, .jetpack-likes-widget-wrapper { display: none !important; }
/* Related projects: Dutch heading and titles in the house style (the theme text "Related" is replaced) */
.jp-relatedposts { margin-top: 50px !important; padding-top: 30px; border-top: 2px dashed rgba(173, 141, 0, 0.45); }
.jp-relatedposts .jp-relatedposts-headline { margin-bottom: 18px !important; font-size: 0 !important; border: none !important; }
.jp-relatedposts .jp-relatedposts-headline em::before { content: none !important; }
.jp-relatedposts .jp-relatedposts-headline em { font-size: 0; }
.jp-relatedposts .jp-relatedposts-headline::after { content: "meer projecten"; display: inline-block; font: 700 32px "Caveat", cursive; color: var(--gold); transform: rotate(-2deg); }
.jp-relatedposts .jp-relatedposts-post-title a { font: 400 20px/1.3 "DM Serif Display", serif !important; color: var(--ink) !important; background: linear-gradient(transparent 70%, var(--gold-soft) 70%); }
.jp-relatedposts .jp-relatedposts-post-date, .jp-relatedposts .jp-relatedposts-post-context { font: 400 13px "DM Sans", sans-serif !important; color: var(--ink-soft) !important; opacity: 1 !important; }

/* ---------- CV: een vel papier op het bord, met kopjes met een gouden streep en compacte, leesbare regels ---------- */
/* Only the CV post has the class category-cv; it is shown in full on its own page and on the CV menu page */
/* Same centred heading with the marker on both CV pages (on the CV menu page the theme treats it as a list item) */
.category-cv .post-header { margin: 20px 0 40px !important; text-align: center !important; }
.category-cv .post-header::before { content: "over mij" !important; display: block; margin-bottom: 4px; font: 700 28px "Caveat", cursive; color: var(--gold); transform: rotate(-3deg); }
.category-cv .post-title { display: inline; padding: 0 10px; font-size: 56px !important; line-height: 1.35; text-align: center !important;
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 88%, transparent 88%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.category-cv .post-title a { font: inherit !important; color: inherit !important; background: none !important; }
.category-cv .post-header::after { content: "Maaike Weerman  ·  Media Vormgeving"; display: block; margin-top: 16px; font: 500 13px "DM Sans", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.category-cv .post-content {
  position: relative; max-width: 860px; margin: 20px auto 50px; padding: 70px 76px 60px; background: var(--card);
  box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.14);
}
/* The theme clips .post-content (overflow: hidden), which cut the tape in half */
.category-cv .post-content { overflow: visible !important; }
/* On the CV menu page the CV is also a project card: no second sheet (background, shadow, tape) around the CV sheet */
.blog-grid > li .blog-post.category-cv { padding: 0; background: none; box-shadow: none; border-radius: 0; transform: none; }
.blog-grid > li .blog-post.category-cv::before { display: none; }
.category-cv .post-content::before { content: ""; position: absolute; top: -15px; left: 50%; width: 140px; height: 32px; transform: translateX(-50%) rotate(-2deg); background: var(--tape); }
.category-cv .post-content > p { max-width: none; margin: 0 0 6px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.category-cv .post-content > p strong { font-weight: 700; color: var(--ink); background: none; }
/* Section headings (the larger lines): serif with a gold marker and a thin line across the sheet */
.category-cv .post-content > p.has-medium-font-size:has(strong) {
  display: flex; align-items: baseline; gap: 18px; margin: 46px 0 18px; font-size: 0 !important; line-height: 1.2;
}
.category-cv .post-content > p.has-medium-font-size:first-child { margin-top: 0; }
.category-cv .post-content > p.has-medium-font-size strong {
  flex: none; padding: 0 6px; font: 400 30px "DM Serif Display", serif; color: var(--ink);
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 90%, transparent 90%);
}
.category-cv .post-content > p.has-medium-font-size:has(strong)::after { content: ""; flex: 1; height: 1px; background: rgba(173, 141, 0, 0.45); }
/* The larger empty lines between sections are spacers made of spaces; the headings already have room above them */
.category-cv .post-content > p.has-medium-font-size:not(:has(strong)) { display: none; }
.category-cv .sharedaddy, .category-cv .jp-relatedposts { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---------- Niets gevonden (zoeken zonder resultaat) en pagina niet gevonden (404): een notitiekaart met tape ---------- */
/* The theme text is English and cannot be changed without HTML, so it is hidden (font-size: 0) and replaced with Dutch text */
.blog-grid:has(> .no-result-found) { display: block; }
.no-result-found, .page-404 {
  position: relative; max-width: 620px; margin: 70px auto 90px; padding: 64px 56px 52px; background: var(--card); box-shadow: 0 18px 44px rgba(var(--shadow-rgb), 0.14);
  text-align: center; transform: rotate(-1deg);
}
.no-result-found::before, .page-404::before { content: ""; position: absolute; top: -15px; left: 50%; width: 130px; height: 32px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); }
.no-result-found::after, .page-404::after { content: "oeps!"; position: absolute; top: -34px; left: -26px; font: 700 46px "Caveat", cursive; color: var(--gold); transform: rotate(-12deg); }
.no-result-found h1, .page-404 h2 { margin: 0 0 22px; font-size: 0 !important; line-height: 1; letter-spacing: 0 !important; text-transform: none !important; }
.no-result-found h1::after, .page-404 h2::after {
  content: "Niets gevonden"; display: inline; padding: 0 10px; font: 400 52px/1.3 "DM Serif Display", serif; color: var(--ink);
  background: linear-gradient(transparent 58%, var(--gold-soft) 58%, var(--gold-soft) 88%, transparent 88%);
}
.page-404 h2::after { content: "Pagina niet gevonden"; font-size: 44px; }
/* The theme draws a faded "404" behind the heading; it becomes an outlined gold number above it instead */
.page-404 h2::before {
  position: static; display: block; margin: 0 0 16px; transform: none; opacity: 1; font: 400 120px/1 "DM Serif Display", serif; letter-spacing: 0.04em;
  color: rgba(216, 189, 90, 0.25); -webkit-text-stroke: 2px var(--gold);
}
.no-result-found p, .page-404 p { margin: 0 auto 30px; max-width: 440px; font-size: 0 !important; line-height: 0; text-align: center; }
.no-result-found p::before, .page-404 p::before { display: block; margin-bottom: 26px; font: 400 17px/1.7 "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.no-result-found p::before { content: "Ik kon niets vinden met dit zoekwoord. Probeer een ander woord, of kijk rond via het menu."; }
.page-404 p::before { content: "Deze pagina bestaat niet (meer). Misschien is hij verplaatst; kijk rond via het menu of ga terug naar het begin."; }
.no-result-found p a, .page-404 p a { display: inline-block; font-size: 0 !important; line-height: 1; text-decoration: none; background: none; }
.no-result-found p a::after, .page-404 p a::after {
  content: "← terug naar de homepagina"; display: inline-block; padding: 12px 24px; border: 1.5px solid var(--ink); border-radius: 999px;
  font: 500 14px "DM Sans", sans-serif; letter-spacing: 0.04em; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.no-result-found p a:hover::after, .page-404 p a:hover::after { background: var(--gold); border-color: var(--gold); color: #fff; transform: rotate(-2deg); }
/* Search field: rounded, with a round gold button */
.no-result-found #searchform { position: relative; display: block !important; max-width: 420px; margin: 0 auto; }
.no-result-found #s {
  width: 100%; height: 50px; padding: 0 64px 0 22px !important; border: 1.5px solid var(--ink) !important; border-radius: 999px !important; background: var(--card) !important;
  font: 400 16px "DM Sans", sans-serif; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.no-result-found #s:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.no-result-found #s::placeholder { color: var(--ink-soft); opacity: 0.7; }
.no-result-found .svg-fa-wrap, .no-result-found #searchsubmit { top: 5px !important; right: 5px !important; width: 40px !important; height: 40px !important; border-radius: 50%; }
.no-result-found .svg-fa-wrap { display: flex !important; align-items: center; justify-content: center; background: var(--gold) !important; color: #fff !important; pointer-events: none; }
.no-result-found .svg-fa-wrap svg { color: #fff !important; }
.no-result-found #searchsubmit { cursor: pointer; }

/* The hover script for YouTube cards (_local/video-hover.js) sits in an HTML block in the Footer Widgets area; that area is
   otherwise empty, so it is hidden while it holds only the script (the script has already run by then) */
.footer-widgets:has(> .ashe-widget:only-child > #video-hover) { display: none !important; }

/* "Load More" has no Dutch translation in the theme: the link text is replaced, as a rounded button like the menu labels */
.blog-pagination a { display: inline-block; font-size: 0 !important; line-height: 1; text-decoration: none; background: none; }
.blog-pagination a::after {
  content: "Meer projecten laden"; display: inline-block; padding: 12px 26px; border: 1.5px solid var(--ink); border-radius: 999px;
  font: 500 14px "DM Sans", sans-serif; letter-spacing: 0.04em; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.blog-pagination a:hover::after { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Footer: een handgeschreven afsluiting ---------- */
#page-footer { background: var(--card); border-top: 2px dashed rgba(173, 141, 0, 0.45); }
#page-footer .copyright-info { padding-top: 10px; font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--ink-soft); }
#page-footer .copyright-info::before { content: "bedankt voor het kijken!"; display: block; margin-bottom: 10px; font: 700 44px "Caveat", cursive; color: var(--gold); transform: rotate(-2deg); }
.scrolltop { background: var(--gold); color: #fff; border-radius: 999px; }

/* ---------- Programma-iconen: generated by _tools/programma-iconen.mjs, do not edit by hand ---------- */
.tag-photoshop { --i-photoshop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23001e36%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%2331a8ff%22%3EPs%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/photoshop/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23001e36%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%2331a8ff%22%3EPs%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-illustrator { --i-illustrator: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23330000%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff9a00%22%3EAi%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/illustrator/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23330000%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff9a00%22%3EAi%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-indesign { --i-indesign: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%2349021f%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff3366%22%3EId%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/indesign/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%2349021f%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff3366%22%3EId%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-after-effects { --i-after-effects: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%2300005b%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%239999ff%22%3EAe%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/after-effects/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%2300005b%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%239999ff%22%3EAe%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-premiere-pro { --i-premiere-pro: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%232a0634%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ea77ff%22%3EPr%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/premiere-pro/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%232a0634%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ea77ff%22%3EPr%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-adobe-xd { --i-adobe-xd: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23470137%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff61f6%22%3EXd%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/adobe-xd/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23470137%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff61f6%22%3EXd%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-procreate { --i-procreate: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23111111%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3EPc%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/procreate/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23111111%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3EPc%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-scratch { --i-scratch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23855cd6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3ESc%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/scratch/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23855cd6%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3ESc%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-adobe-animate { --i-adobe-animate: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%231f0a00%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff7c1f%22%3EAn%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/adobe-animate/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%231f0a00%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ff7c1f%22%3EAn%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-capcut { --i-capcut: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23000000%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3ECc%3C%2Ftext%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/capcut/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23000000%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%2226.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2217%22%20fill%3D%22%23ffffff%22%3ECc%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.tag-camera { --i-camera: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%232b2620%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%2224%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M15%2014%20L17%2010.5%20H23%20L25%2014%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2222%22%20r%3D%224.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E") "\00a0\00a0"; }
.home .programmas a[href*="/tag/camera/"]::before { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%232b2620%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%2224%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M15%2014%20L17%2010.5%20H23%20L25%2014%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2222%22%20r%3D%224.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c868%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); }
.single article[class*=" tag-"] .post-header::after { content: "gemaakt met\00a0\00a0" var(--i-photoshop, "") var(--i-illustrator, "") var(--i-indesign, "") var(--i-after-effects, "") var(--i-premiere-pro, "") var(--i-adobe-xd, "") var(--i-procreate, "") var(--i-scratch, "") var(--i-adobe-animate, "") var(--i-capcut, "") var(--i-camera, ""); font: 700 22px "Caveat", cursive; letter-spacing: 0; color: var(--gold); }
.blog-grid:not(:has(> li:only-child)) article[class*=" tag-"] .post-header::after { content: var(--i-photoshop, "") var(--i-illustrator, "") var(--i-indesign, "") var(--i-after-effects, "") var(--i-premiere-pro, "") var(--i-adobe-xd, "") var(--i-procreate, "") var(--i-scratch, "") var(--i-adobe-animate, "") var(--i-capcut, "") var(--i-camera, ""); display: block; margin-top: 10px; line-height: 0; transform: scale(0.7); }
.home .programma-kop { margin: 30px 0 10px !important; font: 700 26px "Caveat", cursive !important; color: var(--gold) !important; }
.home .programma-uitleg { margin: -4px 0 14px !important; font: 400 14px/1.5 "DM Sans", sans-serif !important; color: var(--ink-soft) !important; }
.home .programma-uitleg::before { content: "↓ "; color: var(--gold); }
.home ul.programmas { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 0 !important; padding: 0 !important; list-style: none; }
.home ul.programmas li { margin: 0 !important; padding: 0 !important; list-style: none; }
.home ul.programmas li::before, .home ul.programmas li::marker { content: none; }
.home ul.programmas a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; font: 500 11px/1.25 "DM Sans", sans-serif; text-align: center; color: var(--ink-soft); text-decoration: none; background: none !important; }
.home ul.programmas a::before { display: block; line-height: 0; transition: transform 0.2s ease; }
.home ul.programmas a:hover::before { transform: translateY(-3px) rotate(-4deg); }
/* ---------- einde programma-iconen ---------- */

/* ---------- Samengevoegde projecten: een korte rij labels naar de onderdelen, in plaats van een lange opsomming ---------- */
/* Made by _tools/wp-samenvoegen.mjs: a list with class project-inhoud, and an h2 with an anchor per former post */
.post-content ul.project-inhoud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px auto 40px !important; padding: 0 !important; list-style: none; }
.post-content ul.project-inhoud li { margin: 0 !important; padding: 0 !important; list-style: none; }
.post-content ul.project-inhoud li::before, .post-content ul.project-inhoud li::marker { content: none; }
.post-content ul.project-inhoud a { display: block; padding: 5px 13px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--card); font: 500 13px "DM Sans", sans-serif; color: var(--ink-soft); text-decoration: none; }
.post-content ul.project-inhoud a:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.post-content h2[id] { scroll-margin-top: 110px; }
/* Section headings of a merged project: in the same centred column as the text (on wide screens they used to sit at the far
   left of the wide content area, apart from their text), numbered "onderdeel 1, 2 …", with a dashed line between the parts */
.single .post-content { counter-reset: onderdeel; }
.single .post-content > h2.wp-block-heading[id] {
  counter-increment: onderdeel; max-width: 760px; margin: 80px auto 30px !important; padding-top: 40px;
  border-top: 2px dashed var(--gold-line); font-size: 42px !important; line-height: 1.15; text-align: center;
}
.single .post-content > h2.wp-block-heading[id]::before { content: "onderdeel " counter(onderdeel); display: block; margin-bottom: 6px; font: 700 26px/1 "Caveat", cursive; color: var(--gold); }
.single .post-content > h2.wp-block-heading[id]::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; border-radius: 2px; background: var(--gold); }
/* Smaller headings Maaike typed herself (for example in Boost Bord): also centred above the text column */
.single .post-content > :is(h2:not([id]), h3, h4).wp-block-heading { max-width: 760px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
@media (max-width: 600px) {
  .single .post-content > h2.wp-block-heading[id] { margin-top: 56px !important; padding-top: 30px; font-size: 32px !important; }
}
.blog-grid:not(:has(> li:only-child)) ul.project-inhoud { display: none; }

@media (prefers-reduced-motion: reduce) {
  .blog-grid .blog-post, .post-content figure.wp-block-image, .home .wp-block-columns:not(.werk-overzicht) :is(.wp-block-image figure, figure.wp-block-image) { transition: none !important; }
}

/* Narrower desktop screens: slightly smaller menu letters, and room for the icons on the right so the menu never runs
   into them (if it still does not fit, it wraps to a second row, as in the theme itself) */
@media (min-width: 901px) and (max-width: 1150px) {
  #main-menu > li > a { font-size: 11px; letter-spacing: 0.1em; }
  #main-nav .main-menu-container { padding: 0 110px; }
}

@media (max-width: 900px) {
  .home .werk-overzicht { grid-template-columns: repeat(2, 1fr); gap: 44px 26px !important; }
  .home .post-content > p.werk-kop { margin-top: 70px; font-size: 44px !important; }
  .entry-header:not(.html-image) { height: 340px !important; }
  .entry-header::before { width: 100%; background: color-mix(in srgb, var(--ivory) 84%, transparent); }
  .entry-header::after, .entry-header .cvr-container::after { display: none; }
  .entry-header .cvr-container { width: 100% !important; padding: 0 24px; justify-content: center; }
  .header-logo, .entry-header .cvr-inner { text-align: center; }
  .header-logo::before { margin-bottom: 16px; font-size: 10px; letter-spacing: 0.3em; }
  .header-logo .site-title { font-size: clamp(60px, 21vw, 96px) !important; }
  .header-logo .site-description { letter-spacing: 0.3em; font-size: 12px !important; }
  .header-logo .site-description::before { display: none; }
  .header-logo .site-description::after { padding-left: 0; font-size: 20px; }
  .home .post-content > p.has-large-font-size strong { font-size: 46px; }
  .home .post-content > p.has-large-font-size::after { display: none; }
  .home .wp-block-columns:not(.werk-overzicht) { gap: 36px !important; }
  .home .wp-block-columns:not(.werk-overzicht) > .wp-block-column:last-child p:first-child { font-size: 21px; }
  .home .wp-block-columns:not(.werk-overzicht) > .wp-block-column:last-child { padding: 34px 22px 26px 44px; background-image: linear-gradient(90deg, transparent 26px, rgba(173, 141, 0, 0.45) 26px, rgba(173, 141, 0, 0.45) 28px, transparent 28px); }
  .single .post-title, .page .post-title { font-size: 38px; }
  .post-content figure.wp-block-image, .post-content figure.wp-block-image:nth-of-type(n) { transform: rotate(-0.8deg); }
  .blog-grid { grid-template-columns: 1fr; gap: 44px; }
  .blog-grid > li .blog-post { padding: 30px 18px 20px; }
}

@media (max-width: 600px) {
  .category-cv .post-content { margin: 16px 0 40px; padding: 48px 22px 36px; }
  .category-cv .post-title { font-size: 38px !important; }
  .category-cv .post-content > p.has-medium-font-size strong { font-size: 24px; }
  .category-cv .post-content > p { font-size: 15px; }
  .category-cv .post-header::after { font-size: 11px; letter-spacing: 0.14em; }
  .no-result-found, .page-404 { margin: 50px 6px 70px; padding: 54px 24px 40px; }
  .no-result-found::after, .page-404::after { left: -6px; font-size: 38px; }
  .no-result-found h1::after, .page-404 h2::after { font-size: 36px; }
  .page-404 h2::before { font-size: 90px; }
  .entry-header:not(.html-image) { height: 290px !important; }
  .header-logo::before { margin-bottom: 10px; }
  .header-logo .site-description { margin-top: 12px; letter-spacing: 0.22em; font-size: 11px !important; }
  .header-logo .site-description::after { margin-top: 8px; font-size: 18px; }
}

@media (max-width: 400px) {
  .home .werk-overzicht { grid-template-columns: 1fr; }
  .entry-header:not(.html-image) { height: 260px !important; }
  .header-logo::before { font-size: 9px; letter-spacing: 0.22em; }
}

/* ---------- Donkere modus: generated by _tools/donker-blok.mjs from _local/stijlen/donker-bron.css, do not edit here ---------- */
/* The site follows the device setting; the button next to the LinkedIn icon (thema-keuze.js) lets a visitor choose */
:root[data-thema="licht"] { color-scheme: light; }
:root[data-thema="donker"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --ivory: #1b1915;
    --ink: #efe8dc;
    --ink-soft: #b9b0a2;
    --card: #26231e;
    --panel: #302b24;
    --gold: #c9a63a;
    --gold-line: rgba(201, 166, 58, 0.4);
    --gold-soft: rgba(201, 166, 58, 0.32);
    --tape: rgba(201, 170, 80, 0.55);
    --shadow-rgb: 0, 0, 0;
    --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  /* Theme colours that the light version left as they were: white content areas and near-black text */
  :root:not([data-thema="licht"]) #page-wrap, :root:not([data-thema="licht"]) .page-content, :root:not([data-thema="licht"]) .main-content, :root:not([data-thema="licht"]) .main-container, :root:not([data-thema="licht"]) .featured-slider-area { background-color: transparent !important; }
  :root:not([data-thema="licht"]) .post-title, :root:not([data-thema="licht"]) .post-title a, :root:not([data-thema="licht"]) .post-content :is(h1, h2, h3, h4, h5, h6), :root:not([data-thema="licht"]) .post-content strong { color: var(--ink) !important; }
  :root:not([data-thema="licht"]) .post-content, :root:not([data-thema="licht"]) .post-content :is(p, li, td, figcaption), :root:not([data-thema="licht"]) .post-content > span, :root:not([data-thema="licht"]) .copyright-info { color: var(--ink-soft) !important; }
  /* Headings on the homepage that are paragraphs (so the rule above would make them grey) */
  :root:not([data-thema="licht"]) .home .post-content > p:is(.werk-kop, .contact-kop) { color: var(--ink) !important; }
  :root:not([data-thema="licht"]) #mobile-menu, :root:not([data-thema="licht"]) .mobile-menu-container { background-color: var(--card) !important; }
  :root:not([data-thema="licht"]) #mobile-menu a, :root:not([data-thema="licht"]) #mobile-menu li, :root:not([data-thema="licht"]) #main-menu .sub-menu a { color: var(--ink) !important; }
  :root:not([data-thema="licht"]) #mobile-menu svg, :root:not([data-thema="licht"]) #mobile-menu i, :root:not([data-thema="licht"]) #mobile-menu .sub-menu-btn { color: var(--ink) !important; }
  /* Buttons filled gold with dark text, so they stand out on the dark background (the light version keeps its own buttons) */
  :root:not([data-thema="licht"]) .home .featured-slider-area .slider-read-more a, :root:not([data-thema="licht"]) .blog-pagination a::after {
    background: var(--gold) !important; border-color: var(--gold) !important; color: #1f1c17 !important; font-weight: 700;
  }
  :root:not([data-thema="licht"]) .home .featured-slider-area .slider-read-more a:hover, :root:not([data-thema="licht"]) .blog-pagination a:hover::after { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--card) !important; }
}
:root[data-thema="donker"] {
  --ivory: #1b1915;
  --ink: #efe8dc;
  --ink-soft: #b9b0a2;
  --card: #26231e;
  --panel: #302b24;
  --gold: #c9a63a;
  --gold-line: rgba(201, 166, 58, 0.4);
  --gold-soft: rgba(201, 166, 58, 0.32);
  --tape: rgba(201, 170, 80, 0.55);
  --shadow-rgb: 0, 0, 0;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
/* Theme colours that the light version left as they were: white content areas and near-black text */
:root[data-thema="donker"] #page-wrap, :root[data-thema="donker"] .page-content, :root[data-thema="donker"] .main-content, :root[data-thema="donker"] .main-container, :root[data-thema="donker"] .featured-slider-area { background-color: transparent !important; }
:root[data-thema="donker"] .post-title, :root[data-thema="donker"] .post-title a, :root[data-thema="donker"] .post-content :is(h1, h2, h3, h4, h5, h6), :root[data-thema="donker"] .post-content strong { color: var(--ink) !important; }
:root[data-thema="donker"] .post-content, :root[data-thema="donker"] .post-content :is(p, li, td, figcaption), :root[data-thema="donker"] .post-content > span, :root[data-thema="donker"] .copyright-info { color: var(--ink-soft) !important; }
/* Headings on the homepage that are paragraphs (so the rule above would make them grey) */
:root[data-thema="donker"] .home .post-content > p:is(.werk-kop, .contact-kop) { color: var(--ink) !important; }
:root[data-thema="donker"] #mobile-menu, :root[data-thema="donker"] .mobile-menu-container { background-color: var(--card) !important; }
:root[data-thema="donker"] #mobile-menu a, :root[data-thema="donker"] #mobile-menu li, :root[data-thema="donker"] #main-menu .sub-menu a { color: var(--ink) !important; }
:root[data-thema="donker"] #mobile-menu svg, :root[data-thema="donker"] #mobile-menu i, :root[data-thema="donker"] #mobile-menu .sub-menu-btn { color: var(--ink) !important; }
/* Buttons filled gold with dark text, so they stand out on the dark background (the light version keeps its own buttons) */
:root[data-thema="donker"] .home .featured-slider-area .slider-read-more a, :root[data-thema="donker"] .blog-pagination a::after {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #1f1c17 !important; font-weight: 700;
}
:root[data-thema="donker"] .home .featured-slider-area .slider-read-more a:hover, :root[data-thema="donker"] .blog-pagination a:hover::after { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--card) !important; }
/* ---------- einde donkere modus ---------- */