/*
Theme Name: WerkSchoenenWinkel Blog
Theme URI: https://www.werkschoenenwinkel.nl/
Author: WerkSchoenenWinkel
Description: Custom klassiek thema voor de WerkSchoenenWinkel-blog (WSW) — ontwerp "WSW - 1.0". Templates in PHP, artikelen in Gutenberg, ingebouwde SEO (geen SEO-plugin nodig).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wsw
*/

:root{
  --orange:        #ff8400; /* knoppen, actieve pill, H1 */
  --orange-soft:   #f18b18; /* kleine koppen, categorielabels, "lees verder" */
  --orange-deep:   #c97f29; /* sectietitels */
  --orange-text:   #b35600; /* tekstlinks in artikelen (leesbaar contrast) */
  --header-bg:     #666666;
  --nav-bg:        #555555;
  --ink:           #333333;
  --muted:         #777777;
  --grey:          #9ea4a6;
  --line:          #dddddd;
  --soft-bg:       #f6f5f3;
  --blue:          #007ba4;
  --star:          #ffa500;
  --white:         #ffffff;
  --radius-pill:   35px;
  --radius-lg:     18px;
  --radius-md:     14px;
  --gutter:        75px;
  --grid-gap:      32px;
  --font:          'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.5;color:var(--ink);background:var(--white);overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
svg{flex-shrink:0;}
button,input{font-family:inherit;}
h1,h2,h3,h4{line-height:1.2;}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;word-wrap:normal !important;}
.wsw-skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;z-index:1000;top:8px;left:8px;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;}

.wsw-icon{display:inline-block;vertical-align:middle;}

/* ---------- Actiebalk ---------- */
/* Alleen op mobiel (≤640px); op grotere schermen staat de actie in de infobalk. */
.wsw-actionbar{display:none;background:#000;color:#fff;text-align:center;font-size:14px;font-weight:600;padding:10px var(--gutter);line-height:20px;}
.wsw-actionbar a,.wsw-actionbar span{display:inline-flex;align-items:center;gap:6px;}
.wsw-actionbar .wsw-icon{width:18px;height:18px;flex:none;}
.wsw-actionbar a:hover{text-decoration:underline;}

/* ---------- Infobalk ---------- */
.wsw-infobar{display:flex;align-items:center;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;min-height:42px;padding:8px var(--gutter);font-size:14px;background:#fff;}
.wsw-infobar__menu{display:flex;flex-wrap:wrap;gap:6px 33px;list-style:none;margin:0;padding:0;}
.wsw-infobar__menu a{display:inline-flex;align-items:center;gap:8px;color:#666666;white-space:nowrap;}
.wsw-infobar__menu a:hover{text-decoration:underline;}
/* Actie-link in oranje. Bij een eigen menu: CSS-klasse "wsw-infobar__action" op het menu-item zetten. */
.wsw-infobar__menu .wsw-infobar__action > a{color:var(--orange);}
.wsw-infobar__menu .wsw-icon{width:14px;height:14px;}
.wsw-infobar__right{display:flex;align-items:center;flex-wrap:wrap;gap:6px 53px;}
.wsw-rating{display:inline-flex;align-items:center;gap:12px;color:var(--muted);white-space:nowrap;}
.wsw-rating strong{color:var(--ink);font-weight:700;}
.wsw-stars{display:inline-flex;gap:3px;color:var(--star);}
.wsw-stars .wsw-icon{width:16px;height:16px;}
.wsw-infobar__lang{color:var(--muted);white-space:nowrap;}

/* ---------- Header ---------- */
.wsw-header{background:var(--header-bg);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 40px;min-height:94px;padding:16px var(--gutter);}
.wsw-logo{display:inline-flex;justify-self:start;}
.wsw-logo__img{height:61px;width:auto;max-width:100%;}
.wsw-search{position:relative;width:100%;}
.wsw-search input{width:100%;height:55px;border:0;border-radius:26px;padding:0 20px 0 70px;font-size:15px;font-weight:300;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none;}
.wsw-search input::placeholder{color:var(--muted);opacity:1;}
.wsw-search input:focus{outline:3px solid var(--orange);outline-offset:0;}
.wsw-search__icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none;}

/* ---------- Hoofdmenu ---------- */

/* ---------- Gedeeld ---------- */
.wsw-eyebrow{margin:0;color:var(--orange-soft);font-size:15px;line-height:1.4;text-transform:uppercase;letter-spacing:.3px;}
.wsw-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 11px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--grey);}
.wsw-breadcrumbs li{display:inline-flex;align-items:center;gap:11px;min-width:0;}
.wsw-breadcrumbs .wsw-icon{width:14px;height:14px;color:var(--muted);}
.wsw-breadcrumbs a:hover{color:var(--orange);text-decoration:underline;}
.wsw-tag{display:inline-flex;align-self:flex-start;align-items:center;background:var(--nav-bg);color:#fff;font-size:15px;font-weight:800;line-height:21px;padding:10px;border-radius:var(--radius-pill);}
a.wsw-tag:hover{background:var(--orange);}
.wsw-meta{margin:0;color:var(--grey);font-size:15px;}
.wsw-readmore{display:inline-flex;align-self:flex-start;align-items:center;gap:11px;color:var(--orange-soft);font-size:16px;font-weight:300;}
.wsw-readmore .wsw-icon{width:16px;height:16px;transition:transform .15s;}
.wsw-readmore:hover{text-decoration:underline;}
.wsw-readmore:hover .wsw-icon{transform:translateX(3px);}
.wsw-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);color:#fff;font-size:15px;font-weight:800;line-height:21px;padding:10px 20px;border-radius:var(--radius-pill);border:0;cursor:pointer;transition:background .15s;}
.wsw-button .wsw-icon{width:16px;height:16px;}
.wsw-button:hover{background:#e67600;}
.wsw-button--block{display:flex;width:100%;}
.wsw-empty{margin:0;padding:12px 0 40px;color:var(--muted);}
.wsw-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--soft-bg);color:#c9c4bd;}
.wsw-placeholder .wsw-icon{width:64px;height:64px;}

/* ---------- Blog-intro (hero) ---------- */
.wsw-hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:40px var(--gutter) 44px;}
.wsw-hero__title{margin:0;max-width:1000px;color:var(--orange);font-size:26px;font-weight:700;line-height:1.2;}
.wsw-hero__intro{margin:0;color:var(--muted);font-size:16px;font-weight:500;}
.wsw-hero__intro p{margin:0;}
.wsw-hero__stats{margin:0;color:var(--grey);font-size:15px;}
.wsw-hero--archive{padding-bottom:32px;}

/* ---------- Uitgelicht artikel ---------- */
.wsw-featured{display:flex;flex-direction:column;gap:28px;padding:12px var(--gutter) 48px;}
.wsw-featured__row{display:flex;align-items:center;gap:48px;}
.wsw-featured__image{flex:0 0 480px;aspect-ratio:854/480;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft-bg);}
.wsw-featured__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.wsw-featured__image:hover img{transform:scale(1.02);}
.wsw-featured__body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.wsw-featured__title{margin:0;color:var(--orange-soft);font-size:26px;font-weight:700;line-height:1.35;}
.wsw-featured__title a:hover{text-decoration:underline;text-decoration-thickness:2px;}
.wsw-featured__excerpt{margin:0;color:var(--muted);font-size:16px;font-weight:500;}

/* ---------- Categorie-pills ---------- */

/* ---------- Artikelgrid ---------- */
.wsw-articles{padding:12px var(--gutter) 40px;}
.wsw-section-title{display:flex;flex-direction:column;gap:6px;margin-bottom:28px;}
.wsw-section-title h2{margin:0;color:black;font-size:26px;font-weight:800;}
#wsw-articles-title{color:#000;}
.wsw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--grid-gap);}
.wsw-card{display:flex;flex-direction:column;gap:26px;min-width:0;}
.wsw-card__image{display:block;aspect-ratio:416/298;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft-bg);}
.wsw-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.wsw-card__image:hover img{transform:scale(1.03);}
.wsw-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.wsw-card__cat{color:var(--orange-soft);font-size:15px;font-weight:300;letter-spacing:1.1px;text-transform:uppercase;line-height:1.4;}
.wsw-card__cat:hover{text-decoration:underline;}
.wsw-card__title{margin:0;color:var(--ink);font-size:20px;font-weight:700;line-height:1.4;}
.wsw-card__title a:hover{color:var(--orange);}
.wsw-loadmore{display:flex;justify-content:center;padding-top:44px;}
#wsw-load-more.is-loading{opacity:.7;pointer-events:none;}

/* Paginering (the_posts_pagination) — pill-knoppen in de huisstijl */
.wsw-pagination{padding-top:32px;}
.wsw-pagination .nav-links,.wsw-pagination--article{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.wsw-pagination .page-numbers,.wsw-pagination--article .post-page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1.5px solid var(--line);color:var(--ink);background:#fff;font-weight:800;font-size:15px;transition:border-color .15s,color .15s,background .15s;}
.wsw-pagination a.page-numbers:hover,.wsw-pagination--article a.post-page-numbers:hover{border-color:var(--orange);color:var(--orange);}
.wsw-pagination .page-numbers.current,.wsw-pagination--article .post-page-numbers.current{background:var(--orange);border-color:var(--orange);color:#fff;}
.wsw-pagination .page-numbers.dots{border-color:transparent;background:none;min-width:auto;padding:0 4px;}
.wsw-pagination .page-numbers .wsw-icon{width:16px;height:16px;}

/* ---------- Los artikel: header ---------- */
.wsw-article-header{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:40px var(--gutter) 32px;}
.wsw-breadcrumbs--article li:last-child span{display:inline-block;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
.wsw-article-title{margin:0;color:var(--orange);font-size:26px;font-weight:700;line-height:1.2;}
.wsw-article-intro{margin:0;color:var(--muted);font-size:18px;font-weight:500;}

/* ---------- Los artikel: tekst + sidebar ---------- */
.wsw-article{display:flex;justify-content:space-between;align-items:flex-start;gap:64px;padding:0 var(--gutter) 56px;}
.wsw-article__main{flex:1;min-width:0;}

/* Artikeltekst: GEEN flex (floats van links/rechts uitgelijnde afbeeldingen werken niet in een flex-container). */
.wsw-article-content{display:flow-root;min-width:0;font-size:17px;font-weight:400;line-height:1.7;color:var(--ink);}
/* Drievoudige class wint van de margin:0-regels voor p, figure, columns enz. hieronder. */
.wsw-article-content.wsw-article-content.wsw-article-content > * + *{margin-top:24px;}
.wsw-article-content > *:first-child{margin-top:0;}
.wsw-article-content p{margin:0;}
.wsw-article-content h2{margin:0;font-size:26px;font-weight:800;color:var(--ink);scroll-margin-top:24px;}
.wsw-article-content h3{margin:0;font-size:21px;font-weight:800;color:var(--ink);scroll-margin-top:24px;}
.wsw-article-content h4{margin:0;font-size:18px;font-weight:700;}
.wsw-article-content.wsw-article-content.wsw-article-content > h2{margin-top:44px;}
.wsw-article-content.wsw-article-content.wsw-article-content > h3{margin-top:32px;}
.wsw-article-content.wsw-article-content.wsw-article-content > h2 + *,
.wsw-article-content.wsw-article-content.wsw-article-content > h3 + *{margin-top:14px;}
.wsw-article-content h2,.wsw-article-content h3{clear:both;}
.wsw-article-content strong{font-weight:700;}
.wsw-article-content a:not([class]){color:var(--orange);text-decoration:underline;text-underline-offset:2px;}
.wsw-article-content a:not([class]):hover{text-decoration:none;}

/* Media: nooit breder dan de kolom (ook bij inline width:627px e.d.) */
.wsw-article-content img{max-width:100%;height:auto;border-radius:var(--radius-lg);}
.wsw-article-content figure,.wsw-article-content video,.wsw-article-content iframe,.wsw-article-content embed,.wsw-article-content object{max-width:100%;}
.wsw-article-content video{height:auto;}
.wsw-article-content figure{margin:0;}
.wsw-article-content figure.wp-block-image{display:block;}
.wsw-article-content figcaption,.wsw-article-content .wp-element-caption{margin-top:8px;font-size:15px;color:var(--grey);line-height:1.5;}
.wsw-article-content .wp-block-embed__wrapper iframe{width:100%;}

/* Links/rechts uitgelijnde afbeeldingen: tekst loopt ernaast. */
.wsw-article-content .alignright{float:right;margin:0 0 16px 32px;max-width:50%;}
.wsw-article-content .alignleft{float:left;margin:0 32px 16px 0;max-width:50%;}
.wsw-article-content .aligncenter{margin-left:auto;margin-right:auto;text-align:center;}
.wsw-article-content .aligncenter img{margin-left:auto;margin-right:auto;}
.wsw-article-content.wsw-article-content .wp-block-image:has(> .alignright, > .alignleft) + *{margin-top:0;}
.wsw-article-content .wp-block-image > .alignright,.wsw-article-content .wp-block-image > .alignleft{margin-top:6px;}

/* Lijsten: vinkjes en genummerde stappen */
.wsw-article-content ul{margin:0;}
.wsw-article-content ul:not([class*="gallery"]):not(.wp-block-social-links){list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;}
.wsw-article-content ul:not([class*="gallery"]):not(.wp-block-social-links) > li{position:relative;padding-left:30px;}
.wsw-article-content ul:not([class*="gallery"]):not(.wp-block-social-links) > li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 6.6 11 12 5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;}
.wsw-article-content ul ul,.wsw-article-content ol ol{margin-top:10px;}
.wsw-article-content ol{list-style:none;margin:0;padding:0;counter-reset:wsw-step;display:flex;flex-direction:column;gap:16px;}
.wsw-article-content ol > li{counter-increment:wsw-step;position:relative;padding-left:48px;min-height:32px;}
.wsw-article-content ol > li::before{content:counter(wsw-step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:15px;line-height:32px;text-align:center;}

/* Citaat */
.wsw-article-content blockquote,.wsw-article-content .wp-block-quote{margin:0;padding:20px 24px;border-left:4px solid var(--orange);background:var(--soft-bg);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:18px;font-weight:500;}
.wsw-article-content blockquote p + p{margin-top:12px;}
/* Audiospeler "Beluister dit artikel" (Figma 5:779) — assets/wsw-audio.js. Zonder JS: native speler in hetzelfde kader. */
.wp-block-audio{margin:0;padding:22px;border-radius:16px;background:#f6f6f6;}
.wp-block-audio audio{display:block;width:100%;min-width:0;height:44px;}
.wp-block-audio figcaption{margin:10px 0 0;color:#555;font-size:15px;text-align:left;}
.wp-block-audio.is-enhanced audio{display:none;}
.wsw-audio{display:flex;align-items:center;gap:20px;min-width:0;}
.wsw-audio__btn{position:relative;flex:0 0 56px;width:56px;height:56px;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .15s;}
.wsw-audio__btn:hover{transform:scale(1.05);}
.wsw-audio__btn:focus-visible,.wsw-audio__track:focus-visible{outline:3px solid #333;outline-offset:3px;}
.wsw-audio .wsw-audio__icon{position:absolute;inset:0;display:block;width:56px;height:56px;max-width:none;border-radius:0;}
.wsw-audio .wsw-audio__icon--pause,.wsw-audio.is-playing .wsw-audio__icon--play{display:none;}
.wsw-audio.is-playing .wsw-audio__icon.wsw-audio__icon--pause{display:block;}
.wsw-audio__body{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.wsw-audio__title{margin:0;color:#333;font-size:17px;font-weight:700;line-height:normal;overflow-wrap:anywhere;}
.wsw-audio__row{display:flex;align-items:center;gap:10px;}
.wsw-audio__time{flex:none;color:#555;font-size:12px;line-height:normal;white-space:nowrap;font-variant-numeric:tabular-nums;}
.wsw-audio__track{position:relative;flex:1 0 0;min-width:0;height:6px;border-radius:3px;background:#e9e9e9;cursor:pointer;touch-action:none;}
.wsw-audio__track::before{content:"";position:absolute;inset:-9px 0;} /* groter klikvlak */
.wsw-audio__fill{position:absolute;left:0;top:0;height:6px;width:0;min-width:14px;border-radius:3px;background:var(--orange,#ff8400);}
.wsw-audio.is-seeking .wsw-audio__fill{transition:none;}
.wsw-audio__vol{display:flex;align-items:center;gap:6px;flex:none;margin-left:4px;}
.wsw-audio__mute{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:#555;cursor:pointer;}
.wsw-audio__mute:hover{color:var(--orange,#ff8400);}
.wsw-audio__mute svg{display:block;width:20px;height:20px;}
.wsw-audio__mute .wsw-audio__vol-off,.wsw-audio.is-muted .wsw-audio__vol-on{display:none;}
.wsw-audio.is-muted .wsw-audio__mute .wsw-audio__vol-off{display:block;}
.wsw-audio__range{-webkit-appearance:none;appearance:none;width:84px;height:6px;margin:0;padding:0;border-radius:3px;background:linear-gradient(to right,var(--orange,#ff8400) var(--vol,100%),#e9e9e9 var(--vol,100%));cursor:pointer;}
.wsw-audio__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:0;border-radius:50%;background:var(--orange,#ff8400);box-shadow:0 0 0 2px #fff;}
.wsw-audio__range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--orange,#ff8400);box-shadow:0 0 0 2px #fff;}
.wsw-audio__range::-moz-range-track{height:6px;border-radius:3px;background:transparent;}
.wsw-audio__mute:focus-visible,.wsw-audio__range:focus-visible{outline:3px solid #333;outline-offset:3px;}
.wsw-article-content blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--muted);}

/* Kolommen → omrande vergelijkingskaarten */
.wsw-article-content .wp-block-columns{display:flex;gap:16px;margin-bottom:0;}
.wsw-article-content .wp-block-column{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 18px;}
.wsw-article-content .wp-block-column > * + *{margin-top:10px;}
.wsw-article-content .wp-block-column h3,.wsw-article-content .wp-block-column h4{font-size:18px;margin:0;}
.wsw-article-content .wp-block-column p,.wsw-article-content .wp-block-column li{font-size:15px;}

/* Tabellen */
.wsw-article-content .wp-block-table{margin-left:0;margin-right:0;overflow-x:auto;}
.wsw-article-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;border:1px solid var(--line);}
.wsw-article-content th,.wsw-article-content td{border:1px solid var(--line);padding:12px 16px;text-align:left;vertical-align:top;}
.wsw-article-content thead th,.wsw-article-content thead td{background:var(--nav-bg);color:#fff;font-weight:700;border-color:var(--nav-bg);}
.wsw-article-content tbody tr:nth-child(even) td{background:var(--soft-bg);}
.wsw-article-content .wp-block-table figcaption{text-align:left;}
.wsw-article-content .wp-block-table thead,.wsw-article-content .wp-block-table tfoot{border:0;}

/* Knoppen-blok en scheidingslijn */
.wsw-article-content .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:800;font-size:15px;padding:12px 24px;border-radius:var(--radius-pill);text-decoration:none;}
.wsw-article-content .wp-block-button__link:hover{background:#e67600;}
.wsw-article-content .is-style-outline .wp-block-button__link{background:#fff;color:var(--orange);border:1.5px solid var(--orange);}
.wsw-article-content hr{border:0;border-top:1px solid var(--line);margin-left:0;margin-right:0;}

/* Sidebar */
.wsw-sidebar{flex:0 0 360px;display:flex;flex-direction:column;gap:24px;position:sticky;top:24px;}
.wsw-toc{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;}
.wsw-toc__title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:17px;font-weight:800;}
.wsw-toc__title .wsw-icon{color:var(--orange);}
.wsw-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:wsw-toc;}
.wsw-toc li{counter-increment:wsw-toc;display:flex;gap:10px;font-size:15px;line-height:1.4;}
.wsw-toc li::before{content:counter(wsw-toc) ".";color:var(--grey);flex:0 0 auto;min-width:18px;}
.wsw-toc a{color:var(--ink);}
.wsw-toc a:hover,.wsw-toc a.is-active{color:var(--orange-text);text-decoration:underline;}
.wsw-sidebar-cta{--cta-pad:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--soft-bg);border-radius:var(--radius-lg);padding:24px;}
.wsw-sidebar-cta__title{margin:0;font-size:22px;font-weight:800;line-height:1.25;color:var(--ink);}
.wsw-sidebar-cta p:not([class]){margin:0;font-size:15px;color:var(--muted);}
/* Zijbanner uit de admin (inc/banners.php): afbeelding van rand tot rand bovenin de kaart. */
.wsw-banners{display:flex;flex-direction:column;gap:24px;}
/* Hoger dan het scherm (inhoudsopgave + 2 banners): niet sticky, anders valt de onderkant weg. */
.wsw-sidebar.is-tall{position:static;}
.wsw-banner.has-image{overflow:hidden;}
.wsw-banner__media{position:relative;display:block;align-self:stretch;margin:calc(var(--cta-pad) * -1) calc(var(--cta-pad) * -1) 4px;}
.wsw-banner__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.wsw-banner__badge{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;font-size:15px;font-weight:800;line-height:1;padding:8px 12px;border-radius:var(--radius-pill);}
.wsw-banner__badge--inline{position:static;}
.wsw-banner--image{display:block;border-radius:var(--radius-lg);overflow:hidden;}
.wsw-banner--image .wsw-banner__img{aspect-ratio:auto;transition:opacity .15s;}
.wsw-banner--image:hover .wsw-banner__img,.wsw-banner__media:hover .wsw-banner__img{opacity:.92;}

/* Gerelateerde artikelen + compact categoriemenu */
.wsw-related{background:var(--soft-bg);padding:48px var(--gutter);}
.wsw-catmenu{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding:24px var(--gutter);border-top:1px solid var(--line);}
.wsw-catmenu__title{color:var(--orange-soft);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.wsw-catmenu__list{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;}
.wsw-catmenu__link{font-size:15px;font-weight:600;color:var(--ink);}
.wsw-catmenu__link:hover{color:var(--orange-text);text-decoration:underline;}
.wsw-catmenu__link.is-active{color:var(--orange-text);text-decoration:underline;text-underline-offset:4px;}

/* 404 */
.wsw-search--inline{max-width:559px;}
.wsw-search--inline input{border:1.5px solid var(--line);}

/* ---------- Footer ---------- */
.wsw-footer{background:var(--header-bg);color:#fff;}
.wsw-footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px 86px;flex-wrap:wrap;padding:48px var(--gutter) 35px;}
.wsw-footer__brand{flex:0 1 380px;display:flex;flex-direction:column;gap:16px;}
.wsw-footer__logo img{height:auto;width:100%;max-width:320px;}
.wsw-footer__brand p{margin:0;font-size:15px;}
.wsw-rating--footer{color:#fff;font-size:14px;}
.wsw-rating--footer strong{color:#fff;}
.wsw-footer__legal strong{font-weight:700;}
.wsw-footer__title{margin:0 0 11px;font-size:20px;font-weight:800;}
.wsw-footer__list{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.55;}
.wsw-footer__list a:hover{text-decoration:underline;}
.wsw-footer__bottom{padding:16px var(--gutter);border-top:1px solid rgba(255,255,255,.18);font-size:14px;color:rgba(255,255,255,.85);}

/* ---------- Responsive ---------- */
@media (max-width: 1400px){
  :root{--gutter:75px;--grid-gap:24px;}
  .wsw-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wsw-logo__img{height:52px;}
  .wsw-featured__row{gap:36px;}
  .wsw-article{gap:40px;}
  .wsw-sidebar{flex-basis:320px;}
}
@media (max-width: 1100px){
  .wsw-featured__row{flex-direction:column;align-items:stretch;}
  .wsw-featured__image{flex:none;width:100%;}
}
@media (max-width: 900px){
  :root{--gutter:28px;--grid-gap:20px;}
  .wsw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wsw-infobar__menu li:nth-child(n+3){display:none;}
  .wsw-infobar__lang{display:none;}
  .wsw-header{grid-template-columns:auto auto;row-gap:16px;}
  .wsw-search{grid-column:1 / -1;grid-row:2;}
  .wsw-search input{height:48px;}
  .wsw-hero{padding-top:28px;padding-bottom:32px;}
  .wsw-article{flex-direction:column;align-items:flex-start;}
  .wsw-article__main{width:100%;align-self:stretch;max-width:none;}
  .wsw-article-content{width:100%;}
  /* Sidebar opgeheven: inhoudsopgave boven de tekst, webshop-CTA eronder. */
  .wsw-sidebar{display:contents;}
  .wsw-toc{order:-1;width:100%;align-self:stretch;}
  .wsw-sidebar-cta{width:100%;align-self:stretch;}
  .wsw-banner__img{aspect-ratio:2/1;}
  .wsw-banner--image{max-width:560px;}
  /* Twee banners naast elkaar zolang er ruimte is, anders onder elkaar. */
  .wsw-banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;width:100%;align-self:stretch;}
  .wsw-banners .wsw-sidebar-cta{width:auto;}
  .wsw-article-content .wp-block-columns{flex-direction:column;}
  /* Tikvlakken op touchscreens: tekstlinks krijgen verticale padding (min. ~32px hoog). */
  .wsw-catmenu__list{gap:0 20px;}
  .wsw-catmenu__link,.wsw-card__cat,.wsw-breadcrumbs a{display:inline-block;padding:6px 0;}
  .wsw-readmore{padding:6px 0;}
  .wsw-toc ol{gap:2px;}
  .wsw-toc li{align-items:baseline;}
  .wsw-toc a{display:inline-block;padding:4px 0;}
}
@media (max-width: 640px){
  .wp-block-audio{padding:16px;}
  .wsw-audio{gap:14px;}
  .wsw-audio__range{display:none;} /* smal scherm: alleen de dempknop */
  .wsw-audio__mute{width:36px;height:36px;}
  .wsw-audio__vol{margin-left:0;}
  :root{--gutter:20px;}
  .wsw-actionbar{display:block;font-size:13px;padding:8px var(--gutter);}
  .wsw-infobar{display:none;}
  /* Logo boven, zoekveld eronder over de volle breedte (net als op tablet): leesbaar logo
     en een niet-afgekapte placeholder. 16px tekst voorkomt dat iOS inzoomt bij focus. */
  .wsw-header{gap:12px;min-height:0;padding:14px var(--gutter);}
  .wsw-logo__img{height:40px;}
  .wsw-search input{height:44px;font-size:16px;padding:0 14px 0 42px;}
  .wsw-search__icon{left:15px;width:18px;height:18px;}
  .wsw-hero{gap:12px;padding-top:20px;padding-bottom:28px;}
  .wsw-hero__intro{font-size:15px;}
  .wsw-featured{gap:16px;padding-bottom:32px;}
  .wsw-featured__row{gap:20px;}
  .wsw-featured__body{gap:12px;}
  .wsw-featured__title{font-size:22px;}
  .wsw-featured__excerpt{font-size:15px;}
  .wsw-tag{font-size:13px;padding:7px 12px;}
  .wsw-section-title{margin-bottom:20px;}
  .wsw-section-title h2{font-size:24px;}
  .wsw-grid{grid-template-columns:minmax(0,1fr);gap:32px;}
  .wsw-card{gap:16px;}
  .wsw-card__body{gap:8px;}
  .wsw-card__title{font-size:19px;}
  .wsw-loadmore{padding-top:32px;}
  .wsw-pagination .page-numbers{min-width:38px;height:38px;padding:0 12px;font-size:14px;}
  .wsw-article-header{padding-top:20px;padding-bottom:24px;gap:12px;}
  .wsw-breadcrumbs--article li:last-child span{max-width:180px;}
  .wsw-article-title{font-size:20px;}
  .wsw-toc-slot{padding:32px var(--gutter);}
  .wsw-article-intro{font-size:16px;}
  .wsw-article{padding-bottom:40px;gap:32px;}
  .wsw-article-content{font-size:16px;}
  .wsw-article-content h2{font-size:23px;}
  .wsw-article-content h3{font-size:19px;}
  .wsw-article-content.wsw-article-content.wsw-article-content > h2{margin-top:36px;}
  .wsw-article-content .alignright,.wsw-article-content .alignleft{float:none;margin:0 auto;max-width:100%;}
  .wsw-article-content.wsw-article-content .wp-block-image:has(> .alignright, > .alignleft) + *{margin-top:24px;}
  .wsw-article-content table{display:block;overflow-x:auto;font-size:14px;}
  .wsw-article-content th,.wsw-article-content td{padding:10px 12px;min-width:120px;}
  .wsw-toc,.wsw-sidebar-cta{padding:18px;}
  .wsw-sidebar-cta{--cta-pad:18px;}
  .wsw-related{padding:36px var(--gutter);}
  .wsw-catmenu{flex-direction:column;gap:8px;}
  .wsw-catmenu__link{font-size:14px;}
  .wsw-footer__inner{flex-direction:column;gap:32px;padding-top:36px;}
  .wsw-footer__brand{flex-basis:auto;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;}
}