/* ── Lokaal gehoste fonts (i.p.v. Google Fonts CDN, privacy) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-navy: #0b2d4d;
  --color-blue: #155fa0;
  --color-sky: #50b4e6;
  --color-ice: #eaf6ff;
  --color-sun: #e77526;
  --color-text: #092035;
  --color-white: #ffffff;
  --shadow-lg: 0 20px 55px rgba(11, 45, 77, 0.25);
  --radius-lg: 20px;
  --header-h: 82px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-navy);
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  background:
    radial-gradient(circle at 20% 20%, rgba(80, 180, 230, 0.18), transparent 35%),
    radial-gradient(circle at 80% 5%, rgba(255, 191, 63, 0.2), transparent 25%),
    linear-gradient(180deg, #f7fbff 0%, #edf6fc 50%, #f7fbff 100%);
}

body.has-floating-site-header {
  padding-top: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

.site-header-shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  position: relative;
  gap: 0.7rem;
  padding: 0.78rem 2rem;
  border-radius: 0;
  background: rgba(11, 45, 77, 0.85);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(11, 45, 77, 0.3);
  pointer-events: auto;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.site-logo img {
  display: block;
  height: 48px;
  width: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.32));
}

.site-logo-text {
  color: var(--color-white);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}

.site-header-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.site-header-menu {
  display: contents;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: end;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.site-nav-link {
  text-decoration: none;
  color: var(--color-white);
  font-weight: 600;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  font-size: 0.88rem;
}

.site-nav-link:hover,
.site-nav-link.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.site-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.72rem 1rem;
  font-weight: 800;
  background: var(--color-sun);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgba(231, 117, 38, 0.28);
  white-space: nowrap;
}

/* ── Reizen dropdown ── */
.site-nav-dropdown {
  position: relative;
}

.site-nav-dropdown-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: inherit;
  font-size: 0.855rem;
}

.site-nav-chevron {
  transition: transform 0.2s ease;
}

.site-nav-dropdown.is-open .site-nav-chevron {
  transform: rotate(180deg);
}

.site-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  padding: 0.4rem;
  border-radius: 12px;
  background: rgba(11, 45, 77, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(11, 45, 77, 0.3);
  flex-direction: column;
  gap: 0.2rem;
  z-index: 10;
}

.site-nav-dropdown.is-open .site-nav-dropdown-menu {
  display: flex;
}

.site-nav-dropdown-link {
  display: block;
  text-decoration: none;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.42rem 0.72rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

/* Reset browser default button styles for dropdown items */
button.site-nav-dropdown-link {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.site-nav-dropdown-link:hover,
.site-nav-dropdown-link.is-active {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Nested sub-dropdown (Reizen inside Activiteiten) ── */
.site-nav-subdropdown {
  position: relative;
  width: 100%;
}

.site-nav-subdropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-white);
  font-weight: 600;
  text-align: left;
}

.site-nav-subdropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% + 4px);
  min-width: 150px;
  padding: 0.4rem;
  border-radius: 12px;
  background: rgba(11, 45, 77, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(11, 45, 77, 0.3);
  flex-direction: column;
  gap: 0.2rem;
  z-index: 11;
}

.site-nav-subdropdown.is-open .site-nav-subdropdown-menu {
  display: flex;
}

.site-nav-subdropdown.is-open .site-nav-chevron {
  transform: rotate(180deg);
}

/* ── Header social icons ── */
.site-header-socials {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.2rem;
}

.site-header-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.site-header-social:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.32);
}

h1,
h2,
h3 {
  font-family: 'Sora', sans-serif;
  margin-top: 0;
  line-height: 1.1;
}

p {
  line-height: 1.7;
}

/* Het "1-scroll"-snap-effect is verwijderd (zie project_skiuniek_onepage_scroll_removed.md in
   het geheugen voor de volledige geschiedenis, incl. een mislukt heractiveringsexperiment op
   2026-08-06) - normale, vrije paginascroll i.p.v. een vast-100dvh-hoge scroll-container die
   geforceerd van paneel naar paneel snapt. */
.onepage-scroll {
  display: flex;
  flex-direction: column;
  scroll-padding-top: var(--header-h);
}

.panel {
  min-height: 100svh;
  display: grid;
  align-items: center;
  position: relative;
  padding: calc(var(--header-h) + 1.5rem) 1.25rem 4rem;
}

/* #indoor-skilessen heeft (met het optionele Clinics-blok erbij) op bredere schermen soms meer
   inhoud dan één scherm hoog is - verticaal centreren (de standaard hierboven) liet die extra
   inhoud dan zowel boven als onder de paneelgrens uitsteken, waardoor de onderkant (o.a. de
   Contact-knop) wegviel. Dit paneel specifiek boven uitlijnen i.p.v. alle panelen sitebreed, want
   overal het "verwijderen 1-scroll"-effect had als ongewenste bijwerking dat ELK paneel (ook korte
   hero-achtige secties) niet meer verticaal gecentreerd stond. */
#indoor-skilessen {
  align-items: start;
}

/* #vcp (Vertrouwenscontactpersoon) heeft op laptopformaat een rechterkolom die vaak langer is dan
   één schermhoogte - verticaal centreren liet de bovenkant van die tekst boven de zichtbare rand
   uitsteken. Zelfde reden/aanpak als #indoor-skilessen hierboven. */
#vcp {
  align-items: start;
}

.panel-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  min-width: 0;
}

.panel {
  min-width: 0;
}

.hero-panel {
  color: var(--color-white);
  isolation: isolate;
}

.hero-video,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

.hero-overlay {
  background:
    linear-gradient(120deg, rgba(11, 45, 77, 0.75), rgba(11, 45, 77, 0.35)),
    radial-gradient(circle at 70% 20%, rgba(80, 180, 230, 0.35), transparent 40%);
  z-index: -2;
}

.hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  margin-bottom: 1rem;
  color: var(--color-sun);
}

.hero-content .eyebrow {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: 0.15em;
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 0.74rem;
  margin-bottom: 0.8rem;
  color: var(--color-sun);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.8rem 1.25rem;
  text-decoration: none;
  font-weight: 700;
  margin-right: 0.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-sun);
  color: var(--color-white);
  box-shadow: 0 10px 30px rgba(255, 191, 63, 0.3);
}

.btn-ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: var(--color-white);
  font: inherit;
}

.two-col,
.travel-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1.2fr 1fr;
}

.reizen-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.reizen-destination {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reizen-destination .travel-card {
  margin-bottom: 0.25rem;
  height: clamp(220px, 24vw, 300px);
}

.reizen-destination .travel-card img {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

#reizen-bestemmingen .reizen-flag-card {
  height: clamp(220px, 24vw, 300px) !important;
  overflow: hidden;
}

#reizen-bestemmingen .reizen-flag-card img,
#reizen-bestemmingen .reizen-flag-card video {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

.reizen-destination h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.reizen-destination p {
  margin: 0;
}

.reizen-destination .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(21, 95, 160, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
}

.card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.doc-list {
  margin: 0;
  padding-left: 1.1rem;
}

.doc-list li {
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.doc-list a {
  color: var(--color-blue);
  text-decoration: none;
  border-bottom: 1px dashed rgba(21, 95, 160, 0.35);
}

.doc-list a:hover {
  border-bottom-color: var(--color-blue);
}

.compact-docs {
  max-height: 230px;
  overflow: auto;
  padding-right: 0.35rem;
}

.photo-card,
.travel-card,
.volunteer-media,
.logos {
  overflow: hidden;
}

.photo-card img,
.travel-card img,
.volunteer-media img,
.sponsor-main-image,
.travel-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.travel-hero-image {
  margin-top: 1.25rem;
  box-shadow: var(--shadow-lg);
}

.sponsor-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 1rem;
}

.sponsor-strip img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 0.3rem;
}

.check-list {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.check-list li {
  margin-bottom: 0.45rem;
}

.panel.panel-bg-alt:not(.hero-panel) {
  background: linear-gradient(150deg, rgba(21, 95, 160, 0.06), rgba(80, 180, 230, 0.06));
}

.panel-intro .centered,
.contact-panel .centered {
  text-align: center;
  max-width: 840px;
}

.reizen-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 2.25rem;
}

.reizen-intro-copy {
  max-width: 56ch;
}

.reizen-intro-copy h2 {
  white-space: nowrap;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.reizen-intro-copy p {
  margin-top: 0;
}

.reizen-intro-media {
  display: flex;
  justify-content: flex-end;
}

.reizen-intro-layout .travel-hero-image {
  margin-top: 0;
  width: 100%;
  border-radius: var(--radius-lg);
}

.instructors-story {
  display: grid;
  gap: 2rem;
}

.instructors-copy {
  width: min(760px, 100%);
  margin: 0 auto;
}

.instructors-copy h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.instructors-copy p {
  margin-top: 0;
}

.text-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  color: var(--color-sun);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.text-link-cta:hover {
  text-decoration: underline;
}

.instructors-image {
  padding: 0.6rem;
}

.instructors-image img,
.instructors-image video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.sponsor-cta-panel {
  text-align: center;
  overflow: hidden;
}

.sponsor-cta-content {
  max-width: 820px;
}

.sponsor-shortcode {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.sponsor-shortcode > * {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

.sponsor-cta-content h2 {
  font-size: clamp(1.4rem, 5vw, 3.2rem);
  margin-bottom: 1rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sponsor-cta-content p {
  margin: 0 auto 1.5rem;
  max-width: 760px;
}

.sponsor-cta-content .btn {
  margin-right: 0;
}

/* Sponsoring – Split layout (S5) */
.sponsoring-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1080px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(11, 45, 77, 0.25);
}

.sponsoring-dark-side {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sponsoring-dark-side .eyebrow {
  color: var(--color-sun);
}

.sponsoring-dark-side h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 0.75rem;
  color: #fff;
}

.sponsoring-dark-side p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.sponsoring-dark-side .btn-primary {
  margin-top: 1rem;
  align-self: flex-start;
}

.sponsoring-light-side {
  background: var(--color-white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sponsoring-mini-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(11, 45, 77, 0.12);
}

.sponsoring-mini-photo img,
.sponsoring-mini-photo video {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center 40%;
}

.sponsoring-support-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sponsoring-sl-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(21, 95, 160, 0.08);
  border-radius: 12px;
  background: rgba(234, 246, 255, 0.4);
}

.sponsoring-sl-icon {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-sun);
  flex-shrink: 0;
}

.sponsoring-sl-item strong {
  font-size: 0.85rem;
  color: var(--color-navy);
}

.sponsoring-logo-strip {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: auto;
}

.sponsoring-logo-strip img {
  height: 42px;
  width: auto;
  border-radius: 8px;
  background: #fff;
  padding: 0.15rem 0.3rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Sponsoring – Accordion items */
.sponsoring-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sponsoring-acc-item {
  border: 1px solid rgba(21, 95, 160, 0.1);
  border-radius: 14px;
  background: var(--color-white);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.sponsoring-acc-item.is-open {
  box-shadow: 0 4px 16px rgba(11, 45, 77, 0.08);
}

.sponsoring-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 0.5rem;
}

.sponsoring-acc-trigger strong {
  font-size: 0.88rem;
  color: var(--color-navy);
}

.sponsoring-acc-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s ease;
}

.sponsoring-acc-chevron::before,
.sponsoring-acc-chevron::after {
  content: '';
  position: absolute;
  background: var(--color-navy);
  border-radius: 1px;
  top: 50%;
  left: 50%;
}

.sponsoring-acc-chevron::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.sponsoring-acc-chevron::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.sponsoring-acc-item.is-open .sponsoring-acc-chevron::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.sponsoring-acc-body {
  padding: 0 1rem 1rem;
}

.sponsoring-acc-body p {
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #3a5068;
}

.sponsoring-iban-block {
  background: rgba(234, 246, 255, 0.6);
  border: 1px solid rgba(21, 95, 160, 0.08);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.sponsoring-iban-block strong {
  display: block;
  font-size: 0.88rem;
  color: var(--color-navy);
  margin-bottom: 0.15rem;
}

.sponsoring-iban-block span {
  font-size: 0.8rem;
  color: #5a7082;
  font-style: italic;
}

.sponsoring-acc-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.sponsoring-acc-actions .btn {
  font-size: 0.82rem;
  padding: 0.6rem 1.1rem;
}

.btn-outline-navy {
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
}

/* Accordion icon (emoji) */
.sponsoring-acc-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

/* FAQ – Q5 Numbered-circle style */
.faq-layout {
  max-width: 820px;
}

.faq-layout h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 1.5rem;
}

.faq-q5 .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-q5 .faq-item {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(21, 95, 160, 0.08);
  box-shadow: 0 2px 8px rgba(21, 95, 160, 0.04);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.faq-q5 .faq-item.is-open {
  box-shadow: 0 4px 16px rgba(21, 95, 160, 0.08);
}

.faq-q5 .faq-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  gap: 1rem;
}

.faq-q-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-sun, #f5a623);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-navy, #0a2540);
}

.faq-toggle-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  border: 2px solid var(--color-navy, #0a2540);
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--color-navy, #0a2540);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-toggle-icon::before {
  width: 12px;
  height: 2px;
}

.faq-toggle-icon::after {
  width: 2px;
  height: 12px;
}

.faq-q5 .faq-item.is-open .faq-toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-q5 .faq-answer {
  padding: 0 1.25rem 1.25rem 4.5rem;
}

.faq-q5 .faq-answer p {
  font-size: 0.9rem;
  margin: 0;
  color: #3a5068;
  line-height: 1.65;
}

/* Shortcode area */
.sponsoring-shortcode-area {
  margin-top: 1.5rem;
}

/* ============================================= */
/* Vrijwilligers page                            */
/* ============================================= */

/* Sectie 1 – Navy hero (V3) */
.vrijwilligers-hero-panel {
  background: var(--color-navy);
  color: #fff;
}

.vrijwilligers-hero-panel .eyebrow {
  color: var(--color-sun);
}

.vrijwilligers-hero-panel h1 {
  color: #fff;
}

.vrijwilligers-hero-panel p {
  color: rgba(255, 255, 255, 0.85);
}

.vrijwilligers-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1080px;
}

.vrijwilligers-hero-copy .btn {
  margin-top: 1rem;
}

.vrijwilligers-hero-photo img,
.vrijwilligers-hero-photo video {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  height: 380px;
}

/* Sectie 2 – Floating cards (V5) */
.vrijwilligers-info-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.vrijwilligers-floating-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.vrijwilligers-float-card {
  background: #fff;
  border-radius: 22px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 12px 40px rgba(11, 45, 77, 0.08);
  border-top: 4px solid var(--color-sun);
}

.vrijwilligers-float-card h3 {
  font-size: 1.05rem;
  color: var(--color-navy);
  margin-bottom: 0.7rem;
}

.vrijwilligers-card-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(21, 95, 160, 0.08);
}

.vrijwilligers-card-footer p {
  font-size: 0.85rem;
  color: #3a5068;
  margin: 0 0 0.6rem;
}

.vrijwilligers-card-footer p:last-child {
  margin-bottom: 0;
}

/* Sectie 3 – VOG wide card (V3) */
.vrijwilligers-wide-card {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 2rem;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem;
  max-width: 1080px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(11, 45, 77, 0.06);
}

.vrijwilligers-wide-card h2 {
  font-size: 1.4rem;
}

.vrijwilligers-wide-card p {
  font-size: 0.92rem;
  color: #3a5068;
}

.vrijwilligers-wide-card-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.vrijwilligers-wide-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ice);
  border-radius: 18px;
  padding: 2rem;
  font-size: 4rem;
  min-height: 180px;
}

/* Sectie 4 – Stage card (V5) */
.vrijwilligers-stage-card {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem 3rem;
  box-shadow: 0 12px 40px rgba(11, 45, 77, 0.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.vrijwilligers-stage-text .eyebrow {
  margin-bottom: 0.25rem;
}

.vrijwilligers-stage-text h2 {
  font-size: 1.4rem;
}

.vrijwilligers-stage-text p {
  font-size: 0.92rem;
  color: #3a5068;
}

.vrijwilligers-stage-text .btn {
  margin-top: 1rem;
}

.vrijwilligers-stage-emoji {
  font-size: 4rem;
}

/* Vrijwilligers responsive */
@media (max-width: 980px) {
  .vrijwilligers-hero-grid,
  .vrijwilligers-floating-row,
  .vrijwilligers-wide-card,
  .vrijwilligers-stage-card {
    grid-template-columns: 1fr;
  }

  .vrijwilligers-hero-photo img,
  .vrijwilligers-hero-photo video {
    height: 260px;
  }

  .vrijwilligers-wide-card {
    padding: 1.5rem;
  }

  .vrijwilligers-stage-card {
    padding: 1.5rem;
  }

  .vrijwilligers-stage-emoji {
    text-align: center;
  }
}

@media (max-width: 980px) {
  .sponsoring-split-layout {
    grid-template-columns: 1fr;
  }

  .sponsoring-dark-side {
    padding: 2rem 1.5rem;
  }

  .sponsoring-light-side {
    padding: 1.5rem;
  }
}

/* Keep third-party shortcodes from forcing horizontal page overflow on phone. */
@media (max-width: 768px) {
  /* Instagram Feed Pro switches its own column count via JS-toggled classes
     (sbi_col_N/sbi_tab_col_N/sbi_mob_col_N) with internal breakpoints we don't control - on this
     site that jumps straight from 3 columns to 1, skipping 2 entirely, so a 4-photo row goes
     "3 + 1 leftover" instead of a clean 2x2 grid. Force 2 columns for the whole sub-768px range
     regardless of which class the plugin applies; #sbi_images already carries an ID selector in
     the plugin's own CSS so !important is needed to reliably win. */
  #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #instagram .sponsor-shortcode {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #instagram .sponsor-shortcode > * {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #instagram .sponsor-shortcode,
  #instagram .sponsor-shortcode * {
    box-sizing: border-box;
  }

  #instagram .sponsor-shortcode iframe,
  #instagram .sponsor-shortcode img,
  #instagram .sponsor-shortcode video,
  #instagram .sponsor-shortcode canvas,
  #instagram .sponsor-shortcode svg {
    max-width: 100% !important;
  }
}

.wist-modern-layout {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1.35rem;
}

.wist-modern-hero {
  background: linear-gradient(105deg, #123f66, #1f659a 62%, #ef7f36);
  color: var(--color-white);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 14px 30px rgba(17, 48, 75, 0.2);
}

.wist-modern-hero h2 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.1;
}

.wist-modern-row {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
}

.wist-modern-row-reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
}

.wist-modern-dock {
  border: 1px solid rgba(21, 95, 160, 0.18);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 25px rgba(17, 48, 75, 0.09);
}

.wist-modern-dock h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.16;
}

.wist-modern-dock p {
  margin: 0 0 0.9rem;
}

.wist-modern-image {
  padding: 0.45rem;
}

.wist-modern-image img,
.wist-modern-image video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-item {
  background: var(--color-white);
  border: 1px solid rgba(21, 95, 160, 0.2);
  border-radius: 14px;
  padding: 1rem;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(11, 45, 77, 0.12);
}

.contact-item span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-blue);
  margin-bottom: 0.35rem;
}

.contact-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(80, 180, 230, 0.28), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(231, 117, 38, 0.22), transparent 42%),
    linear-gradient(145deg, #071c31, #0d3150 42%, #12466f 100%);
}

.contact-hero-layout {
  color: var(--color-white);
}

.contact-hero-layout h2,
.contact-hero-layout h3,
.contact-hero-layout p,
.contact-hero-layout .eyebrow {
  color: var(--color-white);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.contact-hero-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1rem;
  backdrop-filter: blur(6px);
}

.contact-hero-card h3 {
  margin-bottom: 0.7rem;
}

.contact-hero-card p {
  margin: 0 0 0.55rem;
}

.contact-hero-muted {
  color: rgba(227, 240, 251, 0.9) !important;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.8rem;
}

.btn-contact-alt {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.34);
}

.btn-contact-alt:hover {
  background: rgba(255, 255, 255, 0.2);
}

.contact-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.contact-social-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
  color: #f4fbff;
  padding: 0.65rem 0.75rem;
  font-weight: 700;
}

.contact-social-link span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(227, 240, 251, 0.92);
}

.contact-social-link:hover {
  background: rgba(80, 180, 230, 0.26);
  border-color: rgba(80, 180, 230, 0.45);
  color: #ffffff;
}

.contact-newsletter {
  grid-column: 1 / -1;
}

/* ─── Contact C5 Three-Column ─── */
.contact-c5-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.contact-c5-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.2rem;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
}

.contact-c5-card h3 {
  margin-bottom: 0.5rem;
}

.contact-c5-card p {
  margin: 0 0 0.5rem;
}

.contact-c5-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.contact-c5-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-white);
  font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s, border-color 0.2s;
  font-size: 0.9rem;
}

.contact-c5-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.contact-c5-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-c5-badges img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

/* ─── Contact Page (C3) ─── */
.contact-page-panel {
  background: var(--color-ice);
}

.contact-page-panel h1 {
  text-align: center;
  color: var(--color-navy);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 2rem;
}

.contact-page-panel > .panel-inner > .eyebrow {
  text-align: center;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.contact-page-form {
  background: var(--color-white);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.contact-page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-page-card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 1.2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.contact-page-card h3 {
  color: var(--color-navy);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.contact-page-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

.contact-page-card a {
  color: var(--color-blue);
  text-decoration: none;
}

.contact-page-card a:hover {
  text-decoration: underline;
}

.contact-page-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.contact-page-social-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(21, 95, 160, 0.18);
  background: var(--color-ice);
  color: var(--color-navy);
  padding: 0.6rem 0.7rem;
  font-weight: 700;
  font-size: 0.88rem;
}

.contact-page-social-link span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-blue);
}

.contact-page-social-link:hover {
  background: rgba(21, 95, 160, 0.1);
  border-color: rgba(21, 95, 160, 0.35);
}

.contact-page-info-muted {
  font-size: 0.82rem;
  color: #888;
  margin: 0 0 0.6rem;
}

.contact-page-info-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-page-info-link {
  display: block;
  padding: 0.6rem 0.8rem;
  background: var(--color-ice);
  border: 1px solid rgba(21, 95, 160, 0.18);
  border-radius: 10px;
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.2s, border-color 0.2s;
}

.contact-page-info-link:hover {
  background: rgba(21, 95, 160, 0.1);
  border-color: rgba(21, 95, 160, 0.35);
}

/* ─── Materiaal Page (M5 + K2) ─── */
.mat-hero-panel {
  position: relative;
  overflow: hidden;
}

.mat-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mat-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 28, 49, 0.7), rgba(7, 28, 49, 0.45));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-hero-content {
  color: var(--color-white);
  text-align: center;
  max-width: 960px;
}

.mat-hero-content h1 {
  color: var(--color-white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.4rem;
}

.mat-hero-content p,
.mat-hero-content .eyebrow {
  color: var(--color-white);
}

.mat-hero-content > p:not(.eyebrow) {
  color: rgba(227, 240, 251, 0.9);
  max-width: 650px;
  margin: 0 auto 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.mat-flipcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1rem;
}

.mat-flipcard {
  perspective: 800px;
  cursor: pointer;
  height: 260px;
  outline: none;
}

.mat-flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.mat-flipcard.is-flipped .mat-flipcard-inner {
  transform: rotateY(180deg);
}

.mat-flipcard-front,
.mat-flipcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
}

.mat-flipcard-front {
  background: rgba(11, 45, 77, 0.55);
  border: 1px solid rgba(21, 95, 160, 0.4);
  backdrop-filter: blur(6px);
}

.mat-flipcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mat-flipcard-label {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.mat-flipcard-cta {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: var(--color-sun);
  color: var(--color-white);
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

.mat-flipcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, var(--color-navy), #12466f);
  border: 1px solid rgba(21, 95, 160, 0.4);
  color: var(--color-white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mat-flipcard-back h3 {
  color: var(--color-sun);
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.mat-flipcard-back p {
  color: rgba(227, 240, 251, 0.92);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Over Ons – Card layout (Optie O3) */
.over-card-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  align-items: stretch;
  max-width: 1080px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(11, 45, 77, 0.25);
}

.over-text-col {
  background: var(--color-white);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.over-text-col h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 1rem;
}

.over-text-col p {
  font-size: 0.93rem;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.over-photo-col {
  position: relative;
  overflow: hidden;
}

.over-photo-col img,
.over-photo-col video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 980px) {
  .over-card-layout {
    grid-template-columns: 1fr;
  }

  .over-photo-col {
    order: -1;
    max-height: 360px;
  }

  .over-text-col {
    padding: 1.5rem 1.25rem;
  }
}

/* Skiles Boeken – Foto rechts + chips (Optie F3) */
.skiles-page-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skiles-page-header .eyebrow { margin-bottom: 0.8rem; }

.skiles-page-header h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 0;
}

.skiles-cards-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2rem;
  align-items: start;
  max-width: 1080px;
}

.skiles-text-col .eyebrow { margin-bottom: 0.8rem; }

.skiles-text-col h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 0.75rem;
}

.skiles-text-col p {
  margin-top: 0;
  margin-bottom: 0.65rem;
  font-size: 0.93rem;
}

.skiles-cta-row {
  margin-top: 1.25rem;
}

.skiles-clinic-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.skiles-clinic-block h2 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.skiles-clinic-block p {
  margin-bottom: 1rem;
}

.skiles-right-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skiles-photo-frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(11, 45, 77, 0.25);
}

.skiles-photo-frame img,
.skiles-photo-frame video {
  display: block;
  width: 100%;
  height: auto;
}

.skiles-side-chips {
  display: grid;
  gap: 0.5rem;
}

.skiles-side-chip {
  background: var(--color-white);
  border: 1px solid rgba(21, 95, 160, 0.1);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

a.skiles-side-chip:hover {
  border-color: rgba(21, 95, 160, 0.35);
  box-shadow: 0 2px 8px rgba(21, 95, 160, 0.1);
}

.skiles-chip-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.skiles-side-chip strong {
  display: block;
  color: var(--color-navy);
  font-size: 0.85rem;
}

.skiles-side-chip span:not(.skiles-chip-icon) {
  color: #5a7082;
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .skiles-cards-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .skiles-right-col {
    order: -1;
  }

  .skiles-photo-frame img,
  .skiles-photo-frame video {
    max-height: 360px;
    object-fit: cover;
    object-position: center 30%;
  }

  .skiles-side-chips {
    grid-template-columns: 1fr;
  }
}

.small {
  font-size: 0.87rem;
  opacity: 0.8;
}

.section-dots {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 0.6rem;
}

.section-dots a {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(11, 45, 77, 0.25);
  transition: all 0.2s ease;
}

.section-dots a.is-active {
  background: var(--color-sun);
  transform: scale(1.25);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
}

.scroll-cue span {
  display: block;
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  position: relative;
}

.scroll-cue span::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-white);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  animation: cue 1.8s infinite;
}

@keyframes cue {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

@media (min-width: 1600px) {
  .panel-inner {
    width: min(1320px, 100%);
  }

  .hero-content {
    max-width: 860px;
  }
}

@media (max-width: 1200px) {
  .panel {
    padding: calc(var(--header-h) + 1.5rem) 1.1rem 3.5rem;
  }

  .hero-content h1 {
    font-size: clamp(1.9rem, 4.3vw, 3.4rem);
  }

  .section-dots {
    right: 0.65rem;
  }
}

/* Laptop-safe layout: iets compactere padding en geen geforceerde min-hoogte op kleinere/lagere
   vensters (het "1-scroll"-effect zelf is overal verwijderd, zie .onepage-scroll/.panel hierboven). */
@media (max-width: 1500px), (max-height: 1000px) {
  .panel {
    min-height: auto;
    padding: calc(var(--header-h) + 1.5rem) 1.1rem 3.5rem;
  }

  .hero-panel,
  .mat-hero-panel {
    min-height: 100svh;
    align-items: center;
    overflow: visible;
  }

  .instructors-copy h2,
  .sponsor-cta-content h2,
  .news-hub-intro h2,
  .wist-modern-hero h2 {
    line-height: 1.12;
  }

  .news-hub-hero,
  .news-hub-grid,
  .wist-modern-layout {
    gap: 0.9rem;
  }

  .sponsor-cta-content p,
  .news-hub-newsletter > p,
  .news-hub-intro p {
    margin-bottom: 1rem;
  }
}

@media (max-width: 980px) {
  .two-col,
  .travel-layout,
  .reizen-split,
  .reizen-intro-layout,
  .wist-modern-row,
  .wist-modern-row-reverse,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .wist-modern-row-reverse .wist-modern-dock {
    order: -1;
  }

  /* Single-column width here can be anywhere from ~360px to ~950px, so a height tied to
     viewport width (the desktop clamp() below) swings from a sane ratio to an extreme,
     over-cropped banner. Tie height to the card's own width instead via aspect-ratio, so
     the crop stays consistent across that whole range. */
  .reizen-destination .travel-card,
  #reizen-bestemmingen .reizen-flag-card {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* Was gated behind max-width:768px, but real tablets in portrait (768-834px, e.g. iPad)
     land just above that and stayed in the cramped 2-column layout, where the newsletter
     card's "Nieuwsbrieven" button had no room and overflowed. Moved here so the whole
     980px-and-below range gets the same single-column, full-width-button treatment.
     Deliberately NOT .news-hub-grid/.latest-news-grid (the "Laatste Nieuws" article list) -
     that one never had this problem and stacking it this early was an unwanted side effect.
     !important because the unqualified base rules for these selectors sit further down
     in this file (same specificity, later source order would otherwise win). */
  .nieuwsbrief-actions {
    grid-template-columns: 1fr !important;
  }

  .news-hub-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Was gated behind max-width:768px (same real-tablet gap as the other fixes above) - moved
     here so real tablets (768-834px) also get single-column instead of a cramped 2-column
     split that horizontally overflowed the page. */
  .vcp-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .reizen-intro-copy h2 {
    white-space: normal;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .contact-hero-grid,
  .contact-c5-grid,
  .contact-social-grid {
    grid-template-columns: 1fr;
  }

  .contact-c5-badges {
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact-page-grid {
    grid-template-columns: 1fr;
  }

  .mat-flipcard-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .reizen-intro-media {
    justify-content: flex-start;
  }

  .section-dots {
    right: 0.45rem;
    gap: 0.45rem;
  }

  .panel {
    padding: calc(var(--header-h) + 1.5rem) 1rem 3.5rem;
    align-items: start;
    min-height: auto;
  }

  .instructors-copy {
    margin: 0;
  }

  .hero-panel,
  .mat-hero-panel,
  .error-404-panel {
    min-height: 100svh;
    /* De algemene .panel-regel hierboven zet align-items op start (voorkomt afkapping bij lange
       pagina's), maar de hero-content is kort (titel + 3 knoppen) en hoeft daar niet voor te
       wijken - gecentreerd houden, zelfde als op desktop. Zonder deze regel viel de 404-pagina
       (die ook via .panel maar met een eigen flex-kolom-indeling werkt, zie .error-404-panel
       hierboven) terug op min-height:auto - de paneelinhoud werd dan zo kort als de tekst+bergen
       nodig hadden, met een kale, leeg ogende strook eronder (lichaamsachtergrond) i.p.v. een
       nette volledig-schermhoge pagina zoals op desktop. */
    align-items: center;
    overflow: visible;
  }

  .mat-hero-overlay {
    position: relative;
    width: 100%;
    min-height: 100svh;
    padding: calc(var(--header-h) + 2rem) 1rem 3rem;
    align-items: flex-start;
  }

  .mat-flipcard {
    height: 220px;
  }
}

/* Header/hamburger-menu treatment - deliberately its own media query (wider than the 768px
   breakpoint used just below for the rest of the mobile layout). Headless measurement (see
   project memory) found the full desktop nav's content (logo + 6 links + socials + "Doneren"
   button, nowrap) needs exactly 1175px before it starts overflowing, but real browsers
   (scrollbar gutter, OS display scaling) needed more margin than that in practice - settled
   on 1190px after live testing/feedback in the browser. */
@media (max-width: 1190px) {
  :root {
    --header-h: 70px;
  }

  .site-header {
    top: 0;
  }

  .site-header-shell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.56rem 0.8rem;
  }

  .site-logo {
    padding: 0.32rem 0.54rem;
  }

  .site-logo img {
    height: 36px;
  }

  .site-header-burger {
    display: grid;
    place-items: center;
  }

  .site-header-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin-left: 0;
    padding: 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--color-navy, #0b2d4d);
    box-shadow: 0 12px 24px rgba(11, 45, 77, 0.24);
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .site-header-shell.is-mobile-open .site-header-menu {
    display: grid;
  }

  .site-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .site-nav {
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0.42rem;
  }

  .site-nav-link {
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .site-nav-dropdown {
    width: 100%;
  }

  .site-nav-dropdown-toggle {
    width: 100%;
    justify-content: center;
  }

  .site-nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 10px;
    padding: 0.3rem;
    margin-top: 0.3rem;
  }

  .site-nav-dropdown-link {
    text-align: center;
  }

  .site-nav-subdropdown {
    width: 100%;
  }

  .site-nav-subdropdown-toggle {
    justify-content: center;
  }

  .site-nav-subdropdown-menu {
    position: static;
    left: auto;
    top: auto;
    min-width: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 10px;
    padding: 0.3rem;
    margin-top: 0.3rem;
  }

  .site-header-socials {
    justify-content: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
  }

  .site-header-cta {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .panel {
    padding: calc(var(--header-h) + 1rem) 0.9rem 3rem;
  }

  .hero-content p,
  p {
    line-height: 1.6;
  }

  .btn {
    width: 100%;
    margin-right: 0;
  }

  .contact-hero-actions .btn,
  .sponsor-cta-content .btn {
    width: auto;
  }

  .hero-cta-row {
    width: 100%;
  }

  .contact-item {
    padding: 0.9rem;
  }

  .section-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .panel {
    padding: calc(var(--header-h) + 1.25rem) 0.75rem 2.5rem;
  }

  .hero-content h1 {
    font-size: clamp(1.65rem, 8.5vw, 2.15rem);
  }

  h2 {
    font-size: clamp(1.35rem, 6.4vw, 1.75rem);
  }

  h3 {
    font-size: 1.05rem;
  }

  .card {
    padding: 1rem;
  }

  .compact-docs {
    max-height: none;
    overflow: visible;
  }

  .scroll-cue {
    bottom: 1rem;
  }
}

/* Custom Blocks */
.custom-block.panel-bg-base {
  background: linear-gradient(135deg, rgba(80, 180, 230, 0.08), rgba(255, 191, 63, 0.05));
}

.custom-block.panel-bg-alt {
  background: linear-gradient(135deg, rgba(21, 95, 160, 0.08), rgba(80, 180, 230, 0.05));
}

.custom-block h2 {
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.custom-block h3 {
  color: var(--color-blue);
  margin-top: 1rem;
}

.block-content {
  color: var(--color-text);
  line-height: 1.8;
  max-width: 85ch;
}

.custom-block .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.custom-block .two-col > div:first-child {
  order: 2;
}

.custom-block .two-col > div:last-child {
  order: 1;
}

.custom-block .two-col img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.custom-block .btn {
  display: inline-block;
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .custom-block .two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .custom-block .two-col > div:first-child {
    order: 1;
  }

  .custom-block .two-col > div:last-child {
    order: 2;
  }
}

.custom-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

.custom-gallery img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
}

.block-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.block-list li {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(21, 95, 160, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
}

.faq-list {
  display: grid;
  gap: 0.7rem;
}

.faq-list details {
  border: 1px solid rgba(21, 95, 160, 0.2);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: #fff;
}

.faq-list summary {
  font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   Zell am See – Z5 Magazine layout
   ═══════════════════════════════════════════════════════ */

/* Hero panel */
.zell-hero-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0;
  min-height: 100svh;
  background: var(--color-navy, #0a2540);
}

.zell-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.zell-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 6rem 1.25rem 3rem;
  background: linear-gradient(0deg, rgba(7, 28, 49, 0.92) 0%, rgba(7, 28, 49, 0.65) 45%, rgba(7, 28, 49, 0.35) 100%);
}

.zell-hero-overlay .panel-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.zell-hero-overlay .eyebrow {
  margin-bottom: 1rem;
}

.zell-hero-overlay h1 {
  color: var(--color-white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.6rem;
}

.zell-hero-overlay p {
  color: rgba(244, 251, 255, 0.9);
  font-size: 0.95rem;
  max-width: 600px;
  line-height: 1.65;
  margin-left: auto;
  margin-right: auto;
}

/* Info panel: sidebar + content */
.zell-info-panel {
  padding: 0;
  align-items: start;
}

.zell-info-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  width: 100%;
  align-items: start;
}

/* Sidebar */
.zell-sidebar {
  background: var(--color-navy, #0a2540);
  padding: 2rem 1.25rem;
  color: var(--color-white);
  overflow-y: auto;
  position: sticky;
  top: var(--header-h);
  max-height: calc(100svh - var(--header-h));
  align-self: start;
}

.zell-sidebar h3 {
  color: var(--color-white);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.zell-sidebar-item {
  display: block;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: rgba(244, 251, 255, 0.8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.3rem;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}

.zell-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.zell-sidebar-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  border-left: 3px solid var(--color-sun, #e77526);
  color: var(--color-white);
}

/* Main content area */
.zell-main-content {
  padding: 2rem;
}

/* Tab grid */
.zell-tab-grid {
  display: none;
}

.zell-tab {
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(231, 117, 38, 0.18);
  background: rgba(231, 117, 38, 0.06);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.2s ease;
}

.zell-tab:hover {
  border-color: rgba(231, 117, 38, 0.35);
  background: rgba(231, 117, 38, 0.1);
}

.zell-tab strong {
  display: block;
  font-size: 0.82rem;
  color: var(--color-sun, #e77526);
  margin-bottom: 0.2rem;
}

.zell-tab span {
  font-size: 0.72rem;
  color: #8a5e3a;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zell-tab.is-active {
  background: var(--color-navy, #0a2540);
  border-color: var(--color-navy, #0a2540);
}

.zell-tab.is-active strong {
  color: var(--color-white);
}

.zell-tab.is-active span {
  color: rgba(244, 251, 255, 0.65);
}

/* Detail card */
.zell-detail {
  background: var(--color-white);
  border: 1px solid rgba(21, 95, 160, 0.08);
  border-radius: 16px;
  padding: 1.8rem;
  box-shadow: 0 4px 20px rgba(11, 45, 77, 0.05);
  margin-bottom: 1.5rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.zell-detail-image,
.zell-detail-video {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* Grootte-varianten, ingesteld per item via de Ski-Uniek Editor.
   Een vaste "height" (i.p.v. max-height) zorgt dat elke stap altijd
   zichtbaar verschilt, ook bij brede/lage afbeeldingen die van
   zichzelf al onder het oude plafond bleven. */
.zell-detail-media--compact {
  width: 320px;
  max-width: 100%;
  height: 180px;
}

.zell-detail-media--groot {
  height: 480px;
}

.zell-detail-media--volledige-breedte,
.zell-detail-media--breed-75,
.zell-detail-media--middel-50,
.zell-detail-media--klein-33 {
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* Deze drie tonen de afbeelding altijd volledig (geen bijsnijden, zie hierboven), alleen de
   breedte verschilt - gecentreerd binnen de kaart via margin auto. */
.zell-detail-media--breed-75 {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.zell-detail-media--middel-50 {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.zell-detail-media--klein-33 {
  width: 33%;
  margin-left: auto;
  margin-right: auto;
}

/* Op een klein scherm zou 33/50% breed al snel te klein worden om te kunnen lezen - daar dus
   altijd de volle breedte tonen, ongeacht de gekozen grootte. */
@media (max-width: 640px) {
  .zell-detail-media--breed-75,
  .zell-detail-media--middel-50,
  .zell-detail-media--klein-33 {
    width: 100%;
  }
}

/* Optioneel 2e afbeelding/video-slot per item: samen als paar naast elkaar,
   op dezelfde plek (boven/onder/naast de tekst) als één enkele afbeelding. */
.zell-detail-media-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.zell-detail-media-pair .zell-detail-image,
.zell-detail-media-pair .zell-detail-video {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

/* "Compact" moet zijn eigen (kleinere) breedte houden i.p.v. gelijkmatig
   uit te rekken zoals de overige groottes in een paar wel mogen doen. */
.zell-detail-media-pair .zell-detail-media--compact {
  flex: 0 1 320px;
}

@media (max-width: 480px) {
  .zell-detail-media-pair {
    flex-direction: column;
  }
}

/* Plaatsing-varianten: afbeelding/video naast i.p.v. boven de tekst */
.zell-detail--media-right,
.zell-detail--media-left {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.zell-detail--media-right {
  flex-direction: row-reverse;
}

.zell-detail--media-right .zell-detail-image,
.zell-detail--media-right .zell-detail-video,
.zell-detail--media-left .zell-detail-image,
.zell-detail--media-left .zell-detail-video {
  width: 260px;
  flex: none;
  margin-bottom: 0;
}

.zell-detail--media-right .zell-detail-body,
.zell-detail--media-left .zell-detail-body {
  flex: 1 1 240px;
  min-width: 0;
}

@media (max-width: 640px) {
  .zell-detail--media-right,
  .zell-detail--media-left {
    flex-direction: column;
  }

  .zell-detail--media-right .zell-detail-image,
  .zell-detail--media-right .zell-detail-video,
  .zell-detail--media-left .zell-detail-image,
  .zell-detail--media-left .zell-detail-video {
    width: 100%;
  }
}

.zell-detail h2 {
  font-size: 1.2rem;
  color: var(--color-navy, #0a2540);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.zell-detail p {
  font-size: 0.88rem;
  color: #3a5068;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.zell-detail strong {
  color: var(--color-navy, #0a2540);
}

.zell-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Responsive: mobile stacks sidebar above content */
@media (max-width: 768px) {
  .zell-info-layout {
    display: block;
  }

  .zell-sidebar {
    position: relative;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  .zell-sidebar h3 {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .zell-sidebar-item {
    padding: 0.45rem 0.7rem;
    font-size: 0.76rem;
    margin-bottom: 0;
  }

  .zell-main-content {
    padding: 1.5rem 1.25rem;
    max-height: none;
    overflow: visible;
  }

  .zell-info-panel {
    min-height: auto !important;
    height: auto !important;
    align-content: start !important;
  }

  .zell-info-layout {
    min-height: auto !important;
    height: auto !important;
    align-self: start !important;
    align-content: start !important;
  }

  .zell-tab-grid {
    grid-template-columns: 1fr;
  }
}

.tabs-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.map-embed iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 14px;
}

.testimonial-block {
  margin: 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--color-blue);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

/* Nieuwsbrief Glassmorphism Section */
.nieuwsbrief-glass-wrapper {
  background: linear-gradient(135deg, #123f66 0%, #1f659a 100%);
  padding: 4rem 2rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}

.nieuwsbrief-glass-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(239, 127, 54, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.nieuwsbrief-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 3rem 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.nieuwsbrief-glass h2 {
  font-size: clamp(2rem, 3.5vw, 2.2rem);
  color: #123f66;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.nieuwsbrief-glass > p {
  font-size: 1.05rem;
  color: #666;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.nieuwsbrief-note {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
  color: #4c5b69;
}

.nieuwsbrief-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.nieuwsbrief-btn {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  font-family: inherit;
  width: 100%;
  background: #ef7f36;
  color: white;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.nieuwsbrief-btn:hover {
  background: #e67e2d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 127, 54, 0.3);
}

.nieuwsbrief-btn-secondary {
  background: #fff;
  border: 2px solid #ef7f36;
  color: #ef7f36;
}

.nieuwsbrief-btn-secondary:hover {
  background: #fff7f1;
}

.nieuwsbrief-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.nieuwsbrief-embed {
  margin-top: 1rem;
  border: 1px solid rgba(18, 63, 102, 0.2);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.nieuwsbrief-embed-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: #f4f8fc;
  border-bottom: 1px solid rgba(18, 63, 102, 0.12);
}

.nieuwsbrief-embed-link,
.nieuwsbrief-embed-close {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
}

.nieuwsbrief-embed-link {
  text-decoration: none;
  border: 1px solid rgba(18, 63, 102, 0.2);
  color: #123f66;
  background: #fff;
}

.nieuwsbrief-embed-close {
  border: 1px solid rgba(18, 63, 102, 0.2);
  background: #fff;
  color: #123f66;
  cursor: pointer;
}

.nieuwsbrief-embed-frame {
  width: 100%;
  height: min(68vh, 680px);
  border: 0;
  display: block;
  background: #fff;
}

.news-hub-layout {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.news-hub-intro {
  margin-bottom: 1.15rem;
}

.news-hub-intro h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.06;
}

.news-hub-intro p {
  margin-top: 0;
}

.news-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.news-hub-featured {
  padding: 1.25rem;
}

.news-hub-featured h3 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.14;
}

.news-hub-featured h3 a {
  color: var(--color-navy);
  text-decoration: none;
}

.news-hub-featured h3 a:hover {
  text-decoration: underline;
}

.news-hub-featured p {
  margin: 0;
}

/* ── Evenementenkalender in uitgelicht-slot (Optie E stijl) ── */
.news-hub-calendar {
  padding: 1.4rem 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
}

.news-hub-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  gap: 0.75rem;
}

.news-hub-calendar-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0;
}

.news-hub-calendar-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  flex: 1;
  min-width: 0;
}

.news-hub-calendar-scroll::-webkit-scrollbar {
  height: 8px;
}

.news-hub-calendar-scroll::-webkit-scrollbar-track {
  background: rgba(18, 63, 102, 0.06);
  border-radius: 99px;
}

.news-hub-calendar-scroll::-webkit-scrollbar-thumb {
  background: rgba(18, 63, 102, 0.28);
  border-radius: 99px;
}

.news-hub-calendar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(18, 63, 102, 0.45);
}

.news-hub-ev-card {
  min-width: 148px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(18, 63, 102, 0.1);
  display: flex;
  flex-direction: column;
}

.news-hub-ev-top {
  background: linear-gradient(135deg, var(--color-navy), #1f659a);
  padding: 0.8rem 0.9rem 0.7rem;
  color: var(--color-white);
  text-align: center;
  flex-shrink: 0;
}

.news-hub-ev-card.news-hub-ev-next .news-hub-ev-top {
  background: linear-gradient(135deg, #d96e20, var(--color-sun));
}

.news-hub-ev-day {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.news-hub-ev-month {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.78;
  display: block;
  margin-top: 0.15rem;
}

.news-hub-ev-body {
  padding: 0.7rem 0.75rem;
  background: var(--color-white);
  flex: 1;
}

.news-hub-ev-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.news-hub-ev-detail {
  font-size: 0.71rem;
  color: #7a8a9a;
  line-height: 1.45;
}

.news-hub-newsletter {
  background: linear-gradient(135deg, #123f66, #1f659a);
  color: var(--color-white);
  text-align: left;
}

.news-hub-newsletter h3,
.news-hub-newsletter p {
  color: var(--color-white);
}

.news-hub-newsletter h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
}

.news-hub-newsletter > p {
  margin-bottom: 1.2rem;
}

.news-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.latest-news-card {
  min-width: 0;
  padding: 0;
}

.latest-news-thumb {
  display: block;
  background: linear-gradient(180deg, #e5eef7, #dce8f3);
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.latest-news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.35rem;
}

.latest-news-thumb-placeholder {
  display: grid;
  place-items: center;
  color: var(--color-white);
  font-family: 'Sora', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

.latest-news-card-body {
  padding: 1rem;
}

.latest-news-meta {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: var(--color-sun);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================
   WooCommerce Cart — Gradient Sidebar Layout
   ========================================================== */

/* Hide WooCommerce page titles */
.woocommerce-cart .entry-title,
.woocommerce-cart .page-title,
.woocommerce-cart .woocommerce > h1,
.woocommerce-cart .card > h1 {
  display: none !important;
}

/* Reset card/block-content wrappers if using fallback page.php */
.woocommerce-cart .card {
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.woocommerce-cart .block-content {
  max-width: 100% !important;
}

/* Hide duplicate price column (subtotal is sufficient) */
.woocommerce-cart td.product-price {
  display: none !important;
}

/* --- Main grid wrapper --- */
.woocommerce-cart .woocommerce {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(11, 45, 77, 0.10);
}

/* Notices span full width */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
  background: var(--color-white);
  padding: 16px 32px 0;
  margin: 0;
}

/* --- Left column: cart form --- */
.woocommerce-cart .woocommerce > .woocommerce-cart-form {
  background: var(--color-white);
  padding: 32px;
  min-width: 0;
}

/* --- Full table → block reset --- */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table thead,
.woocommerce-cart table.shop_table tbody,
.woocommerce-cart table.shop_table tfoot,
.woocommerce-cart table.shop_table tr,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  background: transparent;
}

.woocommerce-cart table.shop_table {
  border-spacing: 0;
}

.woocommerce-cart table.shop_table thead {
  display: none;
}

/* --- Product row as flex --- */
.woocommerce-cart table.shop_table .woocommerce-cart-form__cart-item,
.woocommerce-cart table.shop_table tr.cart_item {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #eef2f6;
  width: 100%;
}

.woocommerce-cart table.shop_table tr.cart_item:last-child {
  border-bottom: none;
}

/* All cells inline */
.woocommerce-cart table.shop_table tr.cart_item td {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
}

/* Remove (×) */
.woocommerce-cart td.product-remove {
  order: 0;
  flex-shrink: 0;
}

.woocommerce-cart .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: none;
  color: #ccc !important;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.2s;
}

.woocommerce-cart .product-remove a.remove:hover {
  background: #fef0ef;
  color: #c0392b !important;
}

/* Thumbnail */
.woocommerce-cart td.product-thumbnail {
  order: 1;
  flex-shrink: 0;
  width: 64px !important;
}

.woocommerce-cart .product-thumbnail img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(135deg, #eaf6ff, #d5edfc);
}

/* Product name & meta */
.woocommerce-cart td.product-name {
  order: 2;
  flex: 1 !important;
  min-width: 0;
}

.woocommerce-cart .product-name a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  display: block;
}

.woocommerce-cart .product-name a:hover {
  color: var(--color-blue);
}

.woocommerce-cart .product-name .variation,
.woocommerce-cart .product-name dl.variation {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  margin-top: 4px;
}

.woocommerce-cart .product-name dl.variation dt,
.woocommerce-cart .product-name dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-style: normal;
}

.woocommerce-cart .product-name dl.variation dd p {
  display: inline;
  margin: 0;
}

/* Quantity — hidden for services */
.woocommerce-cart td.product-quantity {
  order: 4;
  flex-shrink: 0;
  display: none !important;
}

/* Subtotal */
.woocommerce-cart td.product-subtotal {
  order: 5;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Coupon row --- */
.woocommerce-cart table.shop_table tr td.actions {
  display: block !important;
  width: 100% !important;
  padding-top: 20px;
}

.woocommerce-cart .coupon {
  display: flex;
  gap: 8px;
  align-items: center;
}

.woocommerce-cart .coupon label {
  display: none;
}

.woocommerce-cart .coupon #coupon_code {
  flex: 1;
  max-width: 220px;
  padding: 10px 14px;
  border: 1px solid #dce6ef;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.woocommerce-cart .coupon #coupon_code:focus {
  border-color: var(--color-sky);
  outline: none;
}

.woocommerce-cart .coupon .button {
  padding: 10px 16px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.woocommerce-cart .coupon .button:hover {
  background: var(--color-blue);
}

/* Hide update cart button */
.woocommerce-cart .actions > .button,
.woocommerce-cart .actions .button[name="update_cart"] {
  display: none;
}

/* --- Right column: cart collaterals wrapper --- */
.woocommerce-cart .cart-collaterals {
  display: contents !important;
}

/* --- Right column: cart totals sidebar --- */
.woocommerce-cart .cart_totals {
  background: linear-gradient(160deg, var(--color-navy) 0%, #1a4a7a 100%);
  color: #fff;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 24px;
  color: #fff;
  opacity: 0.9;
}

.woocommerce-cart .cart_totals table.shop_table {
  display: table;
  border: none;
}

.woocommerce-cart .cart_totals table.shop_table tbody,
.woocommerce-cart .cart_totals table.shop_table tr {
  display: table-row;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  display: table-cell;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  width: auto;
}

.woocommerce-cart .cart_totals table th {
  font-weight: 500;
  text-align: left;
}

.woocommerce-cart .cart_totals table td {
  text-align: right;
}

.woocommerce-cart .cart_totals table .order-total th,
.woocommerce-cart .cart_totals table .order-total td {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 18px;
}

.woocommerce-cart .cart_totals .amount {
  color: inherit;
}

/* Checkout button */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin-top: auto;
  padding-top: 24px;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--color-sun);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button:hover {
  background: #d5681e;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    border-radius: 16px 16px 0 0;
  }

  .woocommerce-cart .woocommerce > .woocommerce-cart-form {
    padding: 24px 20px;
  }

  .woocommerce-cart .cart_totals {
    padding: 28px 20px;
    min-height: auto;
    border-radius: 0 0 16px 16px;
  }

  .woocommerce-cart table.shop_table tr.cart_item {
    flex-wrap: wrap;
  }
}

/* --- WooCommerce alert/message overrides --- */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

.woocommerce-cart .woocommerce-message {
  border-top-color: var(--color-sun);
}

/* --- Empty cart --- */
.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: #999;
  grid-column: 1 / -1;
  background: var(--color-white);
  border-radius: 20px;
}

.woocommerce-cart .return-to-shop .button {
  background: var(--color-sun);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.latest-news-card h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.latest-news-card h3 a {
  color: var(--color-navy);
  text-decoration: none;
}

.latest-news-card h3 a:hover {
  text-decoration: underline;
}

.latest-news-card p {
  margin: 0;
}

.news-hub-footer {
  margin-top: 1rem;
}

.news-hub-footer .news-hub-more-link {
  margin-top: 0.25rem;
  font-size: 1.1rem;
}

/* ── Mailchimp open: nieuwsartikelen schuiven naast de embed ── */
@media (min-width: 769px) {
  .news-hub-layout.mailchimp-is-open {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    column-gap: 1rem;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-intro {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-hero {
    display: contents;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-calendar {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-newsletter {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: start;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-grid {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }
  .news-hub-layout.mailchimp-is-open .news-hub-footer {
    grid-column: 1;
    grid-row: 4;
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .nieuwsbrief-glass-wrapper {
    padding: 2.5rem 1rem;
  }

  .nieuwsbrief-glass {
    padding: 2rem 1.25rem;
  }

  .nieuwsbrief-glass h2 {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
  }

  .news-hub-grid,
  .latest-news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-hub-calendar {
    padding: 1.1rem 1rem 1rem;
  }

  .news-hub-calendar-header {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .news-hub-ev-card {
    min-width: 136px;
  }

  .news-hub-ev-day {
    font-size: 2rem;
  }

  .nieuwsbrief-embed-frame {
    height: min(62vh, 560px);
  }
}

/* ── Het Bestuur – B5 hero + B4 tabbed cards ── */
.bestuur-hero-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bestuur-hero {
  background: linear-gradient(145deg, var(--color-navy), #12466f);
  color: #fff;
  text-align: center;
  padding: 5rem 1.5rem 3.5rem;
  width: 100%;
}

.bestuur-hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.bestuur-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
}

.bestuur-hero-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.85;
}

.bestuur-body {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  width: 100%;
}

/* Tabs */
.bestuur-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.bestuur-tab {
  padding: 0.6rem 1.6rem;
  border: 2px solid var(--color-navy);
  border-radius: 999px;
  background: transparent;
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.bestuur-tab:hover {
  background: var(--color-ice);
}

.bestuur-tab.is-active {
  background: var(--color-navy);
  color: #fff;
}

/* Panels */
.bestuur-panel {
  display: none;
}

.bestuur-panel.is-active {
  display: block;
}

.bestuur-panel-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: #555;
  line-height: 1.7;
}

/* Card grid */
.bestuur-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.bestuur-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  width: calc(33.333% - 1rem);
  min-width: 200px;
}

.bestuur-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.bestuur-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-ice);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.bestuur-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--color-navy);
}

.bestuur-card-role {
  font-size: 0.85rem;
  color: #777;
  margin: 0;
}

@media (max-width: 768px) {
  .bestuur-hero {
    padding: 4rem 1.25rem 2.5rem;
  }

  .bestuur-card-grid {
    gap: 1rem;
  }

  .bestuur-card {
    width: calc(50% - 0.5rem);
  }

  .bestuur-tabs {
    gap: 0.375rem;
  }

  .bestuur-tab {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .bestuur-card {
    width: 100%;
  }
}

/* ── Vertrouwenscontactpersoon – V2 two-column split ── */
.vcp-split-panel {
  padding: 0;
  /* De vaste header staat los boven de content (position: fixed/sticky) - omdat dit paneel zelf
     geen padding heeft (voor de full-bleed navy/wit-look), viel de bovenkant van de tekst in
     beide kolommen onder/achter de header. Alleen bovenaan ruimte reserveren lost dit op zonder
     de full-bleed zijkanten/onderkant aan te tasten. */
  padding-top: var(--header-h);
}

.vcp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100dvh;
  width: 100%;
}

.vcp-split-left {
  background: linear-gradient(160deg, var(--color-navy), #12466f);
  color: #fff;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vcp-split-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 0.5rem;
}

.vcp-split-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 0.75rem;
  overflow-wrap: break-word;
}

.vcp-split-subtitle {
  font-size: 1.1rem;
  color: var(--color-sky);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

.vcp-split-left .vcp-split-text {
  line-height: 1.8;
  opacity: 0.85;
}

.vcp-split-left .vcp-split-text p {
  margin-bottom: 1rem;
}

.vcp-split-right {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fafbfc;
}

.vcp-split-right > .vcp-split-text {
  line-height: 1.8;
  color: #444;
}

.vcp-split-right > .vcp-split-text p {
  margin-bottom: 1.25rem;
}

.vcp-info-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-top: 1.5rem;
}

.vcp-info-card h3 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.vcp-info-card .vcp-split-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

.vcp-info-card .vcp-split-text p {
  margin-bottom: 1rem;
}

.vcp-info-card .btn {
  margin-top: 0.5rem;
}

.vcp-gedrag-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 1rem;
}

.vcp-gedrag-doc {
  margin-top: 0;
}

@media (max-width: 768px) {
  .vcp-split-left {
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2.5rem;
  }

  .vcp-split-right {
    padding: 2.5rem 1.5rem;
  }
}

/* ── D4 Documenten – tab bar bovenaan (Optie B) ── */

.docs-split-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.docs-split {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
}

/* Hero zone met tab bar */
.docs-sidebar {
  background: linear-gradient(135deg, var(--color-navy, #071c31) 0%, #12466f 100%);
  color: #fff;
  padding: calc(var(--header-h) + 1.5rem) 2rem 0;
  flex-shrink: 0;
}

.docs-sidebar-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 0.35rem;
}

.docs-sidebar-title {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 1.4rem;
}

.docs-sidebar-nav {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
}

.docs-sidebar-nav::-webkit-scrollbar {
  display: none;
}

.docs-sidebar-item {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.72);
  border-radius: 8px 8px 0 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.docs-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.docs-sidebar-item.is-active {
  background: #fafbfc;
  color: var(--color-navy, #071c31);
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.2);
}

.docs-sidebar-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Content onder de tab bar */
.docs-main {
  flex: 1;
  padding: 2rem 2rem 3rem;
  background: #fafbfc;
}

.docs-file-panel {
  display: none;
}

.docs-file-panel.is-active {
  display: block;
}

.docs-file-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-ice, #e8f4fb);
}

.docs-file-heading-icon {
  font-size: 1.2rem;
}

.docs-file-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.docs-file-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #333;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.docs-file-card:hover {
  border-color: var(--color-sky);
  box-shadow: 0 2px 8px rgba(80, 180, 230, 0.12);
  transform: translateY(-1px);
}

.docs-file-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.docs-file-name {
  flex: 1;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
}

.docs-file-dl {
  font-size: 1rem;
  color: var(--color-sky);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .docs-file-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .docs-sidebar {
    padding: calc(var(--header-h) + 1rem) 1rem 0;
  }

  .docs-sidebar-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .docs-sidebar-item {
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
  }

  .docs-main {
    padding: 1.5rem 1rem 2.5rem;
  }
}

/* ───────────────────────────────────────────── */
/* AFREKENEN – Checkout (Accordion Steps + Sidebar) */
/* ───────────────────────────────────────────── */

.afrekenen-panel {
  background: linear-gradient(180deg, var(--color-ice) 0%, #d5edfc 100%);
  padding-top: 7rem;
}

.checkout-header {
  text-align: center;
  margin-bottom: 28px;
}
.checkout-header h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.65rem;
  color: var(--color-navy);
  margin-bottom: 6px;
}
.checkout-header p {
  font-size: 0.82rem;
  color: #6b8299;
}

/* ── Two columns: steps left, summary right ── */
.checkout-duo {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* ── Left column: WooCommerce form as accordion step-cards ── */
.checkout-steps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Flatten ALL WooCommerce wrappers so sections become direct flex children */
.checkout-steps .woocommerce,
.checkout-steps .woocommerce-checkout,
.checkout-steps form.woocommerce-checkout,
.checkout-steps .col2-set,
.checkout-steps .woocommerce-checkout-review-order {
  display: contents;
}

/* Hide elements we don't need in the left column. #order_review table.shop_table (not just the
   more specific .woocommerce-checkout-review-order-table) also catches the order-items table that
   checkout/form-pay.php (pay-for-order, e.g. de "optionele les geaccepteerd" payment link) renders
   on its own - dat table lacks the more specific class, so the narrower selector alone let it
   through unstyled. Both variants render inside #order_review (a div on the normal checkout, a
   form on de pay-for-order flow), en de right-hand "Je bestelling" card (page-afrekenen.php) shows
   the same info for both flows, so hiding this table here never loses information for the visitor.
   Scoped to #order_review specifically (not table.shop_table page-wide) zodat dit de heel andere
   "Bestelgegevens"-tabel (section.woocommerce-order-details, .checkout-steps .woocommerce-order-details
   hieronder) op de bedankpagina niet ook per ongeluk meepakt - die tabel heeft toevallig dezelfde
   .shop_table-class maar zit buiten #order_review en moet daar juist wel zichtbaar blijven. */
.checkout-steps #order_review_heading,
.checkout-steps #order_review table.shop_table,
.checkout-steps .col2-set .col-2 {
  display: none;
}

/* Section ordering */
.checkout-steps .col2-set .col-1              { order: 1; }
.checkout-steps .woocommerce-checkout-payment  { order: 2; }
.checkout-steps .woocommerce-additional-fields { order: 3; }

/* ── Step-card containers (class added by JS) ── */
.checkout-step {
  background: var(--color-white);
  overflow: hidden;
}
.checkout-steps .col2-set .col-1.checkout-step {
  border-radius: 16px 16px 0 0;
}
.checkout-steps .woocommerce-checkout-payment.checkout-step {
  border-top: 1px solid #eef2f6;
}
.checkout-steps .woocommerce-additional-fields.checkout-step {
  border-top: 1px solid #eef2f6;
  border-radius: 0 0 16px 16px;
}

/* ── Accordion header (injected by JS) ── */
.checkout-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
}
.checkout-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-sun);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.checkout-step-label {
  flex: 1;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}
.checkout-step-toggle {
  font-size: 12px;
  color: #90a8c0;
  transition: transform 0.3s;
}
.checkout-step.is-active .checkout-step-toggle {
  transform: rotate(180deg);
}

/* ── Accordion body (collapsible) ── */
.checkout-step-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 22px;
}
.checkout-step.is-active .checkout-step-body {
  max-height: 1500px;
  padding: 0 22px 22px;
}

/* Hide original WooCommerce section headings (replaced by accordion headers) */
.checkout-step-body > h3,
.checkout-step-body .woocommerce-billing-fields > h3 {
  display: none;
}

/* ── Form fields ── */
.checkout-steps .form-row {
  margin-bottom: 10px;
}
.checkout-steps .form-row-first,
.checkout-steps .form-row-last {
  display: inline-block;
  width: calc(50% - 5px) !important;
  float: none !important;
  vertical-align: top;
}
.checkout-steps .form-row-first {
  margin-right: 10px;
}
.checkout-steps .form-row-wide {
  width: 100% !important;
}

/* Labels */
.checkout-steps .form-row label {
  font-size: 10px;
  font-weight: 600;
  color: #5a7a96;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Inputs */
.checkout-steps .form-row input[type="text"],
.checkout-steps .form-row input[type="email"],
.checkout-steps .form-row input[type="tel"],
.checkout-steps .form-row input[type="password"],
.checkout-steps .form-row input[type="number"],
.checkout-steps .form-row select,
.checkout-steps .form-row textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #dce6ef;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--color-navy);
  background: #f8fbfe;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}
.checkout-steps .form-row input:focus,
.checkout-steps .form-row select:focus,
.checkout-steps .form-row textarea:focus {
  border-color: var(--color-sky);
  background: #fff;
}
.checkout-steps .form-row textarea {
  resize: vertical;
  min-height: 52px;
}

/* ── Payment methods list ── */
.checkout-steps .wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.checkout-steps .wc_payment_methods li {
  position: relative;
}
.checkout-steps .wc_payment_methods li label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 2px solid #eef2f6;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  background: #fff;
  text-transform: none;
  letter-spacing: normal;
}
.checkout-steps .wc_payment_methods li label:hover {
  border-color: var(--color-sky);
  background: var(--color-ice);
}
.checkout-steps .wc_payment_methods li input[type="radio"]:checked + label,
.checkout-steps .wc_payment_methods li.wc_payment_method input[type="radio"]:checked ~ label {
  border-color: var(--color-sun);
  background: #fef5ee;
}

/* Payment method description box */
.checkout-steps .wc_payment_methods .payment_box {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 8px;
  background: #f8fbfe;
  font-size: 12px;
  color: #5a7a96;
  margin-top: 4px;
}

/* Place order button */
.checkout-steps #place_order {
  display: block;
  width: 100%;
  padding: 13px;
  margin-top: 14px;
  background: var(--color-sun);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}
.checkout-steps #place_order:hover {
  background: #d5681e;
}

/* ── Right column: Order summary card ── */
.checkout-order-card {
  position: sticky;
  top: 100px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(11, 45, 77, 0.10);
}
.checkout-order-inner {
  background: linear-gradient(160deg, var(--color-navy) 0%, #1a4a7a 100%);
  color: #fff;
  padding: 24px 18px;
}
.checkout-order-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  opacity: 0.9;
}

/* Order items */
.checkout-oi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.checkout-oi-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.checkout-oi-info { flex: 1; }
.checkout-oi-name { font-size: 12px; font-weight: 600; }
.checkout-oi-date { font-size: 10px; opacity: 0.7; margin-top: 2px; }
.checkout-oi-qty  { font-size: 10px; opacity: 0.5; }
.checkout-oi-price { font-size: 12px; font-weight: 700; }

/* Coupon */
.checkout-coupon-box {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.checkout-coupon-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  outline: none;
}
.checkout-coupon-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.checkout-coupon-btn {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.checkout-coupon-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* Coupon - al toegepaste code(s) tonen als verwijderbare chip i.p.v. het invoerveld */
.checkout-coupon-applied { flex-wrap: wrap; }
.checkout-coupon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(231, 117, 38, 0.18);
  border: 1px solid rgba(231, 117, 38, 0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}
.checkout-coupon-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.checkout-coupon-remove:hover { color: #fff; }

/* Totals */
.checkout-totals { margin-top: 14px; }
.checkout-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  opacity: 0.65;
}
.checkout-totals-discount { color: var(--color-sun); opacity: 1; font-weight: 600; }
.checkout-totals-grand {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 18px;
  font-weight: 700;
  opacity: 1;
}

/* Secure badge */
.checkout-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  opacity: 0.5;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .checkout-duo {
    grid-template-columns: 1fr;
  }
  .checkout-order-card {
    position: static;
  }
  .checkout-steps .form-row-first,
  .checkout-steps .form-row-last {
    width: 100% !important;
    margin-right: 0;
  }
  .checkout-steps .wc_payment_methods {
    grid-template-columns: 1fr;
  }
}

/* ── Order received (thank you) page ── */

/* Wrap de WooCommerce-bevestigingsinhoud als één step-card */
.checkout-steps .woocommerce-order {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px 24px;
}

/* Succes-melding bovenaan */
.checkout-steps .woocommerce-notice--success {
  background: #e6f7ef;
  border-left: 4px solid #2ab470;
  border-radius: 8px;
  padding: 14px 18px;
  font-weight: 600;
  color: #1a7a47;
  font-size: 13px;
  margin-bottom: 20px;
  list-style: none;
}

/* Besteloverzicht (Bestelnummer / Datum / Totaal / Betaalmethode) */
.checkout-steps .woocommerce-order-overview {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checkout-steps .woocommerce-order-overview li {
  background: #f8fbfe;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 11px;
  color: #5a7a96;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.checkout-steps .woocommerce-order-overview li strong {
  display: block;
  font-size: 13px;
  color: var(--color-navy);
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* Sectie-koppen: Bestelgegevens / Factuuradres */
.checkout-steps .woocommerce-order-details,
.checkout-steps .woocommerce-customer-details {
  margin-top: 24px;
}
.checkout-steps .woocommerce-order-details > h2,
.checkout-steps .woocommerce-customer-details > h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  color: var(--color-navy);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f6;
}

/* Besteltabel */
.checkout-steps .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.checkout-steps .woocommerce-table--order-details th,
.checkout-steps .woocommerce-table--order-details td {
  padding: 9px 4px;
  border-bottom: 1px solid #eef2f6;
  color: var(--color-navy);
  text-align: left;
  vertical-align: top;
}
.checkout-steps .woocommerce-table--order-details thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a7a96;
  font-weight: 600;
}
.checkout-steps .woocommerce-table--order-details tfoot td,
.checkout-steps .woocommerce-table--order-details tfoot th {
  border-bottom: none;
}
.checkout-steps .woocommerce-table--order-details tfoot tr:last-child td,
.checkout-steps .woocommerce-table--order-details tfoot tr:last-child th {
  font-weight: 700;
  font-size: 15px;
  padding-top: 14px;
}

/* Factuuradres */
.checkout-steps .woocommerce-customer-details address {
  font-style: normal;
  font-size: 13px;
  color: var(--color-navy);
  line-height: 1.8;
}

/* Productfoto + naam in besteltabel */
.order-item-name-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.order-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 8px rgba(11,45,77,0.08);
}
.order-item-name-text {
  flex: 1;
  font-size: 14px;
  color: var(--color-navy);
  line-height: 1.3;
}

/* Hoeveelheid (× 1) en itemmeta (Datum, Tijd, etc.) */
.checkout-steps .product-quantity {
  font-size: 12px;
  color: #5a7a96;
  margin-top: 4px;
}
.checkout-steps .woocommerce-table__product-name dl,
.checkout-steps .woocommerce-table__product-name .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #5a7a96;
  line-height: 1.7;
}
.checkout-steps .woocommerce-table__product-name dl dt,
.checkout-steps .woocommerce-table__product-name dl dd,
.checkout-steps .woocommerce-table__product-name .wc-item-meta li {
  display: inline;
  margin: 0;
  padding: 0;
}
.checkout-steps .woocommerce-table__product-name dl dd::after,
.checkout-steps .woocommerce-table__product-name .wc-item-meta li::after {
  content: '';
  display: block;
}

/* Celopmaak tabel */
.checkout-steps .woocommerce-table--order-details td,
.checkout-steps .woocommerce-table--order-details th {
  padding: 12px 6px;
}
.checkout-steps .woocommerce-table--order-details .product-total {
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}

/* Overige tekst in de .woocommerce-order (bijv. "Betaling afgerond door...") */
.checkout-steps .woocommerce-order > p {
  font-size: 12px;
  color: #5a7a96;
  margin-bottom: 16px;
}

/* ── Bevestigingskaart (rechterkolom na betaling) ── */
.checkout-confirmed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 22px !important;
}
.checkout-confirmed-icon {
  width: 60px;
  height: 60px;
  background: #2ab470;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
}
.checkout-confirmed-text {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.6;
  margin: 0;
}
.checkout-confirmed-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.checkout-confirmed-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ── Site footer / copyright ── */

.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 1rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--color-sun, #e77526);
  text-decoration: underline;
}

/* ── Cookiemelding (kaart, linksonder) ── */
.sui-cookie-notice {
  position: fixed;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 999998;
  display: flex;
  justify-content: flex-end;
}

.sui-cookie-notice[hidden] {
  display: none;
}

.sui-cookie-notice-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-navy, #0b2d4d);
  color: rgba(244, 251, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(11, 45, 77, 0.45);
  padding: 1.5rem;
}

.sui-cookie-notice-text {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.sui-cookie-notice-text a {
  color: var(--color-sun, #e77526);
  text-decoration: underline;
}

.sui-cookie-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  cursor: pointer;
  user-select: none;
}

.sui-cookie-toggle-locked {
  cursor: default;
  opacity: 0.75;
}

.sui-cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sui-cookie-toggle-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.sui-cookie-toggle input:checked + .sui-cookie-toggle-box {
  background: var(--color-sun, #e77526);
  border-color: var(--color-sun, #e77526);
}

.sui-cookie-toggle-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-navy, #0b2d4d);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.sui-cookie-toggle input:checked + .sui-cookie-toggle-box::after {
  opacity: 1;
}

.sui-cookie-notice-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.sui-cookie-notice-actions .btn {
  width: 100%;
  margin-right: 0;
  justify-content: center;
  text-align: center;
}

.sui-cookie-notice-reject {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(244, 251, 255, 0.75);
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
  padding: 0.4rem 0 0;
}

.sui-cookie-notice-reject:hover {
  color: #fff;
}

@media (max-width: 480px) {
  .sui-cookie-notice {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .sui-cookie-notice-card {
    max-width: none;
  }
}
/* Bookly "Klaar"-stap (8_complete.php): Yahoo-knop bij "Toevoegen aan agenda" verbergen op
   verzoek. Zuivere CSS i.p.v. main.js, want dit is een statische knop die altijd hetzelfde
   selector-attribuut heeft - geen JS/MutationObserver nodig. */
.bookly-js-add-to-calendar[data-calendar="yahoo"] {
  display: none !important;
}

/* Bookly-agendawidget (Time-stap, beide modules "Indoor Skiles" en "Indoor Skiles Instructeurs"):
   een beschikbare-maar-niet-geselecteerde dag krijgt van Bookly zelf standaard alleen gekleurde
   tekst (class "text-bookly") op een witte achtergrond - de kleurvulling ("bg-bookly") verschijnt
   pas bij :hover. Daardoor viel een beschikbare dag nauwelijks op tussen de vervaagde
   niet-beschikbare dagen ernaast. Deze regel geeft beschikbare dagen een permanente lichte
   kleurvulling + rand, zodat ze in één oogopslag herkenbaar zijn - zonder dat ze op de
   daadwerkelijk geselecteerde dag lijken (die blijft vol gevuld via Bookly's eigen "bg-bookly"). */
.bookly-css-root [role="button"][disabled="false"].bookly-calendar-current-month-mark:not(.bg-bookly):not(:hover) {
  background-color: color-mix(in srgb, var(--bookly-color) 18%, white) !important;
  border: 1.5px solid var(--bookly-color) !important;
  font-weight: 600 !important;
}

/* Sponsorlogo-carrousel (MetaSlider id 1901, homepage + /sponsoring/): MetaSlider's eigen
   "force height"-carrouselmodus (.ms-carousel-force-height ... img { height:100%; width:auto })
   dwingt elke afbeelding op dezelfde hoogte en snijdt (overflow:hidden) alles af wat daardoor
   breder wordt dan het dia-vak - prima voor foto's, maar de sponsorlogo's hebben sterk
   uiteenlopende beeldverhoudingen (van vierkant tot heel breed/laag), dus sommige werden flink
   afgesneden. Override specifiek voor slider 1901: logo's schalen nu naar behoefte (object-fit:
   contain) zodat het hele logo altijd zichtbaar blijft, i.p.v. bijgesneden te worden.
   !important nodig om de later door MetaSlider's eigen script toegevoegde force-height-klasse te
   overstemmen. */
.metaslider-1901 .slides > li.ms-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.metaslider-1901 .slides > li.ms-image img {
  height: auto !important;
  width: auto !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* ── 404-pagina: "Stille piste bij nacht" (statisch, geen animatie) ── */
.error-404-panel {
  background: linear-gradient(180deg, #092035 0%, #0b2d4d 62%, #123a5c 100%);
  color: var(--color-white);
  overflow: hidden;
  text-align: center;
  /* Was: tekst verticaal gecentreerd over het HELE paneel (via de standaard .panel-regels
     hierboven) terwijl de bergen-SVG los daarvan absoluut aan de onderkant hing met een vaste
     vh-hoogte - op normale desktophoogtes (~700-900px) kon de gecentreerde tekst dan zomaar in de
     bergen-zone terechtkomen (bv. een moeilijkheidsstip precies over de tekst), terwijl het op
     ultrawide/hoge schermen prima paste. Nu een gewone flex-kolom: tekst (.error-404-inner, flex:1)
     en bergen (.error-404-mountains, vaste hoogte) staan gewoon onder elkaar in de documentflow, dus
     kunnen ze elkaar per constructie niet meer overlappen, ongeacht schermhoogte. */
  display: flex;
  flex-direction: column;
}
.error-404-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.error-404-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
}
.error-404-glow {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 117, 38, 0.5) 0%, rgba(231, 117, 38, 0) 70%);
  filter: blur(4px);
  pointer-events: none;
}
.error-404-mountains {
  /* Gewoon in-flow flex-item i.p.v. absoluut gepositioneerd (zie toelichting hierboven) - de
     negatieve margins + verbrede breedte compenseren de .panel-padding zodat de bergen nog steeds
     van rand tot rand en tot de onderkant doorlopen, zoals in het oorspronkelijke ontwerp. */
  position: relative;
  width: calc(100% + 2.5rem);
  margin: 0 -1.25rem -4rem;
  height: clamp(220px, 42vh, 420px);
  flex-shrink: 0;
  pointer-events: none;
}
.error-404-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error-404-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd8b0;
  margin-bottom: 1rem;
}
.error-404-panel h1 {
  color: var(--color-white);
  margin-bottom: 0.75rem;
}
.error-404-lead {
  color: #b9d2e8;
  max-width: 44ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
}
.error-404-legend {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  color: #b9d2e8;
  font-size: 0.82rem;
}
.error-404-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.error-404-legend svg {
  flex-shrink: 0;
}