/* =========================================================
   Huisstijl Oudercomité GBS De Schakel — versie 1.0
   Kleur / typografie / raster volgens de huisstijl
   ========================================================= */
:root{
  /* kleur */
  --inkt:#12332C;
  --inkt-zacht:#4A6660;
  --sarcelle:#1E7A6D;
  --sarcelle-diep:#14584F;
  --oranje:#C2661C;          /* accentvlakken, onderlijn — niet voor kleine tekst */
  --oranje-tekst:#8F4A12;    /* zelfde accent, leesbaar op papier en perzik */
  --papier:#FAF6EC;
  --creme:#FBF3E3;
  --perzik:#FAE6C6;
  --perzik-diep:#F2D8AE;
  --lijn:#DDD5C4;
  --op-donker-meta:#F0B36A;
  --op-donker-tekst:#CFE0D9;
  /* merkkleuren — uitsluitend voor het beeldmerk */
  --merk-rood:#E52C1A;
  --merk-groen:#45B348;
  --merk-zwart:#2C2E35;
  /* ruimteschaal — veelvouden van 4 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --radius:2px;
  /* letters */
  --kop:'Manrope', system-ui, sans-serif;
  --lees:'Literata', Georgia, serif;
  --mono:'Space Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--lees); font-size:17px; line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--kop); margin:0; letter-spacing:-.01em}
h1{font-weight:800; font-size:clamp(40px,5.2vw,56px); line-height:1.05}
h2{font-weight:700; font-size:30px; line-height:1.15}
h3{font-weight:700; font-size:20px; line-height:1.25}
h4{font-weight:700; font-size:17px; line-height:1.25}
p{margin:0 0 var(--s3)}
a{color:var(--sarcelle-diep); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--oranje-tekst)}
::selection{background:var(--perzik)}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--sarcelle); outline-offset:2px}

.wrap{max-width:1200px; margin:0 auto; padding:0 var(--s4)}
.narrow{max-width:34em; margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute; left:var(--s3); top:-100px; z-index:50;
  background:var(--inkt); color:var(--papier); padding:12px 20px;
  font-family:var(--mono); font-size:13px; text-decoration:none; border-radius:var(--radius);
  transition:top .15s ease;
}
.skip-link:focus{top:var(--s3)}

/* ---------- labels & meta ---------- */
.label{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; background:var(--perzik); color:var(--oranje-tekst);
  border-radius:999px; padding:7px 14px;
}
.meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-zacht); line-height:1.4;
}
.meta.accent{color:var(--oranje-tekst)}
.klein{font-size:14px; line-height:1.55}
.secnum{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--oranje-tekst); display:block; margin-bottom:var(--s2)}

/* ---------- kopband ---------- */
.kopband{background:var(--creme)}
.kopband .binnen{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0;
}
.kopband .strook{
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-zacht); padding:var(--s2) 0 0;
}
.lockup{display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--inkt); cursor:pointer}
.lockup svg{display:block; height:38px; width:auto; flex:0 0 auto}
.lockup b{font-family:var(--kop); font-weight:800; font-size:23px; line-height:1.1; display:block; letter-spacing:-.02em}
.lockup span{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--inkt-zacht); display:block; margin-top:4px}

/* ---------- navigatie ---------- */
.nav{
  position:sticky; top:0; z-index:40; background:var(--creme);
  border-top:1px solid var(--inkt); border-bottom:1px solid var(--lijn);
}
.navrij{display:flex; justify-content:center; gap:26px; padding:14px 0}
.navrij a{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt); text-decoration:none; cursor:pointer; padding-bottom:3px;
  border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.navrij a:hover{color:var(--sarcelle)}
.navrij a[aria-current="page"]{color:var(--oranje-tekst); border-bottom-color:var(--oranje)}
.navrij a.extern::after{content:" \2197"; font-size:11px}
.navmob{display:none; align-items:center; gap:var(--s3); padding:10px 0}
.burger{
  display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--inkt);
  background:transparent; border-radius:var(--radius); cursor:pointer;
}
.burger svg{width:20px;height:20px;stroke:var(--inkt);fill:none;stroke-width:1.8;stroke-linecap:round}
.mobilelijst{display:none; background:var(--creme); border-bottom:1px solid var(--lijn)}
.mobilelijst.open{display:block}
.mobilelijst a{
  display:block; padding:15px var(--s4); text-decoration:none; color:var(--inkt); cursor:pointer;
  border-bottom:1px solid var(--lijn); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.mobilelijst a:last-child{border-bottom:0}
@media(max-width:860px){
  .navrij{display:none}
  .navmob{display:flex}
  .kopband .strook{display:none}
  .kopband .binnen{padding:var(--s3) 0}
  .lockup b{font-size:19px}
  .lockup svg{height:32px}
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--inkt); color:var(--papier); border:1px solid var(--inkt);
  border-radius:var(--radius); padding:13px 22px; min-height:46px; cursor:pointer; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.knop:hover{background:var(--sarcelle); border-color:var(--sarcelle); color:var(--papier)}
.knop:active{background:var(--sarcelle-diep); border-color:var(--sarcelle-diep)}
.knop-lijn{background:transparent; color:var(--inkt)}
.knop-lijn:hover{background:var(--perzik); border-color:var(--inkt); color:var(--inkt)}
.knop-lijn:active{background:var(--perzik-diep)}
.knop-tekst{
  background:transparent; border-color:transparent; color:var(--sarcelle-diep);
  padding:13px 8px; text-decoration:underline; text-underline-offset:4px;
}
.knop-tekst:hover{background:transparent; border-color:transparent; color:var(--oranje-tekst)}
.knop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- beeldvlakken (placeholder) ---------- */
.beeld{
  background:
    repeating-linear-gradient(135deg, rgba(18,51,44,.05) 0 12px, transparent 12px 24px),
    var(--perzik);
  position:relative; overflow:hidden;
}
.beeld::after{
  content:attr(data-label); position:absolute; left:0; bottom:0; padding:8px 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oranje-tekst); background:var(--papier);
}
.beeld.groen{background:repeating-linear-gradient(135deg, rgba(250,246,236,.10) 0 12px, transparent 12px 24px), var(--sarcelle)}
.beeld.groen::after{color:var(--sarcelle-diep)}
.beeld.diep{background:repeating-linear-gradient(135deg, rgba(250,246,236,.08) 0 12px, transparent 12px 24px), var(--inkt)}
.beeld.diep::after{color:var(--inkt)}
.beeld.zand{background:repeating-linear-gradient(135deg, rgba(18,51,44,.06) 0 12px, transparent 12px 24px), var(--perzik-diep)}

/* ---------- echte foto's ---------- */
.foto{margin:0}
.foto img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); background:var(--perzik);
}
.foto figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--inkt-zacht); margin-top:var(--s2);
}
.artikel .foto{margin:var(--s5) 0 var(--s6)}
.hoofdbeeld,.kaartbeeld{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); background:var(--perzik);
}

/* ---------- raster ---------- */
section{padding:0}
main section + section{margin-top:var(--s8)}
.kolommen{display:grid; grid-template-columns:1fr; gap:var(--s7)}
@media(min-width:1000px){
  .kolommen{grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--s5); align-items:start}
}

/* ---------- hoofdartikel van de maand ---------- */
.hoofd{padding-top:var(--s7)}
.hoofd-raster{display:grid; grid-template-columns:1fr; gap:var(--s6)}
.hoofd h1{margin:var(--s4) 0}
.hoofd .streep{
  display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;
  border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);
  padding:var(--s3) 0; margin-bottom:var(--s4);
}
.hoofd .inleiding{font-size:19px; line-height:1.6; max-width:34em}
@media(min-width:900px){
  .hoofd-raster{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7); align-items:center}
  .hoofd-media{order:2}
}

/* ---------- sectiekop ---------- */
.sectiekop{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  border-bottom:1px solid var(--inkt); padding-bottom:var(--s3); margin-bottom:var(--s5);
}

/* ---------- nieuwskaarten ---------- */
.nieuwsraster{display:grid; grid-template-columns:1fr; gap:var(--s6) var(--s5)}
@media(min-width:700px){ .nieuwsraster{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1050px){ .nieuwsraster{grid-template-columns:repeat(3,1fr)} }
.kaart{
  background:none; border:0; padding:0; margin:0; text-align:left; font:inherit; color:inherit;
  cursor:pointer; display:flex; flex-direction:column; gap:10px; text-decoration:none;
}
.kaart .kop{display:flex; justify-content:space-between; gap:var(--s3); font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.kaart .kop .cat{color:var(--oranje-tekst)}
.kaart .kop .nr{color:var(--inkt-zacht)}
.kaart .beeld{aspect-ratio:4/3}
.kaart h3{transition:color .18s ease}
.kaart:hover h3{color:var(--sarcelle)}
.kaart p{margin:0; font-size:15px; line-height:1.55; color:var(--inkt-zacht)}
.kaart .datum{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-zacht); margin-top:auto}

/* ---------- agenda ---------- */
.agenda{list-style:none; margin:0; padding:0}
.agenda li{display:flex; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px dotted var(--lijn)}
.agenda li:first-child{border-top:1px solid var(--inkt)}
.dag{flex:0 0 48px; text-align:left}
.dag .d{font-family:var(--kop); font-weight:800; font-size:26px; line-height:1; color:var(--sarcelle-diep)}
.dag .m{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--oranje-tekst); margin-top:4px}
.agenda h4{margin-bottom:2px}
.agenda p{margin:0; font-size:14px; line-height:1.5; color:var(--inkt-zacht)}
.agenda .uur{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--inkt-zacht); margin-top:6px}

/* ---------- oproepblok ---------- */
.oproep{background:var(--perzik); padding:var(--s4); border-radius:var(--radius); display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.oproep p{margin:0; font-size:14px; line-height:1.6; color:#3B3020}
.oproep .knop{font-size:11px; padding:11px 16px; min-height:42px}
.oproep .knop-lijn:hover{background:var(--inkt); color:var(--perzik)}

/* ---------- donker blok ---------- */
.donker{background:var(--inkt); color:var(--papier); padding:var(--s7) var(--s6); border-radius:var(--radius)}
.donker h2, .donker h3{color:var(--papier)}
.donker p{color:var(--op-donker-tekst); max-width:60ch}
.donker .secnum{color:var(--op-donker-meta)}
.donker .knop{background:var(--papier); color:var(--inkt); border-color:var(--papier)}
.donker .knop:hover{background:var(--sarcelle); border-color:var(--sarcelle); color:var(--papier)}
@media(max-width:700px){ .donker{padding:var(--s6) var(--s4)} }

/* ---------- artikel ---------- */
.artikel .inleiding{font-size:19px; line-height:1.6; color:var(--inkt-zacht)}
.artikel .beeld{aspect-ratio:16/9; margin:var(--s5) 0 var(--s6)}
.artikel .tekst p{font-size:17px; line-height:1.6}
.artikel .tekst h3{margin:var(--s6) 0 var(--s3)}
.artikel .tekst ul{padding-left:20px; font-size:17px; line-height:1.6}
.artikel .tekst li{margin-bottom:var(--s2)}
.citaat{
  border-left:2px solid var(--oranje); margin:var(--s6) 0; padding:var(--s1) 0 var(--s1) var(--s4);
  font-family:var(--kop); font-weight:700; font-size:21px; line-height:1.3; color:var(--inkt);
}
.terug{
  display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:10px 0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sarcelle-diep);
  text-decoration:none;
}
.terug:hover{color:var(--oranje-tekst)}
.terug svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.meerlijst{list-style:none;margin:0;padding:0}
.meerlijst a{
  display:block; width:100%; text-align:left; background:none; border:0; border-top:1px dotted var(--lijn);
  padding:var(--s4) 0; cursor:pointer; font:inherit; text-decoration:none; color:inherit;
}
.meerlijst .cat{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--oranje-tekst); margin-bottom:6px}
.meerlijst h4{transition:color .18s ease}
.meerlijst a:hover h4{color:var(--sarcelle)}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6)}
.filters button{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--inkt); border:1px solid var(--lijn); border-radius:999px;
  padding:9px 16px; min-height:40px; cursor:pointer; transition:all .18s ease;
}
.filters button:hover{border-color:var(--inkt)}
.filters button[aria-pressed="true"]{background:var(--perzik); border-color:var(--perzik); color:var(--oranje-tekst)}

/* ---------- paginakop ---------- */
.paginakop{padding:var(--s7) 0 var(--s4); border-bottom:1px solid var(--inkt); margin-bottom:var(--s6)}
.paginakop h1{margin:var(--s2) 0 var(--s3)}
.paginakop p{color:var(--inkt-zacht); margin:0; max-width:34em}

/* ---------- formulier ---------- */
.veld{display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s4)}
.veld label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-zacht)}
.veld input, .veld textarea{
  font-family:var(--lees); font-size:17px; color:var(--inkt); background:var(--creme);
  border:1px solid var(--lijn); border-radius:var(--radius); padding:12px 14px; min-height:48px; resize:vertical;
}
.veld input:focus, .veld textarea:focus{border-color:var(--sarcelle)}
.veld .hint{font-size:14px; color:var(--inkt-zacht)}

/* ---------- voettekst ---------- */
footer.site{background:var(--inkt); color:var(--op-donker-tekst); margin-top:var(--s8); padding:var(--s7) 0 var(--s4)}
footer.site h4{color:var(--papier); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; margin-bottom:var(--s3)}
footer.site a{color:var(--op-donker-meta); text-decoration:none}
footer.site a:hover{color:var(--papier); text-decoration:underline}
footer.site p{color:var(--op-donker-tekst); font-size:15px}
.vraster{display:grid; gap:var(--s6); grid-template-columns:1fr}
@media(min-width:760px){ .vraster{grid-template-columns:1.6fr 1fr 1fr} }
.vraster ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.vlogo{margin-bottom:var(--s4)}
.vlogo svg{height:74px; width:auto}
.slot{
  border-top:1px solid rgba(250,246,236,.16); margin-top:var(--s6); padding-top:var(--s4);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--op-donker-meta);
}

/* ---------- weergaven ---------- */
.view{display:none}
.view.active{display:block}
@media(prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }