/*
Theme Name: Olleke Bolleke 3.0
Theme URI: https://ollekebolleke.info
Author: Olleke Bolleke in Thailand
Description: Herontwerp op basis van de structuur van nu.nl, aangepast naar de eigen regio-indeling van deze site. Grote, goed leesbare tekst voor het huidige publiek.
Version: 3.0
Text Domain: ollekebolleke-nieuw
*/

/* ==========================================================================
   OllekeBolleke — nieuw ontwerpvoorstel
   Bewust EEN vast, warm redactioneel thema (geen dark/light-omschakeling):
   dit toont een specifiek ontwerp voor een echte nieuwssite, niet een los
   hulpmiddel — het gaat om het bekijken van DIT ontwerp, in zijn eigen kleuren.
   ========================================================================== */

:root{
  /* basispalet: warm, niet steriel wit — rustiger voor oudere ogen */
  --bg:        #F6F1E7;
  --surface:   #FFFFFF;
  --surface-2: #FBF6EC;
  --ink:       #241F17;
  --ink-muted: #6B6153;
  --line:      #E7DFCC;

  /* drie accenten rechtstreeks uit het wapenschild, plus zee-turkoois voor
     kust/zuid-content — geen willekeurige kleuren, alles herleidbaar */
  --red:       #A11D2E;  --red-tint:  #F4E3E1;
  --blue:      #1E4C86;  --blue-tint: #E4ECF6;
  --gold:      #96700F;  --gold-tint: #F6ECD3;
  --teal:      #1F6B62;  --teal-tint: #DEEEEB;
  /* twee extra, bewust afgeleide tinten voor de resterende regio's:
     terracotta voor Zuid (kust/zonsondergang-associatie), leisteenblauw
     voor Europa (ander werelddeel, kalmer/kouder dan het Thailand-blauw) */
  --terra:     #C1573A;  --terra-tint: #F6E3DC;
  --slate:     #3B4A66;  --slate-tint: #E4E7EE;
  /* achtste regio, Zuidoost Azië (buiten Thailand, dus geen wapenschild-
     kleur) - gedempt olijfgroen, past bij de rest van het palet en blijft
     bewust ver van roze/paars vandaan */
  --olijf:     #5B6B3D;  --olijf-tint: #E9EDDD;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(36,31,23,.08);
  --shadow-lg: 0 20px 50px rgba(36,31,23,.14);

  /* Eén plek om de maximale sitebreedte in te stellen - .container,
     .topbar-inner, .layout en .article-wrap gebruiken allemaal deze
     zelfde variabele, zodat ze altijd exact uitgelijnd blijven (anders
     loopt bv. de datumbalk of de header niet meer gelijk met main-col
     zodra er één van de vier los aangepast wordt). Op desktop
     (min-width:901px) wordt dit hieronder overschreven naar 1280px -
     terugdraaien is dan ook maar één regel. */
  --layout-breed: 1180px;

  /* Bijsnijd-voorkeur voor elke foto die met object-fit:cover wordt
     bijgesneden (uitgelichte/hero-afbeelding, thumbnails, regio-hero,
     enz.): de rechterkant staat volgens Auke altijd met de belangrijkste
     inhoud, dus die blijft altijd volledig staan; boven blijft grotendeels
     staan. Bij object-position X% Y% geldt: X% van het horizontale
     overschot valt links weg (de rest rechts), Y% van het verticale
     overschot valt boven weg (de rest onder) - dus 100% 10% = alles valt
     links weg/niets rechts, en 10% valt boven weg/90% onder. */
  --crop-bias: 100% 10%;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
h1,h2,h3,h4,p,a,li,span{overflow-wrap:break-word;word-break:break-word}
/* Zelfde lettertype-aanpak als nu.nl: GEEN los ingeladen weblettertype,
   maar de systeemfont van het apparaat zelf (San Francisco op Apple, Roboto
   op Android, Segoe UI op Windows) - dit is letterlijk nu.nl's eigen
   --primary-font-family-waarde. Sneller (niets om in te laden) en voelt
   overal vertrouwd aan. Alleen de tekstgroottes zijn bewust groter gezet,
   voor het huidige, oudere publiek. */
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin:0; font-weight:800; letter-spacing:-.015em; text-wrap:balance;
  color:var(--ink);
}
a{color:inherit;text-decoration:none}
/* Nav-, kaart- en knop-achtige links (header/footer, koppenlijsten, hero,
   region-more, chips enz.) blijven bewust zonder underline - die zijn al
   duidelijk klikbaar door hun eigen vormgeving. Een hyperlink MIDDEN IN
   lopende tekst (artikel-inhoud, statische pagina's zoals Over Ons, en
   soortgelijke introtekst-blokken) is dat niet vanzelf, dus die krijgen
   hier alsnog een underline zodat ze herkenbaar blijven als link. */
.article-body a,
.obn-stellingen-intro a{text-decoration:underline;text-underline-offset:2px}
/* height:auto is nodig: WordPress zet width/height-attributen op elke
   afbeelding (bv. 2048x1152), en zonder height:auto geldt die 1152px als
   vaste hoogte - aspect-ratio (hero 16/9 e.d.) werd dan genegeerd en
   object-fit:cover sneed er een extreem ingezoomd stukje uit. */
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--layout-breed);margin:0 auto;padding:0 24px}

/* ---------- topbar ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
/* Sticky "terug naar boven"-balkje, alleen mobiel: verschijnt zodra de
   header (topbar-inner + tabbar) volledig voorbij is gescrold, zie de
   IntersectionObserver in header.php. Puur het pijltje, geen tekst -
   anders dan de variant onderaan de footer. */
.obn-terug-boven-sticky{display:none;position:fixed;top:0;left:0;right:0;z-index:50;height:50px;
  background:#fff;border-bottom:1px solid var(--line);color:var(--red);align-items:center;justify-content:center}
.obn-terug-boven-sticky svg{width:22px;height:22px}
@media (max-width:900px){
  .obn-terug-boven-sticky.is-zichtbaar{display:flex}
}
.topbar-inner{display:flex;align-items:center;gap:18px;padding:14px 24px;max-width:var(--layout-breed);margin:0 auto}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{width:46px;height:46px;border-radius:50%}
.logo .wordmark{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:24px;line-height:1.15}
.logo .wordmark small{display:block;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}

/* ---------- header t/m 900px: zelfde mobiele opzet als altijd (gecentreerd,
   gestapeld, Voorpagina zichtbaar, geen Contact) - bewust dezelfde 900px-grens
   als de rest van de site (zijbalk/advertenties). Telefoons in landscape
   (vaak 700-930px) vielen eerder al bij de brede/desktop-opzet hieronder,
   die daar te weinig ruimte voor heeft - zie ook 901px-blok hieronder. ---------- */
@media (max-width:900px){
  .topbar-inner{padding:12px 16px;gap:12px;justify-content:center;margin-right:2%}
  .logo img{width:42px;height:42px}
  .logo .wordmark{font-size:22px}
  .tabbar{display:flex;justify-content:center;background:var(--surface);border-bottom:1px solid var(--line);
    padding:0 16px;gap:22px;overflow-x:auto}
  .tabbar a,.tabbar button{padding:13px 0;font-weight:700;font-size:14.5px;color:var(--ink-muted);
    border-bottom:2.5px solid transparent;white-space:nowrap;background:none;border-left:0;
    border-right:0;border-top:0;font-family:inherit;cursor:pointer}
  .tabbar a.is-active,.tabbar button.is-active,.tabbar button[aria-expanded="true"]{color:var(--ink);border-color:var(--red)}
  .obn-zoeken-paneel-wrap{display:grid;grid-template-rows:0fr;background:var(--surface);
    border-bottom:0 solid var(--line);transition:grid-template-rows .3s ease,border-bottom-width .3s ease}
  .obn-zoeken-paneel-wrap.is-open{grid-template-rows:1fr;border-bottom-width:1px}
  .obn-zoeken-paneel-inner{overflow:hidden;min-height:0}
  .obn-zoeken-form{display:flex;gap:10px;align-items:center;padding:14px 16px}
  .obn-zoeken-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;
    padding:11px 18px;font:inherit;font-size:16px;background:var(--surface-2);color:var(--ink)}
  .obn-zoeken-form button{flex:none;width:42px;height:42px;border-radius:50%;border:0;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
  .obn-zoeken-form svg{width:19px;height:19px}
  .obn-regios-paneel-wrap{display:grid;grid-template-rows:0fr;background:var(--surface);
    border-bottom:0 solid var(--line);transition:grid-template-rows .3s ease,border-bottom-width .3s ease}
  .obn-regios-paneel-wrap.is-open{grid-template-rows:1fr;border-bottom-width:1px}
  .obn-regios-paneel-inner{overflow:hidden;min-height:0}
  .obn-regios-paneel-inner .chip-list{padding:14px 16px}
  .chip-list{justify-content:center}
  .quicklinks{display:flex;gap:0;padding:14px 16px;background:var(--surface);
    border-bottom:1px solid var(--line);overflow-x:auto}
  .quicklinks a{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
    font-size:11.5px;font-weight:650;color:var(--ink-muted);min-width:64px}
  .quicklinks svg{width:22px;height:22px;color:var(--red)}
  .quicklinks svg:not(.ql-weer-icoon){height:23px}
  .quicklinks svg.ql-weer-icoon{width:auto;height:21px}
  .quicklinks svg.ql-weer-icoon svg{stroke-width:1.4}
  .obn-lang-label{display:none}
  .quicklinks a.obn-alleen-breed-tab{display:none}
  .obn-zoeken-inline{display:none}
}

/* ---------- header vanaf 901px: logo+tabbar op één rij, links uitgelijnd,
   quicklinks als tweede rij - zelfde onderdelen/mechaniek als mobiel (incl.
   de uitklappende Regio's/Zoeken-panelen), enkel anders gepositioneerd. ---------- */
@media (min-width:901px){
  .obn-topbar-rij1{display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;column-gap:28px;
    max-width:var(--layout-breed);margin:0 auto;padding:0}
  .topbar-inner{max-width:none;margin:0;padding:14px 0}
  .obn-alleen-mobiel-tab{display:none}
  .tabbar{display:flex;justify-content:flex-start;background:none;border-bottom:0;
    gap:22px;padding:0;overflow-x:visible}
  .tabbar a,.tabbar button{padding:6px 0;font-weight:600;font-size:15px;color:var(--ink-muted);
    border-bottom:2px solid transparent;white-space:nowrap;background:none;border-left:0;
    border-right:0;border-top:0;font-family:inherit;cursor:pointer}
  .tabbar a:hover,.tabbar button:hover,.tabbar a.is-active,.tabbar button.is-active,.tabbar button[aria-expanded="true"]{
    color:var(--ink);border-color:var(--red)}
  .tabbar{align-items:center}

  .obn-zoeken-paneel-wrap,.obn-regios-paneel-wrap{display:grid;grid-template-rows:0fr;
    background:var(--surface);border-bottom:0 solid var(--line);
    transition:grid-template-rows .3s ease,border-bottom-width .3s ease}
  .obn-zoeken-paneel-wrap.is-open,.obn-regios-paneel-wrap.is-open{grid-template-rows:1fr;border-bottom-width:1px}
  /* Vanaf 901px vervangt het altijd-zichtbare zoekveld hieronder (.obn-
     zoeken-inline) de uitklapbare Zoeken-knop/paneel van mobiel - dat
     paneel blijft in de HTML staan (nodig voor <901px) maar toont hier
     nooit, ook niet op een zoekresultatenpagina. Ná de is-open-regel
     hierboven zetten, anders wint die alsnog bij gelijke specificiteit. */
  .obn-zoeken-paneel-wrap{display:none}
  .obn-zoeken-paneel-inner,.obn-regios-paneel-inner{overflow:hidden;min-height:0;width:100%;
    max-width:var(--layout-breed);margin:0 auto;padding:0 24px}
  .obn-zoeken-form{display:flex;gap:10px;align-items:center;padding:14px 0;max-width:420px}
  .obn-zoeken-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;
    padding:11px 18px;font:inherit;font-size:15px;background:var(--surface-2);color:var(--ink)}
  .obn-zoeken-form button{flex:none;width:42px;height:42px;border-radius:50%;border:0;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .obn-zoeken-form svg{width:19px;height:19px}
  .obn-regios-paneel-inner .chip-list{padding:14px 0;justify-content:flex-start}

  /* Vervangt de Zoeken-knop vanaf 901px: altijd zichtbaar zoekveld
     rechtstreeks in de eerste navbalk, in plaats van een knop die een
     paneel eronder openklapt. */
  .obn-zoeken-inline{display:flex;align-items:center;gap:8px}
  .obn-zoeken-inline input{width:210px;border:1px solid var(--line);border-radius:999px;
    padding:7px 15px;font:inherit;font-size:13.5px;background:var(--surface-2);color:var(--ink)}
  .obn-zoeken-inline button{flex:none;width:30px;height:30px;border-radius:50%;border:0;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .obn-zoeken-inline svg{width:14px;height:14px}

  .quicklinks{display:flex;justify-content:flex-start;gap:26px;max-width:var(--layout-breed);
    margin:0 auto;padding:12px 0;background:none;border-bottom:1px solid var(--line);overflow-x:visible;
    position:relative;left:-2px}
  .quicklinks a{display:flex;flex:none;flex-direction:row;align-items:center;gap:9px;min-width:0;
    font-size:14px;font-weight:600;color:var(--ink-muted)}
  .quicklinks a:hover{color:var(--ink)}
  .quicklinks svg{width:19px;height:19px;color:var(--red)}
  .quicklinks svg:not(.ql-weer-icoon){height:19px}
  .quicklinks svg.ql-weer-icoon{width:auto;height:18px}
  .obn-kort-label{display:none}
  .quicklinks a.obn-alleen-breed-tab{display:flex}
}

.date-line{background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink-muted);padding:8px 0}
/* Horizontale padding hoort op .container zelf te staan (net als bij
   .layout), niet op .date-line eromheen - anders rekent .container zijn
   max-width:1180px+auto-marge uit binnen een al door .date-line's eigen
   padding versmalde ruimte, wat de tekst ~24px te ver naar links duwt
   t.o.v. main-col op brede schermen. */
.date-line .container{padding:0 24px}
/* tabbar/quicklinks zijn nu de navigatie op ALLE breedtes (mobiel: eigen
   gecentreerde stijl in het @media(max-width:900px)-blok hierboven, breder:
   zie @media(min-width:901px) hierboven) - de uitklapbare panelen krijgen
   hun display:grid al rechtstreeks uit die twee media-blokken (samen alle
   breedtes dekkend), dus GEEN aparte "standaard verborgen"-basisregel hier
   meer: die kwam ná de media-blokken in dit bestand en won daardoor de
   cascade bij gelijke specificiteit, wat de uitklappers permanent onzichtbaar
   maakte ongeacht de is-open-klasse. */

/* ---------- lay-out: hoofd + zijbalk ---------- */
.layout{display:grid;grid-template-columns:1fr 340px;gap:36px;padding:32px 24px;max-width:var(--layout-breed);margin:0 auto}
.main-col{min-width:0}
.side-col{min-width:0;display:flex;flex-direction:column;gap:22px}

/* ---------- hero (lead-artikel) ---------- */
/* .hero is een <a>-tag - zonder expliciete display:block blijft dat
   'inline', wat in sommige browsers (met name WebKit/Safari, dus iPhones)
   de breedte van een absoluut gepositioneerd kind zoals .hero-text
   onbetrouwbaar maakt. Vandaar hier expliciet block + width:100%. */
.hero{display:block;position:relative;width:100%;border-radius:var(--radius);
  overflow:hidden;background:var(--ink);box-shadow:var(--shadow-lg);margin-bottom:8px}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:var(--crop-bias);opacity:.92}
.hero-text{position:absolute;left:0;right:0;bottom:0;width:100%;padding:28px 26px 24px;
  background:linear-gradient(0deg,rgba(20,15,8,.92) 10%,rgba(20,15,8,.45) 60%,transparent 100%);
  box-sizing:border-box}
.hero-kicker{display:inline-block;background:var(--red);color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px}
.hero h1{color:#fff;font-size:34px;line-height:1.16}
.hero-meta{color:#e9e2d3;font-size:14px;margin-top:10px;opacity:.85}

/* ---------- artikelenlijst (dicht, scanbaar — geïnspireerd op nu.nl) ---------- */
.headline-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.headline-list li{border-bottom:1px solid var(--line)}
.headline-list li:last-child{border-bottom:0}
.headline-list a{display:flex;gap:14px;align-items:flex-start;padding:14px 2px}
.headline-list a:hover .hl-title{color:var(--red)}
.hl-thumb{position:relative;flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
/* object-position werkt hier bewust NIET meer: de bron is WP's eigen
   al-vierkante 'thumbnail'-bestand (150x150, vast uitgesneden op de live-
   server, buiten bereik van beta) - in een even-vierkante 84x84-box geeft
   object-fit:cover dan gewoonweg geen overschot meer om te verschuiven.
   In plaats daarvan: eerst inzoomen (echt overschot creëren) en dan via
   transform-origin bepalen welke hoek "vast" blijft staan terwijl de rest
   verder naar buiten geduwd wordt - linksonder blijft als ankerpunt
   staan, rechtsboven verdwijnt het eerst uit beeld naarmate de zoom
   groter wordt. */
.hl-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.4);transform-origin:20% 60%}
.hl-thumb.met-rang{background:var(--red)}
.hl-rangnummer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;font-size:30px;color:#fff}
.hl-thumb.met-rang.met-afbeelding .hl-rangnummer{background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.42));
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hl-body{min-width:0}
.hl-title{display:block;font-weight:650;font-size:18px;line-height:1.4}
/* Compacte datum onder de titel - los van de titel zelf, dus de titel
   houdt zijn eigen leesbare grootte, ongeacht of de datum erbij staat. */
.hl-date{display:block;font-size:12.5px;font-weight:600;color:var(--ink-muted);
  margin-top:4px;letter-spacing:.01em}

/* ---------- regiosecties (kernidee: elke regio zijn eigen kleur, zoals
   nu.nl elk onderwerp zijn eigen kleur geeft — hier gebaseerd op de
   bestaande categorieën van de site) ---------- */
.region-section{margin:44px 0 0;padding-top:36px;border-top:1px solid var(--line)}
.region-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.region-head h2{font-size:15px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
/* "laatste 5 artikelen" erbij, zonder de brede hoofdletter-kop zelf langer
   en drukker te maken: kleiner, gewone hoofdletters, niet-vet, gedempt. */
.region-count{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink-muted);margin-left:9px;opacity:.85}
.region-more{font-size:14.5px;font-weight:650;white-space:nowrap}
.region-more svg{width:14px;height:14px;vertical-align:-2px;margin-left:2px}

.region-section[data-accent="rood"] .region-head h2{color:var(--red)}
.region-section[data-accent="rood"] .region-more{color:var(--red)}
.region-section[data-accent="rood"] .hero-kicker{background:var(--red)}
.region-section[data-accent="blauw"] .region-head h2{color:var(--blue)}
.region-section[data-accent="blauw"] .region-more{color:var(--blue)}
.region-section[data-accent="blauw"] .hero-kicker{background:var(--blue)}
.region-section[data-accent="goud"] .region-head h2{color:var(--gold)}
.region-section[data-accent="goud"] .region-more{color:var(--gold)}
.region-section[data-accent="goud"] .hero-kicker{background:var(--gold)}
.region-section[data-accent="teal"] .region-head h2{color:var(--teal)}
.region-section[data-accent="teal"] .region-more{color:var(--teal)}
.region-section[data-accent="teal"] .hero-kicker{background:var(--teal)}
.region-section[data-accent="terra"] .region-head h2{color:var(--terra)}
.region-section[data-accent="terra"] .region-more{color:var(--terra)}
.region-section[data-accent="terra"] .hero-kicker{background:var(--terra)}
.region-section[data-accent="slate"] .region-head h2{color:var(--slate)}
.region-section[data-accent="slate"] .region-more{color:var(--slate)}
.region-section[data-accent="slate"] .hero-kicker{background:var(--slate)}
.region-section[data-accent="olijf"] .region-head h2{color:var(--olijf)}
.region-section[data-accent="olijf"] .region-more{color:var(--olijf)}
.region-section[data-accent="olijf"] .hero-kicker{background:var(--olijf)}

.region-grid{display:grid;grid-template-columns:1fr;gap:20px}
.region-hero{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.region-hero img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:var(--crop-bias)}
.region-hero-body{background:var(--surface);padding:18px 20px 20px}
.region-hero-body h3{font-size:22px;line-height:1.28}
.region-hero-body:hover h3{color:var(--red)}

/* ---------- stelling van de week ---------- */
.stelling-blok{background:linear-gradient(135deg,var(--red) 0%,#7a1522 100%);border-radius:var(--radius);
  padding:24px 24px 26px;margin:22px 0;color:#fff;box-shadow:var(--shadow-lg)}
.stelling-label{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:100px}
.stelling-tekst{font-size:22px;font-weight:750;line-height:1.35;margin:14px 0 18px}
.stelling-stemmen{display:flex;gap:12px}
.stelling-stemmen.is-gestemd{display:none}
.stelling-knop{flex:1;padding:13px 10px;border:2px solid rgba(255,255,255,.55);border-radius:10px;
  background:transparent;color:#fff;font-family:inherit;font-weight:700;font-size:15.5px;cursor:pointer}
.stelling-knop:hover{background:rgba(255,255,255,.15)}
.stelling-resultaat{display:none}
.stelling-resultaat.is-zichtbaar{display:block}
.stelling-balk{height:10px;border-radius:100px;background:rgba(255,255,255,.25);overflow:hidden}
.stelling-balk-eens{height:100%;background:#fff;border-radius:100px}
.stelling-cijfers{display:flex;justify-content:space-between;margin-top:10px;font-size:13.5px;font-weight:650}

/* ---------- weer-iconen: subtiele animatie ---------- */
/* Geldt overal waar obn_weer_code_naar_svg() gebruikt wordt (navigatie,
   3-daagse kaartjes, kaart-markers) - dezelfde iconen, dus één plek.
   Staat volledig uit voor wie "verminderde beweging" heeft ingesteld. */
@media (prefers-reduced-motion: no-preference) {
  .weer-druppel{animation:obn-regen 1.15s linear infinite}
  @keyframes obn-regen{
    0%{opacity:0;transform:translateY(-2px)}
    15%{opacity:1}
    75%{opacity:1}
    100%{opacity:0;transform:translateY(3px)}
  }

  .weer-vlok{animation:obn-sneeuw 2.6s ease-in-out infinite}
  @keyframes obn-sneeuw{
    0%{opacity:0;transform:translate(0,-2px)}
    18%{opacity:1}
    50%{transform:translate(1.2px,2.5px)}
    85%{opacity:1}
    100%{opacity:0;transform:translate(-1px,6px)}
  }

  .weer-bliksem{animation:obn-bliksem 3.6s ease-in-out infinite;transform-origin:center}
  @keyframes obn-bliksem{
    0%,90%{opacity:1}
    92.5%{opacity:.2}
    95%{opacity:1}
    97%{opacity:.35}
    100%{opacity:1}
  }

  .weer-mistlijn{animation:obn-mist 3s ease-in-out infinite}
  @keyframes obn-mist{0%,100%{opacity:1}50%{opacity:.4}}

  /* Wijst na een klik op de kaart aan welke kaart eronder bedoeld is - de
     link naar de stad zet gewoon de URL-hash, dus :target vangt dit
     volledig zonder JavaScript op. Eenmalig, kort, geen loop. */
  .weer-kaart-stad:target{animation:obn-weer-focus 2.6s ease-out .5s}
  @keyframes obn-weer-focus{
    0%,45%{background:color-mix(in srgb, var(--blue) 45%, var(--surface))}
    100%{background:var(--surface)}
  }

  .weer-zon-stralen{animation:obn-zon-draai 22s linear infinite;transform-origin:12px 12px}
  @keyframes obn-zon-draai{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

  .weer-zon-klein{animation:obn-zon-puls 3.2s ease-in-out infinite;transform-origin:18px 7px}
  @keyframes obn-zon-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
}

/* ---------- generieke infokaart (weer, vrienden - overal hetzelfde kaart-
   en tekstformaat, zodat losse pagina's niet elk hun eigen lettergrootte
   uitvinden) ---------- */
.obn-infokaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
/* Clearfix: zonder dit sluit het kaartje niet om een float (bv. de foto
   van Auke of .obn-sponsor-logo) heen zodra de tekst ernaast minder regels
   nodig heeft dan de float hoog is (breder scherm = minder tekstregels) -
   dan steekt de afbeelding onderaan buiten de kaartrand uit. */
.obn-infokaart::after{content:"";display:table;clear:both}
.obn-infokaart h3,.obn-infokaart h2{font-size:15px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 12px}
.obn-infokaart p{font-size:16px;line-height:1.6;color:var(--ink);margin:0}
.obn-infokaart p+p{margin-top:12px}
.obn-infokaart ul{font-size:16px;line-height:1.6;color:var(--ink);margin:0;padding-left:20px}
.obn-infokaart li+li{margin-top:6px}
.obn-infokaart strong{color:var(--red)}
.obn-infokaart .weer-bronnen{font-size:12px;color:var(--ink-muted);margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line)}

.obn-sponsor-logo{float:left;width:100%;height:auto;max-width:150px;object-fit:contain;margin:4px 20px 12px 0}

/* Foto van Auke in het "Ons verhaal"-kaartje op Over Ons - client-side
   toegevoegd (zie js/over-ons-kaarten.js), tekst vloeit eromheen via
   float:left. Op mobiel (<=900px) mag de foto nooit meer dan 1/3 van de
   breedte van het kaartje innemen. */
.obn-auke-foto{float:left;width:auto;height:auto;max-height:150px;max-width:100%;
  border-radius:var(--radius);margin:2px 16px 10px 0;box-shadow:var(--shadow)}
@media (max-width:900px){.obn-auke-foto{max-width:33%}}

/* Klein statistiekentabelletje op Over Ons (zie js/over-ons-kaarten.js) -
   erft font-size/kleur van de gedempte alineastijl eromheen, dus hier
   alleen de tabelopmaak zelf: compact, geen kaartje, past ruim binnen
   mobiele breedte zonder horizontaal scrollen. */
.obn-statstabel{border-collapse:collapse;margin:6px 0 2px}
.obn-statstabel th,.obn-statstabel td{padding:3px 16px 3px 0;text-align:left;white-space:nowrap;font:inherit}
.obn-statstabel thead th{font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:5px}
.obn-statstabel tbody td:first-child{font-weight:700;color:var(--ink)}
@media (max-width:520px){.obn-sponsor-logo{max-width:110px;margin-right:14px}}

/* ---------- steekproef-pagina ---------- */
.obn-steekproef-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media (max-width:700px){.obn-steekproef-grid{grid-template-columns:1fr}}
.obn-steekproef-kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.obn-steekproef-foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:10px;display:block}
.obn-steekproef-foto-leeg{background:var(--surface-2);border:1px dashed var(--line);color:var(--ink-muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.obn-steekproef-kaart h3{font-size:14px;font-weight:750;letter-spacing:.02em;color:var(--ink);margin:0 0 4px}
.obn-steekproef-naam{font-size:13px;color:var(--ink);margin:0 0 2px}
.obn-steekproef-nog-niet{font-size:13.5px;color:var(--ink-muted);margin:0}
.obn-steekproef-datum{font-size:12px;color:var(--ink-muted);margin:0 0 10px}
.obn-steekproef-rij{display:flex;justify-content:space-between;align-items:center;font-size:14px;
  padding:6px 0;border-top:1px solid var(--line)}
.obn-steekproef-rij:first-of-type{border-top:none}
.obn-steekproef-rij .obn-steekproef-prijs{font-weight:650;font-variant-numeric:tabular-nums}
.obn-steekproef-logo{height:16px;width:auto;max-width:80px;object-fit:contain;display:block}
.obn-steekproef-rij.is-winnaar .obn-steekproef-prijs{color:var(--blue)}
.obn-steekproef-percentage{color:var(--red);font-weight:650;font-variant-numeric:tabular-nums;margin-right:4px}
.obn-steekproef-notitie{font-size:11.5px;color:var(--ink-muted);margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.obn-steekproef-voorbeeld-banner{clear:both;background:#fff4e0;border:1px solid #e8c375;color:#7a5a12;font-size:13px;
  font-weight:600;border-radius:8px;padding:10px 14px;margin:0 0 20px}

/* ---------- verzekeringen-pagina ---------- */
.obn-verzekering-highlights{clear:both;list-style:none;margin:0 0 20px;padding:16px 18px;background:var(--blue-tint);
  border:1px solid var(--blue);border-radius:var(--radius);display:grid;gap:8px}
.obn-verzekering-highlights li{position:relative;padding-left:26px;font-size:14px;color:var(--ink);line-height:1.4}
.obn-verzekering-highlights li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--blue);font-weight:750}
.obn-verzekering-icoon{width:32px;height:32px;color:var(--blue);margin-bottom:8px}
.obn-verzekering-kaart ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.obn-verzekering-kaart li{position:relative;padding-left:16px;margin-top:6px}
.obn-verzekering-kaart li:first-child{margin-top:0}

.obn-verzekering-form{display:grid;gap:14px;margin-top:4px}
.obn-form-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.obn-form-rij{grid-template-columns:1fr}}
.obn-verzekering-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-muted)}
.obn-verzekering-form input,.obn-verzekering-form select,.obn-verzekering-form textarea{
  font:inherit;font-size:14.5px;font-weight:400;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:10px 13px;background:var(--surface-2)}
.obn-verzekering-form textarea{resize:vertical;min-height:80px}
.obn-verzekering-form button{justify-self:start;background:var(--red);color:#fff;border:0;border-radius:999px;
  padding:12px 26px;font:inherit;font-size:14.5px;font-weight:650;cursor:pointer}
.obn-verzekering-form button:hover{background:#7a1522}
.obn-verzekering-kaart li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--red)}
.obn-locatie-kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.obn-locatie-kaart img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.obn-locatie-info{padding:14px 16px}
.obn-locatie-info h3{font-size:14px;font-weight:750;color:var(--ink);margin:0 0 6px}
.obn-locatie-info p{font-size:13px;color:var(--ink-muted);margin:0 0 4px;line-height:1.4}
.obn-locatie-info a{color:var(--blue);font-weight:600}

/* ---------- weerpagina ---------- */
.weer-seizoenen{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px 8px;margin-bottom:26px;box-shadow:var(--shadow)}
.weer-seizoenen h3{font-size:15px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:12px}
.weer-seizoenen ul{list-style:none;margin:0;padding:0}
.weer-seizoenen li{padding:10px 0;border-bottom:1px solid var(--line)}
.weer-seizoenen li:last-child{border-bottom:0}
.weer-seizoenen li strong{display:block;font-size:14.5px;color:var(--ink)}
.weer-seizoenen li > span:first-of-type{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:2px}
.weer-seizoenen li > span:last-of-type{display:block;font-size:13.5px;font-weight:650;color:var(--blue);margin-top:5px}
.weer-maandstrip{margin-top:10px;width:100%}
.weer-maandlabels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;margin-bottom:2px;width:100%}
.weer-maandlabels span{display:block;min-width:0;text-align:center;font-size:7px;line-height:1.4;font-weight:700;color:var(--ink-muted);margin:0}
.weer-maandblokken{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;width:100%}
.weer-maandblok{min-width:0;aspect-ratio:1;border-radius:3px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--blue);overflow:hidden}
.weer-maandblok.is-regenmaand{background:color-mix(in srgb, var(--blue) 16%, var(--surface-2))}
.weer-maandblok svg{width:90%;height:90%;flex:none}

.weer-kaart-wrap{max-width:380px;margin:0 auto 26px}
.weer-thailand-kaart{width:100%;height:auto;display:block;overflow:visible}
.weer-kaart-vorm{fill:var(--surface-2);stroke:var(--line);stroke-width:1.4}
.weer-kaart-marker{cursor:pointer}
.weer-kaart-marker-icoon{color:var(--blue)}
.weer-kaart-marker text{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:10.4px;font-weight:800;fill:var(--red);dominant-baseline:central;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.weer-kaart-marker:hover text{fill:var(--ink)}
.weer-kaart-temp-min{fill:color-mix(in srgb, var(--red) 55%, white)}
.weer-kaart-temp-max{fill:var(--red)}
.weer-kaart-marker:hover .weer-kaart-temp-min,
.weer-kaart-marker:hover .weer-kaart-temp-max{fill:var(--ink)}

.weer-kaart-stad{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow);scroll-margin-top:80px}
.weer-kaart-stad-naam{font-weight:750;font-size:16.5px;margin-bottom:10px}
.weer-3dagen{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:10px}
.weer-dag{text-align:center;padding:10px 6px;border-radius:10px;background:var(--surface-2)}
.weer-dag.is-vandaag{background:var(--blue);color:#fff}
.weer-dag-label{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.8}
.weer-dag.is-vandaag .weer-dag-label{opacity:1}
.weer-dag-icoon{margin:7px auto 4px;color:var(--blue)}
.weer-dag.is-vandaag .weer-dag-icoon{color:#fff}
.weer-dag-icoon svg{width:24px;height:24px}
.weer-dag.is-vandaag .weer-dag-icoon svg{width:32px;height:32px}
.weer-dag-omschrijving{font-size:10.5px;opacity:.8;margin-bottom:6px}
.weer-dag-max{font-weight:800;font-size:15px}
.weer-dag.is-vandaag .weer-dag-max{font-size:21px}
.weer-dag-min{font-size:12px;opacity:.75;margin-left:3px}
.weer-meerdagen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.weer-extradag{text-align:center;padding:8px 4px;border-radius:8px;background:#FDFAF3}
.weer-extradag-label{font-size:9.5px;font-weight:700;color:var(--ink-muted);letter-spacing:.02em}
.weer-extradag-icoon{margin:5px auto 2px;color:var(--blue)}
.weer-extradag-icoon svg{width:18px;height:18px}
.weer-extradag .weer-dag-max{font-size:13px}
.weer-extradag .weer-dag-min{font-size:10.5px}

/* ---------- zijbalk: widgets ---------- */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;box-shadow:var(--shadow)}
.widget h3{font-size:14px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:14px}

/* Echte IAB-standaardmaten, niet verzonnen: 300x250 (rectangle), 300x600
   (half-page) en 728x90 (leaderboard) - zodat de advertentievakken straks
   qua verhouding kloppen met wat een adverteerder daadwerkelijk aanlevert. */
/* Klassen bewust NEUTRAAL genoemd (geen "ad"/"ads"/"reclame"/"advertentie"
   in de class-naam) - filterlijsten zoals EasyList (gebruikt door de
   meeste advertentieblokkers en ook door sommige antivirus-browserextensies)
   verbergen elementen puur op basis van dat soort woorden in class/id-namen,
   nog voordat er ook maar één echt advertentienetwerk-script draait. De
   zichtbare "Advertentie"-tekst zelf blijft gewoon staan (dat is voor de
   bezoeker, geen machine-leesbare selector). */
/* Gewone documentflow, GEEN aspect-ratio en GEEN position:absolute op de
   afbeelding - de hoogte van het hele vak is daardoor gewoon de optelsom
   van padding + de echte advertentiehoogte (per grootte hieronder) +
   ruimte voor het bijschrift, en past dus vanzelf mee als een van die
   onderdelen verandert, in plaats van een vaste verhouding te forceren
   die de daadwerkelijke advertentie-afmeting kon overschrijven. */
.obn-plek{background:#fcfaf5;border:1px dashed var(--line);border-radius:12px;
  margin:0 auto;width:100%;padding:14px;box-sizing:border-box}
@media (min-width:901px){
  /* Terugdraaien = deze ene regel verwijderen of terugzetten naar 1180px. */
  :root{--layout-breed: 1280px;}
  /* .side-col heeft al zijn eigen gap:22px tussen widgets - de eigen
     margin van .obn-plek-groep daarbovenop gaf dubbele ruimte rond de
     zijbalk-advertentie specifiek. */
  .side-col .obn-plek-groep{margin:0}
}
.obn-plek-media{width:100%;height:220px;border-radius:6px;overflow:hidden}
.obn-plek-media img{width:100%;height:100%;object-fit:cover;display:block}
.obn-plek.tall .obn-plek-media{height:600px}
/* Vaste hoogte van 160px paste alleen exact bij de brede-scherm-uitschieters
   (waar main-col precies 840px breed is); bij elke andere desktop/tablet-
   landscape-breedte (bv. beide iPads in landscape, main-col resp. ~612px en
   ~712px) sneed dat links/rechts flink van de 1680x320-advertentie weg.
   aspect-ratio i.p.v. een vaste hoogte volgt de echte 5,25:1-verhouding van
   die afbeelding op elke breedte, dus geen crop meer nodig. */
.obn-plek.wide .obn-plek-media{height:auto;aspect-ratio:1680/320}
.obn-plek.duo .obn-plek-media{height:220px}
/* Statische advertentiefamilie (ad16 t/m ad24) - 16:3-verhouding (zelfde
   als het klassieke 320x60-bannerformaat), veel lager dan de eerdere 3:1
   proefversie. */
.obn-plek.strook .obn-plek-media{height:auto;aspect-ratio:16/3}
/* obn-ad-rotator: plekken met 2 kandidaat-advertenties staan boven op
   elkaar en obn-ad-rotator.js (footer.php) wisselt om de 15 seconden
   welke zichtbaar is - de rotator zelf neemt de hoogte van .strook
   hierboven over (via aspect-ratio op de ouder), dus hier alleen de
   overlap regelen. */
.obn-ad-rotator{position:relative;width:100%;height:100%}
.obn-ad-rotator-item{position:absolute;inset:0;opacity:0;pointer-events:none}
.obn-ad-rotator-item.is-actief{opacity:1;pointer-events:auto}
.obn-ad-rotator-item picture,.obn-ad-rotator-item img{width:100%;height:100%}
/* AdSense (AD3) berekent zijn eigen hoogte zodra de advertentie laadt -
   de vaste 220px hierboven (en overflow:hidden op .obn-plek-media) zou
   die dan afknippen of juist een leeg wit vak overlaten. */
/* Nu met vaste AdSense-formaten (obn_advertentie_getrapt()) i.p.v. "auto"/
   native content is er nog maar één klein randgeval (~11px bij de krapste
   tablet-breedte) waar een advertentie net iets breder kan zijn dan het
   vak - op eigen verzoek mag dat gewoon zichtbaar overlopen i.p.v.
   afgesneden of dichtgeknepen te worden. */
.obn-plek.adsense .obn-plek-media{height:auto;overflow:visible;text-align:center}
/* Alleen de brede voorpagina-AdSense-plek (niet de zijbalk-plekken, die
   zitten al smal genoeg) - smaller houden geeft Google's eigen auto-
   sizing minder ruimte om een hoge "reserve-bucket" te kiezen. De
   max-height eronder is een harde noodgreep bovenop die breedte-verkleining:
   als Google ooit een advertentie serveert die dit vak daadwerkelijk
   hoger nodig heeft, wordt DIE dan afgesneden i.p.v. dat er lege ruimte
   overblijft - een bewuste ruil, geen gratis oplossing. */
/* Breedte NIET meer verkleinen - dat gaf zelf lege ruimte naast het vak
   i.p.v. eronder, en dat viel nog sterker op t.o.v. de rest van de
   volle-breedte pagina. Alleen de max-height blijft staan. */
.obn-plek.adsense-smal .obn-plek-media{max-height:280px;overflow:hidden}
/* Rail van 16 advertentievakken (AD5-AD20) - alleen op desktop (>=901px,
   de zijbalk staat daaronder immers niet meer los naast de content maar
   valt terug in de normale doorloop, waar dit los rail-concept niet past).
   Eén kaart, één "Advertentie"-onderschrift; de items zelf krimpen gewoon
   mee met de kaart se eigen breedte (~310px in de 340px-brede zijbalk). */
.obn-plek-rail-groep{display:none}
@media (min-width:901px){
  .obn-plek-rail-groep{display:block}
}
/* Zelfde idee als hierboven, voor de losse ad3-zijbalkplek: op mobiel valt
   de zijbalk onderaan de pagina (na alle regio's), waar dit vak er als een
   vreemd achtergebleven ding uitzag vlak vóór de Nieuwsbrief - bovenaan een
   echte zijbalk-kolom (tablet/desktop) hoort hij er gewoon bij. */
.obn-plek-alleen-breed{display:none}
@media (min-width:901px){
  .obn-plek-alleen-breed{display:block}
}
.obn-plek-rail{display:flex;flex-direction:column;gap:30px}
/* aspect-ratio i.p.v. een vaste hoogte - de echte AD5-AD15 banners zijn
   400x180px, dus dit voorkomt crop/uitrekking ongeacht de precieze
   gerenderde breedte van de kaart. */
.obn-plek-rail-item{position:relative;width:100%;aspect-ratio:400/180;border-radius:6px;
  overflow:hidden;background:var(--bg);border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center}
.obn-plek-rail-label{color:var(--ink-muted);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.obn-plek-rail-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Zichtbare, lichte "Advertentie"-tekst IN het vak, rechtsonder onder de
   ad-afbeelding - puur voor transparantie naar de bezoeker, geen
   machine-leesbare klassenaam. */
.obn-plek-groep{margin:20px auto}

/* Eigen wisselkoers-widget (obn_wisselkoers_widget() in functions.php,
   template-parts/sidebar.php + inc/thailand-informatie.php) - visueel op
   Wise's eigen valuta-omrekenaar gebaseerd, maar zelf gebouwd zodat het
   ook echt in een smalle 300-340px kolom past. Max-width:100% zodat de
   .obn-wisselkoers-smal-wrapper hieronder de kaart naar 300px kan
   verkleinen zonder los CSS per plek te hoeven schrijven.
   Kleuren bewust Wise's eigen merkkleuren i.p.v. het site-eigen palet
   (zie github.com/transferwise/public-widgets) - het felle groen
   (#9FE870) en donkere bosgroen (#163300) zijn Wise's eigen
   "bright-green"/"forest-green" tokens, rechtstreeks van hun site
   overgenomen, niet zelf verzonnen. */
.obn-wisselkoers{background:#EDF1FB;border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);max-width:100%;container-type:inline-size}
.obn-wisselkoers-koers-rij{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:14px}
.obn-wisselkoers-koers{font-size:19px;font-weight:800;color:var(--ink)}
@media (max-width:900px){.obn-wisselkoers-koers{font-size:16px}}
/* Alleen de zijbalk-instantie, ~20% kleiner (19px->15px) - in die smalle
   kolom brak "1 EUR = 37,9946 THB" anders al snel over 2 regels. */
#wisselkoers-widget-zijkant .obn-wisselkoers-koers{font-size:15px}
/* Vaste buitenmaat (was voorheen padding+inhoud-afhankelijk, kwam qua
   berekende maat op zo'n 77x23px uit) zodat de pil exact even groot
   blijft nu het logo er zelf 20% kleiner in staat - justify-content
   centreert het logo horizontaal binnen die vaste breedte. */
.obn-wisselkoers-logo{display:inline-flex;align-items:center;justify-content:center;
  background:#9FE870;width:77px;height:23px;border-radius:999px;flex-shrink:0}
.obn-wisselkoers-logo img{display:block;height:10.4px;width:auto}
/* .obn-wisselkoers-velden: standaard gestapeld (dit is wat de 310px
   zijbalk-instantie altijd te zien krijgt - bewust NIET veranderd, zie
   de override hieronder die alleen de smalle-in-content-variant een
   grid geeft). */
.obn-wisselkoers-velden{display:flex;flex-direction:column;gap:10px}
.obn-wisselkoers-veld{min-width:0}
.obn-wisselkoers-veldlabel{font-size:11.5px;color:var(--ink-muted);margin-bottom:4px}
.obn-wisselkoers-veldlabel-mid{text-align:center}
.obn-wisselkoers-pil{background:var(--surface);border-radius:10px;display:flex;
  align-items:center;justify-content:space-between;gap:8px;padding:9px 11px}
.obn-wisselkoers-pil input{border:none;background:none;font-size:16px;font-weight:700;
  color:var(--ink);width:100%;min-width:0;padding:0}
.obn-wisselkoers-pil input:focus{outline:none}
.obn-wisselkoers-vlag{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0}
.obn-wisselkoers-valuta{display:flex;align-items:center;gap:5px;flex-shrink:0}
.obn-wisselkoers-valuta select{border:none;background:none;font-size:14px;font-weight:700;
  color:var(--ink);padding:0 2px}
.obn-wisselkoers-valuta-vast{display:flex;align-items:center;gap:5px;font-size:14px;
  font-weight:700;color:var(--ink);flex-shrink:0;white-space:nowrap}
.obn-wisselkoers-knop{display:block;text-align:center;background:#9FE870;color:#163300;
  font-size:14px;font-weight:800;text-decoration:none;border-radius:999px;
  padding:9px 16px;transition:background .15s ease}
.obn-wisselkoers-knop:hover{background:#8AD65C}
/* Smallere variant, middenin de artikeltekst op de informatiepagina - voor
   mobiele bezoekers die de zijbalk-versie nooit zien. Vanaf 901px zien
   bezoekers dus bewust allebei (zie de toelichting bij de plaatsing zelf).
   Bewust GEEN max-width meer: de kaart moet zich gedragen als een gewone
   <p> hierboven - exact zo breed als de leeskolom zelf, geen eigen
   plafond. min-width blijft staan als ondergrens op een heel smal scherm.
   Ook bewust GEEN float meer op bredere schermen - de volgende sectie
   ("Een goede verzekering...") komt gewoon eronder, niet ernaast met
   tekstomloop. */
/* Wisselkantoren-vergelijkingstabel (obn_wisselkantoren_widget()) - zit
   onder de Wise-kaart in dezelfde witte zijbalk-doos. display:contents op
   .owk-rij zodat de "rij"-indeling puur semantisch blijft terwijl alle
   .owk-cel's rechtstreeks in de buitenste CSS-grid meedoen - standaard
   truc om een <div>-per-rij-structuur toch als een grid te laten werken. */
.obn-wisselkoers-intro{font-size:13.5px;line-height:1.5;color:var(--ink-muted);margin:0 0 14px}
.obn-wisselkantoren-titel{margin-top:20px}
.obn-wisselkantoren{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.obn-wisselkantoren-tabel{display:grid;grid-template-columns:88px repeat(4,1fr);
  gap:6px 0;align-items:center;overflow-x:auto}
.owk-rij{display:contents}
.owk-cel{min-width:0}
.owk-cel-logo img{display:block;max-width:100%;height:auto;max-height:36px}
.owk-cel-vlag{text-align:center}
.owk-cel-vlag img{display:block;margin:0 auto;width:16px;height:16px;border-radius:50%;object-fit:cover}
.owk-kop{padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.owk-cel-koers{text-align:center;display:flex;flex-direction:column;line-height:1.25}
.owk-buy{font-size:12px;font-weight:800;color:var(--ink)}
.owk-sell{font-size:10.5px;font-weight:400;color:var(--ink-muted)}
.obn-wisselkoers-smal-wrapper{min-width:300px;width:100%;margin:14px 0}
/* Alleen hier (niet de zijbalk-instantie): CSS grid met auto-fit/minmax
   i.p.v. handmatige breedte-drempels - de browser verdeelt de 3
   .obn-wisselkoers-veld's zelf over 1, 2 of 3 kolommen, precies zoveel
   als er op een gegeven breedte daadwerkelijk passen. 150px (niet 100px)
   is bewust ruim: de knoptekst "Verstuur geld via Wise" heeft echt meer
   dan 100px nodig om niet in 3 regels te breken - bij 100px paste de
   knop technisch wel in een 3e kolom, maar veel te smal om leesbaar te
   blijven. Bij te weinig ruimte voor 3 volwaardige kolommen valt dit nu
   netjes terug naar 2 kolommen (bedrag+omgerekend) met de knop+disclaimer
   als eigen volle-breedte rij eronder, i.p.v. een kapotte smalle knop. */
.obn-wisselkoers-smal-wrapper .obn-wisselkoers-velden{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px}
.obn-wisselkoers-smal-wrapper .obn-wisselkoers-veld{display:flex;flex-direction:column}
.obn-wisselkoers-smal-wrapper .obn-wisselkoers-knop{margin-top:auto}


.obn-bijschrift{display:block;text-align:right;margin-top:8px;font-size:11px;font-weight:500;
  letter-spacing:.02em;color:var(--ink-muted);opacity:.6}

/* Trip.com-advertentie (ad25) - zelfde bijschrift-regel als de rest, maar
   met een extra kortingstekst linksonder, naast "Advertentie" rechtsonder. */
.obn-bijschrift-rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px}
.obn-bijschrift-rij .obn-bijschrift{margin-top:0}
.obn-plek-korting{font-size:11px;font-weight:650;letter-spacing:.02em;color:var(--red)}

.newsletter{background:linear-gradient(160deg,var(--ink) 0%,#3a2f1f 100%);color:#fff;
  border-radius:var(--radius);padding:22px 20px 24px;box-shadow:var(--shadow)}
.newsletter h3{color:var(--gold-tint);opacity:1}
.newsletter p{font-size:14.5px;color:#e9e2d3;margin:0 0 14px}
.newsletter input{width:100%;margin-bottom:10px;padding:10px 12px;border-radius:8px;border:0;
  font-family:inherit;font-size:14.5px}
.newsletter button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--red);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer}
.newsletter button:hover{background:#b82c3e}

.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:13.5px;font-weight:600;color:var(--ink-muted)}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.is-active{background:var(--red);border-color:var(--red);color:#fff}
/* Tags krijgen een eigen, iets afwijkende kleur t.o.v. de regio-chips,
   zodat de twee blokken (Regio's / Top 10 Tags) ook visueel uit elkaar
   te houden zijn. */
.chip.chip-tag{background:var(--blue-tint);border-color:var(--blue);color:var(--blue)}
.chip.chip-tag:hover{background:var(--blue);color:#fff}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfc6b4;margin-top:56px;padding:36px 24px}
.terug-naar-boven{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;
  font-weight:650;color:#cfc6b4;margin:0 auto 24px;width:fit-content}
.terug-naar-boven svg{width:20px;height:20px}
.terug-naar-boven:hover{color:#fff}
.site-footer .container{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:13.5px}
.site-footer a{color:#e9e2d3}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.footer-links a{text-decoration:underline;text-underline-offset:2px}

/* ---------- artikelpagina ---------- */
/* Was max-width:820px, los van --layout-breed - dat centreerde het
   broodkruimelpad los in het midden van de pagina i.p.v. links gelijk te
   lopen met de rest van de content (zelfde soort fout als de eerdere
   date-line-uitlijning). */
.breadcrumb{font-size:13.5px;color:var(--ink-muted);padding:20px 24px 0;max-width:var(--layout-breed);margin:0 auto}
.breadcrumb a:hover{color:var(--red)}
/* Zelfde kolombreedte/gap als .layout (was 300px/40px) zodat de zijbalk op
   een artikelpagina precies even breed is als op de voorpagina. */
.article-wrap{display:grid;grid-template-columns:1fr 340px;gap:36px;max-width:var(--layout-breed);margin:0 auto;padding:18px 24px 40px}
/* Links uitgelijnd (geen margin-left:auto meer) zodat tags/titel/hero-
   afbeelding op dezelfde linkerrand beginnen als de breadcrumb erboven en
   als de hero op de voorpagina - nu .article-main breder is (900px i.p.v.
   780px) blijft de restruimte vóór de zijbalk klein genoeg om niet meer als
   een "groot gat" op te vallen zoals toen de kolom nog 780px was. */
.article-main{min-width:0;max-width:900px}
/* flex-wrap:wrap ontbrak - zonder dat blijven alle pills op één rij
   staan en krimpt de tekst ERIN naar meerdere regels i.p.v. dat een hele
   pill naar een nieuwe rij verspringt (white-space:nowrap + flex:none op
   .tag-pill hieronder voorkomt daarnaast dat een losse pill zelf ooit
   smaller wordt dan zijn eigen tekst). */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tag-pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;flex:none}
.tag-pill:hover{opacity:.8}
.tag-pill.oost{background:var(--red-tint);color:var(--red)}
.tag-pill.centraal{background:var(--teal-tint);color:var(--teal)}
.tag-pill.thailand{background:var(--gold-tint);color:var(--gold)}
.article-main h1{font-size:38px;line-height:1.18;margin-bottom:16px}
.article-meta{display:flex;align-items:center;gap:14px;font-size:13.3px;color:var(--ink-muted);
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.article-meta svg{width:15px;height:15px;vertical-align:-3px;margin-right:4px}
.article-hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px}
.article-hero-img img{width:100%}
.img-caption{font-size:13px;color:var(--ink-muted);font-style:italic;padding:9px 2px 24px}
.article-body{font-size:19px;line-height:1.75}
/* WordPress' eigen uitlijnklassen (alignleft/alignright/aligncenter),
   vaak met een handmatig ingestelde breedte via de "verkleinen"-functie
   in de editor, laten een afbeelding smal zweven met tekst eromheen -
   dat moet nooit, elke afbeelding hoort de volle breedte van de
   tekstkolom te gebruiken. !important is nodig om de inline width-stijl
   te verslaan die de editor er zelf op zet. */
.article-body .wp-block-image,
.article-body .alignleft,
.article-body .alignright,
.article-body .aligncenter{float:none!important;display:block!important;width:100%!important;max-width:100%!important;margin:0 0 22px!important}
.article-body .wp-block-image img,
.article-body .alignleft img,
.article-body .alignright img,
.article-body .aligncenter img{width:100%!important;height:auto!important;max-width:100%!important}
.article-body p{margin:0 0 22px}
.pull-quote{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:26px;font-weight:700;line-height:1.4;
  color:var(--red);border-left:4px solid var(--red);padding:4px 0 4px 22px;margin:32px 0}
.obn-tussenvak{margin:30px 0;text-align:center}
.share-row{display:flex;gap:10px;margin:30px 0 8px}
.share-btn{width:38px;height:38px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.share-btn svg{width:17px;height:17px;color:var(--ink-muted)}

.comments{border-top:1px solid var(--line);margin-top:40px;padding-top:30px}
.comments h2{font-size:20px;margin-bottom:18px}
.obn-reacties-uit{color:var(--ink-muted);font-size:15.5px}
.obn-reacties-uit a{text-decoration:underline;text-underline-offset:2px}
.obn-zoeken-trigger{text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.comment-form label{display:block;font-size:13.5px;font-weight:650;margin:14px 0 6px;color:var(--ink-muted)}
.comment-form textarea,.comment-form input{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font-family:inherit;font-size:15px;background:var(--surface-2)}
.comment-form textarea{min-height:100px;resize:vertical}
.comment-form button{margin-top:16px;padding:12px 22px;border:0;border-radius:9px;
  background:var(--red);color:#fff;font-weight:700;font-size:15px;cursor:pointer}

.related-list{list-style:none;margin:0;padding:0}
.related-list li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.related-list li:last-child{border-bottom:0}
.related-list img{width:72px;height:52px;object-fit:cover;object-position:var(--crop-bias);border-radius:8px;flex:none}
.related-list a{font-weight:650;font-size:14.5px;line-height:1.35}
.related-list a:hover{color:var(--red)}

/* ---------- responsief: tablet ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;padding:24px 20px}
  .side-col{flex-direction:row;flex-wrap:wrap}
  .side-col .widget,.side-col .newsletter,.side-col .obn-plek-groep{flex:1 1 260px}
  .article-wrap{grid-template-columns:1fr;padding:16px 20px 32px}
  .article-main{max-width:none}
  .hero h1{font-size:29px}
  .article-main h1{font-size:31px}
  /* Op mobiel strikt begrenzen tot precies het gedeclareerde AdSense-
     formaat (300x250) - geen overflow toestaan, ook niet verticaal. De
     bredere overflow:visible hierboven blijft alleen voor tablet/desktop
     gelden (waar het maar om een klein randgeval van een paar pixels gaat),
     maar op mobiel bleek een advertentie soms een veelvoud van de
     opgegeven hoogte te renderen - dat hoort dan afgekapt te worden i.p.v.
     bijna het hele scherm te vullen. */
  .obn-plek.adsense .obn-plek-media{overflow:hidden}
  /* Onder de 901px-grens staat altijd de mobiele advertentie-afbeelding
     (nooit de desktop-versie, ook niet in landscape - anders "flitst" de
     advertentie naar iets heel anders zodra iemand de telefoon draait).
     In plaats van de vaste hoogte van 160px, die bij een telefoon in
     landscape stand (breed vak, zelfde vaste hoogte) veel te veel van de
     afbeelding wegsneed, volgt de hoogte nu de echte verhouding van de
     mobiele afbeelding (800x320 = 5:2), op elke mobiele breedte. */
  .obn-plek.wide .obn-plek-media{height:auto;aspect-ratio:5/2}
}

/* ---------- responsief: mobiel — "app-achtig", geïnspireerd op nu.nl mobiel ---------- */
@media (max-width:600px){
  body{font-size:18px}
  /* Alle foto's ongeveer half zo hoog op mobiel - bij meerdere regiosecties
     onder elkaar werden de volle-breedte 16:9/16:10-foto's al snel
     schermvullend. Verhouding verdubbeld = zelfde breedte, halve hoogte. */
  /* max-height in plaats van aspect-ratio: op sommige echte telefoons
     (bevestigd op een iPhone) werd de aspect-ratio-waarde wel correct
     berekend maar niet toegepast op de daadwerkelijke hoogte - de
     afbeelding bleef gewoon zo hoog als de HTML width/height-attributen
     aangaven. max-height is een botter maar universeel betrouwbaarder
     middel voor precies dit doel. */
  .hero img{max-height:290px;object-fit:cover;object-position:var(--crop-bias)}
  .region-hero img{max-height:220px;object-fit:cover;object-position:var(--crop-bias)}
  .article-hero-img img{max-height:210px;object-fit:cover;object-position:var(--crop-bias)}
  .article-body img,
  .article-body .wp-block-image img{max-height:420px;width:100%;object-fit:cover;object-position:var(--crop-bias)}
  .layout{padding:16px 14px;gap:24px}
  .date-line{display:none}
  .hero h1{font-size:23px}
  .hero-text{padding:18px 16px 16px}
  .headline-list a{padding:14px 2px;font-size:16.5px}
  .region-section{margin-top:34px;padding-top:28px}
  .region-head{flex-wrap:wrap;row-gap:6px}
  .region-count{display:block;margin-left:0}
  .region-more{font-size:12px}
  .region-more svg{width:12px;height:12px}
  .region-hero-body h3{font-size:19px}
  .side-col{flex-direction:column}
  .side-col .widget,.side-col .newsletter,.side-col .obn-plek-groep{flex:none}
  .breadcrumb{padding:14px 16px 0}
  .article-wrap{padding:12px 16px 28px}
  .article-main h1{font-size:25px}
  .share-row{display:none}
  /* Dag 2 en 3 (niet vandaag) iets donkerder maken op mobiel - bijna zo
     donker als de website-achtergrond zelf (--bg), zodat het duidelijker
     opvalt tussen de blauwe "vandaag"-kaart en de lichtere 4 dagen erna. */
  .weer-dag:not(.is-vandaag){background:#F8F3E9}
  .article-meta{gap:8px;font-size:11.5px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto}
  .article-meta svg{width:13px;height:13px;margin-right:3px}
  .article-body{font-size:18px}
  .pull-quote{font-size:21px}
  .site-footer .container{flex-direction:column}
}

/* Deze desktop-override staat bewust helemaal onderaan het bestand: eerder
   stond hij vlak na .obn-plek, maar .article-wrap en .breadcrumb hebben
   hun eigen padding-regel pas verderop in dit bestand staan - bij gelijke
   specificiteit wint bij CSS de regel die later in de broncode staat, dus
   die latere basisregels overschreven deze fix stilletjes weer voor die
   twee elementen (vandaar dat de artikelpagina hem nooit echt kreeg).
   Helemaal onderaan zetten garandeert dat dit altijd wint, ongeacht waar
   een element zijn eigen padding verderop toevallig declareert. */
@media (min-width:901px){
  .container,.topbar-inner,.layout,.article-wrap,.date-line .container,.breadcrumb{padding-left:0;padding-right:0}
}
/* De 0px-regel hierboven geldt vanaf 901px - maar dat vangt ook elke iPad-
   stand op (landscape op alle modellen: ~1080-1366px, en zelfs de 13" Air
   in portret: 1024px), dus die stond daardoor straktegen de schermranden
   aan zoals eigenlijk alleen voor "echt brede" desktopschermen bedoeld was.
   Deze override herstelt een kleine marge specifiek voor dat tussengebied
   (901-1366px) en laat 0px alleen staan voor schermen die daadwerkelijk
   breder zijn dan de breedste iPad in landscape. */
@media (min-width:901px) and (max-width:1366px){
  .container,.layout,.article-wrap,.date-line .container,.breadcrumb{padding-left:20px;padding-right:20px}
}