/* Windswept Technical — design system voor wingsurf.tv.
   Enige bron van kleuren/fonts voor index.html, terminology.html en
   scholen-winkels.html, en (alleen voor de gedeelde nav/header) voor
   visualisaties.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;}
h1,h2{font-family:'Space Grotesk', sans-serif; font-weight:600; text-wrap:balance; margin:0; color:var(--text);}
a{color:var(--accent);}

/* --- gate --- */
#gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
#gate .card{
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:32px 28px; max-width:360px; width:100%; text-align:center;
}
#gate .card p.eyebrow{font-family:'IBM Plex Sans', sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 10px;}
#gate .card h1{font-size:1.4rem; margin-bottom:16px;}
#gate input[type="password"]{
  width:100%; padding:10px 12px; font-size:1rem; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', sans-serif; margin-bottom:12px;
}
#gate button{
  width:100%; padding:10px 12px; font-size:1rem; font-weight:600; border:none; border-radius:6px;
  background:var(--accent); color:var(--bg); cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
}
#gate button:hover{opacity:.92;}
#gate .err{color:var(--accent-alt); font-size:.85rem; margin-top:10px; min-height:1.2em;}

/* --- 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);}

.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;}

.sub-en{border-top:1px dotted var(--accent-alt); padding-top:6px; margin-top:6px; font-style:italic;}

h2.section-title{font-size:1.05rem; font-family:'Space Grotesk', sans-serif; display:flex; align-items:baseline; gap:8px; margin-bottom:16px;}
h2.section-title .count{font-family:'IBM Plex Sans', sans-serif; font-size:.8rem; color:var(--text-faint); font-weight:500; text-transform:none; letter-spacing:0;}

.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;}

/* --- 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;}

.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);}