/* ============================================================
   Comptela homepage, laag 3 van 4: gedeelde primitieven.

   DIT BESTAND IS BEVROREN. Secties gebruiken deze klassen, ze wijzigen
   ze niet. Heb je een variant nodig, scope die dan binnen je eigen
   sectieblok in 04-sections.css, bijvoorbeeld:  .s-gks .card { ... }
   Zo blijven acht parallel gebouwde secties conflictvrij.
   ============================================================ */

/* ============ Kaart ============
   Eén recept met modifiers, in plaats van de vier bijna identieke
   kaarten die de vorige versie had. */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-1);
}

.card--interactive {
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}

.card--accent {
  background: var(--surface-berry-soft);
  border-color: var(--berry-tint-12);
}

.card--quiet {
  background: transparent;
  box-shadow: none;
}

.card--flush {
  padding: 0;
  /* clip in plaats van hidden: hidden knipte de focusring rond een
     <summary> in de FAQ volledig weg, waardoor toetsenbordgebruikers
     niet meer zagen waar ze stonden. Met clip valt de ring buiten het
     kader nog steeds te zien. */
  overflow: clip;
  overflow-clip-margin: 4px;
}

.card--on-dark {
  background: var(--surface-deep-2);
  border-color: var(--line-on-dark);
  color: var(--ink-on-dark-muted);
  box-shadow: none;
}

.card--on-dark:hover {
  border-color: var(--gold-tint-22);
}

.card > h3,
.card > h4 {
  margin-bottom: var(--space-3xs);
}

.card p {
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* .card p is specifieker dan .fine, en zette de kleine lettertjes in een
   kaart dus terug op de gewone maat. Deze regel wint van allebei. */
.card p.fine {
  font-size: var(--text-sm);
}

.card--on-dark p {
  color: var(--ink-on-dark-muted);
}

/* ============ Knop ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn:active {
  transform: scale(0.985);
}

.btn--primary {
  background: var(--grad-berry);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-berry);
}

.btn--primary:hover {
  color: var(--ink-on-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-berry-hi);
}

.btn--primary:active {
  transform: scale(0.985);
}

.btn--ghost {
  background: transparent;
  color: var(--bordeaux);
  border: 1px solid var(--line-strong);
}

.btn--ghost:hover {
  color: var(--bordeaux);
  border-color: var(--berry);
  background: var(--berry-tint-08);
}

/* Voor gebruik op een donker of gekleurd vlak. */
.btn--light {
  background: var(--surface-panel);
  color: var(--bordeaux);
  box-shadow: var(--shadow-2);
}

.btn--light:hover {
  color: var(--bordeaux);
  transform: translateY(-1px);
}

.btn--quiet {
  background: transparent;
  color: var(--ink-on-dark);
  border: 1px solid var(--line-on-dark);
}

.btn--quiet:hover {
  color: var(--ink-on-dark);
  border-color: var(--gold);
  background: var(--gold-tint-15);
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: var(--text-sm);
}

.btn--lg {
  padding: 0.95rem 1.9rem;
  font-size: var(--text-lg);
}

/* ============ Badge ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.42rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-panel);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-soft);
}

.badge--berry {
  background: var(--surface-berry-soft);
  border-color: var(--berry-tint-12);
  color: var(--bordeaux);
}

.badge--gold {
  background: var(--surface-gold-soft);
  border-color: var(--gold-tint-22);
  color: var(--gold-ink);
}

.badge--on-dark {
  background: var(--gold-tint-15);
  border-color: var(--line-on-dark);
  color: var(--gold);
}

/* ============ Icoon ============
   24x24 viewBox, streek van 1.75, altijd currentColor. De sprite met
   alle symbolen staat inline bovenaan index.html. Gebruik:
     <svg class="icon" aria-hidden="true" focusable="false">
       <use href="#i-check"/>
     </svg> */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* De Belgische driekleur is als enige gevuld, niet gestreken: als
   emoji toont die op Windows namelijk gewoon de letters BE. */
.icon--flag {
  width: 1.15rem;
  height: 0.77rem;
  fill: revert-layer;
  stroke: none;
  border-radius: 2px;
}

.icon-chip {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-berry-soft);
  color: var(--berry);
}

.icon-chip--gold {
  background: var(--surface-gold-soft);
  color: var(--gold-ink);
}

.icon-chip--on-dark {
  background: var(--gold-tint-15);
  color: var(--gold);
}

.icon-chip .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* ============ Tekstprimitieven ============ */
.eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--berry);
}

.eyebrow--gold {
  color: var(--gold-ink);
}

.section--dark .eyebrow,
.eyebrow--on-dark {
  color: var(--gold);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.section--dark .lead {
  color: var(--ink-on-dark-muted);
}

.fine {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

.section--dark .fine {
  color: var(--ink-on-dark-faint);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--space-xs);
}

/* ============ Vinklijst ============ */
.check-list {
  display: grid;
  gap: var(--space-xs);
}

.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  color: var(--ink-soft);
}

.check-list .icon {
  margin-top: 0.28em;
  color: var(--berry);
}

.section--dark .check-list li {
  color: var(--ink-on-dark-muted);
}

.section--dark .check-list .icon {
  color: var(--gold);
}

/* ============ Callout ============
   Voor de eerlijkheidsnoten. Die moeten opvallen, niet wegkruipen. */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-md);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--berry);
  border-radius: var(--radius-md);
  /* Bewust NIET --surface-panel: de helft van de secties staat zelf op
     dat vlak, en dan viel de callout onzichtbaar weg. Het canvas is één
     tint dieper en werkt op beide ondergronden. */
  background: var(--surface-canvas);
  color: var(--ink-soft);
  font-size: var(--text-base);
}

.callout--gold {
  border-color: var(--gold-tint-22);
  border-left-color: var(--gold);
  background: var(--surface-gold-soft);
}

.section--dark .callout {
  background: var(--surface-deep-2);
  border-color: var(--line-on-dark);
  border-left-color: var(--gold);
  color: var(--ink-on-dark-muted);
}

.callout strong {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

.section--dark .callout strong {
  color: var(--gold);
}

.callout .icon {
  margin-top: 0.15em;
  color: var(--gold-ink);
}

.section--dark .callout .icon {
  color: var(--gold);
}

/* ============ Rasters ============ */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 940px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tweekoloms sectie: tekst naast beeld. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-3xl);
  }

  /* Bij omgekeerde volgorde verhuist de copy naar kolom 2, dus moet de
     bredere baan mee verhuizen. Anders krijgt het beeld de ruimte die
     voor de tekst bedoeld was. */
  .split--reverse {
    grid-template-columns: 1fr 1.05fr;
  }

  .split--reverse .split-copy {
    order: 2;
  }
}

.split-visual {
  min-width: 0;
}

/* ============ Beeld ============ */
.visual-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Het enige element op de pagina dat shadow-3 mag dragen, samen met
   de demoband. Meer dan twee keer en het effect is weg. */
.mockup-frame {
  padding: var(--space-xs);
  border-radius: var(--radius-xl);
  background: var(--grad-berry);
  box-shadow: var(--shadow-3);
}

.mockup-frame .mockup {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  /* ink-faint haalt op geen enkel licht vlak AA (ongeveer 3,7 op 1), ook
     niet op panel. Bijschriften zeggen vaak juist dat cijfers een
     illustratie zijn, dus die moeten leesbaar zijn. */
  color: var(--ink-muted);
  text-align: center;
}

.section--dark figcaption {
  color: var(--ink-on-dark-faint);
}

/* ============ FAQ ============ */
.faq-list {
  display: grid;
  gap: var(--space-xs);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary:hover {
  color: var(--berry);
}

/* De chevron vervangt het oude plus/min-paar. Dat draaide op
   content-swap, en content is niet animeerbaar, dus die overgang deed
   niets. Bovendien was het minteken een en-dash. */
.faq-item summary .icon {
  color: var(--berry);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.faq-item[open] .faq-answer {
  animation: faq-in var(--dur-slow) var(--ease-out);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(246, 241, 231, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* site.js zet deze klasse zodra je voorbij de hero scrollt. */
.site-header.is-stuck {
  background: rgba(246, 241, 231, 0.95);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-2);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: var(--space-xs) var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}

.brand:hover {
  color: var(--ink);
}

.brand .logo {
  width: 2.1rem;
  height: 2.1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav a:not(.btn) {
  position: relative;
  padding-block: 0.35rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--berry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-nav a:not(.btn):hover {
  color: var(--berry);
}

.site-nav a:not(.btn):hover::after,
.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="true"] {
  color: var(--berry);
}

/* Mobiel menu via checkbox, zodat het ook zonder JavaScript werkt.
   Boven 940px verdwijnt de burger en is de schakelaar zinloos, dus dan
   ook uit de tabvolgorde: anders tabt een toetsenbordgebruiker op
   desktop naar een bedieningselement dat er niet staat. */
.nav-toggle {
  display: none;
}

@media (max-width: 940px) {
  .nav-toggle {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}

.nav-burger {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
  cursor: pointer;
}

.burger-lines,
.burger-lines::before,
.burger-lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.burger-lines::before,
.burger-lines::after {
  content: "";
  position: relative;
}

.burger-lines::before {
  top: -6px;
}
.burger-lines::after {
  top: 4px;
}

@media (max-width: 940px) {
  .nav-burger {
    display: grid;
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    /* clip-path in plaats van display:none, zodat de overgang loopt.
       visibility hoort er wel bij: zonder die eigenschap blijven de zeven
       links in de tabvolgorde staan terwijl ze onzichtbaar zijn, en dan
       verdwijnt de focus zeven tabs lang uit beeld. visibility is
       animeerbaar via de vertraging hieronder, dus de overgang blijft. */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: clip-path var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  .site-nav a:not(.btn) {
    padding: var(--space-2xs) 0;
    font-size: var(--text-md);
  }

  .site-nav a:not(.btn)::after {
    display: none;
  }

  .site-nav .btn {
    margin-top: var(--space-2xs);
  }

  .nav-toggle:checked ~ .site-nav {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Bij het openen moet visibility meteen om, anders is het menu de
       hele overgang lang nog onbereikbaar. */
    transition: clip-path var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out), visibility 0s;
  }

  .nav-toggle:checked ~ .nav-burger .burger-lines {
    background: transparent;
  }

  .nav-toggle:checked ~ .nav-burger .burger-lines::before {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-burger .burger-lines::after {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav-toggle:focus-visible ~ .nav-burger {
    box-shadow: var(--ring);
  }
}

/* ============ Footer ============ */
.site-footer {
  background: var(--grad-deep);
  color: var(--ink-on-dark-muted);
  padding-block: var(--section-y) var(--space-lg);
  padding-inline: var(--gutter);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--w-wide);
  margin-inline: auto;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--space-lg);
  }
}

.footer-col h3 {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.footer-col ul {
  display: grid;
  gap: var(--space-2xs);
}

.footer-col a {
  color: var(--ink-on-dark-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--ink-on-dark);
  text-decoration: underline;
}

.footer-col li {
  font-size: var(--text-sm);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.footer-brand .logo {
  width: 2.1rem;
  height: 2.1rem;
}

.footer-about p {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-on-dark-faint);
  max-width: 32ch;
}

/* De kolom met de eerlijkheidspunten. Die hoort er als volwaardige
   kolom te staan, niet als kleine lettertjes onderaan. */
.footer-honest li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  color: var(--ink-on-dark-faint);
}

.footer-honest .icon {
  margin-top: 0.28em;
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  max-width: var(--w-wide);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--text-xs);
  color: var(--ink-on-dark-faint);
}