/* Windswept Technical — design system voor wingsurf.tv.
   Enige bron van kleuren/fonts voor index.html (homepage), nieuws.html,
   terminology.html en scholen-winkels.html, en (alleen voor de gedeelde
   nav/header) voor foil-data-explorer.html. De dashboard-content zelf op
   die laatste pagina heeft een eigen, losstaand donker thema en leest hier
   niet uit. */
:root{
  --bg:#0B0F17;
  --text:#E7EEF5;
  --text-muted:#A9B8C6;
  --text-faint:#8CA0B3;
  --text-dim:#5E6E7C;
  --border:rgba(255,255,255,0.08);
  --surface:rgba(255,255,255,0.04);
  --accent:#35D0C0;
  --accent-alt:#E8262A;
}
*{box-sizing:border-box;}
html{font-size:120%;} /* +20% site-breed leesbaarheid t.o.v. het rem-gebaseerde design-systeem */
html,body{margin:0;}
body{background:var(--bg); color:var(--text-muted); font-family:'IBM Plex Sans', system-ui, sans-serif; line-height:1.6; padding:0;}
.wrap{max-width:760px; margin:0 auto; padding:36px 20px 70px;}
/* Home, Nieuws, Schools & Shops en Terminology: 50% breder (1-10-2026, op verzoek).
   Updates en de artikelpagina's houden 760px (leesbreedte voor lopende tekst). */
.wrap.wrap-wide{max-width:1140px;}
h1,h2{font-family:'Space Grotesk', sans-serif; font-weight:600; text-wrap:balance; margin:0; color:var(--text);}
a{color:var(--accent);}

/* --- site header: logo + nav, buiten .wrap, edge-to-edge balk --- */
.site-header{
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:16px 24px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{position:relative; width:16px; height:16px; flex:none;}
.brand-mark i{position:absolute; width:10px; height:10px; border-radius:2px; display:block;}
.brand-mark i:first-child{top:0; left:0; background:var(--accent); z-index:2;}
.brand-mark i:last-child{top:3px; left:3px; background:var(--accent-alt); z-index:1;}
.brand-name{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:22.8px; color:var(--text);}
.brand-name .tld{color:var(--accent);}
.site-nav{display:flex; gap:24px; flex-wrap:wrap;}
.site-nav a{font-family:'IBM Plex Sans', sans-serif; font-size:15.6px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--text-faint); padding-bottom:4px; border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--text);}
.site-nav a.active{color:var(--text); border-bottom-color:var(--accent);}

/* Zelfde recept als .translated-tag (klein, pil-vorm, accentkleur) -- eigen naam
   i.p.v. hergebruik van de oude, inmiddels verwijderde .beta-badge: dat was een
   ander concept ("statische snapshot, geen live data"-disclaimer), dit is een
   generieke "nog in beta"-indicator naast een menu-item/H1. Expliciete
   text-transform:uppercase (niet impliciet via .site-nav a) omdat deze class op
   twee plekken staat: in de (al uppercase) nav, en naast een H1 die dat niet is. */
.beta-tag{
  font-family:'IBM Plex Sans', sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(53,208,192,.35); border-radius:99px; padding:1px 7px;
  margin-left:6px; vertical-align:middle;
}

.masthead{display:flex; flex-direction:column; gap:14px; padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:8px;}
.masthead h1{font-size:clamp(1.9rem, 4.2vw, 3.25rem); line-height:1.04; letter-spacing:-.02em;}
.masthead p{max-width:58ch; color:var(--text-muted); font-size:1rem;}

.cta{
  display:inline-block; background:var(--accent); color:var(--bg);
  padding:12px 20px; border-radius:6px; font-weight:600; min-height:44px;
  font-family:'IBM Plex Sans', sans-serif; text-decoration:none; margin-top:6px;
}
.cta:hover{opacity:.92;}

/* --- homepage: 4 volledig klikbare kaarten --- */
/* Geen bestaand grid-patroon om te hergebruiken (dit is de eerste CSS Grid
   op de site) -- wel dezelfde bouwstenen als overal (surface/border/accent,
   Space Grotesk + IBM Plex Sans), alleen een nieuwe lay-out. De Explorer-
   kaart pakt de volle breedte (grid-column:1/-1), de andere drie vormen
   daaronder vanzelf een rij van 3 -- geen aparte grid-template-areas nodig. */
.home-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:40px;}
.home-card{
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:20px 22px; text-decoration:none; color:inherit; transition:border-color .15s;
}
.home-card:hover, .home-card:focus-visible{border-color:var(--accent); outline:none;}
.home-card-featured{grid-column:1/-1;}
.home-card h2{font-size:1.1rem; margin-bottom:8px; display:flex; align-items:center; flex-wrap:wrap;}
.home-card p{color:var(--text-muted); font-size:.92rem; margin:0 0 12px;}
.home-card-stat{font-family:'IBM Plex Sans', sans-serif; font-size:.8rem; color:var(--text-faint);}
@media (max-width:640px){
  .home-grid{grid-template-columns:1fr;}
}

.example-shot{display:block; max-width:640px; margin-top:24px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface);}
.example-shot img{display:block; width:100%; height:auto;}
.example-shot:hover{border-color:var(--accent);}

h2.section-title{font-size:1.05rem; font-family:'Space Grotesk', sans-serif; display:flex; align-items:baseline; gap:8px; margin-bottom:16px;}

/* Zelfde waarden als de oude h2.section-title .count (verwijderd sinds
   nieuws.html zijn eigen "Laatste nieuws"-kop niet meer heeft, zie
   CLAUDE.md "Nieuwe structuur") -- nu een standalone regel boven het
   zoekveld i.p.v. een span in een kop. */

.feed{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:40px;}
.feed .loading{background:var(--bg); padding:16px 18px; color:var(--text-faint); font-size:.9rem;}
.search-box{
  width:100%; padding:10px 14px; font-size:.95rem; border:1px solid var(--border); border-radius:6px;
  background:var(--surface); color:var(--text); font-family:'IBM Plex Sans', sans-serif; margin-bottom:16px;
}
.search-box::placeholder{color:var(--text-dim);}
.item-date{font-family:'IBM Plex Sans', sans-serif; font-size:.72rem; color:var(--text-faint);}
.translated-tag{
  font-family:'IBM Plex Sans', sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(53,208,192,.35); border-radius:99px; padding:1px 7px; cursor:help;
}
.hashtags{display:flex; flex-wrap:wrap; gap:6px;}
.hashtag{
  font-family:'IBM Plex Sans', sans-serif; font-size:.72rem; color:var(--text-faint);
  background:rgba(255,255,255,.05); border-radius:4px; padding:1px 7px;
}
.hashtag.featured{color:var(--accent-alt); background:rgba(232,38,42,.1);}
.item{background:var(--surface); padding:16px 18px; display:flex; flex-direction:row; gap:14px; align-items:flex-start; border-radius:6px;}
.item.featured{border-left:3px solid var(--accent-alt);}
.item-body{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.thumb{width:120px; height:68px; object-fit:cover; border-radius:4px; background:var(--border); flex:none;}
@media (max-width:480px){
  .item{flex-direction:column;}
  .thumb{width:100%; height:auto; aspect-ratio:16/9;}
}
.item .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.source{font-family:'IBM Plex Sans', sans-serif; font-size:.656rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid rgba(53,208,192,.3); color:var(--accent);}
.item.featured .source{border-color:rgba(232,38,42,.4); color:var(--accent-alt);}
.item h3{font-size:1.0625rem; font-weight:600; margin:0; font-family:'Space Grotesk', sans-serif; line-height:1.3;}
.item h3 a{color:var(--text); text-decoration:none;}
.item h3 a:hover{color:var(--accent);}
.editorial{font-size:.87rem; color:var(--text-muted); border-top:1px dashed var(--border); padding-top:8px; margin-top:2px;}
.editorial .tag{font-family:'IBM Plex Sans', sans-serif; font-size:.65rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-alt); margin-right:6px;}
.editorial.placeholder{color:var(--text-dim); font-style:italic;}
/* Deelknop op /nieuws-kaarten: gevulde cyaan pil rechts in de meta-regel, zodat hij
   duidelijk zichtbaar is (eerste versie met alleen een rand was bijna onzichtbaar). */
.share-btn{
  margin-left:auto; font-family:'IBM Plex Sans', sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bg); background:var(--accent); border:1px solid var(--accent); border-radius:99px; padding:4px 12px; cursor:pointer;
}
.share-btn:hover{opacity:.88;}
.share-btn:focus-visible{outline:2px solid var(--text); outline-offset:2px;}

/* --- artikelpagina (/nieuws/<slug>) --- */
.article-back{margin:0 0 20px; font-size:.85rem;}
.article-back a{text-decoration:none;}
.article{display:flex; flex-direction:column; gap:14px; padding-bottom:28px; border-bottom:1px solid var(--border);}
.article.featured{border-left:3px solid var(--accent-alt); padding-left:16px;}
.article .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.article h1{font-size:clamp(1.6rem, 3.6vw, 2.4rem); line-height:1.1; letter-spacing:-.015em;}
.article-original-title{margin:0; font-size:.85rem; color:var(--text-faint);}
.article-thumb{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:var(--border);}
.article-actions{margin:6px 0 0;}
.article-original{
  display:inline-block; font-weight:600; text-decoration:none; color:var(--bg); background:var(--accent);
  padding:10px 16px; border-radius:6px; min-height:44px; line-height:24px;
}
.article-original:hover{opacity:.92;}

/* --- weekoverzicht (/weekoverzicht en /weekoverzicht/<week>) --- */
.recap-meta{margin:0; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
.recap-head{display:flex; flex-direction:column; gap:10px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:26px;}
.recap-head h1{font-size:clamp(1.6rem, 3.6vw, 2.4rem); line-height:1.1; letter-spacing:-.015em;}
.recap-body{font-size:1.02rem; line-height:1.7; color:var(--text);}
.recap-body h2{font-size:1.3rem; line-height:1.25; margin:34px 0 10px;}
.recap-body p{margin:0 0 16px;}
.recap-body ul, .recap-body ol{margin:0 0 16px; padding-left:22px;}
.recap-body li{margin-bottom:6px;}
.recap-body li a{word-break:break-word;}
/* Links (alleen nog in de bronnenlijst) in de tekstkleur, met een subtiele
   onderstreping in plaats van accentkleur (op verzoek, 6-10-2026). */
.recap-body a{color:var(--text); text-decoration:underline; text-decoration-color:var(--text-faint); text-underline-offset:3px;}
.recap-body a:hover{text-decoration-color:var(--accent);}
.recap-figure{margin:0 0 26px;}
.recap-figure img{display:block; max-width:100%; height:auto; border-radius:6px;}
.recap-figure figcaption{margin-top:6px; font-size:.8rem; color:var(--text-faint);}
.recap-list{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:24px;}
.recap-card{display:flex; flex-direction:column; gap:8px; background:var(--surface); padding:18px 20px; text-decoration:none; color:inherit;}
.recap-card:hover h2{color:var(--accent);}
.recap-card h2{font-size:1.2rem; line-height:1.25;}
.recap-card p{margin:0; color:var(--text-muted); font-size:.95rem;}
.recap-empty{margin-top:24px; color:var(--text-muted);}
.recap-teaser{margin:18px 0 0; padding:12px 16px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; background:var(--surface); font-size:.95rem;}
.recap-teaser a{text-decoration:none; font-weight:600;}

/* --- terminology --- */
.term-category{font-family:'IBM Plex Sans', sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:28px 0 10px;}
.term-category:first-of-type{margin-top:0;}
.term-grid{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:8px;}
.term-card{background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:8px;}
.term-images{display:flex; flex-wrap:wrap; gap:10px;}
.term-images img{flex:1 1 220px; max-width:280px; border-radius:4px; display:block; cursor:zoom-in;}
.term-card h3{font-size:1.0625rem; font-weight:600; margin:0; font-family:'Space Grotesk', sans-serif;}
.term-card .short-def{color:var(--text-muted); font-size:.92rem;}
.term-card .long-def{color:var(--text-faint); font-size:.87rem; border-top:1px dashed var(--border); padding-top:8px; margin-top:2px;}
.term-card .related{display:flex; flex-wrap:wrap; gap:6px;}

/* --- scholen & winkels --- */
.shop-card{background:var(--surface); padding:16px 18px; display:flex; flex-direction:row; gap:14px; align-items:flex-start; justify-content:space-between;}
.shop-card-body{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0;}
.shop-card h3{font-size:1.0625rem; font-weight:600; margin:0; font-family:'Space Grotesk', sans-serif;}
.shop-card h3 a{color:var(--text); text-decoration:none;}
.shop-card h3 a:hover{color:var(--accent);}
.shop-card .location{color:var(--text-faint); font-size:.87rem;}
.shop-card .notes{color:var(--text-muted); font-size:.92rem;}
.shop-card .brands{display:flex; flex-wrap:wrap; gap:6px;}
.shop-card-logo{flex:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.shop-card-logo img{width:28px; height:28px; object-fit:contain;}

.tabs{display:flex; gap:8px; margin-bottom:16px;}
.tabs button{
  font-family:'IBM Plex Sans', sans-serif; font-size:.78rem; font-weight:500; letter-spacing:.03em;
  padding:7px 14px; border-radius:99px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-faint); cursor:pointer;
}
.tabs button:hover{color:var(--text);}
.tabs button.active{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.term-grid.tab-hidden{display:none;}
.item.search-hidden{display:none;}

.lightbox{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.85);
  align-items:center; justify-content:center; padding:24px; cursor:zoom-out; z-index:1000;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:95vw; max-height:95vh; border-radius:4px; object-fit:contain;}

footer{margin-top:50px; padding-top:18px; border-top:1px solid var(--border); font-size:.8rem; color:var(--text-faint);}
footer p + p{margin-top:8px;}
footer code{color:var(--text-muted);}

/* --- updates & polls --- */
.update-grid{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:32px;}
.update-grid .loading{background:var(--bg); padding:16px 18px; color:var(--text-faint); font-size:.9rem;}
.update-card{background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:8px;}
.update-card .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.update-type{font-family:'IBM Plex Sans', sans-serif; font-size:.656rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid rgba(53,208,192,.3); color:var(--accent);}
.update-card .item-date{margin-left:auto;}
.update-card h3{font-size:1.0625rem; font-weight:600; margin:0; font-family:'Space Grotesk', sans-serif;}
.update-card .body{color:var(--text-muted); font-size:.92rem;}
.update-card .body p, .update-card .body div{margin:0 0 .6em;}
.update-card .body p:last-child, .update-card .body div:last-child{margin-bottom:0;}
.update-card .body a{color:var(--accent);}
.update-card .body img{display:block; max-width:100%; height:auto; border-radius:4px; margin:8px 0;}

/* --- updates: login-gated editor (alleen zichtbaar voor de ingelogde eigenaar) --- */
.update-admin-bar{display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:.85rem; font-family:'IBM Plex Sans', sans-serif;}
.update-admin-bar .status{color:var(--text-muted);}
.update-admin-bar button, .update-admin-bar a{
  font-family:'IBM Plex Sans', sans-serif; font-size:.82rem; font-weight:600; cursor:pointer;
  background:none; border:none; color:var(--accent); padding:0; text-decoration:underline;
}
.update-admin-bar .cta{margin-top:0; padding:8px 16px; min-height:auto;}
.update-card-actions{display:flex; gap:12px; margin-top:2px;}
.update-card-actions button{
  font-family:'IBM Plex Sans', sans-serif; font-size:.78rem; font-weight:600; cursor:pointer;
  background:none; border:none; color:var(--text-faint); padding:0; text-decoration:underline;
}
.update-card-actions button:hover{color:var(--accent);}
.update-card-actions .delete:hover{color:var(--accent-alt);}

.update-form{background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:18px 20px; margin-bottom:24px; display:flex; flex-direction:column; gap:12px;}
.update-form label{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--text-muted); font-family:'IBM Plex Sans', sans-serif;}
.update-form input[type="text"], .update-form input[type="date"], .update-form select{
  font-family:'IBM Plex Sans', sans-serif; font-size:.92rem; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:6px; padding:9px 12px;
}
.update-form-row{display:flex; gap:12px; flex-wrap:wrap;}
.update-form-row > label{flex:1; min-width:140px;}
.update-toolbar{display:flex; gap:6px;}
.update-toolbar button{
  font-family:'Space Grotesk', sans-serif; font-size:.85rem; font-weight:600; cursor:pointer;
  width:34px; height:34px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text);
}
.update-toolbar button:hover{border-color:var(--accent); color:var(--accent);}
.update-body-editor{
  min-height:140px; border:1px solid var(--border); border-radius:6px; padding:10px 12px;
  font-size:.92rem; color:var(--text); background:var(--bg); line-height:1.5;
}
.update-body-editor:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.update-body-editor img{max-width:100%; border-radius:4px;}
.update-form-actions{display:flex; gap:10px;}
.update-form-actions button{
  font-family:'IBM Plex Sans', sans-serif; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:9px 16px; border-radius:6px; border:1px solid var(--border);
}
.update-form-actions .save{background:var(--accent); color:var(--bg); border-color:var(--accent);}
.update-form-actions .cancel{background:transparent; color:var(--text-muted);}

.polls{display:flex; flex-direction:column; gap:16px; margin-bottom:32px;}
.poll-card{background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:18px 20px;}
.poll-card h3{font-size:1rem; font-weight:600; margin:0 0 12px; font-family:'Space Grotesk', sans-serif; display:flex; align-items:center; flex-wrap:wrap;}
.poll-card .closed-tag{font-family:'IBM Plex Sans', sans-serif; font-size:.656rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-left:8px;}
.poll-options{display:flex; flex-direction:column; gap:8px;}
.poll-option{
  display:block; width:100%; text-align:left; padding:10px 14px; font-size:.92rem;
  font-family:'IBM Plex Sans', sans-serif; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
}
.poll-option:hover{border-color:var(--accent); color:var(--accent);}
.poll-option:disabled{cursor:default; opacity:.6;}
.poll-results{display:flex; flex-direction:column; gap:10px;}
.poll-result-row{display:flex; flex-direction:column; gap:4px;}
.poll-result-row .label-row{display:flex; justify-content:space-between; gap:10px; font-size:.87rem; color:var(--text-muted);}
.poll-result-row .label-row b{color:var(--text); font-weight:600;}
.poll-bar{height:6px; border-radius:6px; background:var(--border); overflow:hidden;}
.poll-bar i{display:block; height:100%; background:var(--accent); border-radius:6px;}
.poll-meta{font-size:.78rem; color:var(--text-faint); margin-top:8px;}

/* --- cookie consent banner --- */
#cookie-consent{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:1000;
  max-width:480px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:18px 20px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
#cookie-consent p{ margin:0 0 12px; font-size:.85rem; color:var(--text-muted); line-height:1.5; }
.cookie-consent-actions{ display:flex; gap:10px; }
.cookie-consent-actions button{
  flex:1; padding:9px 12px; font-size:.85rem; font-weight:600; border-radius:6px;
  cursor:pointer; font-family:'IBM Plex Sans', sans-serif; border:1px solid var(--border);
}
#cookie-accept{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
#cookie-decline{ background:transparent; color:var(--text-muted); }
#cookie-decline:hover{ color:var(--text); }
@media (max-width:480px){
  #cookie-consent{ left:12px; right:12px; bottom:12px; padding:16px; }
}