/* ==========================================================================
   Novakse Reizen — lichte basis met ÉÉN donkergroen vlak
   Laadt NA styles.css.

   Opzet: je scrolt over een lichte pagina. "Waarom Novakse" is dan nog wit en
   kleurt vanzelf langzaam door naar donkergroen zodra je erbij komt — geen
   schuivende laag, maar de kleur die over het hele vlak tegelijk opkomt.
   ========================================================================== */

:root {
  --green: #050d08;        /* hoofdgroen — zwartgroen, dicht tegen zwart aan */
  --green-deep: #020603;   /* diepste groen */
  --paper-soft: #f1f3f1;   /* zeer licht groengrijs */
  --ink: #050d08;          /* tekstkleur krijgt dezelfde groenzwarte ondertoon */
  --ink-soft: #52615c;
  --border: #dfe3df;
}

/* --------------------------------------------------------------------------
   Header — licht met donkergroene tekst zodra hij dekt
   -------------------------------------------------------------------------- */
/* De balk zelf is altijd doorzichtig en wisselt van wit naar donkergroene
   tekst zodra hij over een lichte sectie komt (logica in styles.css/main.js;
   --ink is hierboven al herdefinieerd naar het donkergroen van dit thema). */
.header-cta { background: var(--warm); color: var(--green); }

/* Het uitschuifmenu heeft geen eigen achtergrond meer: het kleurt gewoon mee
   met de balk (zie .site-header--on-light hierboven, in styles.css). */

/* --------------------------------------------------------------------------
   Alle overige secties: licht
   -------------------------------------------------------------------------- */
.baanlijn--on-dark,
.baanlijn--on-light { background: var(--paper); }
.baanlijn svg path { stroke: var(--warm-deep); }

.trips { background: var(--paper); }
.story { background: var(--paper); }
.reviews { background: var(--paper-soft); }
.faq { background: var(--paper); }
.services { background: var(--paper); }

/* Reisaanvraag: licht, met lichte invoervelden */
.request { background: var(--paper-soft); color: var(--ink); }
.request .eyebrow--warm { color: var(--warm-deep); }
.request__text,
.request__points li { color: var(--ink-soft); }
.request__points li::before { color: var(--warm-deep); }
/* Dit thema is overal licht, dus alle invoervelden zijn licht — niet per
   sectie apart. Zo blijft er nergens witte tekst op een witte achtergrond
   staan wanneer er een formulier bij komt. */
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--paper);
  border-color: var(--border);
  color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa19c; }
.form-field select option { background: var(--paper); color: var(--ink); }
.form-note { color: var(--ink-soft); }
.request .btn--warm { background: var(--green); color: #fff; }
.request .btn--warm:hover { background: var(--green-deep); }

/* Footer: licht */
.site-footer { background: var(--paper-soft); color: var(--ink-soft); }
.footer__heading { color: var(--ink); }
.footer__links a { color: var(--ink); }
/* De basis-CSS maakt deze twee wit voor een donkere voettekst; in dit thema is
   de voettekst licht, dus moeten ze donker worden. */
.footer__tagline { color: var(--ink-soft); }
.footer__bottom { border-top-color: var(--border); color: var(--ink-soft); }

/* ==========================================================================
   Waarom Novakse — begint wit, kleurt langzaam vanzelf naar groen

   Het groen zit in een aparte laag die over het hele vlak tegelijk opkomt
   (opacity, geen schuivende beweging). De tekstkleuren wisselen pas in de
   laatste fase mee, zodat tekst nooit wegvalt tegen een half doorgekleurde
   achtergrond.
   ========================================================================== */
.why {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  padding-block: 5rem 1rem;
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.js .why.is-snapped::before { opacity: 1; }

/* Zonder JavaScript staat het groen er meteen; dan klopt de tekstkleur ook. */
html:not(.js) .why::before { opacity: 1; }
html:not(.js) .why { color: #fff; }

/* Witte begintoestand */
.why .eyebrow--warm { color: var(--warm-deep); }
.why .why__link { color: var(--warm-deep); }
.why__text,
.why__reason p { color: var(--ink-soft); }
.why__reasons { border-top-color: var(--border); }
.why__reason { border-bottom-color: var(--border); }

/* Groene eindtoestand */
.why.is-snapped { color: #fff; }
.why.is-snapped .eyebrow--warm { color: var(--warm); }
.why.is-snapped .why__link { color: var(--warm); }
.why.is-snapped .why__text,
.why.is-snapped .why__reason p { color: rgba(255, 255, 255, 0.72); }
.why.is-snapped .why__reasons { border-top-color: rgba(255, 255, 255, 0.16); }
.why.is-snapped .why__reason { border-bottom-color: rgba(255, 255, 255, 0.16); }

/* De tekst wacht kort tot het groen op gang is en wisselt dan in één keer om,
   zodat er nooit lichte tekst op een bijna witte achtergrond staat.

   Alleen elementen met een eigen kleur krijgen deze overgang. De koppen erven
   hun kleur van de sectie; zouden zij ook een eigen overgang hebben, dan gaan
   ze die van de sectie achterna en lopen ze zichtbaar achter. */
.why,
.why .eyebrow--warm,
.why .why__link,
.why__text,
.why__reason p,
.why__reasons,
.why__reason {
  transition: color 0.14s ease 0.2s, border-color 0.14s ease 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .why::before { opacity: 1; transition: none; }
  .why { color: #fff; }
  .why .eyebrow--warm { color: var(--warm); }
  .why .why__link { color: var(--warm); }
  .why__text,
  .why__reason p { color: rgba(255, 255, 255, 0.72); }
  .why__reasons { border-top-color: rgba(255, 255, 255, 0.16); }
  .why__reason { border-bottom-color: rgba(255, 255, 255, 0.16); }
}

/* De balk is donkergroen, dus daar blijven de witte letters staan.
   Alleen in de lichte footer worden het donkere letters. */
.footer__logo .logo-word-img--light { display: none; }
.footer__logo .logo-word-img--dark { display: block; }