/* ============================================================
   EvenJij: publieke huisstijl (fundament)
   De mens achter ouderschap
   ------------------------------------------------------------
   Warme, menselijke, rustige uitstraling. Taupe/bruin palet
   uit het klantlogo. Laadt op PUBLIEKE + portal (ouder) pagina's,
   bovenop Porto/Bootstrap. Admin/worker houden hun eigen skin.
   ============================================================ */

:root {
  /* ── Merkkleuren (uit het klantlogo, vast) ── */
  --ej-primary:      #967F71;  /* warm taupe, merkkleur, wordmark/illustratie */
  --ej-primary-dark: #7d685b;  /* taupe hover/donkerder */
  --ej-dark:         #644534;  /* diep bruin, primaire knoppen/koppen */
  --ej-dark-hover:   #52382a;  /* bruin hover (iets donkerder) */
  --ej-ink:          #3B3937;  /* tekst, warm bijna-zwart */
  --ej-cream:        #F7F2EC;  /* lichte tint; ook tekstkleur OP donkere vlakken */

  /* ── Vlakken: drie duidelijk verschillende treden ──
     Stonden eerder alle drie rond dezelfde waarde (pagina F7F2EC, vlak
     FBF7F2, rand E3D8CD). Een kaart had daardoor 1,04:1 tegenover de pagina
     en de rand 1,26:1, terwijl 3,0 de norm is voor een zichtbare begrenzing.
     Kaarten waren feitelijk onzichtbaar. Nu: de pagina zakt iets weg, banden
     zakken verder weg, en een kaart is wit. Zo ligt de kaart er echt bovenop. */
  --ej-page:         #F8F4EE;  /* paginaachtergrond */
  --ej-band:         #ECE3D7;  /* afwisselende sectiebanden, zie het blok hieronder */
  --ej-surface:      #FFFFFF;  /* kaarten en panelen */
  --ej-border:       #D3C0AC;  /* rand van een kaart (was te licht om te zien) */

  /* ── De pagina en de band, beide lichter gezet (2026-09-21) ──
     Klant: "de achtergrond net een lichtere tint, zodat het bruin iets meer
     naar voren komt", en later: "terug naar beige maar iets lichter".

     Pagina van F2EBE1 naar F8F4EE, band van E9DFD1 naar ECE3D7:

       bruine kop op de pagina    7,26  ->  7,85
       bruine kop op de band      6,53  ->  6,77
       band tegenover de pagina   1,11  ->  1,16

     Dat laatste getal is de rem. De band is bewust NIET verder opgelicht: op
     1,09 zie je de afwisseling tussen secties niet meer, en dan doet hij geen
     werk. Een witte kaart steekt om dezelfde reden minder af tegen een lichtere
     pagina; dat wordt gedragen door de rand en de schaduw. */

  /* ── Sage: de tweede kleur, als ACCENT (klant, 2026-09-21) ──
     #87917A, een gedempt groen naast het bruin.

     We hebben hem eerst als letterkleur geprobeerd en daarna als achtergrond
     voor de hele band. Allebei niet. De keuze is nu: "terug naar beige, iets
     lichter, en dit groen alleen om sommige dingen, woorden en icoontjes te
     accentueren."

     TWEE VARIANTEN, EN DIE ZIJN NIET UITWISSELBAAR.
     --ej-sage      #87917A  voor ICONEN en grafische dingen. Haalt 3,30 op wit
                             en 3,01 op de pagina, allebei boven de 3,0 die
                             voor grafiek geldt. LET OP: op een band haalt hij
                             maar 2,60, dus zet hier geen icoon mee dat op een
                             gekleurde sectie staat.
     --ej-sage-ink  #5d6454  voor WOORDEN. Haalt 5,61 op de pagina, 4,84 op de
                             band en 6,15 op wit, dus overal boven de 4,5.

     Grijp dus nooit naar --ej-sage voor letters: daar haalt hij 3,01 en dat is
     een derde te weinig. */
  --ej-sage:      #87917A;  /* iconen en grafische dingen */
  --ej-sage-ink:  #5d6454;  /* woorden die je wilt accentueren */
  --ej-sage-soft: rgba(135, 145, 122, 0.14); /* zachte vulling achter een icoon */

  /* Afgeleiden */
  --ej-ink-soft:     #5E5852;  /* gedempte tekst; donkerder gezet zodat hij ook
                                  op een band boven 4,5:1 blijft */
  /* De labels in kleine hoofdletters boven een kop. Bruin, net als de koppen:
     de tweede kleur zit in de ACHTERGROND en niet in de letters, anders
     concurreren die twee met elkaar en wint geen van beide.
     Iets donkerder gezet dan het oude #6F5A4C, want op de nieuwe band haalde
     dat 4,20 en dus net te weinig. #685446 haalt 4,62 op de band, 6,51 op de
     pagina en 7,13 op wit. --ej-primary zou maar 3,4 halen en kan dus niet. */
  --ej-eyebrow:      #685446;
  --ej-primary-soft: rgba(150, 127, 113, 0.12); /* zachte taupe vulling */
  --ej-shadow:       0 8px 30px rgba(60, 45, 34, 0.10);
  --ej-shadow-sm:    0 2px 12px rgba(60, 45, 34, 0.07);

  /* Vorm & ritme */
  --ej-radius:    0;
  --ej-radius-sm: 0;
  --ej-radius-lg: 0;
  --ej-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Bootstrap/Porto bruggen, zodat bestaande .btn-primary etc. mee-kleuren */
  --primary: var(--ej-dark);
  --bs-primary: #644534;
  --bs-primary-rgb: 100, 69, 52;
  --bs-body-color: #3B3937;
  --bs-body-bg: #F7F2EC;
  --bs-link-color: #644534;
  --bs-link-hover-color: #52382a;
  --bs-border-color: #E3D8CD;
}

/* ============================================================
   Basis & typografie
   ============================================================ */
body {
  font-family: var(--ej-font);
  color: var(--ej-ink);
  background-color: var(--ej-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.ej-h1, .ej-h2, .ej-h3 {
  font-family: var(--ej-font);
  color: var(--ej-dark);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { color: var(--ej-ink); }

a {
  color: var(--ej-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--ej-primary); }

.ej-muted { color: var(--ej-ink-soft); }
.ej-lead {
  font-size: 1.15rem;
  color: var(--ej-ink-soft);
  line-height: 1.7;
}

/* De inleidende alinea onder een kop (klant 2026-09-09: "lettertype is iets te
   groot van de eerste alinea", op /tarieven).

   Het thema zet .lead op 1,2rem MET letter-spacing -0.05em. Die combinatie is
   het probleem: groot én samengeknepen leest als een banier in plaats van als
   een zin, zeker in twee of drie regels achter elkaar. Hier dus een maat kleiner
   en de letters weer op hun normale afstand.

   Dit staat bewust op .lead zelf en niet op één alinea: die klasse staat op elf
   publieke pagina's, en één pagina met een andere inleiding dan de rest valt
   meer op dan de grootte zelf. */
.lead,
p.lead {
  font-size: 1.08rem;
  letter-spacing: normal;
  /* p.lead in het thema zet een vaste 1.8rem regelhoogte en wint van een losse
     .lead-regel, dus die selector moet hier mee. */
  line-height: 1.65;
}
.ej-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ej-eyebrow);
  margin-bottom: 0.6rem;
}
.ej-tagline {
  font-style: italic;
  color: var(--ej-primary);
}

/* ============================================================
   Layout: container & secties
   ============================================================ */
.ej-container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.ej-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.ej-section--cream   { background: var(--ej-cream); }
.ej-section--surface { background: var(--ej-surface); }
.ej-section--tint    { background: var(--ej-primary-soft); }

/* ============================================================
   Knoppen
   Primair  = --ej-dark (bruin) met crème tekst
   Secundair = taupe outline
   ============================================================ */
.ej-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ej-font);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 0.8rem 1.5rem;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  text-align: center;
}
.ej-btn:focus-visible {
  outline: 3px solid var(--ej-primary-soft);
  outline-offset: 2px;
}
.ej-btn:active { transform: translateY(1px); }

.ej-btn-primary {
  background: var(--ej-dark);
  color: var(--ej-cream);
  border-color: var(--ej-dark);
}
.ej-btn-primary:hover {
  background: var(--ej-dark-hover);
  border-color: var(--ej-dark-hover);
  color: #fff;
  box-shadow: var(--ej-shadow-sm);
}

.ej-btn-secondary {
  background: transparent;
  color: var(--ej-dark);
  border-color: var(--ej-primary);
}
.ej-btn-secondary:hover {
  background: var(--ej-primary-soft);
  border-color: var(--ej-primary-dark);
  color: var(--ej-dark);
}

.ej-btn-cream {
  background: var(--ej-cream);
  color: var(--ej-dark);
  border-color: var(--ej-cream);
}
.ej-btn-cream:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ej-dark-hover);
}

.ej-btn-ghost {
  background: transparent;
  color: var(--ej-dark);
  border-color: transparent;
  padding-inline: 0.75rem;
}
.ej-btn-ghost:hover { color: var(--ej-primary); }

.ej-btn-sm  { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.ej-btn-lg  { padding: 0.95rem 1.9rem; font-size: 1.06rem; }
.ej-btn-block { display: flex; width: 100%; }

/* Porto/Bootstrap brug: laat bestaande .btn-primary de merkkleur volgen
   op publieke pagina's (deze stylesheet laadt daar alleen). */
.btn-primary,
.btn-primary:focus {
  background-color: var(--ej-dark) !important;
  border-color: var(--ej-dark) !important;
  color: var(--ej-cream) !important;
}
.btn-primary:hover {
  background-color: var(--ej-dark-hover) !important;
  border-color: var(--ej-dark-hover) !important;
  color: #fff !important;
}

/* ============================================================
   Kaarten
   ============================================================ */
.ej-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: 0;
  padding: 1.5rem;
  box-shadow: var(--ej-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ej-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--ej-shadow);
  border-color: var(--ej-primary);
}
.ej-card__media {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ej-primary-soft);
}
.ej-card__media img,
.ej-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ej-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ej-dark);
  margin: 0.75rem 0 0.35rem;
}

/* Zachte badges / chips */
.ej-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ej-dark);
  background: var(--ej-primary-soft);
  border: 1px solid var(--ej-border);
  border-radius: 0;
  padding: 0.28rem 0.75rem;
}

/* Beeld-hulpmiddelen */
.ej-rounded { border-radius: 0; overflow: hidden; }
.ej-media-frame {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--ej-shadow);
}

/* ============================================================
   Publieke header (partials/header-public.ejs)
   Porto "medical" opbouw (#header.header-effect-shrink, header-container,
   header-nav-main), hier alleen in EvenJij-kleuren gezet.
   De header-top balk is verwijderd: de header begint direct met logo + nav.
   ============================================================ */
#header.ej-header .header-body {
  background: var(--ej-surface);
  border-bottom: 1px solid var(--ej-border);
  border-top: 0;
}

/* Logo: het bruine SVG-wordmark op licht.
   Hoogte is bewust 88px: daaronder wordt de tagline "De mens achter ouderschap"
   in het logo onleesbaar (bij 56px is die maar zo'n 6px hoog). */
#header.ej-header .header-logo img {
  height: 88px;
  width: auto;
  transition: height 0.3s ease;
}
html.sticky-header-active #header.ej-header .header-logo img { height: 68px; }
/* Tussen het punt waarop de navigatie uitklapt (992px) en ruime schermen
   concurreren een groot logo en de volledige navigatie om dezelfde regel.
   Daar houden we het logo kleiner, anders breekt de nav naar een tweede regel. */
@media (min-width: 992px) and (max-width: 1399px) {
  #header.ej-header .header-logo img { height: 64px; }
  html.sticky-header-active #header.ej-header .header-logo img { height: 56px; }
}
@media (max-width: 575px) { #header.ej-header .header-logo img { height: 64px; } }

/* Hoofdnavigatie */
#header.ej-header .header-nav-main nav > ul > li > a {
  color: var(--ej-ink);
  font-weight: 600;
  font-size: 0.94rem;
  text-transform: none;
  letter-spacing: 0;
}
#header.ej-header .header-nav-main nav > ul > li > a:hover,
#header.ej-header .header-nav-main nav > ul > li.open > a {
  color: var(--ej-dark);
  background: var(--ej-primary-soft);
}
/* De pagina waar je nu bent: gevulde pil. Porto zet hier zelf witte tekst op
   taupe (3,77:1, onder de AA-grens). Op het diepe bruin is dat 7,7:1 en blijft
   het duidelijk welk menu-item actief is. !important is nodig omdat de
   Porto-regel voor .nav-link.active zwaarder weegt. */
#header.ej-header .header-nav-main nav > ul > li > a.active,
#header.ej-header .header-nav-main nav > ul > li > a.current-page-active {
  color: #fff !important;
  background: var(--ej-dark) !important;
}

/* Rechteracties */
.ej-header-actions .ej-header-login {
  color: var(--ej-ink);
  white-space: nowrap;
}
.ej-header-actions .ej-header-login:hover { color: var(--ej-dark); }
.ej-header-actions .btn-rounded { border-radius: 0; }
.ej-header-actions .btn-light.btn-outline {
  background: transparent;
  border: 2px solid var(--ej-primary);
  color: var(--ej-dark);
}
.ej-header-actions .btn-light.btn-outline:hover {
  background: var(--ej-primary-soft);
  border-color: var(--ej-primary-dark);
  color: var(--ej-dark);
}

/* Hamburger (Porto collapse-knop) */
#header.ej-header .header-btn-collapse-nav {
  background: var(--ej-primary-soft);
  color: var(--ej-dark);
  border: 1px solid var(--ej-border);
}
/* Mobiel uitgeklapt menu op crème i.p.v. Porto-donker */
@media (max-width: 991px) {
  #header.ej-header .header-nav-main nav {
    background: var(--ej-surface);
    border-top: 1px solid var(--ej-border);
    padding: 0.5rem 0;
  }
  #header.ej-header .header-nav-main nav > ul > li > a {
    padding: 0.75rem 1rem;
    border-radius: 0;
  }
}

/* ============================================================
   Publieke footer (partials/footer.ejs): Porto #footer-opbouw, DONKER
   uitgevoerd. Achtergrond #2C2A29 (dieper dan --ej-ink zodat ook de
   onderbalk nog een tint donkerder kan), koppen en links crème #F7F2EC,
   lopende tekst #D9CCC0. Gemeten contrast op #2C2A29:
   crème 12.8:1, #D9CCC0 9.1:1 (beide ruim boven 4.5:1).
   Het logo is hier het LICHTE wordmark (/images/evenjij/logo-light.svg).
   ============================================================ */
#footer.ej-footer {
  --ej-footer-bg:     #2C2A29;
  --ej-footer-bg-alt: #211F1E;
  --ej-footer-text:   #D9CCC0;
  --ej-footer-bright: var(--ej-cream);
  --ej-footer-rule:   rgba(247, 242, 236, 0.14);

  background: var(--ej-footer-bg);
  border-top: 0;
  color: var(--ej-footer-text);
  margin-top: 0;
}
#footer.ej-footer p,
#footer.ej-footer li,
#footer.ej-footer strong,
#footer.ej-footer .ej-footer-about { color: var(--ej-footer-text); }
#footer.ej-footer h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ej-footer-bright);
}
/* theme.css zet `#footer a:not(.btn):not(.no-footer-css)` op var(--default)
   (bijna zwart). Die selector is specifieker dan `#footer.ej-footer a`, dus
   hier met dezelfde vorm overschrijven, anders blijven de links onleesbaar. */
#footer.ej-footer a,
#footer.ej-footer a:not(.btn):not(.no-footer-css) { color: var(--ej-footer-bright); }
#footer.ej-footer a:hover,
#footer.ej-footer a:focus-visible,
#footer.ej-footer a:not(.btn):not(.no-footer-css):hover,
#footer.ej-footer a:not(.btn):not(.no-footer-css):focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

.ej-footer-logo { height: 84px; width: auto; display: block; }
.ej-footer-tagline {
  color: var(--ej-footer-bright) !important;
  font-style: italic;
  font-weight: 500;
}
.ej-footer-about { font-size: 0.95rem; max-width: 38ch; }

.ej-footer-links li { margin-bottom: 0.5rem; }
.ej-footer-links a { font-size: 0.95rem; }

/* ── Nieuwsbrief-aanmelding boven de footerkolommen ────────────────── */
.ej-nieuwsbrief {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ej-nieuwsbrief-tekst { flex: 1 1 320px; min-width: 0; }
#footer.ej-footer .ej-nieuwsbrief-tekst h4 { margin-bottom: 0.4rem; }
#footer.ej-footer .ej-nieuwsbrief-tekst p {
  margin: 0;
  font-size: 0.92rem;
  max-width: 52ch;
}
/* De toestemmingsregel: hoort er te staan, maar mag de uitnodiging niet
   overstemmen. Iets kleiner en rustiger dan de tekst erboven. */
#footer.ej-footer .ej-nieuwsbrief-klein {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  opacity: 0.82;
  max-width: 56ch;
}
#footer.ej-footer .ej-nieuwsbrief-klein a { text-decoration: underline; }
.ej-nieuwsbrief-form {
  flex: 0 1 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ej-nieuwsbrief-form input[type="email"] {
  flex: 1 1 210px;
  min-width: 0;
  padding: 0.62rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-size: 0.95rem;
}
.ej-nieuwsbrief-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.ej-nieuwsbrief-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ej-footer-bright);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
/* De knop moet het van theme.css winnen, vandaar de #footer-voorvoegsel. */
#footer.ej-footer .ej-nieuwsbrief-btn {
  flex: 0 0 auto;
  padding: 0.62rem 1.4rem;
  border: 0;
  border-radius: 5px;
  background: var(--ej-footer-bright);
  color: #2C2A29;
  font-size: 0.95rem;
  font-weight: 700;
}
#footer.ej-footer .ej-nieuwsbrief-btn:hover,
#footer.ej-footer .ej-nieuwsbrief-btn:focus-visible {
  background: #FFFFFF;
  color: #2C2A29;
}
#footer.ej-footer .ej-nieuwsbrief-btn:disabled { opacity: 0.6; }
#footer.ej-footer .ej-nieuwsbrief-uitslag {
  flex: 1 0 100%;
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--ej-footer-bright);
}
/* Honeypot: weg van het scherm zonder display:none, zodat een bot hem wél
   invult. Screenreaders slaan het blok over via aria-hidden. */
.ej-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .ej-nieuwsbrief { padding-top: 1.5rem; }
  .ej-nieuwsbrief-form { flex-basis: 100%; }
  #footer.ej-footer .ej-nieuwsbrief-btn { flex: 1 1 100%; }
}

/* Social icons: lichte rand op donker, gevuld bij hover */
#footer.ej-footer .social-icons li {
  background: transparent;
  border: 1px solid var(--ej-footer-rule);
  border-radius: 50%;
  box-shadow: none;
}
#footer.ej-footer .social-icons li a {
  background: transparent !important;
  color: var(--ej-footer-bright) !important;
  border-radius: 50%;
}
#footer.ej-footer .social-icons li:hover,
#footer.ej-footer .social-icons li:focus-within {
  background: var(--ej-footer-bright);
  border-color: var(--ej-footer-bright);
}
#footer.ej-footer .social-icons li:hover a,
#footer.ej-footer .social-icons li:focus-within a { color: var(--ej-footer-bg) !important; }

/* Onderbalk: nog een tint dieper dan het footerlichaam */
#footer.ej-footer .footer-copyright {
  background: var(--ej-footer-bg-alt);
  border-top: 1px solid var(--ej-footer-rule);
}
#footer.ej-footer .footer-copyright p { color: var(--ej-footer-text); font-size: 0.85rem; }
#footer.ej-footer .footer-copyright a,
#footer.ej-footer .footer-copyright a:not(.btn):not(.no-footer-css) {
  color: var(--ej-footer-bright);
  font-weight: 600;
}
#footer.ej-footer .footer-copyright a:hover { color: #FFFFFF; }

/* "Powered by Vari Soft" onder de copyrightregel: rustiger dan de regel
   erboven, zodat het aanwezig is zonder de aandacht te trekken. */
#footer.ej-footer .footer-copyright .ej-powered {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 2px;
}

/* ============================================================
   Stap-/feature-iconen: geen rond of ovaal vlak achter het icoon.
   Porto's .feature-box .feature-box-icon geeft een gevulde cirkel en
   de landingsviews zetten er zelf ook een op de <i>. Hier hard uit,
   zodat alleen het icoon zelf overblijft.
   ============================================================ */
.ej-lp-feature .feature-box-icon,
.ej-lp-feature .feature-box-icon i,
.ej-lp-feature .feature-box-icon [class*="fa-"] {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
.ej-lp-feature .feature-box-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  margin-right: 0.35rem;
}

/* ============================================================
   Kleine helpers
   ============================================================ */
.ej-grid { display: grid; gap: 1.5rem; }
.ej-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ej-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .ej-grid--3 { grid-template-columns: 1fr; } .ej-grid--2 { grid-template-columns: 1fr; } }
.ej-stack > * + * { margin-top: 1rem; }
.ej-text-center { text-align: center; }
.ej-mx-auto { margin-inline: auto; }
.ej-maxw-prose { max-width: 62ch; }

/* ============================================================
   Formulier-elementen: Bootstrap/Porto blauw wegnemen
   (checkbox-vinkjes en focus-ring in EvenJij-bruin)
   ============================================================ */
.form-check-input { accent-color: var(--ej-dark); }
.form-check-input:checked {
  background-color: var(--ej-dark);
  border-color: var(--ej-dark);
}
.form-check-input:focus {
  border-color: var(--ej-primary);
  box-shadow: 0 0 0 0.2rem var(--ej-primary-soft);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ej-primary);
  box-shadow: 0 0 0 0.2rem var(--ej-primary-soft);
}
.input-group-text {
  background: var(--ej-primary-soft);
  border-color: var(--ej-border);
  color: var(--ej-ink-soft);
}

/* Lichte outline-knop in merkkleur (naast Porto's .btn-light.btn-outline) */
.ej-btn-clear.btn-light.btn-outline,
.btn-light.btn-outline.ej-btn-clear {
  background: transparent;
  border: 1px solid var(--ej-primary);
  color: var(--ej-dark);
}
.ej-btn-clear.btn-light.btn-outline:hover {
  background: var(--ej-primary-soft);
  border-color: var(--ej-primary-dark);
  color: var(--ej-dark);
}

/* ============================================================
   Paginakop (Porto .page-header op bg-color-primary)
   ============================================================ */
.ej-page-header { margin-bottom: 0; }
.ej-page-header h1,
.ej-page-header .sub-title { color: #fff; }
.ej-page-header .sub-title { opacity: 0.85; }

/* ============================================================
   Lege staat / uitnodiging (zoekpagina + teampagina)
   ============================================================ */
.ej-empty {
  background: var(--ej-surface);
  border: 1px dashed var(--ej-border);
  border-radius: 0;
  color: var(--ej-ink-soft);
}
.ej-empty > i { font-size: 2.2rem; color: var(--ej-primary); }
.ej-empty h2, .ej-empty h3 { color: var(--ej-dark); }
.ej-empty-text { max-width: 48ch; }

.ej-alert.alert-danger {
  background: #fbeae6;
  border: 1px solid #e6c4b8;
  color: #8a3a26;
  border-radius: 0;
}

/* ============================================================
   Zoekpagina: filterkaart
   ============================================================ */
.ej-filter-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: 0;
  box-shadow: var(--ej-shadow-sm);
}
@media (min-width: 992px) { .ej-filter-card { position: sticky; top: 1.5rem; } }
.ej-filter-card .ej-filter-header {
  background: var(--ej-primary-soft);
  border-bottom: 1px solid var(--ej-border);
  border-radius: 0;
  padding: 0.9rem 1.1rem;
}
.ej-filter-card .card-title { color: var(--ej-dark); }
.ej-filter-card .form-label { color: var(--ej-ink); font-size: 0.9rem; margin-bottom: 0.35rem; }
.ej-filter-card .ej-hint { color: var(--ej-ink-soft); font-size: 0.76rem; }
.ej-filter-card .ej-req { color: #a8452c; }
.ej-fieldset { border: 0; padding: 0; }
.ej-fieldset legend { float: none; width: auto; font-size: 0.9rem; }
/* Eén kolom: de zijbalk is ~200px breed en de NL-labels ("Goedgekeurd door
   EvenJij", "Baby (0-1 jr)") passen daar niet naast elkaar. Vakje en label staan via
   flex naast elkaar, zodat een label dat afbreekt netjes inspringt in plaats
   van onder zijn checkbox te zakken. */
.ej-checks { display: flex; flex-direction: column; gap: 0.1rem; }
.ej-checks .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  min-height: 0;
  padding-left: 0;
  margin-bottom: 0.2rem;
}
.ej-checks .form-check-input {
  float: none;
  flex: 0 0 auto;
  margin-left: 0;
  margin-top: 0.2rem;
}
.ej-checks .form-check-label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ej-ink);
}

/* ============================================================
   Chips (talen e.d.), gedeeld door zoek- en teamkaarten
   ============================================================ */
.ej-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ej-tag {
  display: inline-block;
  background: var(--ej-primary-soft);
  border: 1px solid var(--ej-border);
  color: var(--ej-ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.12rem 0.5rem;
  border-radius: 0;
}
/* Soort-inzet-tag: zelfde vorm, accentkleur zodat hij zich onderscheidt van
   de taal-tags. */
.ej-tag-type {
  background: var(--ej-primary);
  border-color: var(--ej-primary);
  color: #fff;
}

/* Goedkeurings-/afstandsbadge op de foto */
.ej-badge-approved,
.ej-badge-dist {
  position: absolute;
  top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.32rem 0.6rem;
  border-radius: 0;
  white-space: nowrap;
  z-index: 2;
}
.ej-badge-approved { left: 0.6rem; background: var(--ej-dark); color: var(--ej-cream); }
.ej-badge-dist { right: 0.6rem; background: rgba(251, 247, 242, 0.92); color: var(--ej-dark); }

/* ============================================================
   Zoekpagina: resultaatkaarten
   ============================================================ */
.ej-sitter-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--ej-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ej-sitter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ej-shadow);
  border-color: var(--ej-primary);
}
.ej-sitter-media { position: relative; }
.ej-sitter-photo {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--ej-primary-soft);
}
.ej-sitter-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ej-primary), var(--ej-primary-dark));
}
.ej-sitter-photo-empty span { color: #fff; font-size: 2.4rem; font-weight: 700; }
.ej-sitter-card .card-body { padding: 1rem 1.1rem 1.1rem; }
/* Porto zet kaartkoppen in kapitalen; een voornaam hoort gewoon als naam te
   lezen, en gelijk aan hoe /team hem toont. */
.ej-sitter-card h3 { color: var(--ej-dark); text-transform: none; letter-spacing: 0; }
.ej-sitter-meta { font-size: 0.85rem; color: var(--ej-ink-soft); }
.ej-sitter-meta i { color: var(--ej-primary); }
.ej-sitter-rate { font-weight: 700; color: var(--ej-dark); }
.ej-sitter-bio { font-size: 0.85rem; line-height: 1.5; color: var(--ej-ink-soft); }

/* ============================================================
   Teampagina: Porto .team .thumb-info kaarten in EvenJij-kleuren
   (demo-medical.css zet hier hardcoded grijstinten; hier warm gemaakt)
   ============================================================ */
.ej-team-card {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--ej-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ej-team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ej-shadow);
  border-color: var(--ej-primary);
}
.ej-team-media { position: relative; display: block; }
.ej-team-photo {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: var(--ej-primary-soft);
}
.ej-team-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ej-primary), var(--ej-primary-dark));
}
.ej-team-photo-empty > span { color: #fff; font-size: 2.8rem; font-weight: 700; }

.team .thumb-info .thumb-info-caption.ej-team-caption { background: var(--ej-surface); }
/* Op klasse in plaats van op volgorde: de naam staat nu op twee regels
   (voornaam en achternaam), dus nth-child telde niet meer goed. */
.team .thumb-info .thumb-info-caption .custom-thumb-info-title .custom-thumb-info-type { color: var(--ej-ink-soft); }
.team .thumb-info .thumb-info-caption .custom-thumb-info-title .custom-thumb-info-inner { color: var(--ej-dark); }

/* Naamregels in de Buddy-kaartjes: voornaam, achternaam en plaats elk op een
   eigen vaste regel. Zo blijven alle kaarten even hoog, ook bij een lange
   achternaam; een lege regel houdt zijn hoogte via min-height. */
.ej-team-line {
  min-height: 1.45em;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ej-team-bio { font-size: 0.83rem; line-height: 1.5; color: var(--ej-ink-soft); }
.ej-team-facts { font-size: 0.83rem; color: var(--ej-ink-soft); }
.ej-team-facts i { color: var(--ej-primary); }
.ej-team-rate { font-weight: 700; color: var(--ej-dark); }
.ej-team-cta { color: var(--ej-primary); font-size: 0.85rem; }
.ej-team-card:hover .ej-team-cta { color: var(--ej-dark); }

/* demo-medical.css zet elke <i> in de kaarttitel absoluut rechts-midden op
   1.9em in bijna-zwart (een zwevend zwart pinnetje). Terugzetten in de regel. */
.team .thumb-info .thumb-info-caption .custom-thumb-info-title i {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  font-size: inherit !important;
  color: var(--ej-primary);
}

/* demo-medical.css maakt bij hover ALLE captiontekst bijna-wit met !important.
   Op onze crème caption verdwijnt de tekst dan; hier weer leesbaar gezet. */
.team .thumb-info:hover .thumb-info-caption .custom-thumb-info-title span:nth-child(1),
.team .thumb-info:hover .thumb-info-caption .ej-team-bio,
.team .thumb-info:hover .thumb-info-caption .ej-team-facts,
.team .thumb-info:hover .thumb-info-caption .ej-team-facts span,
.team .thumb-info:hover .thumb-info-caption .ej-tag { color: var(--ej-ink-soft) !important; }
.team .thumb-info:hover .thumb-info-caption .custom-thumb-info-title span:nth-child(2),
.team .thumb-info:hover .thumb-info-caption .ej-team-facts .ej-team-rate,
.team .thumb-info:hover .thumb-info-caption .ej-team-cta { color: var(--ej-dark) !important; }
.team .thumb-info:hover .thumb-info-caption i { color: var(--ej-primary) !important; }

/* ============================================================
   Slot-CTA
   Stond op taupe (bg-color-secondary). Witte tekst haalde daar 3,77:1,
   onder de 4,5 die gewone tekst nodig heeft. Op het diepe bruin is dat
   7,7:1. Taupe blijft wel de kleur voor iconen en randen.
   ============================================================ */
.ej-cta-section.bg-color-secondary,
.ej-cta-section { background-color: var(--ej-dark) !important; }
.ej-cta-section h2, .ej-cta-section p { color: #fff; }
.ej-cta-section .btn-light {
  background: var(--ej-cream);
  border-color: var(--ej-cream);
  color: var(--ej-dark) !important;
}
.ej-cta-section .btn-light:hover { background: #fff; border-color: #fff; color: var(--ej-dark-hover) !important; }

/* ============================================================
   Scherpe hoeken (klantvoorkeur)
   Knoppen en kaarten hebben geen afronding. Dit blok staat
   bewust achteraan zodat het wint van Porto's helpers
   (.rounded, .btn-rounded) en van nieuw toegevoegde markup.
   Uitzondering: .rounded-circle en profielfoto's blijven rond,
   dat zijn geen knoppen of kaarten.
   ============================================================ */
.btn, .btn-rounded, .rounded,
.card, .thumb-info, .feature-box, .feature-box-icon,
.form-control, .form-select, .input-group-text,
.badge, .alert, .dropdown-menu, .page-header,
.ej-btn, .ej-card, .ej-chip,
.ej-sitter-card, .ej-sitter-media, .ej-sitter-photo,
.ej-filter-card, .ej-badge-approved, .ej-badge-dist, .ej-tag {
  border-radius: 0 !important;
}
.rounded-circle,
.ej-avatar,
[class*="avatar"] {
  border-radius: 50% !important;
}

/* Vanaf 1400px staat het logo weer op de volle 88px (dus ook het breedst) en
   is de ingelogde balk breder dan de uitgelogde: "Mijn EvenJij" is een knop en
   er staat "Uitloggen" naast. Met de standaard linkpadding hield dat maar zo'n
   20px over voor de hele navigatie, en dan valt het laatste item naar een
   tweede regel zodra er een menu-item of een langer label bij komt. Iets
   krappere padding geeft die marge terug zonder dat je het ziet. */
@media (min-width: 1200px) {
  #header.ej-header .header-nav-main nav > ul > li > a {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* De navigatiebalk mag breder zijn dan de rest van de pagina.
   Bootstrap kapt .container af op 1140px (en pas vanaf 1400px op 1320px), ook
   als het scherm veel breder is. Voor de inhoud is die leesbreedte precies
   goed, maar in de header vechten het logo, zes menu-items en de knoppen om
   diezelfde 1140px - en dan valt het laatste item ("Contact") naar een tweede
   regel. Dat gebeurt vooral als je ingelogd bent, want dan staat er een knop
   "Mijn EvenJij" naast "Uitloggen" en is de rechterkant een stuk breder.

   Alleen de header krijgt dus meer ruimte; de tekstkolommen op de pagina's
   blijven onaangeroerd. De calc houdt links en rechts marge over, zodat de
   navigatie op een breed scherm niet tegen de schermrand plakt. */
@media (min-width: 1200px) {
  #header.ej-header .header-container {
    max-width: min(1560px, calc(100% - 3rem));
  }
}

/* Tussen 1200 en 1400px is het het krapst: de container is daar nog maar net
   breder geworden en het logo staat op 64px. Iets minder ruimte tussen de
   menu-items scheelt hier zo'n 50px, genoeg voor het zesde item. */
@media (min-width: 1200px) and (max-width: 1399px) {
  #header.ej-header .header-nav-main nav > ul > li > a {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 0.9rem;
  }
  #header.ej-header .ej-header-login { margin-right: 1rem !important; }
}

/* Smalle desktopbreedtes: logo, navigatie en knoppen vechten om een regel.
   Compacter maken is hier beter dan de navigatie laten omvallen. */
@media (min-width: 992px) and (max-width: 1199px) {
  #header.ej-header .header-logo img { height: 52px; }
  html.sticky-header-active #header.ej-header .header-logo img { height: 48px; }
  #header.ej-header .header-nav-main nav > ul > li > a { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.86rem; }
  #header.ej-header .ej-header-actions .btn { padding-left: 0.75rem !important; padding-right: 0.75rem !important; font-size: 0.8rem !important; }
  #header.ej-header .ej-header-login { margin-right: 0.75rem !important; font-size: 0.86rem; }
}

/* ── Beoordelingen ───────────────────────────────────────────────────
   Cijferbadge in de zoekresultaten en op het profiel. Alleen zichtbaar
   vanaf drie verschillende gezinnen; daaronder toont de pagina bewust
   geen cijfer (zie services/reviews.js). */
.ej-badge-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: var(--ej-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.ej-badge-rating i { font-size: 0.72rem; }

.ej-reviews { list-style: none; margin: 0; padding: 0; }
.ej-review {
  background: var(--ej-surface);
  border: 1px solid var(--ej-border);
  border-left: 4px solid var(--ej-primary);
  padding: 1.1rem 1.2rem;
  margin-bottom: 0.9rem;
}
.ej-review-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.ej-review-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem;
  background: var(--ej-dark); color: #fff;
  font-weight: 800; font-size: 0.95rem;
}
.ej-review-when { font-size: 0.85rem; color: var(--ej-ink-soft); }
.ej-review-text { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.ej-review-response {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ej-border);
  font-size: 0.92rem;
  color: var(--ej-ink-soft);
}

/* Buddy die eerst wil kennismaken voordat een gezin haar boekt. */
.ej-badge-meet {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: var(--ej-band); color: var(--ej-dark);
  border: 1px solid var(--ej-border);
  font-size: 0.78rem; font-weight: 700; line-height: 1.4;
}
.ej-badge-meet i { font-size: 0.72rem; }

/* ── Beoordeling in sterren ────────────────────────────────────────────
   Vijf vaste punten, elk met een eigen gemiddelde. Een totaalcijfer zegt hoe
   goed iemand is; deze opsomming zegt waarin. */
.ej-sterrenrij { margin-left: 8px; font-size: .8em; color: #E2A93B; }
.ej-ster-leeg { color: #dcd4cb; }

.ej-punten { list-style: none; margin: 0 0 26px; padding: 0; max-width: 460px; }
.ej-punt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 0; border-bottom: 1px solid #E3D8CD;
}
.ej-punt:last-child { border-bottom: 0; }
.ej-punt-label { font-size: 15px; }
.ej-punt-sterren { flex: none; color: #E2A93B; letter-spacing: 1px; white-space: nowrap; }

/* Alleen voor schermlezers: het cijfer achter een rij sterren. */
.ej-vw {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}