/*
Theme Name: KbM Nieuws – NU-style
Theme URI: https://katbijtmuis.nl/
Author: Kat bijt Muis
Description: Nieuwswaardige, NU.nl-achtige lay-out voor KbM Nieuws (werkt met de plugin KbM Nieuws).
Version: 1.0.2
License: GPLv2 or later
Text Domain: kbm-nu
*/

:root{
  --kbm-blue:#214c6e;
  --kbm-blue-2:#17344b;
  --kbm-accent:#ff2d2d;
  --kbm-bg:#f4f5f7;
  --kbm-card:#ffffff;
  --kbm-text:#0f172a;
  --kbm-muted:#64748b;
  --kbm-border:rgba(15,23,42,.10);
  --kbm-radius:16px;
  --kbm-shadow:0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--kbm-text);
  background:var(--kbm-bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

.kbm-container{max-width:1180px; margin:0 auto; padding:0 14px}

.kbm-topbar{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--kbm-border);
}
.kbm-topbar-inner{
  display:flex; align-items:center; gap:14px;
  padding:10px 0;
}
.kbm-brand{
  display:flex; align-items:center; gap:10px; min-width:220px;
}
.kbm-logo{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, var(--kbm-blue), #2b6a9a);
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(33,76,110,.18);
  overflow:hidden;
}
.kbm-logo img{width:100%; height:100%; object-fit:contain; background:transparent}
.kbm-brand-title{line-height:1}
.kbm-brand-title strong{display:block; font-size:16px; letter-spacing:.2px}
.kbm-brand-title span{display:block; font-size:12px; color:var(--kbm-muted)}

.kbm-nav{
  display:flex; align-items:center; gap:10px; flex:1;
  flex-wrap:nowrap;
  overflow-x:auto;
  min-width:0;
}
.kbm-nav::-webkit-scrollbar{height:0}
.kbm-nav a{
  font-weight:700;
  padding:10px 10px;
  border-radius:12px;
  color:var(--kbm-blue-2);
  white-space:nowrap;
}
.kbm-nav a:hover{background:rgba(33,76,110,.08)}
.kbm-nav a.is-active{background:rgba(33,76,110,.12)}

.kbm-right{
  display:flex; align-items:center; gap:10px;
}
.kbm-weather-pill{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid var(--kbm-border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
  cursor:pointer;
}
.kbm-weather-pill .kbm-w-ico{
  width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(33,76,110,.10);
}
.kbm-weather-pill .kbm-w-temp{font-weight:900}
.kbm-weather-pill .kbm-w-desc{font-size:12px; color:var(--kbm-muted); max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kbm-weather-pill .kbm-w-alert{
  display:none;
  font-size:12px; font-weight:900;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,45,45,.12);
  color:var(--kbm-accent);
}
.kbm-weather-pill.is-alert .kbm-w-alert{display:inline-flex}

.kbm-iconbtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--kbm-border);
  background:#fff;
  display:grid; place-items:center;
  cursor:pointer;
}

/* Mobile header: use burger + drawer instead of letting the menu wrap into a tall column */
@media (max-width: 860px){
  .kbm-brand{min-width:0}
  .kbm-nav{display:none}
  .kbm-weather-pill .kbm-w-desc{display:none}
  .kbm-subbar-inner{flex-direction:column; align-items:stretch}
  .kbm-source-select{width:100%}
  .kbm-source-select input{flex:1}
}
.kbm-iconbtn:hover{box-shadow:0 10px 22px rgba(2,6,23,.08)}
.kbm-burger{font-size:18px}
.kbm-search-ico{font-size:18px}

.kbm-subbar{
  background:linear-gradient(90deg, rgba(33,76,110,.06), rgba(33,76,110,.02));
  border-bottom:1px solid var(--kbm-border);
}
.kbm-subbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0;
  color:var(--kbm-muted);
  font-size:13px;
}
.kbm-subbar .kbm-source-select{
  display:flex; align-items:center; gap:8px;
}
.kbm-subbar select, .kbm-subbar input{
  border:1px solid var(--kbm-border);
  border-radius:12px;
  padding:8px 10px;
  background:#fff;
  font:inherit;
}
.kbm-subbar button{
  border:0;
  border-radius:12px;
  padding:9px 12px;
  background:var(--kbm-blue);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.kbm-subbar button:hover{filter:brightness(0.95)}

.kbm-drawer{
  position:fixed; inset:0; z-index:80;
  display:none;
}
.kbm-drawer.is-open{display:block}
.kbm-drawer-backdrop{
  position:absolute; inset:0; background:rgba(2,6,23,.45);
}
.kbm-drawer-panel{
  position:absolute; top:0; right:0;
  height:100%; width:min(360px, 92vw);
  background:#fff;
  border-left:1px solid var(--kbm-border);
  box-shadow:var(--kbm-shadow);
  padding:16px;
  display:flex; flex-direction:column; gap:12px;
}
.kbm-drawer-panel h3{margin:6px 0 0; font-size:14px; color:var(--kbm-muted)}
.kbm-drawer-links{display:grid; gap:6px}
.kbm-drawer-links a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--kbm-border);
  background:linear-gradient(180deg, #fff, #fafafa);
  font-weight:900;
}
.kbm-drawer-links a:hover{background:rgba(33,76,110,.07)}
.kbm-drawer-close{
  align-self:flex-end;
  border:0; background:rgba(2,6,23,.06);
  border-radius:12px;
  padding:10px 12px; cursor:pointer; font-weight:900;
}

.kbm-main{padding:16px 0 26px}
.kbm-grid{
  display:grid;
  grid-template-columns: 1.65fr .95fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .kbm-grid{grid-template-columns:1fr}
}

.kbm-card{
  background:var(--kbm-card);
  border:1px solid var(--kbm-border);
  border-radius:var(--kbm-radius);
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  overflow:hidden;
}
.kbm-card-pad{padding:14px}

.kbm-section-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 10px;
}
.kbm-section-title h2{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.kbm-section-title a{
  font-weight:900;
  color:var(--kbm-blue);
  font-size:13px;
}

.kbm-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
}
@media (max-width: 720px){ .kbm-hero{grid-template-columns:1fr} }

.kbm-story{
  display:flex; gap:12px;
}
.kbm-story.is-big{flex-direction:column; gap:0}
.kbm-thumb{
  width:86px; height:86px;
  border-radius:14px;
  background:#e5e7eb;
  flex:0 0 auto;
  overflow:hidden;
  position:relative;
}
.kbm-story.is-big .kbm-thumb{
  width:100%; height:220px; border-radius:0;
}
.kbm-thumb img{width:100%; height:100%; object-fit:cover}
.kbm-thumb .kbm-thumbmark{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:1000;
  font-size:18px;
  color:#fff;
  background:linear-gradient(135deg, var(--kbm-blue), #3e88bb);
}
.kbm-story-body{min-width:0}
.kbm-meta{
  font-size:12px;
  color:var(--kbm-muted);
  display:flex; gap:6px; align-items:center;
}
.kbm-meta .dot{opacity:.7}
.kbm-title{
  margin:4px 0 0;
  font-weight:950;
  letter-spacing:.1px;
}
.kbm-title.big{font-size:20px}
.kbm-excerpt{
  margin:6px 0 0;
  color:var(--kbm-muted);
  font-size:13px;
  line-height:1.35;
}
.kbm-breaking{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  font-size:12px;
  color:var(--kbm-accent);
  margin:0 0 8px;
}
.kbm-breaking .pulse{
  width:10px; height:10px; border-radius:999px;
  background:var(--kbm-accent);
  box-shadow:0 0 0 0 rgba(255,45,45,.55);
  animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,45,45,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,45,45,0)}
  100%{box-shadow:0 0 0 0 rgba(255,45,45,0)}
}

.kbm-list{display:grid; gap:10px}
.kbm-mini-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){ .kbm-mini-grid{grid-template-columns:1fr} }

.kbm-catblock{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
}
@media (max-width: 720px){ .kbm-catblock{grid-template-columns:1fr} }

.kbm-sidecard .kbm-card-pad{padding:12px}
.kbm-sidecard h3{margin:0 0 8px; font-size:16px}
.kbm-side-weather{
  display:grid; gap:10px;
}
.kbm-side-weather .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:14px;
  background:linear-gradient(180deg, rgba(33,76,110,.08), rgba(33,76,110,.03));
}
.kbm-side-weather .row strong{font-size:18px}
.kbm-side-weather .row span{color:var(--kbm-muted); font-size:13px}

.kbm-footer{
  padding:22px 0 28px;
  color:var(--kbm-muted);
  font-size:13px;
  border-top:1px solid var(--kbm-border);
  background:#fff;
}

/* --- Plugin template tweaks (kbmnews-template.php) --- */
.kbmnews-wrap{max-width:1180px; margin:0 auto; padding:14px}
.kbmnews-header{
  background:#fff;
  border:1px solid var(--kbm-border);
  border-radius:var(--kbm-radius);
  padding:14px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
}
.kbmnews-logo{display:none !important}
.kbmnews-brand h1{margin:0; font-size:20px; letter-spacing:.2px}
.kbmnews-brand p{margin:6px 0 0; color:var(--kbm-muted)}
.kbmnews-filters{margin-top:12px}
.kbmnews-filters input, .kbmnews-filters select{
  border:1px solid var(--kbm-border);
  border-radius:12px;
  padding:10px 12px;
}
.kbmnews-filters button{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  background:var(--kbm-blue);
  color:#fff;
  font-weight:900;
}
.kbmnews-grid{display:grid; grid-template-columns: 1.65fr .95fr; gap:16px; margin-top:14px}
@media (max-width:980px){ .kbmnews-grid{grid-template-columns:1fr} }
.kbmnews-main, .kbmnews-side{min-width:0}
.kbmnews-hero, .kbmnews-list, .kbmnews-weather, .kbmnews-radar, .kbmnews-about{
  background:#fff;
  border:1px solid var(--kbm-border);
  border-radius:var(--kbm-radius);
  padding:14px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
}
.kbmnews-hero h2, .kbmnews-list h2, .kbmnews-weather h2, .kbmnews-radar h2, .kbmnews-about h2{
  margin:0 0 10px;
  font-size:18px;
}
.kbmnews-hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:12px}
@media (max-width:720px){ .kbmnews-hero-grid{grid-template-columns:1fr} }
.kbmnews-card{
  border:1px solid var(--kbm-border);
  border-radius:var(--kbm-radius);
  overflow:hidden;
  background:#fff;
}
.kbmnews-card .kbmnews-card-link{display:flex; gap:12px; padding:12px}
.kbmnews-card.is-big .kbmnews-card-link{flex-direction:column; padding:0}
.kbmnews-thumb{width:86px; height:86px; border-radius:14px; background-size:cover; background-position:center}
.kbmnews-card.is-big .kbmnews-thumb{width:100%; height:220px; border-radius:0}
.kbmnews-card-body{min-width:0}
.kbmnews-title{margin:6px 0 0; font-weight:950}
.kbmnews-card.is-big .kbmnews-title{font-size:20px}
.kbmnews-excerpt{margin:8px 0 0; color:var(--kbm-muted)}
.kbmnews-pagination{padding-top:10px}
.kbmnews-pagination .page-numbers{
  display:inline-flex;
  padding:8px 11px;
  border-radius:12px;
  border:1px solid var(--kbm-border);
  margin-right:6px;
  background:#fff;
  font-weight:800;
}
.kbmnews-pagination .current{background:rgba(33,76,110,.12)}

/* Weather page */
.kbm-weather-page{
  /* glassy container so the full-page FX stays visible behind */
  background:rgba(255,255,255,.72);
  border:1px solid var(--kbm-border);
  border-radius:var(--kbm-radius);
  box-shadow:0 14px 34px rgba(2,6,23,.10);
  overflow:hidden;
  backdrop-filter: blur(14px);
}

body.kbm-page-weer{
  background:transparent;
}

body.kbm-page-weer .kbm-container{
  position:relative;
}
.kbm-weather-hero{
  padding:16px;
  background:linear-gradient(135deg, rgba(33,76,110,.18), rgba(33,76,110,.02));
  border-bottom:1px solid var(--kbm-border);
}

.kbm-weather-hero{position:relative; overflow:hidden;}
.kbm-weather-hero > *{position:relative; z-index:2;}
#kbmWeatherFX{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  #kbmWeatherFX{display:none !important;}
}

/* Full-page FX canvas (behind everything) */
.kbm-weather-backdrop{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.kbm-weather-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
             radial-gradient(900px 520px at 85% 15%, rgba(33,76,110,.14), rgba(0,0,0,0) 65%),
             radial-gradient(1000px 760px at 50% 95%, rgba(0,0,0,.20), rgba(0,0,0,0) 60%);
  opacity:1;
}
.kbm-weather-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0));
  opacity:.85;
  mix-blend-mode:soft-light;
}

/* Weather-type overlays (extra "app" vibe) */
html[data-kbm-wx="rain"] .kbm-weather-backdrop::after,
html[data-kbm-wx="storm"] .kbm-weather-backdrop::after{
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)),
             radial-gradient(900px 520px at 50% 20%, rgba(120,210,255,.08), rgba(0,0,0,0) 60%);
  opacity:1;
}
html[data-kbm-wx="snow"] .kbm-weather-backdrop::after{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
             radial-gradient(1000px 560px at 50% 15%, rgba(200,240,255,.10), rgba(0,0,0,0) 65%);
  opacity:.95;
}
html[data-kbm-wx="fog"] .kbm-weather-backdrop::after{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,0)),
             radial-gradient(1100px 700px at 50% 40%, rgba(255,255,255,.10), rgba(0,0,0,0) 70%);
  opacity:1;
}
html[data-kbm-wx="sun"] .kbm-weather-backdrop::after,
html[data-kbm-wx="clear"] .kbm-weather-backdrop::after{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0)),
             radial-gradient(800px 520px at 78% 18%, rgba(255,240,160,.14), rgba(0,0,0,0) 62%);
  opacity:.95;
}
.kbm-weather-backdrop canvas{
  width:100%;
  height:100%;
  display:block;
  filter: saturate(1.15) blur(0px);
}
@media (prefers-reduced-motion: reduce){
  .kbm-weather-backdrop{display:none !important;}
}

/* Give panels a more app-like glass look on the weather page */
.kbm-weather-page .kbm-panel{
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}
.kbm-weather-hero h1{margin:0; font-size:22px}
.kbm-weather-hero p{margin:8px 0 0; color:var(--kbm-muted)}
.kbm-weather-controls{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px;
}
.kbm-weather-controls input, .kbm-weather-controls select{
  border:1px solid var(--kbm-border);
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}
.kbm-weather-controls button{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  background:var(--kbm-blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.kbm-weather-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){ .kbm-weather-grid{grid-template-columns:1fr} }
.kbm-map{
  /* Groter zodat de Buienradar gadget niet hoeft te scrollen */
  height:560px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--kbm-border);
}

/* Buienradar live iframe should fully cover the map area (onder de radarbar) */
#kbmWxRadarOnly{position:relative;}
.kbm-wx-radarbar{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  z-index:5;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border:1px solid var(--kbm-border);
}
.kbm-wx-locpill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--kbm-border);
  font-weight:900;
  color:var(--kbm-text);
}
.kbm-wx-locpill strong{font-size:18px; margin-left:2px}
.kbm-wx-radarsearch{display:flex; gap:8px; align-items:center}
.kbm-wx-radarsearch input{
  width:220px;
  max-width:38vw;
  border:1px solid var(--kbm-border);
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}
.kbm-wx-radarsearch button{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  background:var(--kbm-blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

#kbmBuienradarFrame{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.kbm-weather-panels{
  display:grid;
  gap:12px;
  /* Voorkom 'gaten' doordat de rechterkolom meerekt met links */
  align-content:start;
  align-items:start;
}
.kbm-panel{
  border:1px solid var(--kbm-border);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(180deg, #fff, #fafafa);
}
.kbm-now{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.kbm-now .bigtemp{font-size:44px; font-weight:1000; letter-spacing:-1px}
.kbm-now .desc{color:var(--kbm-muted); font-weight:800}
.kbm-now .meta{color:var(--kbm-muted); font-size:13px}
.kbm-hours{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 720px){ .kbm-hours{grid-template-columns: repeat(3, minmax(0,1fr))} }
.kbm-hour{
  border:1px solid var(--kbm-border);
  border-radius:16px;
  padding:10px;
  background:#fff;
}
.kbm-hour strong{display:block; font-size:14px}
.kbm-hour span{display:block; color:var(--kbm-muted); font-size:12px; margin-top:4px}

/* Weather tabs (Radar / Verwachting) */
.kbm-wx-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.kbm-wx-tab{
  border:1px solid var(--kbm-border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}
.kbm-wx-tab.is-active{
  background:var(--kbm-blue);
  color:#fff;
  border-color:transparent;
}
.kbm-wx-tabtools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.kbm-wx-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--kbm-border);
  background:#fff;
  font-size:12px;
  color:var(--kbm-muted);
  font-weight:800;
}
.kbm-wx-mini{
  border:1px solid var(--kbm-border);
  background:#fff;
  border-radius:12px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.kbm-wx-mini.is-active{
  background:rgba(33,76,110,.12);
  border-color:rgba(33,76,110,.25);
}
#kbmWxRadarRange{
  width:220px;
}
@media (max-width: 720px){
  .kbm-wx-tabtools{width:100%}
  #kbmWxRadarRange{width:100%}
}


/* Weather marker badge: auto size, never clipped */
.kbm-wx-marker{
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.kbm-wx-marker .kbm-wx-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  white-space: nowrap;
  max-width: min(560px, 92vw);
}
.kbm-wx-marker .kbm-wx-badge .kbm-wx-temp{
  font-weight: 800;
}


/* KNMI Weather Text */
#kbmWxTextBody h2{margin:0 0 6px;font-size:18px;font-weight:800;}
#kbmWxTextBody p{margin:0 0 12px;line-height:1.7;}
#kbmWxTextBody p.intro{font-weight:800;margin-bottom:8px;}
#kbmWxTextBody p.meta{font-size:12px;opacity:.7;margin-top:10px;}

<?php
if (!defined('ABSPATH')) exit;

/**
 * Enqueue load-more script
 */
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script(
    'kbm-load-more',
    get_stylesheet_directory_uri() . '/assets/js/kbm-load-more.js',
    [],
    '1.0.0',
    true
  );

  wp_localize_script('kbm-load-more', 'KBM_LOAD', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('kbm_load_more'),
  ]);
});

/**
 * AJAX: load more kbm_nieuws
 */
add_action('wp_ajax_kbm_load_more', 'kbm_ajax_load_more');
add_action('wp_ajax_nopriv_kbm_load_more', 'kbm_ajax_load_more');

function kbm_ajax_load_more() {
  check_ajax_referer('kbm_load_more', 'nonce');

  $paged     = max(1, intval($_POST['page'] ?? 1));
  $rubriek   = sanitize_text_field($_POST['rubriek'] ?? '');
  $search    = sanitize_text_field($_POST['s'] ?? '');
  $exclude   = array_filter(array_map('intval', explode(',', (string)($_POST['exclude'] ?? ''))));
  $per_page  = 10;

  $args = [
    'post_type'      => 'kbm_nieuws',
    'post_status'    => 'publish',
    'posts_per_page' => $per_page,
    'paged'          => $paged,
    'post__not_in'   => $exclude,
  ];

  if ($search !== '') {
    $args['s'] = $search;
  }

  if ($rubriek !== '') {
    $args['tax_query'] = [[
      'taxonomy' => 'kbm_rubriek',
      'field'    => 'slug',
      'terms'    => $rubriek,
    ]];
  }

  $q = new WP_Query($args);

  ob_start();
  if ($q->have_posts()) {
    while ($q->have_posts()) { $q->the_post();
      get_template_part('template-parts/kbm', 'row'); // we maken dit part hieronder
    }
    wp_reset_postdata();
  }
  $html = ob_get_clean();

  wp_send_json_success([
    'html'      => $html,
    'max_pages' => (int)$q->max_num_pages,
  ]);
}


/* ===== Weather FX: rain-on-glass + parallax layers ===== */
#kbmWeatherGlass, #kbmWeatherGlassFull{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.85;
}
#kbmWeatherGlassFull{
  opacity:.55;
  mix-blend-mode:screen;
  filter: blur(.2px);
}
#kbmWeatherGlass{
  mix-blend-mode:screen;
  filter: blur(.3px);
}
.kbm-weather-hero{
  position:relative;
}
.kbm-weather-backdrop{
  position:fixed;
}


/* --- Weather radar source toggle + map wrappers --- */
.kbm-wx-source{display:flex; gap:8px; margin-right:auto;}
.kbm-wx-srcbtn{
  border:1px solid var(--kbm-border);
  background:rgba(255,255,255,.85);
  color:var(--kbm-text);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  cursor:pointer;
}
.kbm-wx-srcbtn.is-active{
  background:var(--kbm-blue);
  color:#fff;
  border-color:transparent;
}
.kbm-wx-mapwrap.kbm-map{
  position:relative;
  height:560px;
  border-radius:14px;
  overflow:hidden;
}
.kbm-map__leaflet,
.kbm-map__buienradar{
  position:absolute;
  inset:0;
}
@media (max-width: 920px){
  .kbm-wx-mapwrap.kbm-map{height:480px;}
}
@media (max-width: 640px){
  .kbm-wx-source{width:100%; justify-content:flex-start; flex-wrap:wrap}
  .kbm-wx-mapwrap.kbm-map{height:360px;}
}

/* Fix: prevent empty "gaten" on mobile by removing hard min-heights in weather panels */
@media (max-width: 820px){
  .kbm-wx-side .kbm-panel{min-height:0 !important;}
  .kbm-wx-side{align-self:stretch;}
}



/* === Weather radar (RainViewer) === */
.kbm-wx-radarwrap{margin-top:10px}
.kbm-wx-radarmap{height:520px; width:100%; border-radius:18px; overflow:hidden; border:1px solid var(--kbm-border); background:#0b1220}
@media (max-width: 900px){ .kbm-wx-radarmap{height:420px;} }
.kbm-wx-radarbar{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.kbm-wx-play{width:44px; height:40px; border-radius:12px; border:1px solid var(--kbm-border); background:#fff; font-weight:900}
#kbmRadarSlider{flex:1 1 260px; min-width:220px; accent-color: var(--kbm-blue);}