@charset "UTF-8";
/*
Willem van Oranje — De Musical
Theme-brede styling. Compileert naar css/components/main.css (npx gulp main).

Blockspecifieke styling hoort NIET hier maar in blocks/<naam>/style.scss.
Gedeelde tokens en helper-classes staan in blocks/assets/css/theme.scss.
*/
body,
html,
* {
  margin: 0;
  padding: 0;
}

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

ul[role=list],
ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background-color: transparent;
  border: none;
}

.list-style-none {
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
* overflow-x: clip, niet hidden.
*
* Beide clippen horizontale overflow, maar `hidden` maakt het element een
* scroll-container: overflow-y wordt dan gedwongen naar `auto` en elke
* `position: sticky` binnen html/body plakt aan een container die zelf niet
* scrolt — dus nooit. `clip` clipt zonder scroll-container te worden, dus
* sticky blijft werken (zie blocks/toc).
*/
html {
  overflow-x: clip;
  width: 100%;
}

body {
  overflow-x: clip;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-optical-sizing: auto;
}

section {
  width: 100%;
  position: relative;
}

.transition {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.transition-slow {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.cubic-bezier {
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.center {
  position: relative;
}
.center:after {
  z-index: -1;
  width: 1200px;
  height: 1200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.image:after, .image:before {
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.image.image--hover-shade:before {
  content: "arrow_east";
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
  color: #FFFFFF;
  right: 40px;
  top: 24px;
  opacity: 0;
  position: absolute;
  z-index: 2;
}
.image.image--hover-shade:after {
  content: "";
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  z-index: 1;
  opacity: 0;
}
.image.image--shade:before {
  content: "";
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 75%);
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 75%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 75%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 200px;
  bottom: 0;
  z-index: 1;
}
.image.image--shade-top:before {
  content: "";
  background: #202020;
  background: -webkit-linear-gradient(0deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 0.8) 80%, rgba(32, 32, 32, 0.8) 100%);
  background: -moz-linear-gradient(0deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 0.8) 80%, rgba(32, 32, 32, 0.8) 100%);
  background: linear-gradient(0deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 0.8) 80%, rgba(32, 32, 32, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#202020", endColorstr="#202020", GradientType=0);
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.image.height--400 {
  max-height: 400px;
}
.image.height--600 {
  max-height: 600px;
}
.image.height--800 {
  max-height: 800px;
}

.c-image-container {
  overflow: hidden;
  position: relative;
}
.c-image-container:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.c-image-container img,
.c-image-container source,
.c-image-container picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.c-image-container img.h-158,
.c-image-container source.h-158,
.c-image-container picture.h-158 {
  height: 158px;
}
.c-image-container:hover:after {
  background-color: rgba(0, 0, 0, 0.4);
}
.c-image-container:hover img {
  transform: scale(1.1);
}
.c-image-container:hover .c-image-fit__cover {
  bottom: 0;
  right: 0;
  opacity: 1;
}

.c-image-fit {
  overflow: hidden;
}
.c-image-fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.radius--medium {
  border-radius: 0.5rem;
  overflow: hidden;
}

.radius--large {
  border-radius: 1rem;
  overflow: hidden;
}

.height--400 {
  max-height: 400px;
}

@media screen and (max-width: 768px) {
  .height--400 {
    max-height: 100%;
  }
}
.weight--300 {
  font-weight: 300;
}

.weight--600 {
  font-weight: 600;
}

.title {
  font-weight: 800;
}

blockquote {
  border-left: 3px solid var(--orange);
  padding-left: 16px;
}
blockquote p {
  color: var(--orange);
}

p,
li {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: 24px;
}
@media screen and (max-width: 576px) {
  p,
  li {
    font-size: 1rem;
  }
}

.block__content ul {
  padding-left: 20px;
}
.block__content li {
  margin-bottom: 0;
}

a {
  color: white;
}

.subtitle--block {
  background-color: var(--orange);
  padding: 4px 12px;
  color: #FFFFFF;
  margin-bottom: 12px;
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  color: var(--navy);
}

.light-skin h1,
.light-skin h2,
.light-skin h3,
.light-skin h4,
.light-skin h5,
.light-skin h6 {
  color: #FFFFFF;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 24px;
}

h2 {
  font-size: 2.75rem;
  line-height: 1.2;
  margin-bottom: 24px;
}

h3 {
  font-size: 2rem;
  margin-bottom: 24px;
}

h3.size--large {
  font-size: 3rem;
}

h3.size--medium {
  font-size: 2rem;
  margin-bottom: 24px;
}

h3.size--small {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

h4 {
  font-size: 1.25rem;
}

.title--black h1,
.title--black h2,
.title--black h3,
.title--black h4 {
  color: #000000;
}

.title--xl {
  font-size: 3rem;
}

.title--lg {
  font-size: 2.5rem;
}
@media screen and (max-width: 576px) {
  .title--lg {
    font-size: 2rem;
  }
}

.title--md {
  font-size: 2rem;
}
@media screen and (max-width: 576px) {
  .title--md {
    font-size: 1.5rem;
  }
}

.title--sm {
  font-size: 1.5rem;
}

.title--xs {
  font-size: 1.25rem;
}
@media screen and (max-width: 576px) {
  .title--xs {
    font-size: 1rem;
  }
}

.title--xxs {
  font-size: 1rem;
}
@media screen and (max-width: 576px) {
  .title--xxs {
    font-size: 1rem;
  }
}

.subtitle {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: block;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 2rem;
  }
  h3.size--large {
    font-size: 3rem;
  }
  h3.size--medium {
    font-size: 2.5rem;
  }
  h3.size--small {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h3.size--large {
    font-size: 2rem;
  }
  h3.size--medium {
    font-size: 2rem;
  }
  h3.size--small {
    font-size: 1.5rem;
  }
}
.icon-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.icon-list li {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
}
.icon-list li:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 576px) {
  .icon-list li {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 576px) {
  .icon-list.icon-list--lg li {
    font-size: 1rem;
  }
}

.background--navy {
  background-color: var(--navy);
}
.background--navy-deep {
  background-color: var(--navy-deep);
}
.background--blue-grey {
  background-color: var(--blue-grey);
}
.background--blue-light {
  background-color: var(--blue-light);
}
.background--grey-light {
  background-color: var(--grey-light);
}
.background--orange {
  background-color: var(--orange);
}
.background--white {
  background-color: var(--white);
}

.color--navy {
  color: var(--navy);
}
.color--orange {
  color: var(--orange);
}
.color--white {
  color: var(--white);
}
.color--grey-mid {
  color: var(--grey-mid);
}
.color--error {
  color: var(--error);
}

.m-t-3 {
  margin-top: 3rem !important;
}

.m-b-3 {
  margin-bottom: 3rem !important;
}

.m-y-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.m-t-4 {
  margin-top: 4rem !important;
}

.m-b-4 {
  margin-bottom: 4rem !important;
}

.m-y-4 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.m-t-5 {
  margin-top: 5rem !important;
}

.m-b-5 {
  margin-bottom: 5rem !important;
}

.m-y-5 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.m-t-6 {
  margin-top: 6rem !important;
}

.m-b-6 {
  margin-bottom: 6rem !important;
}

.m-y-6 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.p-t-3 {
  padding-top: 3rem !important;
}

.p-b-3 {
  padding-bottom: 3rem !important;
}

.p-y-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.p-t-4 {
  padding-top: 4rem !important;
}

.p-b-4 {
  padding-bottom: 4rem !important;
}

.p-y-4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.p-t-5 {
  padding-top: 5rem !important;
}

.p-b-5 {
  padding-bottom: 5rem !important;
}

.p-y-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.p-t-6 {
  padding-top: 6rem !important;
}

.p-b-6 {
  padding-bottom: 6rem !important;
}

.p-y-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.font-size-12 {
  font-size: 0.75rem;
  line-height: 1.2;
}

.font-size-14 {
  font-size: 0.875rem;
  line-height: 1.2;
}

.font-size-16 {
  font-size: 1rem;
  line-height: 1.2;
}

.font-size-20 {
  font-size: 1.25rem;
  line-height: 1.2;
}

.font-size-24 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.font-size-28 {
  font-size: 1.75rem;
  line-height: 1.2;
}

.font-size-32 {
  font-size: 2rem;
  line-height: 1.2;
}

.font-size-36 {
  font-size: 2.25rem;
  line-height: 1.2;
}

.font-size-40 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.font-size-44 {
  font-size: 2.75rem;
  line-height: 1.2;
}

.font-size-48 {
  font-size: 3rem;
  line-height: 1.2;
}

.font-weight-300 {
  font-weight: 300;
}

.font-weight-400 {
  font-weight: 400;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-700 {
  font-weight: 700;
}

.height-200 {
  height: 200px;
}

.height-220 {
  height: 220px;
}

.height-240 {
  height: 240px;
}

.height-300 {
  height: 300px;
}

.height-320 {
  height: 320px;
}

.height-340 {
  height: 340px;
}

.height-400 {
  height: 400px;
}

.height-420 {
  height: 420px;
}

.height-440 {
  height: 440px;
}

.ratio-small.portrait {
  --bs-aspect-ratio: 150%;
}

.ratio-medium.portrait {
  --bs-aspect-ratio: 150%;
}

.ratio-large.portrait {
  --bs-aspect-ratio: 65%;
}

.ratio-small.landscape {
  --bs-aspect-ratio: 72.9%;
}

.ratio-medium.landscape {
  --bs-aspect-ratio: 72.9%;
}

.ratio-large.landscape {
  --bs-aspect-ratio: 65%;
}

/*
* HEADER + HAMBURGER-NAVIGATIE
* Markup staat in header.php, gedrag in js/header.js.
* Overgenomen uit blocks-examples/modules/header-hamburger.
* Kleuren komen uit blocks/assets/css/theme.css.
*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  /* Rondom dezelfde padding, ook bij scrollen: de balk wordt dekker en krijgt
     een schaduw, maar houdt zijn hoogte. Alleen het logo krimpt. */
  padding: 1.1rem;
  color: var(--white);
  /*
  * `top` staat er bewust bij: de streamer (scss/_streamer.scss) verschuift de
  * header met --streamer-h, en bij het wegklikken van die balk moet de header
  * meeglijden in plaats van te springen. Die transition hoort hier en niet in
  * _streamer.scss — deze shorthand van buitenaf overschrijven zou de andere
  * header-animaties wissen.
  */
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), top 0.5s var(--ease), transform 0.4s var(--ease);
  /*
  * De achtergrond hoort alleen bij een balk die blíjft staan. Vandaar de
  * :not(.is-hidden): zonder die uitzondering krijgt de balk zijn kleur ook
  * als hij net begonnen is met wegschuiven, en dan zie je het blauw nog
  * net inkomen terwijl hij omhoog beweegt. De drempels in js/header.js
  * liggen 30px uit elkaar, maar het wegschuiven duurt .4s — je passeert die
  * 30px dus middenin de animatie. Dit lost het op bij de oorzaak in plaats
  * van met timing te schuiven.
  */
  /*
  * Wegscrollen: vanaf HIDE_AFTER (js/header.js) schuift de balk bij het naar
  * beneden scrollen uit beeld, en komt hij bij omhoog scrollen weer terug.
  * Zetten/weghalen van de class gebeurt in js/header.js.
  * De --streamer-h komt erbij zodat de balk ook mét streamer helemaal weg is
  * (de header staat dan lager); de extra 2px houdt de box-shadow uit beeld.
  */
}
.header.is-scrolled:not(.is-hidden) {
  /* Volledig dekkend: bewust geen doorzichtigheid, de content eronder mag
     niet doorschemeren. */
  background: var(--overlay);
  box-shadow: 0 10px 40px rgb(from var(--shadow-color) r g b/0.35);
}
.header.is-hidden {
  transform: translateY(calc(-100% - var(--streamer-h, 0px) - 2px));
  /*
  * Terwijl de balk vertrekt animeert alleen de beweging. Achtergrond en
  * schaduw springen, en dat zie je niet: op het moment dat ze wisselen is
  * de balk al uit beeld. Zonder deze regel loopt de kleur mee met het
  * wegschuiven en zie je de achtergrond alsnog invloeien op iets dat
  * verdwijnt — precies wat HIDE_AFTER/SCROLLED_AFTER in js/header.js
  * moeten voorkomen.
  */
  transition: transform 0.4s var(--ease), top 0.5s var(--ease);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.header__logo-img {
  height: 48px;
  width: auto;
  display: block;
  transition: height 0.5s var(--ease);
}
.header.is-scrolled .header__logo-img {
  height: 40px;
}

/* Rechterkant: Tickets-knop + hamburger naast elkaar. Beide halen hun hoogte
   uit --control-h, zodat ze exact gelijk zijn en gelijk blijven. */
.header__actions {
  --control-h: 3.35rem;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

/* Het menupaneel groeit over de Tickets-knop heen; die vervaagt daarom zolang
   het menu open staat (Tickets staat ook onderin het paneel). visibility houdt
   de layout — de hamburger blijft op zijn plek. */
.header__cta {
  height: var(--control-h);
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
[data-navigation-status=active] .header__cta {
  opacity: 0;
  visibility: hidden;
}

/*
* HAMBURGER-NAVIGATIE (zit in .header__actions)
*/
.hamburger-nav {
  --toggle-size: var(--control-h); /* zelfde hoogte als de Tickets-knop */
  /* Vaste breedte, ruim genoeg voor "Sluiten": het witte vlak groeit vanuit
     precies deze maat open, en zo hoeft er geen JS te meten. Verander je de
     woorden of de lettermaat, controleer dan of het langste woord nog past. */
  --toggle-w: 8rem;
  position: relative;
  flex: none;
  width: var(--toggle-w);
  height: var(--toggle-size);
  font-family: var(--font-body);
}

/* --- Toggle: "Menu" + bars, wordt "Sluiten" + kruis --- */
.hamburger-nav__toggle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: var(--toggle-w);
  height: var(--toggle-size);
  padding: 0;
  background: none; /* het witte vlak is .hamburger-nav__bg */
  border: 0;
  color: var(--navy);
  font: 600 0.92rem/1 var(--font-body); /* zelfde letter als de Tickets-knop */
  cursor: pointer;
}

/* Beide woorden staan in dezelfde gridcel; het label is zo breed als het
   langste en knipt af op één regel. Bij openen schuift "Menu" omhoog weg en
   komt "Sluiten" van onderen in beeld. */
.hamburger-nav__toggle-label {
  display: grid;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
}

.hamburger-nav__toggle-word {
  grid-area: 1/1;
  text-align: right;
  transition: transform 0.7s var(--ease);
}
.hamburger-nav__toggle-word:nth-child(2) {
  transform: translateY(110%);
}
[data-navigation-status=active] .hamburger-nav__toggle-word {
  transform: translateY(-110%);
}
[data-navigation-status=active] .hamburger-nav__toggle-word:nth-child(2) {
  transform: translateY(0);
}

.hamburger-nav__toggle-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
}

.hamburger-nav__toggle-bar {
  position: absolute;
  width: 100%;
  height: 0.125rem;
  background-color: var(--navy);
  transform: translateY(-0.15rem) rotate(0.001deg);
  transition: transform 0.7s var(--ease);
}
.hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15rem) rotate(0.001deg);
}
.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar {
  transform: translateY(0.15rem) rotate(0.001deg);
}
.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15rem) rotate(0.001deg);
}
[data-navigation-status=active] .hamburger-nav__toggle-bar {
  transform: translateY(0) rotate(45deg);
}
[data-navigation-status=active] .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(0) rotate(-45deg);
}

/* --- Paneel: groeit uit de toggle (rechtsboven blijft vast) --- */
.hamburger-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 0.92rem; /* schaalt de em-maten van het menu */
  pointer-events: none;
}

.hamburger-nav__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--toggle-w);
  height: var(--toggle-size);
  background-color: var(--white);
  box-shadow: 0 18px 50px rgb(from var(--shadow-color) r g b/0.28);
  transition: width 0.7s var(--ease), height 0.7s var(--ease);
}
[data-navigation-status=active] .hamburger-nav__bg {
  width: 100%;
  height: 100%;
}

.hamburger-nav__group {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 1em;
  min-width: 24em; /* uitgeklapt paneel is een stuk breder */
  color: var(--navy); /* niet de witte headertekst erven */
  max-height: calc(100vh - 2.2rem); /* volle hoogte min de header-padding */
  overflow-y: auto;
  /* Bovenaan ruimte voor de toggle: die is breder dan vroeger, en een lang
     eerste menu-item zou er anders onder lopen. */
  padding: calc(var(--toggle-size) + 0.5em) 2em 2em;
  transform-origin: 100% 0;
  transform: scale(0.15) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
[data-navigation-status=active] .hamburger-nav__group {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* "Menu"-label links naast de toggle */
.hamburger-nav__menu-p {
  display: none;
  position: absolute;
  top: 0;
  left: 2em;
  height: calc(var(--toggle-size) + 0.5em);
  align-items: center;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--grey-mid);
}

/* Tickets-knop onderin het paneel — neemt de rol over van .header__cta,
   die vervaagt zodra het menu opengaat. */
.hamburger-nav__cta {
  margin-top: 0.25em;
}

/* --- Menu-items --- */
.hamburger-nav__ul {
  display: flex;
  flex-flow: column;
  gap: 0.375em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hamburger-nav__li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De theme-brede regel `p, li { font-size: 1.25rem; line-height: 1.4;
   font-weight: 400; margin-bottom: 24px }` (scss/_base.scss) breekt de
   em-cascade van dit paneel: alles binnen een <li> gaat terug naar 1.25rem
   en negeert de .92rem van .hamburger-nav__panel. De subitems werden daardoor
   2rem in plaats van 1.47rem, met 24px extra ruimte ertussen. Binnen het menu
   dus terug naar inherit — de maten komen weer uit het paneel, zoals in
   blocks-examples/modules/header-hamburger. */
.hamburger-nav__panel li {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin-bottom: 0;
}

.hamburger-nav__a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4em 0; /* lucht boven en onder; vergroot ook het klikvlak */
  color: var(--navy);
  text-decoration: none;
  /* Hoofditem waar de huidige pagina onder valt: label en pijltje oranje. */
}
.hamburger-nav__a:hover {
  color: var(--orange);
}
.hamburger-nav__a[aria-current] .hamburger-nav__p {
  color: var(--orange);
}
.hamburger-nav__li--current > .hamburger-nav__a, .hamburger-nav__li--current > .hamburger-nav__a .hamburger-nav__p, .hamburger-nav__li--current > .hamburger-nav__a .hamburger-nav__caret {
  color: var(--orange);
}

.hamburger-nav__a--toggle {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer; /* padding komt uit .hamburger-nav__a */
  font: inherit;
  text-align: left;
  color: inherit;
}

.hamburger-nav__p {
  margin-bottom: 0;
  padding-right: 1.25em;
  font-size: 1.85em;
  font-weight: 500; /* eigen gewicht: de theme-brede p-regel zet 400 */
  line-height: 1.15;
  white-space: nowrap;
}

.hamburger-nav__caret {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--navy);
  transition: transform 0.5s var(--ease), color 0.3s var(--ease);
}
.hamburger-nav__a:hover .hamburger-nav__caret {
  color: var(--orange);
}
.hamburger-nav__li--has-children.is-open .hamburger-nav__caret {
  transform: rotate(180deg);
}

/* --- Submenu (uitschuivend) --- */
.hamburger-nav__sub {
  --sub-indent: 1em;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.hamburger-nav__li--has-children.is-open .hamburger-nav__sub {
  grid-template-rows: 1fr;
}

.hamburger-nav__sub-ul {
  display: flex;
  flex-flow: column;
  gap: 0.375em;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  /* Verticale padding blijft 0: bij grid-template-rows: 0fr is de hoogte 0,
     maar padding zou wél ruimte innemen en het item eronder omlaag duwen.
     De lucht boven het eerste subitem komt uit .hamburger-nav__sub-a. */
  padding: 0 0 0 var(--sub-indent);
  border-left: 1px solid var(--line);
  list-style: none;
}

.hamburger-nav__sub-a {
  display: flex;
  align-items: center;
  padding: 0.4em 0;
  color: var(--navy);
  text-decoration: none;
  opacity: 0.7;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger-nav__sub-a:hover, .hamburger-nav__sub-a[aria-current] {
  color: var(--orange);
  opacity: 1;
}

.hamburger-nav__sub-p {
  font-size: 1.6em; /* iets kleiner dan de hoofditems (1.85em) */
  line-height: 1.15;
  white-space: nowrap;
}

/*
* DONKERE ACHTERGROND (buiten de header, onder de headerbalk)
*/
.navigation__dark-bg {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--navy-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
[data-navigation-status=active] .navigation__dark-bg {
  opacity: 0.45;
  visibility: visible;
}

/*
* RESPONSIVE
*/
@media (max-width: 640px) {
  .header {
    gap: 1rem;
  }
  .header__logo-img {
    height: 38px;
  }
  .header.is-scrolled .header__logo-img {
    height: 34px;
  }
  .header__actions {
    --control-h: 2.6rem;
  }
  .header__cta {
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
  }
  .hamburger-nav {
    --toggle-w: 6.6rem;
  }
  .hamburger-nav__toggle {
    gap: 0.45rem;
    font-size: 0.82rem;
  }
  .hamburger-nav__toggle-icon {
    width: 1.1rem;
  }
  .hamburger-nav__panel {
    font-size: 0.8rem;
  }
  .hamburger-nav__group {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2.2rem); /* = de header-padding */
  }
}
/* Op de smalste telefoons passen logo, Tickets-knop en het woord niet naast
   elkaar: dan weer de vierkante toggle, het woord blijft als aria-label. */
@media (max-width: 359px) {
  .hamburger-nav {
    --toggle-w: var(--toggle-size);
  }
  .hamburger-nav__toggle-label {
    display: none;
  }
}
/*
* REDUCED MOTION
*/
@media (prefers-reduced-motion: reduce) {
  .header,
  .header__logo-img,
  .hamburger-nav__bg,
  .hamburger-nav__group,
  .hamburger-nav__toggle-bar,
  .hamburger-nav__toggle-word,
  .hamburger-nav__caret,
  .hamburger-nav__sub,
  .navigation__dark-bg {
    transition-duration: 0.01ms !important;
  }
}
/*
* STREAMER (aankondigingsbalk boven de header)
* Markup staat in inc/streamer.php, gedrag in js/streamer.js.
* Overgenomen uit blocks-examples/modules/streamer.
*
* Smalle balk bovenaan het venster met één mededeling en één call-to-action.
* Staat vast bovenaan en schuift de vaste header eronder: js/streamer.js meet
* de hoogte en zet die als --streamer-h, waarna de regel onderaan dit bestand
* de header verplaatst.
*/
.streamer {
  /* Kleuren als tokens, zodat de varianten alleen deze twee omzetten */
  --streamer-bg: var(--navy-deep);
  --streamer-fg: rgb(from var(--white) r g b / .8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110; /* boven de header (z-index 100) */
  /*
  * Strook rechts voor het kruisje. Staat op .streamer en niet op __inner,
  * zodat de gecentreerde tekst in de resterende breedte uitlijnt en er dus
  * nooit onder de knop kan lopen — ook niet als hij op mobiel afbreekt.
  */
  padding-right: 2.5rem;
  background: var(--streamer-bg);
  color: var(--streamer-fg);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  transition: transform 0.5s var(--ease);
  /* Wegklikken: balk schuift omhoog terwijl de header omhoog glijdt */
}
.streamer.is-dismissing {
  transform: translateY(-100%);
}
.streamer[hidden] {
  display: none;
}

.streamer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.55rem clamp(1.1rem, 4vw, 3rem);
}

.streamer__text {
  /*
  * De globale `p, li`-regel in _base.scss zet kleur, grootte en marge; die
  * moeten hier alle drie wijken, anders wordt de balk hoog en navy.
  */
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Losse nadruk binnen de tekst, bv. een datum */
.streamer__strong {
  font-weight: 600;
  color: rgb(from var(--white) r g b/0.95);
}

/* De call-to-action: zelfde onderstreping-animatie als .link uit de huisstijl */
.streamer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.streamer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.streamer__link:hover::after {
  transform: scaleX(1);
}
.streamer__link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.streamer__link svg {
  width: 1em;
  height: 1em;
}

/* Het kruisje: rustig, en pas duidelijk bij hover of toetsenbordfocus */
.streamer__close {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  /* Zelfde gedrag als .sticky-cta__close: alleen het kruisje wordt
     duidelijker, geen vlakje eronder. */
  transition: opacity 0.3s var(--ease);
}
.streamer__close:hover {
  opacity: 1;
}
.streamer__close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
.streamer__close svg {
  width: 0.85rem;
  height: 0.85rem;
}

/*
* VARIANTEN
*/
/* Licht: lichtblauwe grond met marineblauwe tekst */
.streamer--light {
  --streamer-bg: var(--blue-light);
  --streamer-fg: rgb(from var(--navy) r g b / .85);
}
.streamer--light .streamer__strong {
  color: var(--navy);
}

/* Accent: oranje grond met marineblauwe tekst en link */
.streamer--accent {
  --streamer-bg: var(--orange);
  --streamer-fg: rgb(from var(--navy) r g b / .85);
}
.streamer--accent .streamer__strong,
.streamer--accent .streamer__link {
  color: var(--navy);
}

/*
* RUIMTE MAKEN VOOR DE BALK
*
* De vaste header schuift onder de streamer. --streamer-h wordt door
* js/streamer.js gemeten (en bij resize opnieuw), zodat een tekst die op
* mobiel over twee regels valt automatisch meegenomen wordt. De fallback van
* 2.6rem is één tekstregel: zonder JS staat de header alsnog goed.
*/
body:has(.streamer) .header {
  top: var(--streamer-h, 2.6rem);
}

/*
* Alles wat zich aan de vaste header vastplakt moet de balk óók meerekenen.
* Nu is dat de sticky sidebar van blocks/toc: die gebruikt --toc-offset (uit
* het offset-veld van dat block) plus wat lucht, en daar komt de balkhoogte
* bovenop. Zonder streamer geldt deze regel niet en blijft de waarde in
* blocks/toc/style.css staan. Komt er later nog zo'n element bij, zet het
* hier — dan staat de hele "ruimte maken"-logica op één plek.
*/
body:has(.streamer) .toc-sidebar {
  top: calc(var(--toc-offset, 80px) + var(--streamer-h, 2.6rem) + 1.5rem);
}

/*
* RESPONSIVE
*/
@media screen and (max-width: 640px) {
  .streamer {
    font-size: 0.78rem;
  }
  .streamer__inner {
    /* op smalle schermen onder elkaar en links uitgelijnd leest rustiger
       dan gecentreerde, afgebroken regels */
    justify-content: flex-start;
    gap: 0.15rem 0.75rem;
    padding-block: 0.5rem;
  }
}
/*
* REDUCED MOTION
*/
@media (prefers-reduced-motion: reduce) {
  .streamer__link::after {
    transition-duration: 0.01ms;
  }
  /* js/streamer.js verbergt de balk dan direct; geen schuifbeweging */
  .streamer,
  .streamer__close {
    transition-duration: 0.01ms;
  }
}
.custom-button {
  line-height: 1;
  padding: 20px 24px;
  border-radius: 0.25em;
  display: inline-block;
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  margin-right: 24px;
  margin-bottom: 12px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 576px) {
  .custom-button {
    padding: 16px 20px;
    font-size: 0.875rem;
  }
}
.custom-button span {
  position: relative;
  z-index: 2;
}
.custom-button--primary {
  border-radius: 0.25em;
  color: white;
  background: #09637E;
  background: -webkit-linear-gradient(240deg, rgb(9, 99, 126) 0%, rgb(233, 78, 27) 100%);
  background: -moz-linear-gradient(240deg, rgb(9, 99, 126) 0%, rgb(233, 78, 27) 100%);
  background: linear-gradient(240deg, rgb(9, 99, 126) 0%, rgb(233, 78, 27) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#09637E", endColorstr="#E94E1B", GradientType=0);
}
.custom-button--ghost-white {
  border-radius: 0.25em;
  border: 2px solid white;
  color: white;
  padding: 18px 24px;
}
@media screen and (max-width: 576px) {
  .custom-button--ghost-white {
    padding: 14px 20px;
  }
}
.custom-button.custom-button--icon {
  padding-right: 48px;
}
.custom-button.custom-button--icon:after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  position: absolute;
  font-size: 24px;
  margin-top: -4px;
  right: 12px;
  z-index: 1;
}
.custom-button.custom-button--small {
  padding: 8px 16px;
  font-size: 12px;
}
.custom-button.custom-button--white {
  background-color: #FFFFFF;
}
.custom-button.custom-button--primary {
  color: #FFFFFF;
  background: var(--orange);
}
.custom-button.custom-button--clean {
  padding: 0;
  margin: 0;
}
.custom-button--arrow {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 100px;
  display: flex;
  align-content: center;
  position: relative;
  align-items: center;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.custom-button--arrow span {
  margin: auto;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(45deg, #E94E1B, #ff7300, #09637E, #ffffff, #09637E, #ff7300, #E94E1B);
  position: absolute;
  top: 0;
  left: 0;
  background-size: 400%;
  z-index: 1;
  filter: blur(0);
  width: calc(100% + 0px);
  height: calc(100% + 0px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  border-radius: 100px;
}

.glow-on-hover:active {
  color: #181818;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.custom-button-round {
  padding: 0;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 3rem !important;
  height: 3rem !important;
}
.custom-button-round:before, .custom-button-round:after {
  display: none;
}
.custom-button-round span {
  margin: auto;
  color: white;
}
.custom-button-round--primary {
  background: var(--orange);
}

.article__body {
  margin-top: 200px;
}
.article__body .article__image {
  min-height: 400px;
}

.reading--time {
  padding-left: 32px;
  position: relative;
  margin-bottom: 12px;
  line-height: 1.2;
  display: inline-block;
}
.reading--time span {
  color: var(--orange);
  left: 0;
  position: absolute;
}

.paginate_button:after,
.paginate_button:before {
  display: none;
}

.modal__content .modal-content {
  text-align: left;
  background-color: #fff;
  border-radius: 0 !important;
  padding: 24px;
}
.modal__content .modal-content .modal-body {
  padding: 0;
}
.modal__content .modal-content .modal-body p {
  text-align: left;
}

/*
* FOOTER
* Markup staat in footer.php, layout op het Bootstrap-grid.
* Overgenomen uit blocks-examples/modules/footer.
*/
.footer {
  background: var(--navy-deep);
  color: var(--white);
}

.footer__top {
  padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem;
}

.footer__brand p {
  max-width: 34ch;
  color: var(--white);
  margin: 1rem 0 1.5rem;
}

.footer__logo-link {
  display: inline-block;
}

.footer__logo-img {
  height: 56px;
  width: auto;
}

.footer__col h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__col li {
  margin-bottom: 0.55rem;
}
.footer__col a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.25rem;
  transition: color 0.3s var(--ease);
}
.footer__col a:hover {
  color: var(--orange);
}

.footer__bottom {
  border-top: 1px solid var(--line-light);
  padding: 1.5rem 0;
  font-size: 1rem;
  color: var(--white);
}

.footer__legal a {
  color: var(--white);
  text-decoration: none;
}
.footer__legal a:hover {
  color: var(--orange);
}

/*
* SOCIALS — onder de tagline (inc/social-links.php). Wit icoon in een dunne
* ronde rand; bij hover oranje, zoals de links in de kolommen.
*/
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.footer__socials li {
  margin: 0;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: var(--white);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.footer__social svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}
.footer__social:hover {
  color: var(--white);
  background-color: var(--orange);
  border-color: var(--orange);
}
.footer__social:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/*
* TICKETKAARTJE (STICKY CTA)
*
* Overgenomen uit blocks-examples/modules/sticky-cta/style.css.
* Geen block maar een site-optie: de markup komt uit inc/sticky-cta.php en
* hangt via wp_footer onder elke pagina. Inhoud en zichtbaarheid staan onder
* Site opties → Ticketkaartje.
*
* .btn staat in blocks/assets/css/theme.scss en wordt hier niet herhaald;
* .sticky-cta__action krijgt die class mee in de markup.
*/
/* ============================================================
   Kaartje
   Geen volle balk meer maar een blok rechtsonder: het vangt het
   moment waarop iemand halverwege de pagina besluit te boeken,
   zonder de hele onderkant van het scherm te claimen.

   Opbouw van de inhoud, van boven naar onder: wanneer → wat →
   waar → wat het kost → één actie. Eén ding per regel, veel wit,
   en precies één oranje vlak: de knop.

   Twee gedaanten: het volle kaartje, en — na een klik op het
   kruisje — alleen de knop op dezelfde plek. Alles boven en onder
   de knop zit in een [data-sticky-cta-fold] die dichtklapt; het
   kaartje zelf verliest tegelijk zijn padding, glas en schaduw,
   zodat er letterlijk een knop overblijft.
   ============================================================ */
.sticky-cta {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  width: min(92vw, 336px);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  padding: 1.6rem 1.6rem 1.5rem;
  /* Glas: wit met wat doorzicht, zodat het kaartje als een eigen laag
     boven de pagina leest in plaats van als een dichtgeplakt vlak. */
  background-color: rgb(from var(--white) r g b/0.9);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(from var(--navy) r g b/0.1);
  color: var(--navy);
  /* Lichter dan bij het donkere kaartje: onder wit leest .45 als een veeg. */
  box-shadow: 0 24px 60px rgb(from var(--shadow-color) r g b/0.18);
  /* Ook opacity, niet alleen transform: het kaartje mag niet half in
     beeld blijven hangen. pointer-events houdt het onaanklikbaar. */
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease), width 0.5s var(--ease), padding 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Inklappen tot knop ----------
   De fold is een grid van één rij: 1fr (= inhoudshoogte) → 0fr.
   De inner heeft overflow:hidden, zodat de inhoud netjes wegschuift
   in plaats van buiten het kaartje door te lopen. */
.sticky-cta__fold {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.3s var(--ease);
}

.sticky-cta__fold-inner {
  overflow: hidden;
  min-height: 0;
}

/* Wat er overblijft: de knop, op precies dezelfde plek */
.sticky-cta.is-collapsed {
  width: 13.5rem;
  padding: 0;
  background-color: transparent;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  border-color: transparent;
  box-shadow: none;
}

.sticky-cta.is-collapsed .sticky-cta__fold {
  grid-template-rows: 0fr;
  opacity: 0;
}

.sticky-cta.is-collapsed .sticky-cta__close {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.sticky-cta.is-collapsed .sticky-cta__action {
  margin-top: 0;
  /* De schaduw verhuist van het kaartje naar de knop, zodat die
     los blijft komen van de pagina. */
  box-shadow: 0 14px 34px rgb(from var(--orange) r g b/0.38);
}

/* Browsers zonder backdrop-filter: dan volledig dekkend, anders
   wordt de tekst onleesbaar over de pagina heen. */
@supports not (backdrop-filter: blur(1px)) {
  .sticky-cta {
    background-color: var(--white);
  }
}
/* ---------- Wanneer ---------- */
.sticky-cta__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  /* --orange haalt op wit geen contrast bij deze maat; --orange-deep wel. */
  color: var(--orange-deep);
  margin: 0 0 0.7rem;
}

/* ---------- Wat ---------- */
.sticky-cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.62rem;
  line-height: 1.06;
  color: var(--navy);
  margin: 0;
  /* De regelafbreking staat in de markup (<br>): twee korte regels
     lezen rustiger dan één die net omvalt. */
}

/* ---------- Waar ---------- */
.sticky-cta__sub {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(from var(--navy) r g b/0.65);
  margin: 0.55rem 0 0;
}

/* ---------- Wat het kost ----------
   Hairline erboven: de prijs is een eigen feit, geen bijzin. */
.sticky-cta__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
  margin: 1.15rem 0 0;
  padding-top: 1.05rem;
  border-top: 1px solid rgb(from var(--navy) r g b/0.14);
}

.sticky-cta__price-label {
  font-size: 0.78rem;
  color: rgb(from var(--navy) r g b/0.6);
}

.sticky-cta__amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1;
}

.sticky-cta__unit {
  font-size: 0.78rem;
  color: rgb(from var(--navy) r g b/0.6);
}

/* ---------- Eén actie ---------- */
.sticky-cta__action {
  width: 100%;
  margin-top: 1.05rem;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), margin 0.5s var(--ease), box-shadow 0.4s var(--ease);
}

.sticky-cta__action:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.sticky-cta__note {
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgb(from var(--navy) r g b/0.55);
  margin: 0.7rem 0 0;
}

/* Stille tweede weg, voor wie eerst wil kijken */
.sticky-cta__link {
  align-self: flex-start;
  margin-top: 0.6rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgb(from var(--navy) r g b/0.72);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.sticky-cta__link::after {
  content: "→";
  margin-left: 0.4em;
  transition: transform 0.3s var(--ease);
  display: inline-block;
}

.sticky-cta__link:hover {
  color: var(--navy);
}

.sticky-cta__link:hover::after {
  transform: translateX(3px);
}

.sticky-cta__link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Sluiten ----------
   Klein kruisje in de hoek van het kaartje zelf: het hoort bij het
   kaartje, niet bij de pagina. */
.sticky-cta__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  color: rgb(from var(--navy) r g b/0.5);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.4s var(--ease);
}

.sticky-cta__close svg {
  width: 0.95rem;
  height: 0.95rem;
}

.sticky-cta__close:hover {
  color: var(--navy);
}

.sticky-cta__close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}

/* ============================================================
   Responsive — onder 640px een kaart over de volle breedte
   ============================================================ */
@media (max-width: 640px) {
  .sticky-cta {
    right: 0.75rem;
    bottom: 0.75rem;
    /* Geen left-anker: een vaste breedte kan animeren naar de knop,
       left+right:auto kan dat niet. */
    width: min(100vw - 1.5rem, 24rem);
    padding: 1.35rem 1.35rem 1.25rem;
  }
  .sticky-cta__title {
    font-size: 1.45rem;
  }
  /* Alleen in deze modus dekt het kaartje de volle breedte, dus alleen
     hier reserveert de pagina onderaan ruimte (script zet de hoogte). */
  body {
    padding-bottom: var(--sticky-cta-h, 0px);
  }
}
/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Bewust alleen binnen het kaartje: dit is theme-brede CSS, een
     universele selector zou de transities van de hele site platleggen. */
  .sticky-cta,
  .sticky-cta *,
  .sticky-cta *::before,
  .sticky-cta *::after {
    transition-duration: 0.01ms !important;
  }
  .sticky-cta {
    transform: none;
  }
}
/* ============================================================
   Fallback: browsers die grid-template-rows niet animeren zetten
   de fold gewoon direct op 0 — het inklappen springt dan, maar het
   eindresultaat (alleen de knop) is hetzelfde.
   ============================================================ */
/*
* TICKETBUBBEL
*
* Oranje ticketknop rechtsonder, sitebreed. Markup in inc/ticket-bubble.php,
* inhoud onder Site opties → Ticketbubbel.
*
* Kleur, vorm en hover komen van de gedeelde .btn in theme.scss: het is
* dezelfde "Bestel tickets"-knop als in de header en footer. Hier staat alleen
* wat er anders is: de vaste plek, de schaduw en het in- en uitschuiven.
*
* Hij lost de ticketknop in de header af. Dat gebeurt zonder eigen script:
* js/header.js zet `.is-hidden` op de header zodra die wegschuift, en de
* bubbel hangt hieronder aan diezelfde staat via :has(). Twee scroll-listeners
* zouden uit de pas kunnen lopen; dit kan dat per definitie niet.
*/
.ticket-bubble {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  /* Onder het Ticketkaartje (90) en onder de menu-overlay (90), boven de
     inhoud. Ze staan nooit samen in beeld, maar de stapeling is hiermee
     voorspelbaar. */
  z-index: 80;
  /* Zweeft boven willekeurige inhoud, dus een schaduw om los te komen van
     lichte én donkere vlakken. Op de donkerste merktoon, niet op zwart. */
  box-shadow: 0 12px 30px rgb(from var(--navy-deep) r g b/0.4);
  /* Beginstand: onzichtbaar, iets lager en iets kleiner. Zo komt hij op in
     plaats van dat hij verschijnt. pointer-events houdt hem onaanklikbaar
     zolang hij er niet echt staat. */
  opacity: 0;
  transform: translateY(0.75rem) scale(0.92);
  pointer-events: none;
  /* De kleurovergangen van .btn moeten mee: deze shorthand vervangt die van
     .btn in zijn geheel. */
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ticket-bubble:hover {
  box-shadow: 0 16px 36px rgb(from var(--navy-deep) r g b/0.5);
}
.ticket-bubble:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/*
* Zichtbaar zodra de header is weggeschoven.
*
* :has() kijkt van body naar de header, waar die ook in de DOM zit — de header
* staat in .navigation en is dus geen buur van de bubbel. Een sibling-selector
* zou hier niet werken.
*/
body:has(.header.is-hidden) .ticket-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/*
* Reduced motion: wel verschijnen, niet bewegen.
*/
@media (prefers-reduced-motion: reduce) {
  .ticket-bubble {
    transform: none;
    transition-duration: 0.01ms;
  }
  body:has(.header.is-hidden) .ticket-bubble {
    transform: none;
  }
}
/*
* NIEUWSBRIEF (block `newsletter` + sitebrede Nieuwsbriefbalk)
*
* Smalle band, zoals de streamer: kop links, formulier rechts, op mobiel
* onder elkaar. Overgenomen uit blocks-examples/modules/newsletter.
*
* Staat hier en niet in blocks/newsletter/: dezelfde band komt via
* inc/newsletter.php ook sitebreed boven de footer, en moet dan op elke
* pagina gestyled zijn. Markup: minimalcode_newsletter_band().
*
* Kopkleuren komen van .u-text-navy / .u-text-white (inc/newsletter.php), de knop is
* de gedeelde .btn uit theme.scss. Hier staat alleen wat per achtergrond
* anders is: het vlak, het invoerveld en welke kleur de knop krijgt.
*
* Het formulier is markup van Mailchimp for WP:
*   form.mc4wp-form > .mc4wp-form-fields > input[type=email] + button.btn
*                   > .mc4wp-response > .mc4wp-alert
*/
.newsletter {
  /* Per achtergrond gezet hieronder; het invoerveld en de knop lezen ze uit. */
  --nl-field-bg: rgb(from var(--white) r g b / .08);
  --nl-field-line: var(--line-light);
  --nl-field-text: var(--white);
  --nl-field-focus: var(--orange);
  padding-block: clamp(2rem, 4.5vw, 3rem);
}
.newsletter--bg-navy {
  background: var(--navy-deep);
  /* Wit vlak met marineblauwe tekst, zoals de Menu-knop in de header;
     oranje bij hover, de bestaande hovertaal van het thema. */
}
.newsletter--bg-navy .mc4wp-form .btn {
  --bg: var(--white);
  --fg: var(--navy);
  --bg-hover: var(--orange);
  --fg-hover: var(--white);
}
.newsletter--bg-orange {
  background: var(--orange);
  --nl-field-bg: rgb(from var(--white) r g b / .9);
  --nl-field-line: transparent;
  --nl-field-text: var(--navy);
  --nl-field-focus: var(--navy);
  /* Oranje knop op oranje valt weg: hier marineblauw, zoals .btn--navy. */
}
.newsletter--bg-orange .mc4wp-form .btn {
  --bg: var(--navy);
  --fg: var(--white);
  --bg-hover: var(--navy-deep);
  --fg-hover: var(--white);
}

/*
* Sitebreed staat de balk direct op de footer, die dezelfde donkerblauwe kleur
* heeft. Zonder lijn lopen ze in elkaar over en leest de balk als een stuk
* footer.
*/
.newsletter--site.newsletter--bg-navy {
  border-bottom: 1px solid var(--line-light);
}

.newsletter__head .eyebrow {
  margin-bottom: 0.5rem;
}

.newsletter__title {
  margin: 0;
}

.newsletter__text {
  margin: 0.6rem 0 0;
}

/*
* HET FORMULIER
*/
.newsletter .mc4wp-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  /* Mailchimp for WP zet alles in <p>'s als de redacteur dat zo typt. */
}
.newsletter .mc4wp-form-fields p {
  display: contents;
  margin: 0;
}
.newsletter .mc4wp-form-fields input[type=email],
.newsletter .mc4wp-form-fields input[type=text] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  font: inherit;
  color: var(--nl-field-text);
  background: var(--nl-field-bg);
  border: 1.5px solid var(--nl-field-line);
  border-radius: var(--radius);
}
.newsletter .mc4wp-form-fields input[type=email]::placeholder,
.newsletter .mc4wp-form-fields input[type=text]::placeholder {
  color: rgb(from var(--nl-field-text) r g b/0.6);
}
.newsletter .mc4wp-form-fields input[type=email]:focus,
.newsletter .mc4wp-form-fields input[type=text]:focus {
  outline: none;
  border-color: var(--nl-field-focus);
}
.newsletter .mc4wp-form-fields .btn {
  flex: 0 0 auto;
}

/* Meldingen van de plugin: bedankt, ongeldig adres, enzovoort. */
.newsletter .mc4wp-response:empty {
  display: none;
}
.newsletter .mc4wp-response .mc4wp-alert {
  margin-top: 0.9rem;
  font-weight: 600;
}
.newsletter .mc4wp-response .mc4wp-alert p {
  margin: 0;
  color: inherit;
}

/*
* RESPONSIVE
*/
@media (max-width: 575px) {
  .newsletter .mc4wp-form-fields .btn {
    flex: 1 1 100%;
  }
}
#mousefollow {
  opacity: 0;
  transition: scale(0);
  position: fixed;
  top: 30px;
  left: -50px;
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  z-index: 99;
  pointer-events: none;
  color: #FFFFFF;
  mix-blend-mode: difference;
}
#mousefollow.active {
  opacity: 1;
  transform: scale(1);
}

/*
*
*
* VARIABLES
*
*
*/
/*
*
*
* FORMS
*
*
*/
.gf_page_steps {
  border: none !important;
}

.gf_step_active .gf_step_number {
  background-color: var(--navy) !important;
  color: white !important;
  border: 2px solid var(--navy) !important;
}

.gf_step_number {
  color: var(--navy);
  border: 2px solid var(--navy) !important;
}

.gf_step_completed .gf_step_number:before {
  background: #1cca68 !important;
  border: 2px solid #1cca68 !important;
}

.gf_step_label {
  font-size: 20px;
}

.gfield_label, label.gfield_label {
  text-transform: uppercase;
}

.gfield_required {
  display: none !important;
}

input,
textarea {
  padding: 16px 20px !important;
  border-radius: 8px;
  border: 2px solid var(--grey-mid);
  background: transparent;
  font-weight: 400;
  font-size: 16px !important;
  color: var(--grey-mid);
  outline: none;
  resize: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
input:focus,
textarea:focus {
  border-color: #D0772E;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

/* Change the placeholder text color for all browsers */
::-webkit-input-placeholder {
  /* WebKit (Safari, Chrome) */
  color: var(--grey-mid);
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--grey-mid);
  opacity: 1; /* Required for Firefox 18- */
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--grey-mid);
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--grey-mid);
}

::placeholder {
  /* Most modern browsers */
  color: var(--grey-mid);
}

input[type=file] {
  border: 2px dashed var(--grey-mid);
  background-color: transparent;
}

textarea {
  max-height: 200px;
}

.gform_body .gchoice {
  width: 160px;
  display: inline-block;
}
.gform_body .gchoice label {
  display: inline-block;
  position: relative;
  padding: 0 0 0 30px;
  color: var(--grey-mid);
  cursor: pointer;
  width: 100%;
  max-width: 100% !important;
  font-size: 1rem;
  text-transform: capitalize;
  margin-bottom: 4px;
}
.gform_body .gchoice label:before {
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: transparent;
  border: 2px solid var(--grey-mid);
  transition: background-color 0.3s, border-color 0.3s;
}
.gform_body .gchoice label:after {
  content: "";
  position: absolute;
  left: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-color: #D0772E;
  transition: all 0.3s;
  top: 5px;
  border-radius: 2px;
  opacity: 0;
}
.gform_body .gchoice label:hover:before, .gform_body .gchoice label.checked:before {
  border-color: #D0772E;
}
.gform_body .gchoice label:hover:after, .gform_body .gchoice label.checked:after {
  opacity: 1;
}

.gfield_checkbox .gchoice label:before {
  border-radius: 4px;
}

.gfield_radio .gchoice label:before {
  border-radius: 100px;
}

.gfield_checkbox .gchoice label:after {
  border-radius: 2px;
}

.gfield_radio .gchoice label:after {
  border-radius: 100px;
}

/* Checked state */
.gform_body input[type=checkbox]:checked + label:before,
.gform_body input[type=radio]:checked + label:before {
  border-color: #D0772E;
}

.gform_body input[type=checkbox]:checked + label:after,
.gform_body input[type=radio]:checked + label:after {
  opacity: 1;
}

/* Hide the default checkbox */
.gform_body input[type=checkbox] {
  position: fixed;
  opacity: 0;
}

/* Hide the default checkbox */
.gform_body input[type=radio] {
  position: fixed;
  opacity: 0;
}

.gform_button,
.gform_next_button,
.gform_previous_button {
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  margin-right: 24px;
  margin-bottom: 0;
  background: var(--orange);
  color: var(--navy) !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--navy);
}
.gform_button:hover,
.gform_next_button:hover,
.gform_previous_button:hover {
  background-color: var(--navy) !important;
  color: white !important;
}

.gform_button,
.gform_next_button {
  float: right;
  margin-right: 0;
}

.gform_button {
  background-color: var(--navy) !important;
  color: white !important;
}

.gform_page_footer {
  padding: 40px 0 !important;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
  background: transparent !important;
  border: 1px solid #D0772E !important;
  padding: 24px !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors ol,
.gform_wrapper.gravity-theme .gform_validation_errors ul {
  margin-bottom: 0 !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors h2,
.gform_wrapper.gravity-theme .gform_validation_errors li,
.gform_wrapper.gravity-theme .gform_validation_errors a {
  color: var(--navy) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none;
}

.gfield_validation_message {
  margin-top: 16px !important;
  border-radius: 5px !important;
  padding: 24px !important;
  background: transparent !important;
  border: 1px solid #D0772E !important;
  color: var(--navy) !important;
  font-weight: 400 !important;
}

.gform_description {
  margin: 0 !important;
}

.gform_footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-column-gap: 0 !important;
  margin-left: -8px;
  margin-right: -8px;
  width: calc(100% + 16px);
}

.gform_fields .col-100,
.gform_fields .gfield {
  width: 100%;
  flex: 0 0 auto;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.gform_fields .col-50 {
  width: 50%;
  flex: 0 0 auto;
  padding-left: 8px;
  padding-right: 8px;
}

@media screen and (max-width: 576px) {
  .gform_fields .col-50 {
    width: 100%;
  }
}
.gform_footer,
.gform_page_footer,
.gf_page_steps {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}

/* ------------------ mc4wp ------------------ */
.mc4wp-form-fields {
  display: flex;
  gap: 12px;
}
.mc4wp-form-fields input {
  background-color: white;
  border-radius: 6px;
  border: none;
  color: var(--orange);
  font-weight: bold;
  width: 100%;
}
.mc4wp-form-fields input.news-button {
  width: auto;
}

.breadcrumb {
  display: block;
  z-index: 2;
  margin-top: 120px;
}
.breadcrumb p,
.breadcrumb a {
  margin-bottom: 0;
  font-size: 1rem;
  color: #000000;
  font-weight: 200;
  text-decoration: none;
  color: #FFFFFF;
}
.breadcrumb i {
  font-size: 0.8rem;
  margin: 0 12px;
}
.breadcrumb .breadcrumb-arrow {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.45508 8.95998L4.71508 5.69998C5.10008 5.31498 5.10008 4.68498 4.71508 4.29998L1.45508 1.03998' stroke='%23404040' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
  background-size: 7px;
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
  top: 6px;
  background-position: center;
  background-repeat: no-repeat;
}
.breadcrumb .breadcrumb_last {
  font-weight: 200;
}

/*
* ARTIKEL (single.php)
*
* Alleen wat het berichttemplate zelf nodig heeft. De breedte, de kop en het
* beeld komen van gedeelde classes: .section--narrow, .section-head, .h2 en
* .media — die staan in blocks/assets/css/theme.scss.
*/
/* Leestijd en categorie op één regel onder de kop. */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem clamp(1rem, 3vw, 1.75rem);
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--grey-mid);
}

.article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* De theme-brede regel `p, li { font-size: 1.25rem; margin-bottom: 24px }`
     in scss/_base.scss zou deze regel anders uit elkaar trekken. */
  margin: 0;
  font-size: inherit;
  line-height: 1.4;
}
.article__meta-item .material-symbols-rounded {
  font-size: 1.15em;
  /* De iconen staan van zichzelf een haartje hoog naast kleine tekst. */
  translate: 0 0.05em;
  color: var(--orange);
}

/*
* VLOEIEND SCROLLEN (Lenis)
*
* De basisregels die de library nodig heeft. Opzet staat in js/smooth-scroll.js,
* de library zelf in js/lenis/. Lenis zet de classes op <html> zodra hij draait —
* zonder script (of bij "beweging beperken") gelden ze niet en scrollt de
* browser gewoon zelf.
*/
html.lenis,
html.lenis body {
  height: auto;
}

/* Lenis doet de smoothing zelf; de scroll-behavior uit _reset.scss zou er een
   tweede laag overheen leggen en ankersprongen traag maken. */
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Op een element met [data-lenis-prevent] scrollt de browser weer zelf — voor
   een eigen scrollgebied binnen de pagina, zoals een lange lijst in een modal. */
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/*
* Alleen actief zolang code lenis.stop() aanroept; dat doet dit thema nergens.
* Let op als je dat ooit wél doet: overflow hidden op <html> breekt elke
* position: sticky in de pagina — zie de waarschuwing in CLAUDE.md.
*/
.lenis.lenis-stopped {
  overflow: hidden;
}

/*
* BERICHTKAART, RASTER EN PAGINERING
*
* Gedeeld door het block "Berichtenoverzicht" (blocks/post-overview) en door
* archive.php / home.php. Daarom staat het hier en niet in een block: de
* templates laden geen block-CSS, en het archief moet er hetzelfde uitzien als
* een overzicht dat de redactie zelf plaatst.
*
* Markup: template-parts/post-card.php
*/
/* De sectie om een archief heen; het block heeft zijn eigen padding. */
.post-archive {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* ---------- Raster ---------- */
.post-grid {
  /* Het aantal kolommen komt als custom property uit het block; auto-fit met
     een minimum zorgt dat het er onderweg netjes minder worden. */
  --columns: 3;
  --min: 17rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 992px) {
  .post-grid {
    grid-template-columns: repeat(var(--columns), 1fr);
  }
}

/* ---------- Kaart ---------- */
.post-card {
  position: relative;
  display: flex;
  flex-flow: column;
  background: var(--white);
  /* Hele kaart klikbaar, zonder de titellink te dupliceren: dit vlak ligt over
     de kaart en vangt de klik. De titel blijft het element dat een screenreader
     voorleest en dat in de tabvolgorde staat. */
}
.post-card:has(.post-card__title a:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.post-card .post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__media {
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--grey-light);
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--ease);
}
.post-card:hover .post-card__image {
  scale: 1.04;
}

.post-card__body {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 0;
}

.post-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
}
.post-card__title a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.post-card:hover .post-card__title a {
  color: var(--orange);
}

.post-card__excerpt {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--grey-mid);
}

/* ---------- Paginering ---------- */
.post-pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* De losse knoppen tegen elkaar aan, als één balk. */
}
.post-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid rgb(from var(--navy) r g b/0.18);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post-pagination .page-numbers:hover, .post-pagination .page-numbers.current {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
.post-pagination .page-numbers.dots:hover {
  color: var(--navy);
  background: none;
  border-color: rgb(from var(--navy) r g b/0.18);
}
.post-pagination > * {
  display: flex;
  gap: -1px;
}
.post-pagination .nav-links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.modal-content {
  background-color: transparent;
  border: none !important;
}
.modal-content .swiper-arrows {
  width: 100%;
  bottom: calc(50% - 24px);
}

.modal-backdrop {
  opacity: 0.9 !important;
}

.modal-header {
  background-color: transparent !important;
  border: none !important;
  padding-right: 8px;
  padding-bottom: 18px;
}

.btn-close {
  background-color: #fff !important;
  opacity: 1;
  position: fixed;
  right: 30px;
  top: 30px;
  padding: 24px !important;
  border-radius: 100px;
}

.modal-body {
  background-color: transparent !important;
}
.modal-body p {
  text-align: center;
}

.ratio-9x16 {
  --bs-aspect-ratio: 179.25%;
}

.newsletter__modal {
  position: fixed;
  right: 24px;
  bottom: 24px;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  width: 100%;
  max-width: 400px;
}

.newsletter__modal .btn-close {
  opacity: 0;
}

.newsletter__modal.show {
  opacity: 1;
  pointer-events: all;
  bottom: 24px;
  transform: translateY(0);
}

.newsletter__modal.show .btn-close {
  opacity: 1;
}

.newsletter__modal .btn-close {
  background-color: #fff !important;
  position: absolute;
  right: 0px;
  top: -80px;
  padding: 24px !important;
  border-radius: 100px;
}

.newsletter__modal input {
  border: 1px solid var(--blue-light);
}

.social {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.social li {
  display: inline-block !important;
  margin: 0 8px 8px 0 !important;
  width: auto !important;
}
.social li .social__item {
  width: 40px;
  height: 40px;
  background-color: #FFFFFF;
  position: relative;
  display: block;
  text-align: center;
  border-radius: 3px;
  line-height: 38px !important;
  margin: 0;
  padding: 0 !important;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.social li .social__item svg {
  width: auto;
  height: 20px;
}
.social li .social__item svg path {
  fill: var(--orange);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.social li .social__item.social__item--small {
  width: 48px;
  height: 48px;
  line-height: 42px;
}
.social li .social__item.social__item--small svg {
  height: 16px;
}
.social li .social__item:hover {
  background-color: #FFFFFF;
}
.social li .social__item:hover svg path {
  fill: var(--orange);
}

/* Container Style */
.social-share-buttons {
  display: flex;
  justify-content: start;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 1rem;
}

/* Individual Button Styles */
.social-share-buttons a {
  padding: 0.5rem 1rem; /* Button padding */
  text-decoration: none; /* Remove underline from the links */
  border-radius: 4px; /* Rounded corners for the buttons */
  font-weight: bold; /* Bold text for better visibility */
  transition: background-color 0.3s; /* Smooth background color transition for hover effect */
}

/* Color and Hover Styles for Each Social Network */
.social-share-buttons a[href*="facebook.com"] {
  background-color: #3b5998;
  color: white;
}

.social-share-buttons a[href*="facebook.com"]:hover {
  background-color: #2d4373;
}

/* X (voorheen Twitter): zwart, zoals het merk zelf. */
.social-share-buttons a[href^="https://x.com/"] {
  background-color: #000;
  color: white;
}

.social-share-buttons a[href^="https://x.com/"]:hover {
  background-color: #333;
}

.social-share-buttons a[href*="linkedin.com"] {
  background-color: #0077b5;
  color: white;
}

.social-share-buttons a[href*="linkedin.com"]:hover {
  background-color: #005582;
}

.social-share-buttons a[href*="pinterest.com"] {
  background-color: #bd081c;
  color: white;
}

.social-share-buttons a[href*="pinterest.com"]:hover {
  background-color: #8d0615;
}

.heading--block {
  margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {
  .c-team__text {
    position: relative !important;
  }
}
@media screen and (max-width: 991px) {
  .c-hero h1 {
    font-size: 48px;
  }
  h3 {
    font-size: 32px;
  }
  .c-button {
    position: relative !important;
  }
  .c-streamer,
  .c-streamer-small {
    margin-bottom: 0;
    padding-bottom: 80px;
  }
  .c-image-wide {
    width: 100%;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .c-hero .c-hero__video,
  .c-hero .c-hero__image {
    height: 400px;
    min-height: auto;
  }
  .c-hero {
    padding-top: 220px;
    padding-bottom: 40px;
    min-height: auto;
    height: auto;
  }
  .c-hero.c-page {
    margin-top: 140px;
    padding-top: 0;
  }
  .c-hero h1 {
    font-size: 40px;
  }
  .c-hero .c-hero__video:after,
  .c-hero .c-hero__image:after {
    width: 100%;
  }
  .c-hero .c-hero__video video,
  .c-hero .c-hero__video img,
  .c-hero .c-hero__image video,
  .c-hero .c-hero__image img {
    width: 100%;
  }
  .c-hero .c-hero__video:after,
  .c-hero .c-hero__image:after {
    background: -moz-linear-gradient(0deg, rgb(0, 8, 20) 0%, rgba(0, 8, 20, 0.95) 30%, rgba(0, 8, 20, 0.6) 60%, rgba(0, 8, 20, 0) 100%);
    background: -webkit-linear-gradient(0deg, rgb(0, 8, 20) 0%, rgba(0, 8, 20, 0.95) 30%, rgba(0, 8, 20, 0.6) 60%, rgba(0, 8, 20, 0) 100%);
    background: linear-gradient(0deg, rgb(0, 8, 20) 0%, rgba(0, 8, 20, 0.95) 30%, rgba(0, 8, 20, 0.6) 60%, rgba(0, 8, 20, 0) 100%);
  }
  .c-page-content .c-page-content__image {
    min-height: 300px;
  }
  .c-page-content .c-page-content__row {
    margin-bottom: 40px;
  }
  .c-streamer,
  .c-streamer-small {
    margin-bottom: 0;
    padding-bottom: 80px;
  }
  .subtitle {
    font-size: 14px;
  }
  .swiper-arrows {
    width: 100%;
  }
  .c-highlights {
    transform: translateY(0);
  }
}
@media screen and (max-width: 576px) {
  .c-hero h1 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  .c-button {
    position: relative !important;
    width: 100%;
    text-align: center;
  }
}
.pagination-container {
  height: 48px;
  width: 112px;
  display: flex;
}
.pagination-container .button-round {
  margin: 0;
  flex: 0 0 auto;
}

.swiper-pagination-bullet-active {
  background: #FC9210 !important;
}