/*
Theme Name: OllekeBolleke Nieuw
Theme URI: https://beta.ollekebolleke.info
Author: (intern ontwerp, in review)
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: 0.1
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;

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

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden}
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}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- topbar ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:18px;padding:14px 24px;max-width:1180px;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)}
.topnav{display:flex;gap:22px;flex:1;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;font-weight:600;font-size:15px;color:var(--ink-muted);
  padding:6px 0;border-bottom:2px solid transparent}
.topnav a:hover,.topnav a.is-active{color:var(--ink);border-color:var(--red)}
.topbar-search{flex:none;display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink-muted);font-size:14px}
.topbar-search svg{width:16px;height:16px;flex:none}
.date-line{background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink-muted);padding:8px 24px}
.date-line .container{padding:0}
/* mobiel-only elementen: standaard verborgen, pas zichtbaar binnen de
   mobiele media query hieronder - zonder dit renderen de ongestylede
   SVG-iconen op desktop reusachtig groot uit. */
.tabbar,.quicklinks{display:none}

/* ---------- lay-out: hoofd + zijbalk ---------- */
.layout{display:grid;grid-template-columns:1fr 340px;gap:36px;padding:32px 24px;max-width:1180px;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;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 a{display:flex;gap:14px;align-items:flex-start;padding:14px 2px}
.headline-list a:hover .hl-title{color:var(--red)}
.hl-thumb{flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.hl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.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-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.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}
.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)}

/* ---------- 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}
.popular-list{list-style:none;margin:0;padding:0;counter-reset:pop}
.popular-list li{counter-increment:pop;display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.popular-list li:last-child{border-bottom:0;padding-bottom:0}
.popular-list li::before{content:counter(pop);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:22px;
  color:var(--red-tint);-webkit-text-stroke:1.4px var(--red);flex:none;width:26px;line-height:1.05}
.popular-list a{font-weight:600;font-size:15px;line-height:1.4}
.popular-list a:hover{color:var(--red)}

/* 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. */
.ad-slot{background:var(--surface-2);border:1px dashed var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  padding:26px 14px;text-align:center;color:var(--ink-muted);
  aspect-ratio:300/250;max-width:300px;margin:0 auto;width:100%}
.ad-slot .ad-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.ad-slot.tall{aspect-ratio:300/600}
.ad-slot.wide{aspect-ratio:728/90;max-width:728px}

.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(--gold);
  color:#241a05;font-weight:700;font-size:14.5px;cursor:pointer}

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

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#cfc6b4;margin-top:56px;padding:36px 24px}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;font-size:13.5px}
.site-footer a{color:#e9e2d3}

/* ---------- artikelpagina ---------- */
.breadcrumb{font-size:13.5px;color:var(--ink-muted);padding:20px 24px 0;max-width:820px;margin:0 auto}
.breadcrumb a:hover{color:var(--red)}
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:40px;max-width:1180px;margin:0 auto;padding:18px 24px 40px}
.article-main{min-width:0;max-width:780px}
.article-tags{display:flex;gap:8px;margin-bottom:14px}
.tag-pill{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.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:14.5px;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:8px}
.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}
.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}
.inline-ad{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}
.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;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 .ad-slot{flex:1 1 260px}
  .region-grid{grid-template-columns:1fr}
  .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}
  .topnav{gap:16px}
}

/* ---------- 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}
  .region-hero img{max-height:220px;object-fit:cover}
  .article-hero-img img{max-height:420px;object-fit:cover}
  .article-body img,
  .article-body .wp-block-image img{max-height:420px;width:100%;object-fit:cover}
  .topbar-inner{padding:12px 16px;gap:12px}
  .logo img{width:38px;height:38px}
  .logo .wordmark{font-size:22px}
  .topbar-search{display:none}
  .topnav{display:none}
  .tabbar{display:flex;background:var(--surface);border-bottom:1px solid var(--line);
    padding:0 16px;gap:22px;overflow-x:auto}
  .tabbar a{padding:13px 0;font-weight:700;font-size:14.5px;color:var(--ink-muted);
    border-bottom:2.5px solid transparent;white-space:nowrap}
  .tabbar a.is-active{color:var(--ink);border-color:var(--red)}
  .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)}
  .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 .ad-slot{flex:none}
  .breadcrumb{padding:14px 16px 0}
  .article-wrap{padding:12px 16px 28px}
  .article-main h1{font-size:25px}
  .article-body{font-size:18px}
  .pull-quote{font-size:21px}
  .site-footer .container{flex-direction:column}
}