/* =========================================================
   Webkwestie – hoofd.css (Geconsolideerd / verbeterd)
   ========================================================= */

/* =========================================================
   01) Design tokens
   ========================================================= */
:root {
  /* --- A) Basispalet --- */
  --webkw-palette-paars:       #8e7cc3;
  --webkw-palette-rood:        #e06666;
  --webkw-palette-groen:       #93c47d;
  --webkw-palette-oranje:      #f6b26b;
  --webkw-palette-blauw:       #6d9eeb;
  --webkw-palette-geel:        #ffd966;
  --webkw-palette-grijs:       #999999;
  --webkw-palette-zeegroen:    #76a5af;
  --webkw-palette-roze:        #c27ba0;
  --webkw-palette-hemelsblauw: #3d85c6;

  /* --- B) Thema --- */
  --webkw-theme-bg:        #f5f7fb;
  --webkw-theme-primary:   var(--webkw-palette-hemelsblauw);
  --webkw-theme-text:      #111111;
  --webkw-theme-surface:   #ffffff;
  --webkw-theme-muted:     var(--webkw-palette-grijs);

  /* --- C) UI & Layout --- */
  --webkw-radius-sm: 10px;
  --webkw-radius-md: 14px;
  --webkw-shadow-soft:   0 6px 18px rgba(0,0,0,.06);
  --webkw-border-soft:   1px solid rgba(0,0,0,.08);

  --webkw-container-w:    1200px;
  --webkw-topbar-height:  86px;
  --webkw-line-h:         6px;

  --webkw-control-h:      44px;
  --webkw-switch-h:       54px;

  /* --- D) Fonts --- */
  --webkw-font-body: "Nunito", system-ui, sans-serif;
  --webkw-font-head: "Poppins", "Nunito", system-ui, sans-serif;

  /* Accent & focus */
  --webkw-accent: var(--webkw-theme-primary);
  --webkw-accent-contrast: #ffffff;
  --webkw-focus: rgba(0,0,0,.28);

  /* Pagina-tint buiten container */
  --webkw-bg-tint: var(--webkw-theme-bg);
}

/* =========================================================
   Menu-/schooltype-kleuren (via body class)
   =========================================================
   .wk--home    = Home                = zwart / donkergrijs
   .wk--po      = Primair onderwijs   = rood
   .wk--sbo-vso = Speciaal onderwijs  = blauw
   .wk--vo      = Voortgezet onderwijs= groen
   .wk--mbo     = MBO                 = geel
   .wk--hbo     = HBO / Universiteit  = paars
   .wk--overig  = Overig / Uitleg     = zeegroen
   ========================================================= */

/* =========================================================
   01b) Accent activatie + pagina-tint
   ========================================================= */
.wk--home{
  --webkw-accent: #444;
  --webkw-accent-contrast: #ffffff;
  --webkw-bg-tint: #f5f7fb;
  --webkw-theme-bg: #f5f7fb;
}

.wk--po {
  --webkw-accent: var(--webkw-palette-rood);
  --webkw-accent-contrast: #ffffff;
  --webkw-bg-tint: rgba(224, 102, 102, 0.04); 
  --webkw-theme-bg: var(--webkw-bg-tint);
}

.wk--vo{
  --webkw-accent: var(--webkw-palette-groen);
  --webkw-accent-contrast: #111111;
  --webkw-bg-tint: rgba(147,196,125,.12);
  --webkw-theme-bg: #f3f9ef;
}

.wk--mbo{
  --webkw-accent: var(--webkw-palette-geel);
  --webkw-accent-contrast: #111111;
  --webkw-bg-tint: rgba(255,217,102,.18);
  --webkw-theme-bg: #fff9e8;
}

.wk--hbo{
  --webkw-accent: var(--webkw-palette-paars);
  --webkw-accent-contrast: #ffffff;
  --webkw-bg-tint: rgba(142,124,195,.12);
  --webkw-theme-bg: #f4f0fb;
}

.wk--overig{
  --webkw-accent: var(--webkw-palette-zeegroen);
  --webkw-accent-contrast: #111111;
  --webkw-bg-tint: rgba(118,165,175,.12);
  --webkw-theme-bg: #eef6f7;
}

.wk--sbo-vso{
  --webkw-accent: var(--webkw-palette-blauw);
  --webkw-accent-contrast: #ffffff;
  --webkw-bg-tint: rgba(109,158,235,.12);
  --webkw-theme-bg: #eff5fe;
}

.wk-notice{
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--webkw-radius-md);
  box-shadow: var(--webkw-shadow-soft);
  border: 2px solid var(--webkw-accent);
  background: #ffffff;
}

.wk-notice p{
  margin: 0;
}

.wk-notice--sbo-vso{
  background: #f7fbff;
}

.wk-notice--sbo-vso a {
  color: #0033A0;
  font-weight: 700;
  text-decoration: underline;
}

.wk-notice--sbo-vso a:hover,
.wk-notice--sbo-vso a:focus {
  color: #CE0000;
  text-decoration-thickness: 2px;
}

/* =========================================================
   02) Basis & Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--webkw-font-body);
  color: var(--webkw-theme-text);
  background-color: var(--webkw-bg-tint);
  line-height: 1.5;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a.wk-brand:hover{ text-decoration:none; }

button, input, select, textarea{ font: inherit; }

:focus-visible{
  outline: 3px solid var(--webkw-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Utility */
.wk-muted{ color: var(--webkw-theme-muted); }

/* Container */
.wk-container{
  max-width: var(--webkw-container-w);
  margin: 0 auto;
  padding: 0 16px;
}

/* Binnenvlak voor pages met .wk-container als main */
main.wk-container{
  background: var(--webkw-theme-bg);
  min-height: calc(100vh - var(--webkw-topbar-height));
  padding-top: 22px;
  padding-bottom: 60px;
}

/* =========================================================
   04) Topbar Component
   ========================================================= */
.wk-topbar{
  position: sticky;
  top: 0;
  z-index: 2000;
  min-height: var(--webkw-topbar-height);
  background: linear-gradient(to bottom, #dcdcdc 0%, #cfcfcf 100%);
  box-shadow:
    var(--webkw-shadow-soft),
    inset 0 calc(-1 * var(--webkw-line-h)) 0 0 var(--webkw-accent);
}

.wk-topbar__inner{
  min-height: var(--webkw-topbar-height);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Controls in topbar */
.wk-topbar :is(select, input, button){
  height: var(--webkw-control-h);
  border-radius: var(--webkw-radius-sm);
  border: 1px solid #cfcfcf;
  background: #fff;
}

.wk-topbar button{
  padding: 0 12px;
  background: #eee;
  cursor: pointer;
}

/* Ghost button (bv. Wis in PO) */
.wk-btn--ghost{
  background: #fff;
  border: 1px solid #cfcfcf;
}
.wk-btn--ghost:hover{ background:#f3f3f3; }

/* =========================================================
   Brand
   ========================================================= */
.wk-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.wk-brand__logo{
  width: 75px;
  height: 75px;
  object-fit: contain;
}

.wk-brand__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0;
}

.wk-brand__title{
  font-family: var(--webkw-font-head);
  font-size: 1.45rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
  line-height: 1;
  letter-spacing: 0.18em;
  margin: 0;
  font-synthesis: none;
  transform: translateY(-3px);
}

.wk-brand__sub{
  font-family: var(--webkw-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  line-height: 1;
  letter-spacing: 0.29em;
  margin: 0;
  white-space: nowrap;
  transform: translateY(3px);
}

/* =========================================================
   Switch + Search (topbar)
   ========================================================= */

/* Switch in midden: auto-marges */
.wk-switch{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.wk-switch select{
  height: var(--webkw-switch-h);
  padding: 0 14px;
  border-radius: 12px;
  font-size: 1rem;
}

/* Search rechts */
.wk-search{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.wk-search input[type="search"]{
  height: var(--webkw-control-h);
  width: clamp(200px, 25vw, 420px);
  border-radius: var(--webkw-radius-sm);
  border: 1px solid #cfcfcf;
  padding: 0 12px;
}

/* =========================================================
   Home/Pages layout: 66/33
   ========================================================= */
.wk-layout{
  display: grid;
  grid-template-columns: 2fr 1fr; /* 66/33 */
  gap: 18px;
  align-items: start;
}

.wk-results,
.wk-news{ min-width: 0; }

/* =========================================================
   Results head (PO gebruikt dit ook)
   ========================================================= */
.wk-results__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.wk-results__title{
  color: var(--webkw-accent);
  margin: 0;
  font-family: var(--webkw-font-head);
  font-size: 1.25rem;
  letter-spacing: .02em;
}

/* =========================================================
   Cards: randkleur = zelfde als topbar accent
   ========================================================= */
.wk-card{
  background: var(--webkw-theme-surface);
  border-radius: var(--webkw-radius-md);
  padding: 14px;
  box-shadow: var(--webkw-shadow-soft);
  border: 2px solid var(--webkw-accent);
}

.wk-card__date{
  margin: 0 0 6px;
  font-size: .95rem;
}
/* Cardtitel in accentkleur (zelfde als lijn/topbar/cards) */
.wk-card__title{
  color: var(--webkw-accent);
  font-weight: 800;           /* optioneel: wat steviger */
}
.wk-card__meta{ opacity: .75; font-size: .9rem; margin-bottom: 8px; }
.wk-card__desc{ margin: 0; font-size: .95rem; line-height: 1.4; }

/* Card link wrapper (PO: <a class="wk-cardlink">...) */
.wk-cardlink{
  display:block;
  text-decoration:none;
  color: inherit;
}

/* Thumbnail-card variant (PO AJAX) */
.wk-card--thumb{
  padding: 0;
  overflow: hidden;
}
.wk-card--thumb .wk-card__body{
  padding: 12px 14px 14px;
}
.wk-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid rgba(0,0,0,.10);
  background: #f0f0f0;
}

/* 3 cards naast elkaar binnen linker kolom */
.wk-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* (oude class blijft bruikbaar) */
.wk-card__thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,.10);
}

.wk-card__subtitle{
  text-transform: uppercase;
  color: #c0191c;          /* Mondriaan rood */
  font-weight: 800;
  letter-spacing: .06em;
  margin: 2px 0 8px;
}

/* Vaktekst in card */
.wk-vaktext{ opacity: .9; }

/* =========================================================
   PO: subbar + groep-knoppen
   ========================================================= */
.wk-subbar{
  margin: 0 0 14px;
}
.wk-subbar__row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wk-sub-btn{
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid var(--webkw-accent);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
}
.wk-sub-btn:hover{
  background: rgba(255,255,255,.65);
}
.wk-sub-btn.is-active{
  background: var(--webkw-accent);
  color: var(--webkw-accent-contrast);
}
.wk-sub-btn--clear{
  border-style: dashed;
}
.wk-sub-btn.is-disabled{
  opacity: .5;
  cursor: not-allowed;
}

/* =========================================================
   PO: badges (optioneel, maar voorkomt “naakt” uiterlijk)
   ========================================================= */
.edu-badges{
  display:inline-flex;
  gap: 6px;
  vertical-align: middle;
}
.edu-badge{
  display:inline-flex;
  align-items:center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
}
.edu-badge--po{ border-color: rgba(224,102,102,.55); }
.edu-badge--vo{ border-color: rgba(147,196,125,.65); }
.edu-badge--mbo{ border-color: rgba(255,217,102,.75); }
.edu-badge--hbo{ border-color: rgba(142,124,195,.60); }
.edu-badge--overig{ border-color: rgba(118,165,175,.65); }

/* PO “po-line” */
.po-line{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.po-icoon{
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.po-query{
  font-weight: 800;
}

/* =========================================================
   Filters (details/summary in PO)
   ========================================================= */
.filter-column{
  display: grid;
  gap: 12px;
}

.wk-filter-acc{
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
}

.wk-filter-acc__head{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  background: #f3f3f3;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wk-filter-acc__head::-webkit-details-marker{ display:none; }

.wk-filter-acc__body{
  padding: 10px 12px 12px;
}

.wk-filter-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.wk-filter-li{ margin: 0; }

.wk-filter-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
.wk-filter-row:hover{
  border-color: rgba(0,0,0,.16);
}
.wk-filter-row.is-active{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}
.wk-filter-row input{
  width: 18px;
  height: 18px;
  margin: 0;
}

.wk-vakicon{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Links in filter head (“Wis”) */
.wk-filter-acc a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile filter mount spacing */
.wk-mobile-filters-mount{
  margin: 10px 0 14px;
}

/* =========================================================
   Loading state (PO AJAX)
   ========================================================= */
.wk-loading{
  position: relative;
  pointer-events: none;
  opacity: .65;
}
.wk-loading::after{
  content: "Laden…";
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: .04em;
  color: #222;
  background: rgba(245,247,251,.55);
  border-radius: var(--webkw-radius-md);
}

/* =========================================================
   Nieuws: verticale carrousel (kaders in accentkleur)
   ========================================================= */
.wk-news{
  background: var(--webkw-theme-surface);
  border-radius: var(--webkw-radius-md);
  padding: 14px;
  box-shadow: var(--webkw-shadow-soft);
  border: 2px solid var(--webkw-accent);
}

.wk-news__title{ margin: 0 0 10px; font-size: 1.05rem; }

.wk-news__viewport{
  max-height: 520px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding-right: 6px;
}

.wk-news__item{
  scroll-snap-align: start;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  background: #fafafa;
  border: 2px solid var(--webkw-accent);
}

.wk-news__date{ font-size: .82rem; opacity: .75; }
.wk-news__headline{ font-weight: 800; margin: 3px 0 4px; }
.wk-news__text{ margin: 0; font-size: .93rem; }
.wk-news__hint{ margin-top: 10px; font-size: .88rem; opacity: .75; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .wk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .wk-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .wk-grid{ grid-template-columns: 1fr; }

  .wk-topbar__inner{ gap: 10px; }
  .wk-brand__logo{ width: 55px; height: 55px; }
  .wk-brand__title{ font-size: 1.1rem; letter-spacing: 0.2em; transform: translateY(-1px); }
  .wk-brand__sub{ font-size: 0.7rem; transform: translateY(1px); }

  .wk-switch select{ height: var(--webkw-control-h); width: 320px; }
  .wk-search input[type="search"]{ width: 140px; }
}

/* Smalle tablet/telefoon: topbar wrap */
@media (max-width: 860px){
  .wk-topbar__inner{
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .wk-switch{
    margin-left: 0;
    margin-right: 0;
  }

  .wk-search{
    width: 100%;
    justify-content: flex-start;
  }

  .wk-search input[type="search"]{
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   Verbeterde Footer - Webkwestie
   ========================================================= */
.wk-footer {
  margin-top: 80px; /* Iets meer ademruimte boven de footer */
  background: var(--webkw-theme-surface); /* Gebruikt de witte variabele */
  border-top: 4px solid var(--webkw-accent);
  padding: 50px 0 0 0;
  color: #444;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.02); /* Zeer subtiele schaduw voor diepte */
}

/* De grid layout */
.wk-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

/* Branding kolom met logo */
.wk-footer__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--webkw-font-head);
  font-size: 1.3rem;
  color: var(--webkw-accent);
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

.wk-footer__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  /* Maakt het logo iets zachter in de footer vergeleken met de header */
  filter: grayscale(0.2) brightness(1.1);
  transition: filter 0.3s ease;
}

.wk-footer__panel:hover .wk-footer__logo {
  filter: grayscale(0) brightness(1);
}

/* Subtitels boven de lijsten */
.wk-footer__subtitle {
  font-family: var(--webkw-font-head);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  color: var(--webkw-theme-text);
  position: relative;
}

.wk-footer__text {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 340px;
  color: #666;
}

/* Lijsten & Navigatie */
.wk-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wk-footer__list li {
  margin-bottom: 12px;
}

.wk-footer__list a {
  font-size: 0.95rem;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.wk-footer__list a:hover,
.wk-footer__list a:focus {
  color: var(--webkw-accent);
  transform: translateX(5px);
  outline: none;
}

/* Home link onder de tekst */
.wk-footer__link-alt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--webkw-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wk-footer__link-alt:hover {
  text-decoration: underline;
}

.wk-footer__icon {
  font-size: 1.1rem;
}

/* Onderbalk (Copyright) */
.wk-footer__bottom {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 25px 0;
  text-align: center;
  font-size: 0.85rem;
  background: rgba(0,0,0,0.01); /* Heel licht grijs voor contrast */
  color: #888;
}

.wk-footer__sep {
  margin: 0 10px;
  color: #ccc;
}

/* Responsive aanpassingen */
@media (max-width: 860px) {
  .wk-footer {
    margin-top: 40px;
    padding-top: 30px;
  }

  .wk-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .wk-footer__title {
    justify-content: center;
  }

  .wk-footer__text {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .wk-footer__list a:hover {
    transform: none; /* Geen schuif-effect op mobiel */
    text-decoration: underline;
  }
}

.mondriaan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0; /* Geen witruimte tussen de blokken voor de echte Mondriaan-look */
  border: 4px solid #000;
}

.mondriaan-blok {
  border: 2px solid #000;
  padding: 20px;
  transition: transform 0.2s;
}

.mondriaan-blok:hover {
  transform: scale(1.02);
  position: relative; /* Zorgt ervoor dat z-index werkt */
  z-index: 10;        /* Tilt het blok boven de rest uit */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Optioneel: geeft een lichte diepte bij hover */
}