/* ==========================================================================
   Psychologenpraktijk Van Egdom — stijl.css

   Eén stylesheet. Geen externe bestanden, geen webfonts, geen trackers:
   de site doet geen enkel verzoek naar een andere server. Dat is een
   bewuste keuze, want daardoor is er geen cookiebanner nodig en komt er
   geen extra verwerker bij.

   Wil je iets aanpassen? Begin bij :root hieronder. Daar staan alle
   kleuren, letters en maten op één plek.
   ========================================================================== */

:root {
  /* --- Kleuren ------------------------------------------------------------
     Diepgroen is de hoofdkleur: de kop van de pagina en de opening staan er
     helemaal in. Daaronder is het rustig, op een heel licht groenwit papier.

     groen-diep    kop van de pagina, opening, nadruk
     groen         links, lijnen, accenten
     groen-licht   tekst op de diepgroene vlakken
     groen-vlak    achtergrond van uitgelichte kaders
     paper         achtergrond van de pagina
     ink           gewone tekst
     ink-zacht     bijtekst en labels                                     */
  --groen-diep:  #22423a;
  --groen:       #2c6350;
  --groen-licht: #cbdbd1;
  --groen-vlak:  #e2eae4;
  --paper:       #edf0ec;
  --paper-licht: #f7f9f6;
  --ink:         #1c2622;
  --ink-zacht:   #4e5a54;
  --lijn:        #cdd5ce;

  /* Voor wat nog ingevuld moet worden. Warm, zodat het opvalt tussen het
     groen. Verdwijnt zodra alle teksten definitief zijn. */
  --open-vlak:  #f6e6c0;
  --open-tekst: #5a4410;

  /* --- Letters -----------------------------------------------------------
     Alleen letters die al op de computer van de bezoeker staan.          */
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
           "URW Palladio L", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, "Segoe UI Variable Text", "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Maten ------------------------------------------------------------ */
  --tekst:   1.0625rem;
  --breedte: 64rem;
  --kolom:   33rem;
  --ruimte:  clamp(3.25rem, 6.5vw, 5.75rem);
}

/* --- Basis ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--tekst);
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--groen);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--ink); }

/* Nadruk. Vet én iets donkerder groen, zodat een belangrijke zin in een lange
   lap tekst opvalt zonder te schreeuwen. */
strong, b {
  font-weight: 600;
  color: var(--groen-diep);
}

:focus-visible {
  outline: 2px solid var(--groen);
  outline-offset: 3px;
}

.overslaan { position: absolute; left: -9999px; }
.overslaan:focus {
  left: 1rem; top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--groen-diep);
  color: #fff;
  text-decoration: none;
}

/* --- Hulpklassen ---------------------------------------------------------- */

.omhulsel {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.blok { padding-block: var(--ruimte); }
.blok + .blok { border-top: 1px solid var(--lijn); }

.smal { max-width: var(--kolom); }

.label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}

/* Eén kernzin per onderdeel, met een groene streep ervoor. Spaarzaam
   gebruiken: als alles opvalt, valt niets op. */
.sleutel {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--groen-diep);
  border-left: 3px solid var(--groen);
  padding-left: 1.1rem;
  margin: 1.6em 0;
}

/* Nog in te vullen. Opzettelijk opvallend: dit mag niet ongemerkt online
   blijven staan. Verwijder de <mark>-tags zodra de tekst klopt. */
.invullen {
  background: var(--open-vlak);
  color: var(--open-tekst);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.85em;
  font-weight: 600;
}

/* --- Koppen --------------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 0.7em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.05rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.01em; color: var(--groen-diep); }
h3 { font-size: 1.1rem; margin-bottom: 0.4em; }

.kopje { margin-bottom: 1.6rem; }
.kopje .label { display: block; margin-bottom: 0.9rem; }

/* --- Kop van de pagina ---------------------------------------------------- */

.paginakop {
  background: var(--groen-diep);
  color: var(--groen-licht);
  padding-block: 1.35rem;
}

.paginakop .omhulsel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.woordmerk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  text-decoration: none;
}
.woordmerk:hover { color: #fff; }
.woordmerk svg { display: block; flex: none; }

.woordmerk-tekst {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.35;
}
.woordmerk-tekst span {
  display: block;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: var(--groen-licht);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.menu a { color: var(--groen-licht); text-decoration: none; }
.menu a:hover { color: #fff; text-decoration: underline; }

/* --- Opening -------------------------------------------------------------- */

/* De opening loopt door in het groen van de paginakop: één blok kleur waar de
   site mee begint. Daaronder wordt het rustig. */
.opening {
  background: var(--groen-diep);
  color: var(--groen-licht);
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}

.opening .label { display: block; margin-bottom: 1.5rem; color: var(--groen-licht); opacity: 0.85; }
.opening h1 { max-width: 30rem; color: #fff; }

.opening .inleiding {
  max-width: 31rem;
  font-size: 1.18rem;
  color: var(--groen-licht);
}
.opening .inleiding strong { color: #fff; }

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.6rem;
  align-items: center;
  margin-top: 2.2rem;
}

.knop {
  display: inline-block;
  padding: 0.72rem 1.5rem;
  background: var(--paper-licht);
  color: var(--groen-diep);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  transition: background 140ms ease, color 140ms ease;
}
.knop:hover { background: #fff; color: var(--groen-diep); }

.knop-tekst {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--groen-licht);
}
.knop-tekst:hover { color: #fff; }

/* --- De balans: wat ik bied / wat ik niet bied ---------------------------- */

.balans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.75rem, 5vw, 4rem);
}

.balans-kolom + .balans-kolom {
  padding-left: clamp(1.75rem, 5vw, 4rem);
  border-left: 1px solid var(--groen-licht);
  margin-left: calc(-1 * clamp(1.75rem, 5vw, 4rem));
}

.balans-kolom .label { display: block; margin-bottom: 1.1rem; color: var(--groen); }

.balans-kolom ul { margin: 0; padding: 0; list-style: none; }

.balans-kolom li {
  padding: 0.62rem 0;
  border-top: 1px solid var(--lijn);
}
.balans-kolom li:first-child { border-top: 0; padding-top: 0; }

.balans-kolom.niet li { color: var(--ink-zacht); }

.balans-slot {
  max-width: var(--kolom);
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--lijn);
  color: var(--ink-zacht);
}

/* --- Lijst met feiten ----------------------------------------------------- */

.feiten { margin: 0; max-width: 46rem; }

.feiten > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.3rem 1.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--lijn);
}
.feiten > div:first-child { border-top: 0; }

.feiten dt {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--groen);
  padding-top: 0.28em;
}

.feiten dd { margin: 0; }

/* --- Uitgelichte kaders ---------------------------------------------------
   Dit is de behandeling van het crisisblok, nu ook bruikbaar in de lange
   documenten om één belangrijke passage eruit te lichten. */

.paneel {
  max-width: 40rem;
  margin: 2.2rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--groen-vlak);
  border-left: 3px solid var(--groen);
  border-radius: 0 2px 2px 0;
}

.paneel .label { display: block; margin-bottom: 0.7rem; color: var(--groen); }
.paneel p { font-size: 0.98rem; }
.paneel ul { margin: 0.8rem 0 0; padding-left: 1.1rem; font-size: 0.98rem; }
.paneel li { margin-bottom: 0.35rem; }
.paneel > :last-child { margin-bottom: 0; }

/* Zwaardere variant voor wat een bezoeker echt niet mag missen. */
.paneel-let {
  background: var(--groen-diep);
  color: var(--groen-licht);
  border-left-color: var(--groen-licht);
}
.paneel-let .label { color: var(--groen-licht); opacity: 0.9; }
.paneel-let strong { color: #fff; }
.paneel-let a { color: #fff; }

/* --- Aanmeldformulier -----------------------------------------------------
   Het formulier post naar contact.php op de eigen hosting. Geen externe
   formulierdienst, dus ook geen extra verwerker en geen cookiebanner. */

.formulier {
  max-width: 32rem;
  margin-top: 1.9rem;
}

.formulier > div { margin-bottom: 1.25rem; }

.formulier label {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--groen);
  margin-bottom: 0.4rem;
}

.formulier input[type="text"],
.formulier input[type="email"],
.formulier textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-licht);
  border: 1px solid var(--lijn);
  border-radius: 2px;
  padding: 0.68rem 0.8rem;
  transition: border-color 140ms ease;
}

.formulier textarea { min-height: 8.5rem; resize: vertical; }

.formulier input:focus-visible,
.formulier textarea:focus-visible {
  border-color: var(--groen);
  outline: 2px solid var(--groen);
  outline-offset: 1px;
}

.formulier .hulp {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--ink-zacht);
  margin: 0.4rem 0 0;
}

/* Verborgen veld tegen spam. Niet met display:none, want sommige bots slaan
   dat over; zo staat het buiten het beeld maar wel in het formulier. */
.spamveld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Groene knop voor op de lichte achtergrond. De .knop uit de opening is licht,
   want die staat op het diepgroene vlak. */
.knop-vol {
  display: inline-block;
  padding: 0.76rem 1.6rem;
  background: var(--groen-diep);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease;
}
.knop-vol:hover { background: var(--groen); }

/* --- Voettekst ------------------------------------------------------------ */

.voettekst {
  background: var(--groen-diep);
  color: var(--groen-licht);
  padding-block: 3rem;
  font-size: 0.92rem;
}

.voettekst a { color: #fff; }
.voettekst a:hover { color: var(--groen-licht); }

.voettekst-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.25rem;
}

.voettekst h2 {
  font-size: 0.7rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.9rem;
}

.voettekst ul { margin: 0; padding: 0; list-style: none; }
.voettekst li { margin-bottom: 0.4rem; }

.voettekst-slot {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  opacity: 0.85;
}

/* --- Documentpagina's ----------------------------------------------------- */

.document { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.document-tekst { max-width: 36rem; }

/* Elke paragraafkop krijgt een groen nummerkopje en een lijn erboven, zodat je
   in een lange tekst kunt scannen in plaats van lezen. */
.document-tekst h2 {
  font-size: 1.22rem;
  margin-top: 2.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--lijn);
}
.document-tekst h2:first-of-type { margin-top: 1.8rem; }

.document-tekst ul { padding-left: 1.15rem; }
.document-tekst li { margin-bottom: 0.4rem; }

/* Korte samenvatting bovenaan een lang document. */
.kern {
  background: var(--paper-licht);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--groen);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.4rem;
}
.kern .label { display: block; margin-bottom: 0.8rem; color: var(--groen); }
.kern ul { margin: 0; padding-left: 1.1rem; }
.kern li { margin-bottom: 0.45rem; }
.kern li:last-child { margin-bottom: 0; }

.versie {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--lijn);
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-zacht);
}

/* --- Smalle schermen ------------------------------------------------------ */

@media (max-width: 46rem) {
  .balans { grid-template-columns: 1fr; gap: 2.5rem; }
  .balans-kolom + .balans-kolom {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--groen-licht);
  }
  .feiten > div { grid-template-columns: 1fr; }
  .feiten dt { padding-top: 0; }
  .paneel { padding: 1.25rem 1.35rem; }
}

/* --- Beweging ------------------------------------------------------------- */

/* Eén korte beweging bij het laden, en verder niets. Iemand die deze site
   bezoekt zit niet in zijn sterkste periode; tekst die eerst nog moet
   inschuiven is dan hinderlijk. */
@media (prefers-reduced-motion: no-preference) {
  .opening .label,
  .opening h1,
  .opening .inleiding,
  .opening .knoppen {
    animation: opkomen 460ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .opening h1         { animation-delay: 70ms; }
  .opening .inleiding { animation-delay: 140ms; }
  .opening .knoppen   { animation-delay: 210ms; }
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* --- Terug naar boven -----------------------------------------------------
   Alleen op smalle schermen. De documentpagina's zijn lang; op een telefoon
   is terugscrollen naar het menu anders een halve minuut werk.
   Zonder JavaScript blijft de knop gewoon staan — dat is de veilige stand. */

.omhoog {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: 2.9rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  background: var(--groen-diep);
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(28, 38, 34, 0.28);
  transition: opacity 180ms ease;
}
.omhoog svg { display: block; }

@media (max-width: 46rem) {
  .omhoog { display: flex; }
  .omhoog.verborgen { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .omhoog { transition: none; }
}

/* --- Afdrukken ----------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .paginakop, .voettekst, .knoppen { display: none; }
  a { color: #000; }
  .paneel, .kern { border: 1px solid #999; background: #fff; }
  .paneel-let { color: #000; }
  strong { color: #000; }
}