/* ============================================================
   Op Eigen Stek — Site Stylesheet
   Mobile-first, semantic HTML, accessible
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:            #faf8f5;
  --color-text:          #2d3a2c;
  --color-text-light:    #5a6b59;
  --color-heading:       #1e2d1e;
  --color-accent:        #5b8c5a;
  --color-accent-hover:  #4a7349;
  --color-accent-light:  #e8f0e7;
  --color-accent-soft:   #f0f6ef;
  --color-secondary:     #e8dcc8;
  --color-secondary-dark:#c4b89a;
  --color-white:         #ffffff;
  --color-border:        #d9d2c5;
  --color-muted:         #8a8a7e;

  /* Typography */
  --font-sans:   system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-md:    1.0625rem; /* 17px */
  --font-size-lg:    1.125rem;  /* 18px */
  --font-size-xl:    1.25rem;   /* 20px */
  --font-size-2xl:   1.5rem;    /* 24px */
  --font-size-3xl:   2rem;      /* 32px */
  --font-size-4xl:   2.5rem;    /* 40px */
  --font-size-hero:  2.75rem;   /* 44px */

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose:   1.75;

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Spacing */
  --space-2xs:  0.25rem;  /* 4px  */
  --space-xs:   0.5rem;   /* 8px  */
  --space-sm:   0.75rem;  /* 12px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  5rem;     /* 80px */
  --space-5xl:  6rem;     /* 96px */

  /* Container */
  --container-max:    72rem;   /* 1152px */
  --container-narrow: 48rem;   /* 768px  */
  --container-text:   38rem;   /* ~608px comfortable reading */
  --container-padding: var(--space-lg);

  /* Border radius */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.25rem;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 2px 20px rgba(45, 58, 44, 0.07);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

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

/* ── Reset & Base ─────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* Prevent FocusOnNavigate from showing a visible outline on headings */
h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible {
  outline: none;
}

p {
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-accent-hover);
}

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

strong {
  font-weight: var(--font-weight-semibold);
}

/* ── Images ───────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Container ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

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

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

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
  min-height: 2.75rem;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Primary */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

/* CTA-secties: primaire knop in de goedgekeurde donkergroene AA-variant,
   tekstkleur expliciet wit in alle toestanden (correctie contact-CTA) */
.cta-section .btn--primary {
  background-color: var(--color-accent-hover);
  color: var(--color-white);
}

.cta-section .btn--primary:hover,
.cta-section .btn--primary:active {
  background-color: #3f6240;
  color: var(--color-white);
}

.cta-section .btn--primary:focus-visible {
  color: var(--color-white);
}

.cta-section .btn--primary:visited {
  color: var(--color-white);
}

/* Secondary */
.btn--secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Link-style button */
.btn--link {
  background: none;
  border: none;
  color: var(--color-accent);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: var(--font-weight-medium);
  min-height: auto;
}

.btn--link:hover {
  color: var(--color-accent-hover);
}

/* Full-width on mobile */
@media (max-width: 40rem) {
  .btn--mobile-full {
    width: 100%;
    justify-content: center;
  }
}

/* ── Skip Link ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  z-index: 200;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ── Header ───────────────────────────────────────────── */
.site-header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  gap: var(--space-lg);
  min-height: 3.75rem;
}

.site-header__logo {
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
  z-index: 101;
}

.site-header__logo img {
  height: 5rem; /* 80 px: compacte sticky header van ~104-105 px */
  width: auto;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Desktop Navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  align-items: center;
}

.site-nav__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
}

/* Actieve pagina: herkenbaar via kleur, lijn én gewicht */
.site-nav__link[aria-current="page"] {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Dropdown */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  padding-inline: 0;
}

.site-nav__dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform var(--transition-fast);
}

.site-nav__dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.site-nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) 0;
  min-width: 14rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast),
              visibility var(--transition-fast);
}

.site-nav__dropdown.is-open .site-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.site-nav__dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.site-nav__dropdown-menu a:hover,
.site-nav__dropdown-menu a:focus-visible {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

/* Actieve pagina in dropdown */
.site-nav__dropdown-menu a[aria-current="page"] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-weight: var(--font-weight-semibold);
}

/* Header CTA */
.site-header__cta {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-lg);
  min-height: 2.75rem;
  flex-shrink: 0;
}

/* Contrast AA (4.5:1) voor de header-CTA, scoped tot de header */
.site-header__cta.btn--primary {
  background-color: var(--color-accent-hover);
}

.site-header__cta.btn--primary:hover {
  background-color: #3f6240;
}

/* Mobile menu toggle */
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-text);
  font-size: var(--font-size-xl);
  line-height: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

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

.site-nav__toggle-icon {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background-color var(--transition-fast);
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-base);
}

.site-nav__toggle-icon::before { top: -6px; }
.site-nav__toggle-icon::after  { top: 6px; }

/* Hamburger open state */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background: transparent;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 56rem) {
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
  }

  .site-header__cta {
    order: 1;
    margin-left: auto;
  }

  .site-nav {
    order: 2;
  }

  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: var(--space-md) var(--container-padding);
    gap: var(--space-xs);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }

  .site-nav__list--open {
    display: flex;
  }

  .site-nav__link {
    font-size: var(--font-size-base);
    padding-block: var(--space-sm);
    border-bottom: none;
    width: 100%;
    min-height: 2.75rem;
  }

  .site-nav__link[aria-current="page"] {
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--color-accent);
    padding-left: var(--space-sm);
  }

  .site-nav__dropdown-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .site-nav__dropdown-menu {
    display: none;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 var(--space-md);
    min-width: auto;
  }

  .site-nav__dropdown.is-open .site-nav__dropdown-menu {
    display: block;
  }
}

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-text);
  color: var(--color-bg);
  padding-block: var(--space-3xl) var(--space-xl);
  margin-top: var(--space-3xl);
}

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

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 40rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 56rem) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 0.9fr 1fr;
    gap: var(--space-3xl);
  }
}

.site-footer__brand p {
  color: var(--color-secondary-dark);
  font-size: var(--font-size-sm);
  max-width: 32ch;
  margin-top: var(--space-sm);
  line-height: var(--line-height-relaxed);
}

.site-footer__heading {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__links a {
  font-size: var(--font-size-sm);
}

.site-footer__contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 56rem) {
  .site-footer__contacts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}

.site-footer__contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.site-footer__contact-line {
  color: var(--color-secondary-dark);
  margin-bottom: 0;
}

.site-footer__contact-org {
  font-size: var(--font-size-xs);
  color: var(--color-secondary-dark);
}

.site-footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--font-size-xs);
  color: var(--color-secondary-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  justify-content: space-between;
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
}

.site-footer__bottom-links a {
  font-size: var(--font-size-xs);
  color: var(--color-secondary-dark);
}

.site-footer__bottom-links a:hover {
  color: var(--color-white);
}

/* ── Page Hero ────────────────────────────────────────── */
.page-hero {
  background-color: var(--color-white);
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .page-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

@media (min-width: 64rem) {
  .page-hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-4xl);
  }
}

.page-hero__content {
  max-width: 36rem;
}

.page-hero__title {
  font-size: var(--font-size-hero);
  color: var(--color-heading);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-tight);
}

.page-hero__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-relaxed);
}

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

.page-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.page-hero__image {
  width: 100%;
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 8px 24px rgba(45, 58, 44, 0.10));
}

@media (max-width: 47.999rem) {
  .page-hero {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .page-hero__title {
    font-size: var(--font-size-3xl);
  }

  .page-hero__subtitle {
    font-size: var(--font-size-base);
  }

  .page-hero__actions {
    flex-direction: column;
  }

  .page-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-hero__image {
    max-width: 85%;
  }
}

/* ── Section Header ───────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.section-header__title {
  margin-bottom: var(--space-md);
}

.section-header__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.section-header__intro-note {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

/* ── Sections ─────────────────────────────────────────── */
.section {
  padding-block: var(--space-xl);
}

.section--alt {
  background-color: var(--color-white);
}

.section--accent {
  background-color: var(--color-accent-light);
}

.section--soft {
  background-color: var(--color-accent-soft);
}

@media (max-width: 40rem) {
  .section {
    padding-block: var(--space-md);
  }
}

/* Wooncheck: sectieafstand ongewijzigd laten; de check valt buiten deze correctie */
.wooncheck .section {
  padding-block: var(--space-4xl);
}

@media (max-width: 40rem) {
  .wooncheck .section {
    padding-block: var(--space-2xl);
  }
}

/* ── Recognition (Herkenning) ─────────────────────────── */
.recognition-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 32rem) {
  .recognition-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.recognition-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.recognition-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
}

.recognition-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.recognition-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* ── InfoGraphic ──────────────────────────────────────── */
.infographic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

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

@media (min-width: 56rem) {
  .infographic-grid {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

.infographic-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.infographic-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
}

.infographic-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.infographic-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2xs);
}

.infographic-card__figure {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Equal-height infographic cards — aligned titles */
.infographic-grid--equal {
  align-items: stretch;
}

.infographic-card--equal {
  height: 100%;
}

.infographic-card__header {
  min-height: 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.infographic-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.infographic-card__details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: auto;
}

.infographic-card__detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding-left: var(--space-lg);
  position: relative;
  line-height: var(--line-height-relaxed);
}

.infographic-card__detail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* InfoGraphic Conclusion */
.infographic-conclusion {
  margin-top: var(--space-xl);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.infographic-conclusion__text {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  max-width: var(--container-text);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.infographic-conclusion__bridge {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  max-width: var(--container-text);
  margin-inline: auto;
}

/* InfoGraphic Sources */
.infographic-sources {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: var(--line-height-relaxed);
  text-align: center;
  max-width: var(--container-text);
  margin-inline: auto;
}

/* ── Possibilities (Mogelijkheden) ────────────────────── */
.possibilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 32rem) {
  .possibilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .possibilities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.possibility-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.possibility-card:hover {
  box-shadow: var(--shadow-md);
}

.possibility-card:focus-within {
  box-shadow: var(--shadow-md);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.possibility-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.possibility-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--space-md);
  display: block;
}

.possibility-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.possibility-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.possibility-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
  flex: 1;
}

.possibility-card__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Straatillustratie */
.possibilities-illustration {
  margin-top: var(--space-2xl);
  text-align: center;
}

.possibilities-illustration img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-inline: auto;
}

/* ── Design Example ───────────────────────────────────── */
.design-example {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 48rem) {
  .design-example {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.design-example__content h3 {
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

.design-example__content h3:first-child {
  margin-top: 0;
}

.design-example__content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.design-example__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.design-example__benefit {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding-left: var(--space-xl);
  position: relative;
  line-height: var(--line-height-relaxed);
}

.design-example__benefit::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.design-example__disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
  padding: var(--space-md);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.design-example__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.design-example__image {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 47.999rem) {
  .design-example__visual {
    order: -1;
  }
}

/* ── Contact Cards ────────────────────────────────────── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

@media (max-width: 48rem) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-card__title {
  font-size: var(--font-size-lg);
  margin-top: 0;
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.contact-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

.contact-card__text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.contact-card__text a {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

/* ── Audience Routes (kept for possible reuse elsewhere) ── */
.audience-routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 40rem) {
  .audience-routes {
    grid-template-columns: 1fr 1fr;
  }
}

.audience-route {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow var(--transition-base);
}

.audience-route:hover {
  box-shadow: var(--shadow-md);
}

.audience-route__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-2xl);
}

.audience-route__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

.audience-route__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

/* ── Steps (Hoe het werkt) ────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  position: relative;
}

@media (min-width: 40rem) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Connecting line between steps (desktop only) */
@media (min-width: 40rem) {
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: calc(16.666% + 1.5rem);
    right: calc(16.666% + 1.5rem);
    height: 2px;
    background-color: var(--color-border);
    z-index: 0;
  }
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}

.step__title {
  margin-bottom: var(--space-sm);
}

.step__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  max-width: 28ch;
  margin-inline: auto;
}

.steps-footer {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ── About Teaser ─────────────────────────────────────── */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .about-teaser {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-3xl);
  }
}

.about-teaser__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-teaser__portraits {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.about-teaser__portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 14rem;
  margin: 0;
}

.about-teaser__portrait-frame {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-sm);
}

.about-teaser__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-teaser__portrait-name {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-align: center;
}

.about-teaser__portrait-role {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-align: center;
  line-height: var(--line-height-relaxed);
}

.about-teaser__content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
}

/* ── Article Cards ────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 40rem) {
  .articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  box-shadow: var(--shadow-md);
}

.article-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: var(--color-accent-soft);
}

.article-card__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card__category {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.article-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

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

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

.article-card__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
  flex: 1;
}

.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.articles-footer {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* ── Partner Section ──────────────────────────────────── */
.partner-section {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.partner-section__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  max-width: var(--container-text);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.partner-section__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-lg);
  list-style: none;
}

.partner-section__topic {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-accent-soft);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

/* ── CTA Section ──────────────────────────────────────── */
.cta-section {
  background-color: var(--color-accent-light);
  text-align: center;
  padding-block: var(--space-2xl);
  border-radius: var(--radius-xl);
}

.cta-section__title {
  margin-bottom: var(--space-md);
}

.cta-section__text {
  color: var(--color-text-light);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

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

@media (max-width: 40rem) {
  .cta-section {
    padding-block: var(--space-xl);
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-section__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Audience Cards (legacy 4-up) ─────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-lg);
}

.audience-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) 10px var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}

.audience-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.audience-card__icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
  display: block;
}

.audience-card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.audience-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.audience-card__action {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.audience-card__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ── Trust Teaser (legacy) ────────────────────────────── */
.trust-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .trust-teaser {
    grid-template-columns: 1fr 2fr;
  }
}

.trust-teaser__content h2 {
  margin-bottom: var(--space-md);
}

.trust-teaser__content p {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.trust-teaser__placeholder {
  background: var(--color-secondary);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.trust-teaser__image {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}

/* ── Skip Link (in-page) ──────────────────────────────── */
/* Verwijderd — was een exact duplicaat van de eerste .skip-link definitie */

/* ── Trust Bar ────────────────────────────────────────── */
.trust-bar {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-lg);
}

.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  justify-content: center;
  align-items: center;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.trust-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ── Solution Bridge ──────────────────────────────────── */
.solution-bridge {
  text-align: center;
  max-width: var(--container-text);
  margin-inline: auto;
}

.solution-bridge__title {
  margin-bottom: var(--space-md);
}

.solution-bridge__text {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
}

.solution-bridge__link {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* ── Audience Grid (3-up, equal height) ───────────────── */
.audience-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 40rem) {
  .audience-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.audience-block {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: box-shadow var(--transition-base);
}

.audience-block:hover {
  box-shadow: var(--shadow-md);
}

.audience-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.audience-block__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audience-block__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  flex: 1;
  min-height: 5rem;
}

.audience-block__action {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

/* ── Home Praatplaat ──────────────────────────────────── */
.home-praatplaat-wrapper {
  max-width: 860px;
  margin: 2rem auto 0;
}

.home-praatplaat-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.home-praatplaat-wrapper + .inline-link {
  margin-top: var(--space-md);
}

@media (max-width: 40rem) {
  .home-praatplaat-wrapper {
    max-width: 100%;
    margin-top: 1.5rem;
  }

  .home-praatplaat-image {
    width: 100%;
    height: auto;
  }
}

/* ── In-page link style ───────────────────────────────── */
.inline-link {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--color-accent-hover);
}

/* ── Community Section ────────────────────────────────── */
.community-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 48rem) {
  .community-preview {
    grid-template-columns: 1fr 1fr;
  }
}

.community-preview__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.community-preview__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.community-preview__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.community-preview__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.community-preview__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.community-preview__card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.community-preview__card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

.community-preview__card-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.community-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

@media (max-width: 40rem) {
  .community-preview__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── FAQ Accordion ────────────────────────────────────── */
.faq-list {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  overflow: hidden;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-md);
  line-height: var(--line-height-normal);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

.faq-item__trigger:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.faq-item__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.faq-item__trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

.faq-item__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-text-light);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.faq-item__panel {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.faq-item__panel[hidden] {
  display: none;
}

/* Simple JS-free accordion via details/summary fallback */
.faq-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  overflow: hidden;
}

.faq-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  gap: var(--space-md);
  line-height: var(--line-height-normal);
}

.faq-details summary::-webkit-details-marker {
  display: none;
}

.faq-details summary::after {
  content: '+';
  font-size: var(--font-size-xl);
  color: var(--color-text-light);
  font-weight: var(--font-weight-normal);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.faq-details[open] summary::after {
  content: '−';
  color: var(--color-accent);
}

.faq-details summary:hover {
  background-color: var(--color-accent-soft);
}

.faq-details summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.faq-details .faq-details__answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

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

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

.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ── Focus styles ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Blazor Error UI (keep minimal) ───────────────────── */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

/* ── Home: Waarom starters vastlopen ──────────────────── */
.why-subheading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.why-intro {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
}

.why-stats {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.why-stats li {
  position: relative;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.why-stats li::before {
  content: "•";
  position: absolute;
  left: var(--space-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.why-conclusion {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  line-height: var(--line-height-relaxed);
}

/* ── Home: Hoe het werkt ──────────────────────────────── */
.how-intro {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.how-text {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.how-experts {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  line-height: var(--line-height-relaxed);
}

/* ── Home: Placeholder block ──────────────────────────── */
.placeholder-block {
  background-color: var(--color-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.placeholder-block__text {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ── Page Hero: note below CTA buttons ───────────────── */
.page-hero__note {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: var(--space-sm);
}

/* ── Expert block (quotes) ───────────────────────────── */
.expert-block {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 40rem) {
  .expert-block {
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
  }
}

.expert-block__content {
  min-width: 0;
}

.expert-block__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2xs);
}

.expert-block__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.expert-block__quote {
  border-left: 3px solid var(--color-accent);
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
  font-style: italic;
  color: var(--color-text-light);
}

.expert-block__quote p {
  margin: 0;
}

.expert-block__photo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0;
}

@media (max-width: 39.999rem) {
  .expert-block__photo {
    max-width: 100%;
    margin-bottom: var(--space-md);
  }
}

/* ── CTA section: alternative link ───────────────────── */
.cta-section__alt {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--space-md);
}

/* ============================================================
   Eigen Stek check — volledige stijlen (1C)
   Opmaak, mobiel, toegankelijkheid
   ============================================================ */

/* ── Check container ─────────────────────────────────── */
.wooncheck {
  padding-block: var(--space-2xl);
  min-height: 60vh;
}

/* ── Start screen ────────────────────────────────────── */
.wooncheck-start-section {
  padding-block-start: var(--space-2xl);
  padding-block-end: var(--space-xl);
}

.wooncheck-start {
  text-align: center;
}

.wooncheck-start h2 {
  margin-bottom: var(--space-lg);
}

.wooncheck-start__intro {
  max-width: 50ch;
  margin-inline: auto;
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xl);
}

.wooncheck-start__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  justify-content: center;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.wooncheck-start__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wooncheck-start__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.wooncheck-start__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-relaxed);
}

/* ── Question card ───────────────────────────────────── */
.wooncheck-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

@media (max-width: 40rem) {
  .wooncheck-card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
  }
}

/* ── Fieldset & Legend ───────────────────────────────── */
.wooncheck fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.wooncheck legend {
  display: block;
  padding: 0;
  margin-bottom: var(--space-lg);
  width: 100%;
}

.wooncheck legend h2 {
  font-size: var(--font-size-2xl);
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  outline: none;
}

.wooncheck legend h2:focus,
.wooncheck legend h2:focus-visible {
  outline: none;
}

@media (max-width: 40rem) {
  .wooncheck legend h2 {
    font-size: var(--font-size-xl);
  }
}

/* ── Option list ─────────────────────────────────────── */
.wooncheck-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ── Option card (label wraps input + visuals) ───────── */
.wooncheck-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
  background-color: var(--color-white);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  text-align: left;
  width: 100%;
  min-height: 3.25rem;
}

.wooncheck-option:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

/* Selected state — both color AND symbol */
.wooncheck-option:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.wooncheck-option:has(input:checked)::after {
  content: "✓";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* Focus ring on the label when input inside is focused */
.wooncheck-option:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* ── Native inputs — visually hidden but functional ──── */
.wooncheck-option input[type="radio"],
.wooncheck-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Custom indicator circle (radio) / square (checkbox) */
.wooncheck-option__indicator {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.wooncheck-option input[type="radio"] ~ .wooncheck-option__indicator {
  border-radius: 50%;
}

.wooncheck-option input[type="checkbox"] ~ .wooncheck-option__indicator {
  border-radius: var(--radius-sm);
}

/* Checked indicator */
.wooncheck-option:has(input:checked) .wooncheck-option__indicator {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1.5 6 4.5 9 10.5 3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
}

/* ── Option label text ───────────────────────────────── */
.wooncheck-option__label {
  flex: 1;
  color: var(--color-text);
}

/* ── Multi-select hint ───────────────────────────────── */
.wooncheck-multi-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
  font-style: italic;
}

/* ── Progress bar ────────────────────────────────────── */
.wooncheck-progress {
  margin-bottom: var(--space-xl);
}

.wooncheck-progress__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.wooncheck-progress__bar {
  width: 100%;
  height: 0.375rem;
  background-color: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.wooncheck-progress__fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 999px;
  transition: width var(--transition-base);
}

/* ── Navigation bar ──────────────────────────────────── */
.wooncheck-nav {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-md);
  position: sticky;
  bottom: 0;
  z-index: 50;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.wooncheck-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.wooncheck-nav__buttons {
  display: flex;
  gap: var(--space-sm);
  margin-left: auto;
}

/* ── Error message ───────────────────────────────────── */
.wooncheck-error {
  color: #b32121;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-md);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  margin-top: var(--space-sm);
}

.wooncheck-error:empty,
.wooncheck-error[hidden] {
  display: none;
}

/* ── Result screen ───────────────────────────────────── */
.wooncheck-result {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

.wooncheck-result__title {
  font-size: var(--font-size-2xl);
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  outline: none;
}

.wooncheck-result__title:focus,
.wooncheck-result__title:focus-visible {
  outline: none;
}

.wooncheck-result__betekenis {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-relaxed);
}

.wooncheck-result__herkenning {
  margin-bottom: var(--space-lg);
}

.wooncheck-result__herkenning ul {
  padding-left: var(--space-lg);
  list-style: disc;
}

.wooncheck-result__herkenning li {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-relaxed);
}

.wooncheck-result__actie {
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.wooncheck-result__actie h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.wooncheck-result__actie p {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
}

.wooncheck-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.wooncheck-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wooncheck-option,
  .wooncheck-option__indicator,
  .wooncheck-progress__fill {
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive: ≤ 640px ─────────────────────────────── */
@media (max-width: 40rem) {
  .wooncheck {
    padding-block: var(--space-xl);
  }

  .wooncheck-start {
    padding-block: var(--space-xl);
  }

  .wooncheck-start h2 {
    font-size: var(--font-size-xl);
  }

  .wooncheck-start__meta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .wooncheck-option {
    padding: var(--space-md);
    min-height: 3rem;
  }

  .wooncheck-nav .container {
    flex-direction: column;
    align-items: stretch;
  }

  .wooncheck-nav__buttons {
    margin-left: 0;
  }

  .wooncheck-nav__buttons .btn {
    flex: 1;
    justify-content: center;
  }

  .wooncheck-result {
    padding: var(--space-xl) var(--space-lg);
  }

  .wooncheck-result__actions {
    flex-direction: column;
  }

  .wooncheck-result__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .wooncheck-result__title {
    font-size: var(--font-size-xl);
  }
}

/* ── Responsive: 320px minimum ───────────────────────── */
@media (max-width: 20rem) {
  .wooncheck-option {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    gap: var(--space-sm);
  }

  .wooncheck-option__indicator {
    width: 1.125rem;
    height: 1.125rem;
  }

  .wooncheck-option:has(input:checked)::after {
    width: 1.25rem;
    height: 1.25rem;
    font-size: var(--font-size-xs);
  }

  .wooncheck legend h2 {
    font-size: var(--font-size-lg);
  }

  .wooncheck-card {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ── Focus styles for the check ──────────────────────── */
.wooncheck :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Prevent Blazor's heading outline removal from hiding check focus */
.wooncheck h2:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px;
}

/* Ensure [hidden] works even when .btn overrides display */
.wooncheck [hidden],
.wooncheck [hidden].btn {
  display: none !important;
}

/* ── Confirm dialog ──────────────────────────────────── */
.wooncheck-confirm {
  background-color: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.wooncheck-confirm__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-xs);
}

.wooncheck-confirm__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.wooncheck-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

@media (max-width: 40rem) {
  .wooncheck-confirm__actions {
    flex-direction: column;
  }
  .wooncheck-confirm__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Homepage stap 3 ─────────────────────────────────── */

/* Hero: voorkom dat lange knopteksten de gridkolommen opblazen */
.page-hero__content,
.page-hero__visual {
  min-width: 0;
}

@media (max-width: 47.999rem) {
  .page-hero__actions .btn {
    white-space: normal;
  }
}

/* Cijferblokken: waarom zoveel jongeren vastlopen */
.stat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.stat-card {
  flex: 1 1 12rem;
  max-width: 14rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.stat-card__value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  line-height: var(--line-height-tight);
}

.stat-card__context {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

/* Zo ontstaat het verschil: vergelijkend informatieblok */
.verschil-intro {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.verschil-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-sm);
}

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

.verschil-table thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-border);
}

.verschil-table tbody th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.verschil-table .verschil-table__num {
  text-align: right;
}

/* Mobiel: drie compacte kaarten in plaats van de tabel */
.verschil-cards {
  display: none;
}

@media (max-width: 47.999rem) {
  .verschil-table {
    display: none;
  }

  .verschil-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
}

.verschil-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.verschil-card__level {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.verschil-card__values {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.verschil-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.verschil-card__row dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.verschil-card__row dd {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.verschil-toelichting {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.verschil-note {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

/* Voor wie: precies drie kaarten naast elkaar op breed scherm */
.audience-grid--three {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .audience-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.audience-grid--three .audience-card {
  min-width: 0;
}

.audience-grid--three .btn {
  white-space: normal;
}

/* Voor wie: vier gelijkwaardige kaders, evenwichtig 2x2 raster */
.audience-grid--four {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .audience-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.audience-grid--four .audience-card {
  min-width: 0;
}

.audience-grid--four .btn {
  white-space: normal;
}

/* Mogelijkheden: afsluitende onderzoeksnoot */
.possibilities-note {
  max-width: var(--container-text);
  margin: var(--space-2xl) auto 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* Community: intro en groepskoppen */
.community-preview__intro {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
}

.community-preview__group-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-md);
}

/* Header: voorkom horizontaal scrollen op 320 en 390 px */
@media (max-width: 40rem) {
  .site-header__logo img {
    height: 3.5rem;
  }

  .site-header__cta {
    white-space: normal;
    min-width: 0;
    padding-inline: var(--space-md);
    font-size: var(--font-size-xs);
    text-align: center;
  }
}

@media (max-width: 24rem) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
  }

  .site-header__cta {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════
   Pagina /voor-jongeren (stap 5B)
   Pagina-specifieke stijlen: contrast AA en 2×2-kaartgrid.
   Scoped via .voor-jongeren-page, beïnvloedt geen andere pagina's.
   ═══════════════════════════════════════════════════════ */

/* Primaire knoppen: zelfde donkere groen als de header-CTA (AA) */
.voor-jongeren-page .btn--primary {
  background-color: var(--color-accent-hover);
}

.voor-jongeren-page .btn--primary:hover {
  background-color: #3f6240;
}

/* Secundaire knoppen: knoptekst op AA-contrast */
.voor-jongeren-page .btn--secondary {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.voor-jongeren-page .btn--secondary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
}

/* Notitie onder de hero-CTA: voldoende contrast */
.voor-jongeren-page .page-hero__note {
  color: var(--color-text-light);
}

/* Woonrichtingen: evenwichtig 2×2 op breed scherm, 1 kolom op mobiel */
.voor-jongeren-page .richtingen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .voor-jongeren-page .richtingen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}