/* ============================================================================
   Nieuwe kaartenset - presalepagina (/nieuwe-kaartenset/, post 2107)
   Opgebouwd 01-09-2026 volgens de briefing "Nieuwe kaartenset pagina".
   Alles is gescoped op de pagina zelf, zodat er niets naar de rest van de
   site lekt.
   ========================================================================= */

body.page-id-2107 {
  --nk-teal:       #3A6476;
  --nk-teal-700:   #2B4D5C;
  --nk-body:       #5C7A88;
  --nk-blue:       #3075B1;
  --nk-coral:      #FC6048;
  --nk-coral-700:  #D64A34;
  --nk-cream:      #FAF6EE;
  --nk-sage:       #91BEBB;
  --nk-mist:       #C4D9D5;
  --nk-line:       #E6EAEE;
  --nk-yellow:     #F2A93B;

  --nk-shadow:     0 12px 32px rgba(58,100,118,0.16);
  --nk-shadow-sm:  0 4px 16px rgba(58,100,118,0.10);
}

/* ---------------------------------------------------------------- 1. HERO */

body.page-id-2107 .nk-hero {
  position: relative;
  overflow: hidden;
}

/* Decoratie: crememaan rechtsboven, half buiten beeld, met drie stippen. */
body.page-id-2107 .nk-hero-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
body.page-id-2107 .nk-hero-deco__circle {
  position: absolute;
  top: -110px;
  right: -150px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--nk-cream);
}
body.page-id-2107 .nk-hero-deco__dots {
  position: absolute;
  top: 62px;
  right: 130px;
  display: flex;
  gap: 12px;
}
body.page-id-2107 .nk-hero-deco__dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}
body.page-id-2107 .nk-hero-deco__dots span:nth-child(1) { background: #7FB5B0; }
body.page-id-2107 .nk-hero-deco__dots span:nth-child(2) { background: var(--nk-yellow); }
body.page-id-2107 .nk-hero-deco__dots span:nth-child(3) { background: var(--nk-coral); }

/* De inhoud van de hero moet boven de decoratie blijven. */
body.page-id-2107 .nk-hero-row { position: relative; z-index: 1; }

body.page-id-2107 .nk-kicker .elementor-heading-title,
body.page-id-2107 .nk-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

body.page-id-2107 .nk-doos img {
  max-width: 380px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(58,100,118,0.18));
}

/* Checkpunten */
body.page-id-2107 .nk-checks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page-id-2107 .nk-checks li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px;
  line-height: 1.5;
  color: var(--nk-body);
}
body.page-id-2107 .nk-checks li:last-child { margin-bottom: 0; }
body.page-id-2107 .nk-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--nk-yellow);
  border-bottom: 2.5px solid var(--nk-yellow);
  transform: rotate(-45deg);
}
body.page-id-2107 .nk-checks strong { color: var(--nk-teal); font-weight: 700; }

/* Knop: altijd een hover-state, anders valt de knop terug op zwart. */
body.page-id-2107 .nk-cta .elementor-button {
  background-color: var(--nk-coral);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 30px;
  box-shadow: 0 8px 20px rgba(252,96,72,0.28);
  transition: background-color 180ms ease, transform 180ms ease;
}
body.page-id-2107 .nk-cta .elementor-button:hover,
body.page-id-2107 .nk-cta .elementor-button:focus-visible {
  background-color: var(--nk-coral-700);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* --------------------------------------------------- 2. ZES CATEGORIEEN */

body.page-id-2107 .nk-catgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.page-id-2107 .nk-cat {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--nk-line);
  box-shadow: var(--nk-shadow-sm);
  padding: 20px 22px;
}

body.page-id-2107 .nk-cat-titel .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--nk-teal);
  margin: 0;
}
body.page-id-2107 .nk-cat-titel .elementor-heading-title::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--nk-dot, var(--nk-sage));
}

body.page-id-2107 .nk-cat--adem   { --nk-dot: #7FB5B0; }
body.page-id-2107 .nk-cat--lijf   { --nk-dot: #FC6048; }
body.page-id-2107 .nk-cat--buiten { --nk-dot: #8FA662; }
body.page-id-2107 .nk-cat--visual { --nk-dot: #9384B5; }
body.page-id-2107 .nk-cat--hart   { --nk-dot: #F2A93B; }
body.page-id-2107 .nk-cat--eerst  { --nk-dot: #3075B1; }

body.page-id-2107 .nk-cat-sub p {
  margin: 4px 0 0 24px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--nk-body);
}

/* ------------------------------------------------ 3. EERSTE INDRUK/COLLAGE */

/* Sectie 3 toont sinds 01-09-2026 een enkel teaserbeeld (media 2171,
   kaarten-teaser-blur). Doosje en kaarten zitten al in dat beeld en de
   achtergrond is wit ingebakken, dus geen schaduw of rotatie eromheen:
   dat zou een zichtbare rechthoek geven. */
body.page-id-2107 .nk-teaser img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}

/* ---------------------------------------------------------- 4. WACHTLIJST */

/* Het footertemplate heeft dezelfde teal (#3A6476) als achtergrond. De
   wachtlijstsectie staat daarom een tint donkerder (#2B4D5C, teal-700 uit
   tokens.css) en sluit af met een lichte haarlijn, zodat zichtbaar blijft
   waar de pagina ophoudt en de footer begint. */
body.page-id-2107 .nk-wachtlijst {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

body.page-id-2107 .nk-wl-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 18px 40px rgba(20,45,58,0.22);
}

/* Naam en e-mailadres naast elkaar, school en knop over de volle breedte.
   De volgorde van de velden in het formulier ligt vast, dus we plaatsen ze
   met nth-child in een raster. */
body.page-id-2107 .nk-wl-card .st-wachtlijstform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: start;
}
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(1) { grid-column: 1; grid-row: 1; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(2) { grid-column: 1; grid-row: 2; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(3) { grid-column: 2; grid-row: 1; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(4) { grid-column: 2; grid-row: 2; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(5) { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(7) { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; }
/* Succes- en foutmelding vullen de hele kaart. */
body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(n+8) { grid-column: 1 / -1; }

body.page-id-2107 .nk-wl-card input[type="text"],
body.page-id-2107 .nk-wl-card input[type="email"] {
  width: 100%;
  border-color: var(--nk-line);
  border-radius: 10px;
}
body.page-id-2107 .nk-wl-card input[type="text"]:focus,
body.page-id-2107 .nk-wl-card input[type="email"]:focus {
  outline: none;
  border-color: var(--nk-blue);
  box-shadow: 0 0 0 3px rgba(48,117,177,0.14);
}

body.page-id-2107 .nk-wl-card button[type="submit"]:hover,
body.page-id-2107 .nk-wl-card button[type="submit"]:focus-visible {
  background-color: var(--nk-coral-700);
  color: #FFFFFF;
}

/* ---------------------------------------------------------- RESPONSIVE */

@media (max-width: 1024px) {
  body.page-id-2107 .nk-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-2107 .nk-hero-deco__circle { width: 320px; height: 320px; top: -100px; right: -120px; }
  body.page-id-2107 .nk-hero-deco__dots { top: 48px; right: 96px; }
  body.page-id-2107 .nk-doos img { max-width: 320px; }
}

@media (max-width: 767px) {
  body.page-id-2107 .nk-catgrid { grid-template-columns: minmax(0, 1fr); }
  body.page-id-2107 .nk-hero-deco__circle { width: 240px; height: 240px; top: -90px; right: -90px; }
  body.page-id-2107 .nk-hero-deco__dots { top: 34px; right: 62px; gap: 9px; }
  body.page-id-2107 .nk-hero-deco__dots span { width: 9px; height: 9px; }
  body.page-id-2107 .nk-doos img { max-width: 260px; margin: 0 auto; }
  body.page-id-2107 .nk-teaser img { max-width: 100%; }
  body.page-id-2107 .nk-wl-card { padding: 22px; }
  body.page-id-2107 .nk-wl-card .st-wachtlijstform {
    grid-template-columns: minmax(0, 1fr);
  }
  body.page-id-2107 .nk-wl-card .st-wachtlijstform > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(3),
  body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(5) { margin-top: 10px; }
  body.page-id-2107 .nk-wl-card .st-wachtlijstform > *:nth-child(7) { margin-top: 14px; }
}