/* =========================================================================
   Extra pagina's: contact.html, privacyverklaring.html, disclaimer.html.
   Bouwt voort op style.css (tokens), doorklik.css (contact) en kennis.css (.ka-*, juridische tekst).
   Alleen eigen klassen met voorvoegsel ep-, plus het contactformulier binnen .ep-contact.
   ========================================================================= */
/* label: 13 px kapitalen, 0,14 em */
.ep-lbl { display: block; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); font-weight: 400; }
/* kruimelpad op de juridische pagina's (zelfde maat als .dk-kruimel) */
.ep-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.ep-kruimel a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.ep-kruimel a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ep-kruimel [aria-current] { color: var(--inkt); }

/* ---------- contact ---------- */
/* het zwarte contactblok volgt direct: beige onder de foto, zodat de foto in het vlak staat (zoals op de doorklikpagina's) */
html:not([data-optie]) .ep-contact .dk-kop .dk-foto { margin-bottom: calc(var(--k) / 2); }
/* keuze 30 okt (optie 1): geen losse beige strook; de foto hangt in het zwarte contactvlak */
html:not([data-optie]) .ep-contact .dk-kop .wrap::before { background: var(--inkt); box-shadow: 0 0 0 100vmax var(--inkt); }
/* hier volgt de beige sectie (adres), niet de zwarte footer: gewone sectiewitruimte onder */
.ep-contact .dk-contact { padding-bottom: clamp(72px, 9vw, 128px); }
/* aanmelden: geen foto in de kop, dus geen beige naad; wit loopt met de gewone kopwitruimte direct over in het zwarte vak */
html:not([data-optie]) .ep-aanmelden .dk-kop { padding-bottom: clamp(72px, 9vw, 128px); }
html:not([data-optie]) .ep-aanmelden .dk-kop .wrap { grid-template-rows: none; }
html:not([data-optie]) .ep-aanmelden .dk-kop .wrap::before { display: none; }
/* datumregel: tot de gegevens binnen zijn twee regels vrijhouden op de breedtes waar datum, tijd en plaats op twee regels vallen (geen sprong van het aanmeldblok) */
@media (max-width: 499px), (min-width: 861px) and (max-width: 1059px) { .ep-aanmelden [data-ev-wanneer]:not([data-klaar]) { min-height: calc(2em * 1.55); } }
.ep-contact .formulier { box-shadow: none; }
.ep-contact .formulier .verstuur { min-height: 44px; background: var(--inkt); color: var(--wit); }
.ep-contact .formulier .verstuur::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.ep-contact .formulier .verstuur:hover, .ep-contact .formulier .verstuur:focus-visible { background: var(--inkt); color: var(--inkt); transform: none; }
.ep-contact .formulier .verstuur:hover::before, .ep-contact .formulier .verstuur:focus-visible::before { transform: scaleX(1); }
.ep-contact .formulier input:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
.ep-contact .formulier textarea:focus-visible { box-shadow: 1.5px 0 0 var(--inkt); }
.ep-contact .formulier .melding { min-height: 1.4em; color: var(--grijs); }
/* lege live-regio neemt geen ruimte in, zodat de kaart onder niet te hoog is */
.ep-contact .formulier .melding:empty { min-height: 0; margin: 0; }
/* naast elkaar: berichtveld en eerste invoerveld met dezelfde bovenpadding, zodat de placeholders op één hoogte staan */
@media (min-width: 861px) { .ep-contact .formulier textarea { padding-top: 16px; } }
/* adres, route en kantoorgegevens */
.ep-gegevens { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.ep-gegevens > li { border-top: 1px solid var(--inkt); padding-top: 24px; }
.ep-gegevens .ep-lbl { margin-bottom: 14px; }
.ep-gegevens address, .ep-gegevens p { font-style: normal; margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--inkt); max-width: none; }
.ep-gegevens a:not(.dk-knop) { color: var(--inkt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; overflow-wrap: anywhere; }
.ep-gegevens a:not(.dk-knop):hover { text-decoration-thickness: 2px; }
.ep-gegevens .dk-knop { margin-top: 24px; }
.ep-gegevens .dk-knop:hover svg { transform: translateX(4px); }
/* lijst met documenten en juridische pagina's */
.ep-docs { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; border-bottom: 1px solid var(--lijn); }
.ep-docs li { border-top: 1px solid var(--lijn); }
.ep-docs li:first-child { border-top-color: var(--inkt); }
.ep-docs a { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 8px 24px; min-height: 64px; padding: 16px 0; color: var(--inkt); text-decoration: none; }
.ep-docs .ep-naam { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; }
.ep-docs .ep-lbl { white-space: nowrap; }
.ep-docs svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.ep-docs a:hover .ep-naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ep-docs a:hover svg { transform: translateX(4px); }
.ep-docs a[download]:hover svg, .ep-docs a[href$=".pdf"]:hover svg { transform: translateY(3px); }

/* ---------- juridische pagina's ---------- */
.ep-juridisch .ka-tekst h2 { text-wrap: balance; }
.ep-juridisch .ka-kop .ep-kruimel { margin-bottom: 40px; }
/* linkerlijn op --rand (gelijk aan logo en overige pagina's), leesbreedte blijft 760px */
.ep-juridisch .ka-smal { max-width: calc(var(--breed) + 2 * var(--rand)); }
.ep-juridisch .ka-smal > * { max-width: 760px; }
/* paginatitel in de titelrol van de site (zoals .pagina-kop .sectiekop h1) */
.ep-juridisch .ka-titel { margin-top: 0; font-size: clamp(32px, 2.6vw + 20px, 56px); line-height: 1.06; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
/* sectiewitruimte onder de kopband volgens de norm */
.ep-juridisch .ka-tekst { padding-top: clamp(72px, 9vw, 128px); }
/* samengestelde woorden niet op het koppelteken breken */
.ep-heel { white-space: nowrap; }
.ep-zieook { margin-top: clamp(56px, 6vw, 80px); }
.ep-zieook h2 { font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); font-weight: 400; }
.ep-zieook .ep-docs { margin-top: 14px; }
.ep-juridisch .ka-tekst :is(p, li) { text-wrap: pretty; }
@media (max-width: 1000px) {
  .ep-gegevens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ep-gegevens > li:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ep-contact .formulier textarea:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
}
@media (max-width: 560px) {
  .ep-gegevens { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ep-docs a { grid-template-columns: minmax(0, 1fr) 24px; }
  .ep-docs .ep-lbl { grid-row: 2; grid-column: 1; }
  .ep-docs svg { grid-row: 1 / 3; grid-column: 2; }
}

/* aanmeldpagina (aanmelden.html, via de aanmeldknop in een mailing): alleen naam, organisatie en e-mail, dus één kolom */
.formulier.zonder-vraag { grid-template-columns: minmax(0, 1fr); }