/*
Theme Name: EP-kit
Theme URI: https://epkit.nl
Description: Licht thema voor EP-kit. Werkt samen met de plugin EP-kit (kleuren, lettertypen, tools en navigatie).
Version: 1.0.2
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: epkit-thema
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ek-bg,#eef2f1);color:var(--ek-ink,#18272a);font:400 16px/1.55 var(--ek-f-body,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
a{color:var(--ek-accent,#0d6b5b)}
a:hover{color:var(--ek-accent-hover,#0a5649)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ek-accent,#0d6b5b);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.naar-inhoud{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ek-surface,#fff);padding:8px 12px;border-radius:6px}
.naar-inhoud:focus{left:8px}

/* Kop */
.kop{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ek-surface,#fff) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--ek-line,#d3dcda)}
.admin-bar .kop{top:32px}
@media (max-width:782px){.admin-bar .kop{top:46px}}
.kop__binnen{max-width:1240px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:18px}
.kop__logo{display:flex;align-items:center;flex:none;margin-right:6px}
.kop__logo .logo{height:34px;width:auto;display:block}
.nav{display:flex;gap:2px;align-items:center;min-width:0;flex:1}
.nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:6px;color:var(--ek-ink,#18272a);text-decoration:none;font-weight:500;font-size:.94rem;white-space:nowrap}
.nav a:hover{background:var(--ek-sunk,#f6f8f7);color:var(--ek-ink,#18272a)}
.nav a[aria-current="page"]{background:var(--ek-accent-soft,#d9ebe6);color:var(--ek-accent,#0d6b5b);font-weight:600}
.nav .epkit-icoon{width:14px;height:14px;opacity:.6}
.kop__account{flex:none;margin-left:auto}
.kop__account a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:6px;border:1px solid var(--ek-line,#d3dcda);color:var(--ek-ink,#18272a);text-decoration:none;font-weight:600;font-size:.9rem;white-space:nowrap;max-width:200px}
.kop__account a span{overflow:hidden;text-overflow:ellipsis}
.kop__account a:hover{border-color:var(--ek-accent,#0d6b5b);color:var(--ek-accent,#0d6b5b)}
.kop__account a.inloggen{background:var(--ek-accent,#0d6b5b);border-color:var(--ek-accent,#0d6b5b);color:var(--ek-accent-ink,#fff)}
.kop__account .epkit-icoon{width:18px;height:18px}
/* Smalle schermen: navigatie als tweede, horizontaal scrollende regel (geen menuknop nodig) */
@media (max-width:1000px){
  .kop__binnen{height:auto;flex-wrap:wrap;padding-top:8px;gap:6px 12px}
  .kop__logo .logo{height:30px}
  .nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 12px 8px;mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 10px;font-size:.9rem}
}

/* Inhoud */
.site-main{flex:1 0 auto;width:100%}
.inhoud{max-width:1120px;margin:0 auto;padding:32px 16px 56px}
.inhoud--smal{max-width:760px}
.inhoud>h1,.tekst h1{font:700 2.2rem/1.1 var(--ek-f-display,sans-serif);margin:0 0 18px;text-wrap:balance}
.tekst>h2{font:600 1.45rem/1.2 var(--ek-f-display,sans-serif);margin:1.6em 0 .4em}
.tekst>h3{font:600 1.15rem/1.25 var(--ek-f-display,sans-serif);margin:1.4em 0 .3em}
.tekst>p,.tekst>ul,.tekst>ol{margin:0 0 1em}
.tekst>ul>li,.tekst>ol>li{margin:.25em 0}

/* Rekenhulp-pagina's: kop + app-venster vullen precies het scherm, de tool scrolt zelf */
body.epkit-app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.epkit-app.admin-bar{height:calc(100dvh - 32px)}
@media (max-width:782px){body.epkit-app.admin-bar{height:calc(100dvh - 46px)}}
body.epkit-app .kop{position:relative;top:0}
body.epkit-app .site-main{flex:1 1 auto;min-height:0;max-width:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column}
body.epkit-app .site-main>.tekst{flex:1;min-height:0}
body.epkit-app .epkit-appvak{height:100%;min-height:0}
body.epkit-app .voet{display:none}

/* Voet */
.voet{border-top:1px solid var(--ek-line,#d3dcda);background:var(--ek-surface,#fff)}
.voet__binnen{max-width:1120px;margin:0 auto;padding:22px 16px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:.88rem;color:var(--ek-muted,#5a6b6c)}
.voet__binnen .logo{height:24px;width:auto;display:block}
.voet nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.voet a{color:var(--ek-muted,#5a6b6c);text-decoration:none}
.voet a:hover{color:var(--ek-accent,#0d6b5b);text-decoration:underline}

/* 404 */
.leeg{text-align:center;padding:60px 0}
.leeg h1{font:700 2.4rem var(--ek-f-display,sans-serif);margin:0 0 8px}