/*
Theme Name: SV Middelburg
Theme URI: https://svmiddelburg.nl
Author: Schaakvereniging Middelburg
Description: Custom thema voor Schaakvereniging Middelburg — opgericht in 1907. Klassiek, donker en elegant: espresso met goud, Cormorant Garamond en Alegreya Sans.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sv-middelburg
Tags: chess, club, custom-menu, custom-logo, featured-images, accessibility-ready
*/

/* ==========================================================================
   Design tokens — "Classical": donker espresso met goud
   ========================================================================== */

:root {
  /* -- Gronden (donker) -- */
  --color-bg:            #17130d;   /* hoofd-achtergrond */
  --color-bg-2:          #140f0a;   /* dieper: hero, aanbod */
  --color-bg-3:          #1a150e;   /* panelen, facts, wissel-secties */
  --color-bg-4:          #1c1710;   /* divider-basis */
  --color-surface:       #1b1610;   /* kaart-/paneeloppervlak */
  --color-surface-2:     #211a12;   /* iets lichter paneel (formulier) */

  /* -- Goud-ramp (gedeelde OKLCH-schaal) -- */
  --color-accent-100:    #fff3e4;
  --color-accent-200:    #ffe3bf;
  --color-accent-300:    #facb8d;
  --color-accent-400:    #e1ad66;
  --color-accent-500:    #c28d41;
  --color-accent-600:    #a06f24;
  --color-accent-700:    #7d5411;
  --color-accent-800:    #5a3b0a;
  --color-accent-900:    #3a270d;

  --color-accent:        var(--color-accent-300);   /* zichtbaar accent op donker */
  --color-accent-strong: var(--color-accent-400);   /* glyphs, iets rustiger */
  --color-accent-hover:  var(--color-accent-200);
  --color-accent-ink:    var(--color-accent-300);

  /* -- Tekst op donker -- */
  --color-heading:       #f5ecdb;
  --color-text:          #e6ddcd;
  --color-text-strong:   #f2e9d8;
  --color-text-muted:    #c1b7a2;
  --color-text-faint:    #8f866f;

  /* -- Lijnen & randen -- */
  --color-border:        rgba(214, 175, 110, 0.18);
  --color-border-strong: rgba(214, 175, 110, 0.30);
  --color-divider:       rgba(214, 175, 110, 0.12);

  /* -- Natuurlijke schaakkleuren -- */
  --color-board-light:   #d8b98a;   /* licht houtveld */
  --color-board-dark:    #7d5411;   /* donker veld (walnoot) */
  --color-piece-light:   #efe6d4;   /* ivoren stuk */
  --color-piece-dark:    #1a130c;   /* ebbenhouten stuk */

  /* -- Legacy-aliassen (zodat inline template-styles blijven kloppen) -- */
  --color-coffee:        var(--color-bg);
  --color-coffee-2:      var(--color-bg-2);
  --color-chestnut:      var(--color-accent-300);
  --color-chestnut-2:    var(--color-accent-400);
  --color-dark:          var(--color-bg);
  --color-white:         var(--color-heading);
  --color-parchment:     var(--color-piece-light);
  --color-parchment-2:   #e4d9c3;
  --color-link:          var(--color-accent-300);
  --color-link-hover:    var(--color-accent-200);
  --color-surface-alt:   var(--color-bg-3);
  --color-surface-alt-2: var(--color-bg-2);
  --color-border-dark:   var(--color-border-strong);
  --color-text-on-dark:  var(--color-text);
  --color-primary:       var(--color-accent-300);

  /* -- Typografie -- */
  /* Koppen behouden hun klassieke schreefletter; lopende tekst gebruikt een
     humanistische schreefloze — op een donkere achtergrond blijven dunne
     schreven slecht leesbaar, een sans houdt kleine tekst helder. */
  --font-heading:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:           'Alegreya Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono:           'Source Code Pro', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-chess:          'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2', 'DejaVu Sans', serif;

  /* Ondergrens 14px (0.875rem): ook de kleinste labels blijven leesbaar. */
  --text-xs:              clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);   /* 14 - 15px */
  --text-sm:              clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);       /* 15 - 16px */
  --text-base:            clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);      /* 17 - 18px */
  --text-lg:              clamp(1.125rem, 1.05rem + 0.4vw, 1.28rem);      /* 18 - 20px */
  --text-xl:              clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --text-2xl:             clamp(1.5rem, 1.28rem + 1.1vw, 2rem);
  --text-3xl:             clamp(1.9rem, 1.55rem + 1.75vw, 2.85rem);
  --text-4xl:             clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl:             clamp(2.6rem, 1.9rem + 3.3vw, 4.4rem);

  --leading-tight:        1.08;
  --leading-snug:         1.3;
  --leading-normal:       1.65;
  --leading-relaxed:      1.8;

  --space-xs:             0.25rem;
  --space-sm:             0.5rem;
  --space-md:             1rem;
  --space-lg:             1.5rem;
  --space-xl:             2rem;
  --space-2xl:            3rem;
  --space-3xl:            4.5rem;
  --space-4xl:            6rem;
  --space-section:        clamp(4rem, 3rem + 5vw, 7rem);

  --max-width:            1200px;
  --max-width-narrow:     680px;
  --max-width-wide:       1320px;
  --gutter:               clamp(1.35rem, 0.6rem + 2.6vw, 3.5rem);

  /* Hoogte van de plakkende koptekst. Wordt gebruikt voor het mobiele menu
     (max-hoogte) en voor scroll-padding, zodat ankerlinks niet onder de
     koptekst verdwijnen. Op smalle schermen wordt deze waarde verlaagd. */
  --header-height:        4.75rem;

  --radius-sm:            2px;
  --radius-md:            4px;
  --radius-lg:            7px;
  --radius-xl:            8px;
  --radius-2xl:           10px;
  --radius-full:          50%;
  --radius-btn:           4px;

  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:            0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:            0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-tile:          0 22px 48px -24px rgba(0, 0, 0, 0.75);
  --shadow-float:         0 34px 70px -30px rgba(0, 0, 0, 0.8);

  --transition-fast:      150ms ease;
  --transition-base:      260ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);

  --z-header:             100;
  --z-dropdown:           200;
  --z-modal:              400;
}

/* ==========================================================================
   Breekpunten — één vaste ladder voor de hele stylesheet
   --------------------------------------------------------------------------
   CSS kent geen variabelen in media queries; deze tabel is de afspraak.

     <  30rem  ( 480px)  kleine telefoon
     >= 30rem  ( 480px)  grote telefoon
     >= 35rem  ( 560px)  telefoon liggend
     >= 48rem  ( 768px)  tablet staand
     >= 60rem  ( 960px)  tablet liggend / kleine laptop  -> volledige navigatie
     >= 75rem  (1200px)  desktop
     >= 100rem (1600px)  breedbeeld
     >= 120rem (1920px)  zeer breed
   ========================================================================== */

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Ankerlinks (#kop) stoppen onder de plakkende koptekst zonder deze marge. */
  scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* Iets steviger dan regular: op een donkere ondergrond ogen dunne letters
     uitgebleekt, weight 500 houdt de tekst rustig en scherp. */
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Lange samenstellingen en e-mailadressen mogen breken in plaats van de
     lay-out op te rekken — anders schuift een smalle telefoon horizontaal. */
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(250, 203, 141, 0.18);
}

/* Media schaalt mee en steekt nooit buiten zijn kolom */
img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
}

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

/* Code en preformatted tekst scrollen intern in plaats van de pagina te rekken */
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-md);
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code, kbd, samp { font-family: var(--font-mono); overflow-wrap: anywhere; }
pre code { overflow-wrap: normal; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(250, 203, 141, 0.4);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

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

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Koppen zijn groot; een lange titel moet kunnen breken en netjes over de
     regels verdeeld worden in plaats van één losse staartregel te houden. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: 400; }
h2 { font-size: var(--text-3xl); font-weight: 400; }
h3 { font-size: var(--text-2xl); font-weight: 500; }
h4 { font-size: var(--text-xl); font-weight: 600; }
h5 { font-size: var(--text-lg); font-weight: 600; }
h6 {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--color-text-strong); font-weight: 700; }

blockquote {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-sm) clamp(var(--space-md), 3vw, var(--space-xl));
  margin: var(--space-xl) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-heading);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  font-size: var(--text-sm);
}

th, td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

tbody tr:hover { background: rgba(214, 175, 110, 0.05); }

hr {
  border: 0;
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2xl) 0;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--max-width-narrow); }
.container--wide   { max-width: var(--max-width-wide); }

.chess {
  font-family: var(--font-chess);
  font-variant-emoji: text;
  -webkit-font-feature-settings: normal;
  line-height: 1;
}

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.screen-reader-text:focus {
  position: fixed;
  top: var(--space-sm); left: var(--space-sm);
  width: auto; height: auto;
  padding: var(--space-sm) var(--space-md);
  margin: 0; overflow: visible; clip: auto;
  white-space: normal;
  background: var(--color-accent);
  color: var(--color-bg);
  z-index: calc(var(--z-modal) + 1);
  font-weight: 600;
  border-radius: var(--radius-md);
}

/* Kicker — het gouden, gespatieerde labeltje uit het ontwerp */
.kicker,
.eyebrow,
.section__eyebrow,
.info-section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent-300);
  margin-bottom: var(--space-md);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4em 0.95em;
  color: var(--color-accent-300);
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-sm);
}

/* Accentwoord in koppen */
.accent-word { color: var(--color-accent-300); }
.hero__title .accent-word { font-style: italic; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.95em 1.9em;
  /* Knoppen in de schreefloze letter: kapitalen in Cormorant lezen slecht. */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  /* Nederlandse knoplabels zijn lang ("Kom een vrijdagavond langs"). Met
     `nowrap` liep zo'n knop op een telefoon van 320px buiten beeld; laat hem
     liever afbreken en de regels gelijkmatig verdelen. */
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  /* Comfortabel tikdoel op aanraakschermen (richtlijn: 44px). */
  min-height: 2.75rem;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); }

/* Primair = gevuld goud met donkere tekst (zoals in het ontwerp) */
.btn--primary {
  background-color: var(--color-accent-300);
  color: #141009;
  border-color: var(--color-accent-300);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-200);
  border-color: var(--color-accent-200);
  color: #141009;
}

/* Secundair = gouden omlijning */
.btn--secondary {
  background-color: transparent;
  color: var(--color-accent-300);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: rgba(250, 203, 141, 0.1);
  border-color: var(--color-accent-300);
  color: var(--color-accent-200);
}

.btn--ghost-light {
  background-color: transparent;
  color: var(--color-accent-300);
  border-color: var(--color-border-strong);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background-color: rgba(250, 203, 141, 0.1);
  border-color: var(--color-accent-300);
  color: var(--color-accent-200);
}

.btn--lg {
  padding: 1.05em 2.3em;
  font-size: var(--text-base);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: var(--z-header);
  background-color: rgba(20, 15, 10, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-md);
  background-color: rgba(20, 15, 10, 0.97);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--space-md);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-heading);
  /* Mag krimpen: op een smalle telefoon duwde de naam de menuknop anders
     buiten beeld. `min-width: 0` heft de impliciete minimumbreedte van een
     flex-item op, zodat de clubnaam over twee regels mag lopen. */
  flex: 0 1 auto;
  min-width: 0;
}

.site-branding:hover,
.site-branding:focus-visible { color: var(--color-heading); }

.site-branding__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.site-branding__mark {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.site-branding__mark svg { width: 100%; height: 100%; }

.site-branding__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.site-branding__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-heading);
  overflow-wrap: break-word;
}

.site-branding__tagline {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: 2px;
}

/* Primary nav */
.primary-nav { display: none; }

.primary-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem;
}

.primary-nav__item { position: relative; }

.primary-nav__link {
  display: block;
  padding: var(--space-md) 0.95rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__item.current-menu-item > .primary-nav__link,
.primary-nav__item.current-menu-parent > .primary-nav__link,
.primary-nav__item.current-menu-ancestor > .primary-nav__link {
  color: var(--color-accent-300);
}

/* Submenu */
.primary-nav__item .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  padding: var(--space-sm) 0;
  background-color: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
  list-style: none;
}

.primary-nav__item:hover > .sub-menu,
.primary-nav__item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu .primary-nav__link {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sub-menu .primary-nav__link:hover,
.sub-menu .primary-nav__link:focus-visible {
  background-color: rgba(250, 203, 141, 0.08);
  color: var(--color-accent-300);
}

.sub-menu .sub-menu { top: 0; left: 100%; }

/* De laatste twee menu-items klappen hun submenu naar links open, zodat het
   niet buiten de rechterrand van het venster valt. */
.primary-nav__list > .primary-nav__item:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: 0;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent-300);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: var(--color-accent-300);
  color: var(--color-accent-200);
}

.menu-toggle__icon { width: 1.35rem; height: 1.35rem; }

@media (min-width: 60rem) {
  .primary-nav { display: block; }
  .menu-toggle { display: none; }
}

/* Tussen 960px en 1200px staat het volledige menu naast de clubnaam op een
   krappe regel; iets minder tussenruimte houdt alles op één lijn. */
@media (min-width: 60rem) and (max-width: 74.99rem) {
  .primary-nav__link { padding-inline: 0.6rem; font-size: var(--text-xs); }
  .site-header__inner { gap: var(--space-sm); }
}

.primary-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg-3);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  /* dvh volgt de werkelijke zichtbare hoogte op mobiel, waar de adresbalk
     in- en uitschuift; vh rekent daar met de grootste stand en zou het menu
     onder de onderrand laten doorlopen. */
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.primary-nav.is-open .primary-nav__list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Ruime, duidelijk gescheiden tikdoelen in het uitgeklapte menu */
.primary-nav.is-open .primary-nav__link {
  padding: 0.8rem 0.5rem;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-divider);
}

.primary-nav.is-open .primary-nav__list > .primary-nav__item:last-child > .primary-nav__link {
  border-bottom: 0;
}

.primary-nav.is-open .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  border: none;
  border-left: 1px solid var(--color-border);
  box-shadow: none;
  min-width: 0;
  padding: 0 0 0 var(--space-md);
  margin-left: 0.5rem;
  background: transparent;
}

.primary-nav.is-open .sub-menu .primary-nav__link {
  font-size: var(--text-sm);
  padding-block: 0.65rem;
}

/* ==========================================================================
   Hero — donker bord-textuur met "1907"-watermerk
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--color-text);
  padding-block: clamp(3.75rem, 2.75rem + 6vw, 6.5rem);
  background-color: var(--color-bg-2);
  background-image:
    linear-gradient(45deg, rgba(214, 175, 110, 0.045) 25%, transparent 25% 75%, rgba(214, 175, 110, 0.045) 75%),
    linear-gradient(45deg, rgba(214, 175, 110, 0.045) 25%, transparent 25% 75%, rgba(214, 175, 110, 0.045) 75%);
  background-size: 128px 128px;
  background-position: 0 0, 64px 64px;
}

/* Hero mét achtergrondfoto. De foto komt uit de customizer en wordt via de
   variabele --hero-image op het element gezet. Twee lagen eroverheen houden
   de tekst leesbaar: een egale donkere waas plus een verloop dat naar de
   onderkant toe dichter wordt, waar de knoppen staan. */
.hero--photo {
  background-image: none;
}

.hero--photo::before,
.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero--photo::before {
  z-index: -2;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 40%;
  /* Zelfde sepia-behandeling als de fotokaders elders op de site. */
  filter: sepia(0.28) saturate(0.8) contrast(1.02);
}

.hero--photo::after {
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 35%, rgba(20, 15, 10, 0.62) 0%, rgba(20, 15, 10, 0.86) 70%, rgba(20, 15, 10, 0.94) 100%),
    linear-gradient(to bottom, rgba(20, 15, 10, 0.55), rgba(20, 15, 10, 0.8));
}

.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(9rem, 4rem + 24vw, 21rem);
  line-height: 1;
  color: rgba(224, 173, 102, 0.1);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin-inline: auto;
}

.hero__pieces {
  color: var(--color-accent-300);
  font-size: clamp(1.05rem, 0.7rem + 1.4vw, 1.5rem);
  letter-spacing: 0.55em;
  margin-bottom: var(--space-lg);
  padding-left: 0.55em; /* compenseert de letter-spacing zodat de rij optisch centreert */
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent-300);
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: 400;
  color: var(--color-heading);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  max-width: 18ch;
  text-wrap: balance;
}

.hero__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* Op een telefoon staan de twee hoofdacties onder elkaar over de volle
   breedte — dat leest rustiger dan twee half afgebroken knoppen naast elkaar. */
@media (max-width: 34.99rem) {
  .hero__actions,
  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .cta-section__actions .btn,
  .offer .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Checker divider — strakke schaakbordrand tussen secties
   ========================================================================== */

.board-divider {
  height: 26px;
  width: 100%;
  background-color: var(--color-bg-4);
  background-image:
    linear-gradient(45deg, var(--color-board-dark) 25%, transparent 25% 75%, var(--color-board-dark) 75%),
    linear-gradient(45deg, var(--color-board-dark) 25%, transparent 25% 75%, var(--color-board-dark) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}

/* ==========================================================================
   Facts — drie feiten met schaakglyphs
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  background-color: var(--color-bg-3);
  border-bottom: 1px solid var(--color-border);
}

.fact {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.4rem) var(--space-lg);
}

.fact + .fact { border-left: 1px solid var(--color-border); }

.fact__glyph {
  color: var(--color-accent-400);
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 0.7rem;
}

.fact__value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

.fact__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-top: 0.55rem;
}

@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ==========================================================================
   Intro
   ========================================================================== */

.intro {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 4vw, 4.25rem) var(--gutter);
  text-align: center;
}

.intro__text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}

/* ==========================================================================
   Split — tekst naast een 'plate' (jeugd)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: -1; }
}

.split__body {
  padding: clamp(2.5rem, 1.75rem + 3.5vw, 3.6rem) var(--gutter);
  align-self: center;
  /* De split loopt van rand tot rand. Zonder maximum werd de tekstregel op
     een breedbeeldscherm meer dan 1000px lang en dus onleesbaar. */
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
}

.split__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
}

.split__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.split__media { min-height: clamp(13rem, 45vw, 20rem); }

/* Zonder bovengrens bepaalt de foto zelf de hoogte van het blok: een staande
   opname in een kolom van ~900px werd ruim 1200px hoog, waardoor de sectie op
   desktop niet meer binnen één schermhoogte paste. De afbeelding vult nu een
   begrensd kader (object-fit: cover snijdt netjes bij) in plaats van andersom. */
.split__media img {
  max-height: min(74vh, 30rem);
  /* Bij het bijsnijden van een staande foto naar een liggend kader valt het
     midden op de onderste helft; bij een foto van iemand aan het bord verdwijnt
     de speler dan uit beeld. Iets boven het midden houdt mens én bord vast. */
  object-position: var(--focus, center 28%);
}

/* ==========================================================================
   Plate — sepia fotokader / placeholder
   ========================================================================== */

.plate {
  position: relative;
  overflow: hidden;
  border: 6px solid #23190f;
  outline: 1px solid var(--color-border);
  background-color: var(--color-bg-3);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.85) contrast(1.03);
}

.plate__fill {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, #241c13 0 15px, #1d1610 15px 30px);
}

.plate__label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* Het label bevat het volledige adres; op een telefoon paste dat niet op
     één regel en werd het door de kader-overflow half weggesneden. */
  width: calc(100% - 2rem);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ==========================================================================
   Offer — welkomstblok
   ========================================================================== */

.offer {
  text-align: center;
  padding: clamp(3rem, 2rem + 4vw, 4rem) var(--gutter);
  background-color: var(--color-bg-2);
}

.offer__glyph {
  color: var(--color-accent-400);
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.offer__text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-heading);
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.offer__text em {
  font-style: normal;
  color: var(--color-accent-300);
}

/* ==========================================================================
   Sections (generiek)
   ========================================================================== */

.section { padding-block: var(--space-section); }
.section--alt { background-color: var(--color-bg-3); }
.section--dark { background-color: var(--color-bg-2); }

.section__header {
  text-align: center;
  margin-bottom: clamp(2rem, 1.15rem + 4vw, 4.5rem);
  max-width: 44rem;
  margin-inline: auto;
}

.section__glyph {
  color: var(--color-accent-400);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.section__title {
  font-weight: 400;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.section__description {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Twee knoppen naast elkaar; op een telefoon wikkelen ze met dezelfde
   tussenruimte in plaats van tegen elkaar aan te plakken. */
.section__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   Cards — agenda & nieuws
   ========================================================================== */

/* min() vangt het geval af waarin de minimumbreedte groter is dan de
   beschikbare ruimte: zonder dat rekt het raster de pagina op een telefoon op. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-lg);
}

.n-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

a.n-card:hover,
a.n-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-accent-500);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.n-card__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.n-card__kicker .chess { font-size: 0.95rem; }

.n-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-heading);
}

.n-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  flex: 1;
}

.n-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ==========================================================================
   Location
   ========================================================================== */

.location {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.25rem);
  align-items: center;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 4vw, 4.5rem) var(--gutter);
}

@media (min-width: 52rem) {
  .location { grid-template-columns: 1fr 1fr; }
}

/* Rasteritems mogen krimpen; anders bepaalt het langste woord de kolombreedte. */
.location > * { min-width: 0; }

.location__media > .plate { min-height: clamp(12rem, 42vw, 18rem); }

/* Twee beelden naast elkaar: de gevel en de zaal. Naast elkaar blijven ze
   met elkaar in verband staan — "hier naar binnen, daar kom je uit". */
.location__media--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.location__shot { margin: 0; min-width: 0; }

.location__shot .plate {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.location__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Op de gevelfoto staat de deur rechts van het midden; een middencrop
     zou juist de ingang wegsnijden. */
  object-position: var(--focus, center);
}

.location__caption {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  text-align: center;
  text-wrap: balance;
}

/* Naast elkaar worden de twee beelden op een telefoon zo'n 123px breed —
   te klein om de voordeur aan te herkennen, terwijl dat juist het doel is.
   Onder elkaar krijgen ze de volle breedte; de iets lagere beeldverhouding
   houdt het blok daarbij binnen de perken. */
@media (max-width: 34.99rem) {
  .location__media--duo { grid-template-columns: 1fr; }
  .location__shot .plate { aspect-ratio: 4 / 3; }
}

.location__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}

.location__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Categoriefilter — nieuwspagina en categorie-archieven
   ========================================================================== */

.cat-filter {
  margin-bottom: clamp(2rem, 1.25rem + 3vw, 3rem);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-divider);
}

.cat-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-filter__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 1rem;
  min-height: 2.75rem;          /* comfortabel tikdoel */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.cat-filter__link:hover,
.cat-filter__link:focus-visible {
  color: var(--color-accent-200);
  border-color: var(--color-accent-300);
  background-color: rgba(250, 203, 141, 0.08);
}

.cat-filter__link.is-active {
  color: #141009;
  background-color: var(--color-accent-300);
  border-color: var(--color-accent-300);
}

.cat-filter__count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* Binnen de actieve pil is de achtergrond goud; een subtiel donker vlakje
   houdt het aantal daar leesbaar. */
.cat-filter__link.is-active .cat-filter__count {
  opacity: 0.65;
}

/* ==========================================================================
   Post cards (archief, blog, zoeken)
   ========================================================================== */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-xl);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  overflow: hidden;
  transition: transform var(--transition-base);
}

.post-card:hover { transform: translateY(-4px); }

.post-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-3);
  margin-bottom: var(--space-lg);
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

.post-card:hover .post-card__image img { transform: scale(1.03); }

.post-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-400);
  font-family: var(--font-chess);
  font-variant-emoji: text;
  font-size: 3.5rem;
  opacity: 0.7;
}

.post-card__body { display: flex; flex-direction: column; flex: 1; }

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.post-card__category {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-300);
  text-decoration: none;
}

.post-card__category:hover { color: var(--color-accent-200); }

.post-card__title {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.post-card__title a {
  text-decoration: none;
  color: var(--color-heading);
  transition: color var(--transition-fast);
}

.post-card__title a:hover { color: var(--color-accent-300); }

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-md);
  flex: 1;
}

.post-card__more {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-300);
  text-decoration: none;
}

.post-card__more:hover { color: var(--color-accent-200); }

/* ==========================================================================
   Events list (agenda-pagina)
   ========================================================================== */

.events-list {
  display: grid;
  gap: 0;
  max-width: 42rem;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding-inline: var(--space-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
}

.event-item:last-child { border-bottom: none; }
.event-item:hover { background-color: rgba(214, 175, 110, 0.06); color: var(--color-text); }

.event-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
  line-height: 1;
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-border);
}

.event-item__date-day {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--color-accent-300);
}

.event-item__date-month {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-text-faint);
  margin-top: 2px;
}

.event-item__info { flex: 1; min-width: 0; }

.event-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--color-heading);
}

.event-item__details { font-size: var(--text-sm); color: var(--color-text-muted); }

.event-item__arrow {
  color: var(--color-accent-300);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.event-item:hover .event-item__arrow { opacity: 1; transform: translateX(3px); }

/* Compacter op een telefoon: smallere datumkolom, minder binnenruimte en geen
   pijltje (dat verschijnt toch alleen bij hover, wat op touch niet bestaat). */
@media (max-width: 34.99rem) {
  .events-list {
    padding-inline: var(--space-sm);
    border-radius: var(--radius-md);
  }

  .event-item {
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }

  .event-item__date {
    width: 3rem;
    min-width: 3rem;
    padding-right: var(--space-sm);
  }

  .event-item__date-day { font-size: 1.55rem; }
  .event-item__arrow { display: none; }
}

/* ==========================================================================
   CTA
   ========================================================================== */

.cta-section { text-align: center; }

.cta-section__title {
  font-size: var(--text-3xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.cta-section__text {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.cta-section__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  background-color: var(--color-bg-2);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3xl);
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--color-accent-300); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
  margin-bottom: var(--space-2xl);
}

.footer-col__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-lg);
}

.footer-col { min-width: 0; }
.footer-col ul li { margin-bottom: var(--space-xs); }
/* inline-block + verticale padding maakt van de voetlinks een tikdoel dat
   op een aanraakscherm goed te raken is. */
.footer-col ul li a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--text-sm);
  opacity: 0.85;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.footer-col ul li a:hover { opacity: 1; }
.footer-col p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  min-width: 0;
}

.footer-contact-item span { min-width: 0; overflow-wrap: anywhere; }

.footer-contact-item a {
  display: inline-block;
  min-width: 0;
  padding-block: 0.35rem;
  overflow-wrap: anywhere;
}

.footer-contact-item svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.25em;
  color: var(--color-accent-400);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Op een telefoon wikkelen de drie onderdelen; gecentreerd oogt dat rustiger
   dan links/rechts uitgelijnde brokjes onder elkaar. */
@media (max-width: 47.99rem) {
  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
  }
}

.footer-bottom a {
  display: inline-block;
  font-size: var(--text-xs);
  padding-block: 0.4rem;
}

.footer-founded {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-founded .chess { color: var(--color-accent-400); font-size: 1rem; }

/* ==========================================================================
   Page templates
   ========================================================================== */

.page-header {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-2);
  color: var(--color-heading);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4rem);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background-color: var(--color-bg-4);
  background-image:
    linear-gradient(45deg, var(--color-board-dark) 25%, transparent 25% 75%, var(--color-board-dark) 75%),
    linear-gradient(45deg, var(--color-board-dark) 25%, transparent 25% 75%, var(--color-board-dark) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  opacity: 0.85;
  pointer-events: none;
}

.page-header__title {
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
}

.page-header__breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-sm);
}

.page-header__breadcrumb a { color: var(--color-accent-300); text-decoration: none; }
.page-header__breadcrumb a:hover { text-decoration: underline; }

.page-content { padding-block: var(--space-section); }

.page-content .entry-content {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.entry-content { color: var(--color-text); }
.entry-content > * + * { margin-top: var(--space-lg); }

.entry-content h2 { font-size: var(--text-2xl); font-weight: 400; margin-top: var(--space-2xl); }
.entry-content h3 { font-size: var(--text-xl); font-weight: 500; margin-top: var(--space-xl); }

/* Kale URL's in de tekst mogen afbreken in plaats van de kolom op te rekken. */
.entry-content a { color: var(--color-accent-300); overflow-wrap: anywhere; }

.entry-content ul, .entry-content ol { padding-left: 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: var(--space-sm); }
.entry-content li::marker { color: var(--color-accent-500); }

.entry-content img {
  border-radius: var(--radius-md);
  margin-block: var(--space-lg);
}

/* ==========================================================================
   Single post
   ========================================================================== */

.single-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.single-post__category {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-300);
  text-decoration: none;
}

.post-navigation {
  display: grid;
  /* Twee lange berichttitels naast elkaar werden op een telefoon onleesbaar
     smal; onder elkaar tot 40rem (640px). */
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.post-navigation > * { min-width: 0; }

.post-navigation__next { text-align: left; }

@media (min-width: 40rem) {
  .post-navigation { grid-template-columns: 1fr 1fr; }
  .post-navigation__next { text-align: right; }
}

.post-navigation a { color: var(--color-heading); text-decoration: none; }
.post-navigation a:hover { color: var(--color-accent-300); }

.post-navigation__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Archive & pagination
   ========================================================================== */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-3xl);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pagination a {
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.pagination a:hover {
  background-color: var(--color-accent-300);
  color: var(--color-bg);
  border-color: var(--color-accent-300);
}

.pagination .current {
  background-color: var(--color-accent-300);
  color: var(--color-bg);
  border: 1px solid var(--color-accent-300);
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.widget { margin-bottom: var(--space-2xl); }

.widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   WordPress
   ========================================================================== */

.wp-caption { max-width: 100%; margin-bottom: var(--space-lg); }
.wp-caption-text { font-size: var(--text-sm); color: var(--color-text-faint); padding-top: var(--space-sm); font-style: italic; }
.alignleft { float: left; margin: 0 var(--space-lg) var(--space-lg) 0; }
.alignright { float: right; margin: 0 0 var(--space-lg) var(--space-lg); }
.aligncenter { display: block; margin-inline: auto; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-md);
  margin-block: var(--space-xl);
}

.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--radius-sm); }

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"],
textarea, select {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

input:focus, textarea:focus, select:focus {
  border-color: var(--color-accent-300);
  box-shadow: 0 0 0 3px rgba(250, 203, 141, 0.15);
  outline: none;
}

textarea { min-height: 8rem; resize: vertical; }

/* Standaard WP-zoekformulier (404- en zoekpagina): veld + knop op één regel,
   knop in de stijl van de secundaire knoppen. */
.search-form {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.search-form label { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }

.search-form .search-submit {
  flex: 0 0 auto;
  padding: 0.7em 1.2em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent-300);
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
  background-color: rgba(250, 203, 141, 0.1);
  border-color: var(--color-accent-300);
  color: var(--color-accent-200);
}

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Rasteritems krijgen standaard `min-width: auto` en kunnen dus niet smaller
   worden dan hun langste woord. Het adres competitieleider@svmiddelburg.nl
   duwde de hele pagina daardoor 35px breder dan een telefoon van 320px. */
.contact-layout > * { min-width: 0; }

@media (min-width: 55rem) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
  }
}

.contact-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.contact-panel .kicker { margin-bottom: var(--space-lg); }

.contact-info__list {
  display: grid;
  gap: 0;
  margin-bottom: 0;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.contact-card > div { min-width: 0; }

.contact-card:first-of-type { padding-top: 0; border-top: 0; }
.contact-card:last-of-type { padding-bottom: 0; }

.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent-400);
}

.contact-card__icon svg { width: 1.4rem; height: 1.4rem; }

.contact-card__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-300);
  margin-bottom: var(--space-xs);
}

.contact-card__text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.contact-card__text a { color: var(--color-text); }
.contact-card__text a:hover { color: var(--color-accent-300); }

.contact-map {
  overflow: hidden;
  border: 6px solid #23190f;
  outline: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xl);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(14rem, 45vw, 18rem);
  border: 0;
}

/* Klik-om-te-laden vlak (AVG: geen Google-verbinding vóór toestemming) */
.contact-map__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: clamp(14rem, 45vw, 18rem);
  padding: var(--space-lg);
  cursor: pointer;
  text-align: center;
  border: 0;
  color: var(--color-text-muted);
  background-color: var(--color-bg-3);
  background-image: repeating-linear-gradient(135deg, #241c13 0 15px, #1d1610 15px 30px);
  font-family: var(--font-body);
  transition: color var(--transition-fast);
}

.contact-map__consent:hover,
.contact-map__consent:focus-visible { color: var(--color-accent-300); }

.contact-map__icon { font-size: 2rem; line-height: 1; color: var(--color-accent-400); }

.contact-map__label {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-heading);
}

.contact-map__note { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 24rem; }

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.contact-actions__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.contact-actions__note strong { color: var(--color-accent-300); font-weight: 600; }

.contact-form-panel {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-lg), 1.25rem + 2vw, var(--space-2xl));
  min-width: 0;
}

/* ==========================================================================
   Route — "Zo vind je ons": genummerde stappen met foto
   ========================================================================== */

.route__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.25rem + 3vw, 3rem);
  counter-reset: route;
}

/* Drie stappen naast elkaar zodra de kolommen breed genoeg blijven om de
   foto's herkenbaar te houden; daaronder netjes onder elkaar, wat voor een
   route sowieso de duidelijkste volgorde is. */
@media (min-width: 54rem) {
  .route__steps { grid-template-columns: repeat(3, 1fr); }
}

.route__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.route__media {
  /* Vierkant kader: de ene foto is liggend, de andere staand — zo staan ze
     toch als een rustige rij naast elkaar. */
  aspect-ratio: 1 / 1;
  width: 100%;
}

.route__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per stap bijgestuurd: op de gevelfoto staat de deur rechts van het
     midden, dus een middencrop zou juist de ingang wegsnijden. */
  object-position: var(--focus, center);
}

.route__arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-accent-400);
}

.route__arrow svg { width: clamp(3.5rem, 2rem + 8vw, 5rem); height: auto; }

.route__body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  title"
    ".    text";
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  min-width: 0;
}

.route__number {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent-300);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-2);
}

.route__title {
  grid-area: title;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-heading);
  margin: 0;
}

.route__text {
  grid-area: text;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin: 0;
}

/* Onder elkaar zou de tekst met een lege kolom naast zich uitgelijnd blijven;
   op smalle schermen is de volle breedte prettiger. */
@media (max-width: 34.99rem) {
  .route__body {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num  title"
      "text text";
  }
}

.route__note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: clamp(2rem, 1.25rem + 3vw, 3rem);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
}

.route__note .chess { color: var(--color-accent-400); font-size: 1.35rem; line-height: 1; }

.contact-form-panel__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  margin-bottom: var(--space-sm);
}

.contact-form-panel__intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  font-size: var(--text-base);
}

.contact-form-panel .entry-content { margin-top: 0; }
/* De binnenmarge schaalt mee via clamp() hierboven; een apart breekpunt
   voor smalle schermen is daardoor niet meer nodig. */

/* ==========================================================================
   Ornament (blijft beschikbaar voor sjablonen)
   ========================================================================== */

.ornament {
  display: inline-flex;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--color-accent-400);
}

.ornament svg { width: 4.5rem; height: auto; }

/* ==========================================================================
   Toegankelijkheid: respecteer 'minder beweging'
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Rijke artikelinhoud (verslagen, analyses, statische pagina's)
   ========================================================================== */

/* Leadalinea: eerste alinea iets groter en lichter */
.single-post .entry-content > p:first-of-type,
.page-content .entry-content > p:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-text-strong);
  line-height: var(--leading-relaxed);
}

/* Koppen met subtiel goud streepje */
.entry-content h2 {
  margin-top: var(--space-2xl);
}
.entry-content h2::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--space-md);
  background: var(--color-accent-500);
}

/* Afbeeldingen en bijschriften */
.entry-content figure { margin-block: var(--space-xl); }
.entry-content figure img,
.entry-content img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.entry-content figcaption,
.wp-element-caption,
.wp-caption-text {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-sm);
}

/* Tabellen: standen en uitslagen — scrollbaar op smalle schermen */
.entry-content .wp-block-table { overflow-x: auto; margin-block: var(--space-xl); }
.entry-content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-xl);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.entry-content .wp-block-table table { margin-block: 0; }
.entry-content th,
.entry-content td {
  border: 1px solid var(--color-border);
  padding: 0.55em 0.85em;
  text-align: left;
  vertical-align: top;
}
.entry-content thead th,
.entry-content table > tbody > tr:first-child th {
  background: var(--color-bg-3);
  color: var(--color-accent-300);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.entry-content tbody tr:nth-child(even) td { background: rgba(214, 175, 110, 0.04); }
.entry-content tbody tr:hover td { background: rgba(214, 175, 110, 0.07); }

/* Definitielijsten (bestuur, contact-achtige info) */
.entry-content dt { color: var(--color-accent-300); font-weight: 600; margin-top: var(--space-md); }
.entry-content dd { color: var(--color-text-muted); margin-left: var(--space-lg); }

/* Single: kop-glyph en artikel-footer */
.single-post__glyph {
  color: var(--color-accent-400);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.single-post__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Archief-/nieuwskaarten zonder afbeelding — strak tekstkaartje
   ========================================================================== */

.post-card:not(:has(.post-card__image)) {
  border-top: 2px solid var(--color-border-strong);
  padding-top: var(--space-lg);
}
.post-card:not(:has(.post-card__image)):hover {
  border-top-color: var(--color-accent-500);
}

/* Glyph bij archief-/categoriekop */
.archive-glyph {
  display: block;
  color: var(--color-accent-400);
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   The Events Calendar — donker "Classical" thema via variabele-overrides
   ========================================================================== */

.tribe-events-page-template,
.single-tribe_events,
.post-type-archive-tribe_events,
.tribe-common,
.tribe-events {
  /* Gronden */
  --tec-color-background: var(--color-bg);
  --tec-color-background-secondary: var(--color-bg-3);
  --tec-color-background-events: transparent;
  --tec-color-background-events-bar: var(--color-bg-3);
  --tec-color-background-messages: var(--color-bg-3);
  --tec-color-background-search-container: var(--color-bg-3);
  --tec-color-background-month-grid: var(--color-bg);
  --tec-color-background-view-selector: var(--color-bg-3);
  --tec-color-background-view-selector-tabs: var(--color-bg-3);
  --tec-color-background-view-selector-list-item-hover: rgba(250, 203, 141, 0.08);
  --tec-color-background-tooltip: var(--color-bg-2);
  --tec-color-background-secondary-hover: rgba(250, 203, 141, 0.06);
  --tec-color-background-subscribe-list-item-hover: rgba(250, 203, 141, 0.08);

  /* Tekst */
  --tec-color-text-primary: var(--color-text);
  --tec-color-text-secondary: var(--color-text-muted);
  --tec-color-text-primary-light: var(--color-text-muted);
  --tec-color-text-disabled: var(--color-text-faint);
  --tec-color-text-event-title: var(--color-heading);
  --tec-color-text-event-title-list: var(--color-heading);
  --tec-color-text-event-date: var(--color-text-muted);
  --tec-color-text-secondary-event-date: var(--color-text-muted);
  --tec-color-text-events-title: var(--color-heading);
  --tec-color-text-events-title-latest-past: var(--color-heading);
  --tec-color-text-day-of-week-month: var(--color-text-muted);

  /* Accent (goud) */
  --tec-color-accent-primary: var(--color-accent-300);
  --tec-color-accent-primary-hover: var(--color-accent-200);
  --tec-color-accent-primary-active: var(--color-accent-200);
  --tec-color-accent-primary-background: rgba(250, 203, 141, 0.12);
  --tec-color-accent-secondary: var(--color-accent-400);
  --tec-color-accent-secondary-hover: var(--color-accent-300);
  --tec-color-accent-secondary-background: rgba(250, 203, 141, 0.1);

  /* Links */
  --tec-color-link-primary: var(--color-accent-300);
  --tec-color-link-accent: var(--color-accent-300);
  --tec-color-link-accent-hover: var(--color-accent-200);

  /* Knoppen */
  --tec-color-button-primary: var(--color-accent-300);
  --tec-color-button-primary-hover: var(--color-accent-200);
  --tec-color-button-primary-background: var(--color-accent-300);
  --tec-color-button-secondary: var(--color-accent-300);
  --tec-color-button-secondary-background: transparent;
  --tec-color-background-events-bar-submit-button: var(--color-accent-300);
  --tec-color-background-events-bar-submit-button-hover: var(--color-accent-200);
  --tec-color-text-events-bar-submit-button: #141009;

  /* Randen */
  --tec-color-border-default: var(--color-border);
  --tec-color-border-secondary: var(--color-border);
  --tec-color-border-tertiary: var(--color-border);
  --tec-color-border-active: var(--color-accent-500);
  --tec-color-border-hover: var(--color-accent-500);
  --tec-color-border-events-bar: var(--color-border);

  /* Iconen */
  --tec-color-icon-primary: var(--color-accent-300);
  --tec-color-icon-secondary: var(--color-text-muted);
  --tec-color-icon-hover: var(--color-accent-200);
  --tec-color-event-icon: var(--color-accent-400);
  --tec-color-event-icon-hover: var(--color-accent-300);

  /* Scrollbar */
  --tec-color-scroll-bar: var(--color-accent-700);
  --tec-color-scroll-track: var(--color-bg-3);
}

/* Kop van de kalender in onze koptypografie */
.tribe-events .tribe-events-calendar-latest-past__event-title,
.tribe-events .tribe-events-calendar-list__event-title {
  font-family: var(--font-heading);
}
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4 {
  font-family: var(--font-heading);
  font-weight: 500;
}

/* The Events Calendar maakt zijn kolomgoten met een negatieve marge op de rij
   plus een even grote binnenmarge op de kolom. Onder 768px heeft zo'n rij maar
   één kolom, dus heffen die twee elkaar precies op — alleen steekt de rij zelf
   dan 21px buiten zijn ouder, wat op een telefoon van 320px een horizontale
   schuifbalk opleverde. Beide opheffen laat de weergave exact gelijk.

   Bewust begrensd tot onder het breekpunt van de plugin: daarboven staan er
   wél twee kolommen naast elkaar en is die goot nodig. */
@media (max-width: 47.99rem) {
  .tribe-events .tribe-events-calendar-list__event.tribe-common-g-row--gutters {
    margin-inline: 0;
  }

  .tribe-events .tribe-events-calendar-list__event.tribe-common-g-row--gutters
    > .tribe-events-calendar-list__event-details {
    padding-inline: 0;
  }
}

/* Strakke Agenda-lijst: verberg zoekbalk, weergave-tabs en datumkiezer,
   houd een rustige evenementenlijst met eenvoudige navigatie over. */
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-header__events-bar,
.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-top-bar__datepicker,
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-top-bar__datepicker-container {
  display: none !important;
}

/* ==========================================================================
   WPForms — meekleuren met het donkere "Classical" thema
   ========================================================================== */

/* Moderne opmaak: via WPForms' eigen CSS-variabelen */
.wpforms-container {
  --wpforms-field-border-color: var(--color-border-strong);
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-radius: var(--radius-md);
  --wpforms-field-background-color: var(--color-bg-2);
  --wpforms-field-text-color: var(--color-text);
  --wpforms-field-menu-color: var(--color-bg-2);
  --wpforms-label-color: var(--color-text-strong);
  --wpforms-label-sublabel-color: var(--color-text-muted);
  --wpforms-label-error-color: #e6a15a;
  --wpforms-button-background-color: var(--color-accent-300);
  --wpforms-button-background-color-alt: var(--color-accent-200);
  --wpforms-button-text-color: #141009;
  --wpforms-button-border-radius: var(--radius-btn);
}

/* Klassieke opmaak — WPForms gebruikt `div.wpforms-container-full .wpforms-form`
   selectors; we spiegelen die specificiteit zodat onze kleuren winnen. */

/* Labels en hulpteksten */
div.wpforms-container-full .wpforms-form .wpforms-field-label,
div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-weight: 600;
}

div.wpforms-container-full .wpforms-form .wpforms-field-description,
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: var(--color-accent-400);
}

/* Niet-verplichte velden krijgen een ingetogen "(optioneel)" achter het label.
   Verplichte velden hebben een .wpforms-required-label (het sterretje); met
   :has() sluiten we die uit, zodat dit automatisch klopt voor elk veld. */
div.wpforms-container-full .wpforms-form .wpforms-field-label:not(:has(.wpforms-required-label))::after {
  content: ' (optioneel)';
  color: var(--color-text-faint);
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* De achternaam is optioneel, maar deelt het label "Naam" met de voornaam
   (die wél verplicht is). Dat staat daarom in de placeholder van dat veld. */

/* Invoervelden */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  background-color: var(--color-bg-2);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0.7em 0.9em;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
  background-color: var(--color-bg-2);
  border-color: var(--color-accent-300);
  box-shadow: 0 0 0 3px rgba(250, 203, 141, 0.15);
  outline: none;
}

div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
  color: var(--color-text-faint);
}

/* Verzendknop — zelfde goud als .btn--primary */
div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-300);
  color: #141009;
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.95em 1.9em;
  margin: 0;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
              transform var(--transition-base), box-shadow var(--transition-base);
}

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:focus,
div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:focus,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover {
  background-color: var(--color-accent-200);
  border-color: var(--color-accent-200);
  color: #141009;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:active {
  transform: translateY(0);
}

div.wpforms-container-full .wpforms-form button[type=submit]:disabled {
  background-color: var(--color-accent-700);
  border-color: var(--color-accent-700);
  opacity: 0.6;
}

/* Foutmeldingen leesbaar op donker */
div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form em.wpforms-error,
div.wpforms-container-full .wpforms-form .wpforms-error-container {
  color: #e6a15a;
  font-size: var(--text-sm);
}

div.wpforms-container-full .wpforms-form input.wpforms-error,
div.wpforms-container-full .wpforms-form textarea.wpforms-error,
div.wpforms-container-full .wpforms-form select.wpforms-error {
  border-color: #e6a15a;
}

/* Bevestiging na verzenden */
div.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
  background-color: rgba(250, 203, 141, 0.1);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

div.wpforms-confirmation-container-full p { color: var(--color-text); }

/* --- Uitlijning: alle velden even breed, nette verticale ritmiek --------- */

/* WPForms geeft velden standaard 60% breedte ("medium"); dat oogt rommelig
   naast het volledige tekstvak. Alles op volle breedte van het paneel. */
div.wpforms-container-full .wpforms-form .wpforms-field-small,
div.wpforms-container-full .wpforms-form .wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-large,
div.wpforms-container-full .wpforms-form input.wpforms-field-small,
div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form input.wpforms-field-large,
div.wpforms-container-full .wpforms-form select.wpforms-field-small,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-large,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-small,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-large,
/* De rij met deelvelden heeft bij WPForms een specifiekere regel (60%);
   deze selector spiegelt die specificiteit zodat 100% wint. */
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-small,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
  width: 100%;
  max-width: 100%;
}

/* Rijen met deelvelden (Voornaam / Achternaam) gelijkmatig verdelen.
   flex-basis 0 zorgt dat ze áltijd naast elkaar passen en exact even breed
   zijn, ongeacht de paneelbreedte. */
div.wpforms-container-full .wpforms-form .wpforms-field-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

/* WPForms zet een clearfix (:before/:after met display:table) op de rij.
   In een flex-container worden dat volwaardige flex-items: ze zijn 0px breed,
   maar de `gap` telt ook vóór en ná hen, waardoor de rij aan beide kanten
   ~16px naar binnen sprong. Uitschakelen — de clearfix is bij flex overbodig. */
div.wpforms-container-full .wpforms-form .wpforms-field-row::before,
div.wpforms-container-full .wpforms-form .wpforms-field-row::after {
  display: none;
}

/* WPForms zet .wpforms-one-half op width:calc(50% - 10px) met specificiteit
   (0,3,1); door de klasse in de selector op te nemen komen we op (0,4,1)
   en winnen onze waarden. */
div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-field-row-block,
div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-one-half,
div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-first,
div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-one-third,
div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-two-thirds {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}

/* Invoervelden vullen hun eigen kolom volledig */
div.wpforms-container-full .wpforms-form .wpforms-field-row-block > input,
div.wpforms-container-full .wpforms-form .wpforms-field-row-block > select {
  width: 100%;
  max-width: 100%;
}

/* Sublabels staan nu als placeholder ín het veld en zijn verborgen; mocht er
   ooit een zichtbaar sublabel zijn, dan krijgt dat nette ruimte eronder. */
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel:not(.wpforms-sublabel-hide) {
  display: block;
  margin: 0.35rem 0 0;
}

/* Gelijke ruimte tussen de velden */
div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 0 0 var(--space-lg);
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
  margin-bottom: 0.45rem;
}

/* Knop op één lijn met de velden */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  padding: var(--space-sm) 0 0;
}

/* Op smalle schermen onder elkaar, met behoud van dezelfde uitlijning */
@media (max-width: 30rem) {
  div.wpforms-container-full .wpforms-form .wpforms-field-row {
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-field-row-block,
  div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-one-half,
  div.wpforms-container-full .wpforms-form .wpforms-field-row > .wpforms-first {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Ingesloten media (YouTube, Vimeo, kaarten) — altijd binnen de kolom
   ========================================================================== */

.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
  max-width: 100%;
}

/* WordPress zet de beeldverhouding als klasse op het insluitblok; daarmee
   kan het kader meeschalen zonder vaste hoogte. */
.wp-block-embed__wrapper { max-width: 100%; }

.wp-block-embed.wp-embed-aspect-16-9 iframe,
.wp-block-embed.wp-embed-aspect-4-3 iframe,
.wp-block-embed.wp-embed-aspect-21-9 iframe,
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.wp-block-embed.wp-embed-aspect-4-3 iframe  { aspect-ratio: 4 / 3; }
.wp-block-embed.wp-embed-aspect-21-9 iframe { aspect-ratio: 21 / 9; }

/* Zwevende afbeeldingen naast tekst werken niet op een telefoon. */
@media (max-width: 34.99rem) {
  .alignleft, .alignright {
    float: none;
    margin: var(--space-lg) auto;
  }
}

/* ==========================================================================
   Responsief — kleine schermen
   ========================================================================== */

/* Kleine telefoon (< 480px): compactere koptekst en iets minder loze ruimte. */
@media (max-width: 29.99rem) {
  :root {
    --header-height: 4.25rem;
    --space-3xl: 3.25rem;
    --space-4xl: 4rem;
  }

  .site-branding { gap: 0.55rem; }
  .site-branding__name { font-size: var(--text-base); }
  .site-branding__logo,
  .site-branding__mark { width: 2rem; height: 2rem; }
  .site-branding__tagline { font-size: 0.8125rem; }

  .fact { padding-inline: var(--space-md); }
  .events-list { padding-inline: var(--space-xs); }

  /* Verzendknop over de volle breedte: makkelijker te raken met een duim. */
  div.wpforms-container-full .wpforms-form input[type=submit],
  div.wpforms-container-full .wpforms-form button[type=submit] {
    width: 100%;
  }
}

/* Telefoon liggend of een korte vensterhoogte: de hero mag minder hoog zijn,
   anders staat er onder de vouw niets anders dan het watermerk. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero { padding-block: 2.25rem; }
  .hero__watermark { font-size: clamp(6rem, 22vh, 10rem); }
  .hero__description { margin-bottom: var(--space-lg); }
  .page-header { padding-block: 1.75rem; }
}

/* WordPress' beheerbalk staat onder 600px niet vast bovenaan; de plakkende
   koptekst moet dan niet meer opschuiven. */
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* ==========================================================================
   Responsief — breedbeeld
   --------------------------------------------------------------------------
   Op grote schermen mag de inhoud iets meer ademen. De leesbreedte van
   artikelen (--max-width-narrow) blijft bewust ongewijzigd: een langere
   tekstregel leest niet prettiger, alleen vermoeiender.
   ========================================================================== */

/* Alleen de containers verbreden. --gutter blijft ongemoeid: die dient bij
   secties als binnenmarge *binnen* een max-width, dus een grotere waarde zou
   de tekstkolom daar juist smaller maken in plaats van ruimer. */
@media (min-width: 100rem) {
  :root {
    --max-width:      1320px;
    --max-width-wide: 1460px;
  }

  .split__body { max-width: 42rem; }
}

@media (min-width: 120rem) {
  :root {
    --max-width:      1440px;
    --max-width-wide: 1600px;
  }

  .hero__watermark { font-size: 24rem; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .menu-toggle, .primary-nav,
  .hero__actions, .cta-section, .pagination, .facts, .board-divider {
    display: none !important;
  }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}