/*
Theme Name: SKVO
Theme URI: https://skvo.nl/
Author: Stichting Kennisdeling voor Overheden
Description: Huisstijlthema voor de Stichting Kennisdeling voor Overheden. Zes vaste pagina's, besloten landelijke overleggen, Paleis Soestdijk als zetel.
Version: 1.6
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Alle rechten voorbehouden
Text Domain: skvo
*/

/* ============================================================
   SKVO — Stichting Kennisdeling voor Overheden
   Ontwerp: gegraveerde uitnodiging. Nachtblauw plaat + papier.
   ============================================================ */

:root{
  /* merkkleuren — ontleend aan het INVK-palet: leisteenblauw + messinggoud */
  --nacht:      #2C3348;
  --nacht-diep: #1F2433;
  --nacht-zacht:#3A4258;
  --goud:       #C3A24C;
  --goud-licht: #DEC58C;
  --goud-diep:  #8A6F2E;
  --ivoor:      #F6F4EF;
  --ivoor-dof:  #A8AEBD;

  /* papier — wit, zoals het INVK-drukwerk */
  --papier:      #FFFFFF;
  --papier-diep: #F1F2F5;
  --inkt:        #2C3348;
  --inkt-dof:    #61697D;
  --lijn:        #D7DAE1;
  --lijn-fijn:   #E7E9EE;
  --accent-inkt: #8A6F2E;

  --maat: 1120px;
  --lees: 66ch;

  --f-display: "EB Garamond", "Garamond", "Adobe Garamond Pro", Georgia, serif;
  --f-tekst:   "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-label:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* logoletter: Trajan Pro Bold in de huisstijl; Cinzel is de vrij te gebruiken tegenhanger */
  --f-logo:    "Trajan Pro", "Trajan Pro 3", "Cinzel", "EB Garamond", Georgia, serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:      #1F2433;
    --papier-diep: #262D3F;
    --inkt:        #EDEBE5;
    --inkt-dof:    #A0A7B7;
    --lijn:        #3A4258;
    --lijn-fijn:   #2C3348;
    --accent-inkt: #D9BF7D;
  }
}
:root[data-theme="dark"]{
  --papier:      #1F2433;
  --papier-diep: #262D3F;
  --inkt:        #EDEBE5;
  --inkt-dof:    #A0A7B7;
  --lijn:        #3A4258;
  --lijn-fijn:   #2C3348;
  --accent-inkt: #D9BF7D;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--f-tekst);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{ font-family: var(--f-display); font-weight:500; text-wrap: balance; margin:0; letter-spacing:.005em; }
p{ margin:0; }
a{ color: inherit; }

.wrap{ width:100%; max-width: var(--maat); margin:0 auto; padding:0 32px; }
.lees{ max-width: var(--lees); }

/* ---------- labels & ornamenten ---------- */
.label{
  font-family: var(--f-label);
  font-size: 11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform: uppercase;
}
.ruit{ display:inline-block; width:6px; height:6px; transform: rotate(45deg); background: var(--goud); flex:0 0 auto; }

.reeks{ display:flex; align-items:center; gap:14px; }
.reeks::before, .reeks::after{ content:""; height:1px; background: var(--lijn); flex:1; }

/* ---------- masthead: gecentreerde lockup naar INVK-model ---------- */
.masthead{ background: var(--nacht-diep); }
.masthead .wrap{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:26px; padding-bottom:24px;
}
.merk{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; cursor:pointer; }
.merk .embleem{ width:90px; height:42px; display:block;
  background: url("assets/kroon.png") center/contain no-repeat; }
.merk .letters{
  font-family: var(--f-logo);
  font-size: 40px; font-weight:700; letter-spacing:.075em;
  color: var(--ivoor); line-height:1.05; padding-left:.06em;
}
.merk .voluit{
  font-family: var(--f-logo); font-size:12.5px; font-weight:700;
  letter-spacing:.085em; text-transform:uppercase; color: var(--ivoor);
  line-height:1.45; text-align:center;
}
.merk--voet{ display:inline-flex; align-items:center !important; gap:2px; }
.merk--voet .embleem{ width:66px; height:31px; }
.merk--voet .letters{ font-size:29px; }
.navbalk{
  position: sticky; top:0; z-index:50;
  background: var(--nacht);
  border-top:1px solid rgba(195,162,76,.30);
  border-bottom:1px solid rgba(195,162,76,.30);
}
.navbalk .wrap{ display:flex; justify-content:center; }
nav.hoofd{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:center; }
nav.hoofd button{
  font-family: var(--f-label); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  background:none; border:0; cursor:pointer; color: var(--ivoor-dof);
  padding:10px 13px; border-bottom:1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
nav.hoofd button:hover{ color: var(--ivoor); }
nav.hoofd button[aria-current="page"]{ color: var(--goud-licht); border-bottom-color: var(--goud); }
nav.hoofd .knop-uitnodiging{
  margin-left:14px; color: var(--nacht-diep); background: var(--goud);
  padding:10px 18px; border-bottom:0;
}
nav.hoofd .knop-uitnodiging:hover{ background: var(--goud-licht); color: var(--nacht); }

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

/* ---------- plaat (donkere secties) ---------- */
.plaat{ background: var(--nacht); color: var(--ivoor); position:relative; }
.plaat h1,.plaat h2,.plaat h3{ color: var(--ivoor); }
.plaat .label{ color: var(--goud); }
.plaat p{ color: #C8CCD8; }
.plaat--diep{ background: var(--nacht-diep); }
.plaat::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(195,162,76,.5), transparent);
}

/* ---------- hero ---------- */
.hero{ padding: 68px 0 0; overflow:hidden; }
.hero .kop{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero .eyebrow{ display:flex; align-items:center; gap:12px; color: var(--goud); }
.hero h1{
  font-size: clamp(36px, 5vw, 64px); line-height:1.08; letter-spacing:-.012em;
  max-width: 22ch;
}
.hero h1 em{ font-style:italic; color: var(--goud-licht); }
.hero .inleiding{ max-width: 56ch; font-size:20px; font-style:italic; color:#C8CCD8; }
.hero .acties{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:4px; }

.knop{
  font-family: var(--f-label); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  padding:15px 26px; border:1px solid var(--goud); background: var(--goud); color: var(--nacht);
  transition: background .2s ease, color .2s ease;
}
.knop:hover{ background: var(--goud-licht); border-color: var(--goud-licht); }
.knop--leeg{ background:transparent; color: var(--goud-licht); }
.knop--leeg:hover{ background: rgba(195,162,76,.14); color: var(--goud-licht); }
.knop--inkt{ background: var(--nacht); border-color: var(--nacht); color: var(--ivoor); }
.knop--inkt:hover{ background: var(--nacht-zacht); border-color: var(--nacht-zacht); }

.gevel{ display:block; width:100%; height:auto; margin-top:48px; }
.gevel .lijn{ fill:none; stroke: var(--goud); stroke-width:1; opacity:.55; vector-effect: non-scaling-stroke; }
.gevel .vlak{ fill: rgba(195,162,76,.09); stroke:none; }
.gevel .fijn{ fill:none; stroke: var(--goud); stroke-width:1; opacity:.3; vector-effect: non-scaling-stroke; }

/* ---------- kerngetallen ---------- */
.getallen{ display:grid; grid-template-columns: repeat(4, 1fr); border-top:1px solid var(--lijn); }
.getal{ padding:38px 26px; border-right:1px solid var(--lijn-fijn); }
.getal:last-child{ border-right:0; }
.getal .cijfer{
  font-family: var(--f-display); font-size:52px; line-height:1; font-weight:400;
  font-variant-numeric: tabular-nums; color: var(--inkt);
}
.getal .bij{ font-family: var(--f-display); font-size:19px; font-style:italic; color: var(--inkt-dof); margin-left:6px; }
.getal .uitleg{ margin-top:12px; font-size:15.5px; color: var(--inkt-dof); max-width:26ch; }
.getal--nadruk .cijfer{ color: var(--accent-inkt); }

/* ---------- secties op papier ---------- */
.sectie{ padding: 84px 0; }
.sectie--kort{ padding: 60px 0; }
.sectie-kop{ display:flex; flex-direction:column; gap:18px; margin-bottom:44px; }
.sectie-kop h2{ font-size: clamp(28px, 3.4vw, 40px); line-height:1.14; }
.sectie-kop .label{ color: var(--accent-inkt); }
.plaat .sectie-kop .label{ color: var(--goud); }

.kolommen{ display:grid; grid-template-columns: repeat(3, 1fr); gap:0; border-top:1px solid var(--lijn); }
.kolommen--vier{ grid-template-columns: repeat(4, 1fr); }
.kolommen--vier .kolom{ padding-right:22px; }
.kolommen--vier .kolom + .kolom{ padding-left:22px; }
.kolommen--vier h3{ font-size:21px; }
.kolom{ padding:34px 30px 10px 0; border-right:1px solid var(--lijn-fijn); padding-right:30px; }
.kolom + .kolom{ padding-left:30px; }
.kolom:last-child{ border-right:0; }
.kolom h3{ font-size:23px; margin:16px 0 12px; }
.kolom p{ color: var(--inkt-dof); font-size:16.5px; }

/* ---------- overleg-index ---------- */
.zoekbalk{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);
  padding:18px 0; margin-bottom:8px;
  position: sticky; top:53px; z-index:20; background: var(--papier);
}
.zoekbalk input{
  flex:1; min-width:240px; font-family: var(--f-tekst); font-size:17px;
  background:transparent; border:0; border-bottom:1px solid var(--lijn);
  padding:8px 2px; color: var(--inkt);
}
.zoekbalk input::placeholder{ color: var(--inkt-dof); opacity:.8; }
.zoekbalk .telling{ font-family: var(--f-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--inkt-dof); font-variant-numeric: tabular-nums; }

.domein{ padding:44px 0 8px; border-top:1px solid var(--lijn-fijn); }
.domein:first-of-type{ border-top:0; }
.domein-kop{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:22px; }
.domein-kop h3{ font-size:25px; }
.domein-kop .aantal{ font-family: var(--f-label); font-size:11px; letter-spacing:.16em; color: var(--inkt-dof); font-variant-numeric: tabular-nums; }
ul.overleggen{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:0 40px; }
ul.overleggen li{
  display:flex; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--lijn-fijn); font-size:16.5px;
}
ul.overleggen li .ruit{ opacity:.75; position:relative; top:-2px; }
ul.overleggen li mark{ background: rgba(195,162,76,.3); color: inherit; }
.leeg{ padding:40px 0; color: var(--inkt-dof); font-style:italic; }

/* voorproefje op de homepage */
.proef{ display:grid; grid-template-columns: repeat(3,1fr); gap:0 40px; border-top:1px solid var(--lijn); }
.proef div{ padding:13px 0; border-bottom:1px solid var(--lijn-fijn); font-size:16.5px; display:flex; gap:12px; align-items:baseline; }

/* ---------- citaat / regel ---------- */
.regel{ border-left:2px solid var(--goud); padding:6px 0 6px 26px; font-family: var(--f-display); font-size:24px; font-style:italic; line-height:1.5; max-width:40ch; }

/* ---------- twee kolommen tekst ---------- */
.duo{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:start; }
.stapel{ display:flex; flex-direction:column; gap:20px; }
.stapel p{ color: var(--inkt-dof); }
.plaat .stapel p{ color:#BFC4D1; }

/* ---------- definitielijst ---------- */
dl.feiten{ margin:0; display:grid; grid-template-columns: max-content 1fr; gap:0; border-top:1px solid var(--lijn); }
dl.feiten dt{
  font-family: var(--f-label); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--inkt-dof); padding:16px 32px 16px 0; border-bottom:1px solid var(--lijn-fijn);
}
dl.feiten dd{ margin:0; padding:16px 0; border-bottom:1px solid var(--lijn-fijn); font-size:16.5px; }

/* ---------- stappen (echte volgorde → genummerd) ---------- */
ol.stappen{ list-style:none; margin:0; padding:0; counter-reset: stap; border-top:1px solid var(--lijn); }
ol.stappen li{ counter-increment: stap; display:grid; grid-template-columns: 62px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--lijn-fijn); }
ol.stappen li::before{
  content: counter(stap, upper-roman);
  font-family: var(--f-display); font-size:22px; color: var(--accent-inkt); line-height:1.4;
}
ol.stappen h3{ font-size:21px; margin-bottom:8px; }
ol.stappen p{ color: var(--inkt-dof); font-size:16.5px; max-width:56ch; }

/* ---------- kaart / kader ---------- */
.kader{ border:1px solid var(--lijn); padding:36px; display:flex; flex-direction:column; gap:16px; }
.plaat .kader{ border-color: rgba(195,162,76,.34); }

/* ---------- formulier ---------- */
form.voordracht{ display:grid; grid-template-columns:1fr 1fr; gap:26px 32px; }
form.voordracht .breed{ grid-column:1 / -1; }
form.voordracht label{ display:flex; flex-direction:column; gap:8px; }
form.voordracht .label{ color: var(--inkt-dof); }
form.voordracht input, form.voordracht select, form.voordracht textarea{
  font-family: var(--f-tekst); font-size:17px; color: var(--inkt);
  background: transparent; border:0; border-bottom:1px solid var(--lijn); padding:9px 2px;
}
form.voordracht textarea{ resize:vertical; min-height:96px; border:1px solid var(--lijn); padding:12px; }
form.voordracht select{ appearance:none; border-radius:0; }
/* honeypot: buiten beeld, buiten de tabvolgorde, niet display:none (dat zien bots) */
.vangnet{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.turnstile-vak{ border:1px dashed rgba(195,162,76,.45); padding:20px 22px; }

/* ---------- voettekst ---------- */
footer.voet{ background: var(--nacht-diep); color: var(--ivoor); padding:64px 0 40px; }
footer.voet .rijen{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
footer.voet h4{ font-family: var(--f-label); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--goud); margin-bottom:16px; }
footer.voet p, footer.voet li{ color:#99A0B0; font-size:15.5px; }
footer.voet ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer.voet button{ background:none; border:0; padding:0; font:inherit; color:#99A0B0; cursor:pointer; text-align:left; }
footer.voet button:hover{ color: var(--ivoor); }
footer.voet .onderrand{ margin-top:52px; padding-top:22px; border-top:1px solid rgba(195,162,76,.24); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer.voet .onderrand span{ color:#6E7688; font-size:13.5px; }

/* ---------- pagina's ---------- */
.pagina{ display:none; }
.pagina.actief{ display:block; animation: intree .5s ease both; }
@keyframes intree{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

.paginakop{ padding:76px 0 66px; }
.paginakop h1{ font-size: clamp(34px, 5vw, 58px); line-height:1.08; max-width:18ch; }
.paginakop .inleiding{ max-width:58ch; margin-top:22px; font-size:19.5px; font-style:italic; color:#C8CCD8; }
.sectie-kop p.lees{ font-style:italic; }

/* ---------- animatie bij laden ---------- */
.instap{ opacity:0; transform: translateY(14px); animation: instap .9s cubic-bezier(.2,.7,.3,1) forwards; }
.instap--2{ animation-delay:.12s; }
.instap--3{ animation-delay:.24s; }
.instap--4{ animation-delay:.36s; }
@keyframes instap{ to{ opacity:1; transform:none; } }
.gevel .lijn, .gevel .fijn{ stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: teken 2.6s ease forwards .45s; }
@keyframes teken{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .gevel .lijn, .gevel .fijn{ stroke-dashoffset:0; }
}

/* ---------- WordPress: echte links in plaats van knoppen ---------- */
nav.hoofd a{
  font-family: var(--f-label); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color: var(--ivoor-dof); padding:10px 13px; display:inline-block;
  border-bottom:1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
nav.hoofd a:hover{ color: var(--ivoor); }
nav.hoofd a[aria-current="page"]{ color: var(--goud-licht); border-bottom-color: var(--goud); }
nav.hoofd a.knop-uitnodiging{
  margin-left:14px; color: var(--nacht-diep); background: var(--goud);
  padding:10px 18px; border-bottom:0;
}
nav.hoofd a.knop-uitnodiging:hover{ background: var(--goud-licht); color: var(--nacht-diep); }
a.knop{ display:inline-block; text-decoration:none; }
footer.voet a:not(.merk){ color:#99A0B0; text-decoration:none; }
footer.voet a:not(.merk):hover{ color: var(--ivoor); }

/* ---------- responsief ---------- */
@media (max-width: 980px){
  .getallen{ grid-template-columns: repeat(2,1fr); }
  .getal:nth-child(2){ border-right:0; }
  .getal:nth-child(-n+2){ border-bottom:1px solid var(--lijn-fijn); }
  .kolommen{ grid-template-columns:1fr; }
  .kolom{ border-right:0; border-bottom:1px solid var(--lijn-fijn); padding-left:0 !important; padding-right:0; }
  .duo{ grid-template-columns:1fr; gap:40px; }
  ul.overleggen, .proef{ grid-template-columns:1fr; }
  footer.voet .rijen{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  body{ font-size:17px; }
  .wrap{ padding:0 22px; }
  .masthead .wrap{ padding-top:20px; padding-bottom:18px; }
  .merk .letters{ font-size:28px; }
  .merk .voluit{ font-size:8.5px; letter-spacing:.24em; }
  .navbalk{ position:static; }
  nav.hoofd{ justify-content:center; }
  nav.hoofd button{ padding:9px 10px; font-size:10.5px; }
  .zoekbalk{ position:static; }
  .hero{ padding-top:64px; }
  .sectie{ padding:58px 0; }
  form.voordracht{ grid-template-columns:1fr; }
  dl.feiten{ grid-template-columns:1fr; }
  dl.feiten dt{ padding-bottom:4px; border-bottom:0; }
  footer.voet .rijen{ grid-template-columns:1fr; }
}

/* ---------- meldingen boven het formulier ---------- */
.melding{
  grid-column:1 / -1; padding:16px 20px; margin-bottom:26px;
  font-size:16.5px; border-left:3px solid var(--goud);
  background: rgba(195,162,76,.12); color: var(--ivoor);
}
.melding--fout{ border-left-color:#C2554A; background: rgba(194,85,74,.14); }