/*
Theme Name: Samen Slim Online
Theme URI: https://50plus-it.nl
Author: Samen Slim Online
Author URI: https://50plus-it.nl
Description: Officieel WordPress-thema voor Samen Slim Online. Verbindt 50-plussers die ICT-hulp nodig hebben met betrouwbare, geverifieerde hulpverleners bij hen in de buurt. Grote letters, duidelijke knoppen, rustige kleuren.
Version: 1.1.8
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samen-slim-online
*/

:root{
  --blue: #17546f;
  --blue-dark: #103d52;
  --blue-soft: #eaf3f6;
  --green: #2f8f6e;
  --green-dark: #1f6b51;
  --green-soft: #eaf6f0;
  --white: #ffffff;
  --text: #17262c;
  --text-muted: #45606a;
  --border: #d7e6ea;
  --veldrand: #6b8591;   /* velden: minimaal 3:1 contrast (WCAG 1.4.11) */
  --focus: #103d52;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 6px 20px rgba(16,61,82,0.10);
  --font-scale: 1;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

body{
  margin:0;
  font-family:"Atkinson Hyperlegible", Arial, sans-serif;
  background:var(--white);
  color:var(--text);
  font-size:calc(18px * var(--font-scale));
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Atkinson Hyperlegible", Arial, sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--blue-dark);
  margin:0 0 0.5em 0;
}
h1{ font-size:calc(2.5rem * var(--font-scale)); }
h2{ font-size:calc(1.9rem * var(--font-scale)); }
h3{ font-size:calc(1.35rem * var(--font-scale)); }
p{ margin:0 0 1em 0; }
a{ color:var(--blue); }
img{max-width:100%;height:auto;display:block;}
ul{margin:0;padding:0;}
li{list-style:none;}
button, input, select, textarea{ font-family:inherit; font-size:calc(1rem * var(--font-scale)); }

.skip-link, .screen-reader-text{
  position:absolute; left:-9999px; top:0; background:var(--blue-dark); color:#fff;
  padding:14px 20px; border-radius:0 0 10px 0; z-index:1000; font-weight:700;
}
.skip-link:focus, .screen-reader-text:focus{ left:0; position:absolute; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ===== Header ===== */
header.site-header{ position:relative; z-index:100; background:var(--white); border-bottom:2px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; gap:16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:52px; height:52px; flex-shrink:0; object-fit:contain; display:block; }
.brand-text{ line-height:1.15; }
.brand-text .name{ font-weight:700; font-size:1.35rem; color:var(--blue-dark); display:block; }
.brand-text .tagline{ font-size:0.85rem; color:var(--green-dark); font-weight:700; display:block; }

nav.main-nav{ display:none; }
nav.main-nav ul{ display:flex; gap:4px; flex-wrap:wrap; }
nav.main-nav a{ display:block; padding:10px 14px; border-radius:10px; text-decoration:none; color:var(--text); font-weight:700; font-size:0.98rem; }
nav.main-nav a:hover, nav.main-nav a:focus-visible{ background:var(--blue-soft); }
nav.main-nav .current-menu-item > a, nav.main-nav .current_page_item > a{ background:var(--blue); color:#fff; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.text-size-group{ display:flex; align-items:center; border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.text-size-group button{ background:var(--white); border:none; padding:8px 12px; cursor:pointer; font-weight:700; color:var(--blue-dark); border-right:2px solid var(--border); }
.text-size-group button:last-child{border-right:none;}
.text-size-group button:hover{ background:var(--blue-soft); }
.btn-account{ display:none; background:var(--white); border:2px solid var(--blue); color:var(--blue-dark); padding:9px 16px; border-radius:10px; font-weight:700; text-decoration:none; }
.btn-account:hover{ background:var(--blue-soft); }
.menu-toggle{ background:var(--blue); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; font-size:1rem; }

.mobile-menu{ display:none; position:fixed; inset:0; background:var(--white); z-index:200; padding:20px; overflow-y:auto; }
.mobile-menu.open{ display:block; }
.mobile-menu-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mobile-menu-close{ background:var(--blue-soft); border:none; border-radius:10px; padding:10px 16px; font-weight:700; font-size:1.2rem; cursor:pointer; }
.mobile-menu ul{ display:flex; flex-direction:column; gap:10px; }
.mobile-menu a{ display:block; padding:16px 18px; border-radius:12px; background:var(--blue-soft); text-decoration:none; color:var(--blue-dark); font-weight:700; font-size:1.15rem; }
.mobile-menu .current-menu-item > a{ background:var(--blue); color:#fff; }

@media (min-width:980px){
  nav.main-nav{ display:block; }
  .menu-toggle{ display:none; }
  .btn-account{ display:inline-block; }
}

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:14px; font-weight:700; font-size:1.05rem; text-decoration:none; cursor:pointer; border:2px solid transparent; min-height:56px; line-height:1.2; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); color:#fff; }
.btn-green{ background:var(--green); color:#fff; }
.btn-green:hover{ background:var(--green-dark); color:#fff; }
.btn-outline{ background:#fff; color:var(--blue-dark); border-color:var(--blue); }
.btn-outline:hover{ background:var(--blue-soft); }
.btn-block{ width:100%; }
.btn-lg{ padding:20px 32px; font-size:1.2rem; }

/* ===== Sections ===== */
section{ padding:64px 0; }
.section-soft{ background:var(--blue-soft); }
.section-soft-green{ background:var(--green-soft); }
.eyebrow{ display:inline-block; color:var(--green-dark); font-weight:700; letter-spacing:0.03em; text-transform:uppercase; font-size:0.85rem; margin-bottom:10px; }
.center{ text-align:center; }
.lead{ font-size:1.2rem; color:var(--text-muted); max-width:640px; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* ===== Hero ===== */
.hero{ background:linear-gradient(180deg, var(--blue-soft) 0%, #ffffff 100%); padding:56px 0 40px 0; }
.hero .wrap{ text-align:center; }
.hero .slogan-main{ color:var(--green-dark); font-size:calc(3rem * var(--font-scale)); font-weight:700; line-height:1.15; margin:8px 0 10px 0; }
@media (max-width:760px){ .hero .slogan-main{ font-size:calc(2.2rem * var(--font-scale)); } }
.hero .slogan-sub{ color:var(--text-muted); font-weight:400; font-size:calc(1.3rem * var(--font-scale)); margin-bottom:36px; }
.hero h1{ font-size:calc(2.1rem * var(--font-scale)); }

.choice-grid{ display:grid; grid-template-columns:1fr; gap:20px; max-width:900px; margin:0 auto; }
@media (min-width:760px){ .choice-grid{ grid-template-columns:1fr 1fr; } }
.choice-card{ background:#fff; border:2px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow); text-align:left; display:flex; flex-direction:column; gap:14px; }
.choice-card .icon-badge{ width:84px;height:84px;border-radius:20px; display:flex;align-items:center;justify-content:center; font-size:2.6rem; margin-bottom:6px; }
.choice-card.need .icon-badge{ background:#d9eaf2; }
.choice-card.give .icon-badge{ background:#d6efe3; }
.choice-card h2{ font-size:1.5rem; margin-bottom:2px; }
.choice-card p{ color:var(--text-muted); }

.step-strip{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:760px){ .step-strip{ grid-template-columns:repeat(3,1fr); } }
.step-item{ text-align:center; }
.step-num{ width:56px;height:56px;border-radius:50%;background:var(--blue); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:1.3rem; margin:0 auto 14px auto; }

.trust-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:760px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.trust-item{ text-align:center; padding:16px; }
.trust-item .emoji{ font-size:2.4rem; margin-bottom:10px; }

.card{ background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }

.helper-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .helper-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .helper-grid{ grid-template-columns:1fr 1fr 1fr; } }
.helper-card{ background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); }
.helper-top{ display:flex; gap:14px; align-items:center; }
.avatar{ width:64px;height:64px;border-radius:50%; color:#fff; font-weight:700; font-size:1.2rem; display:flex;align-items:center;justify-content:center; flex-shrink:0; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.helper-name{ font-weight:700; font-size:1.15rem; color:var(--blue-dark); }
.helper-loc{ color:var(--text-muted); font-size:0.95rem; }
.badge-verified{ display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); color:var(--green-dark); font-weight:700; font-size:0.82rem; padding:5px 10px; border-radius:999px; margin-top:4px; }
.stars{ color:#c9860a; font-weight:700; letter-spacing:1px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ background:var(--blue-soft); color:var(--blue-dark); font-size:0.82rem; font-weight:700; padding:5px 10px; border-radius:999px; }
.helper-rate{ font-weight:700; color:var(--blue-dark); }
.helper-details{ border-top:2px solid var(--border); margin-top:8px; padding-top:12px; color:var(--text-muted); font-size:0.95rem; }
.helper-details summary{ cursor:pointer; font-weight:700; color:var(--blue); list-style:none; }
.helper-details summary::-webkit-details-marker{ display:none; }
.helper-details[open] summary{ margin-bottom:8px; }

.filter-bar{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:28px; background:var(--blue-soft); padding:20px; border-radius:var(--radius); }
@media (min-width:700px){ .filter-bar{ grid-template-columns:1fr 1fr auto; align-items:end; } }

.form-shell{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .form-shell{ grid-template-columns:1.5fr 1fr; } }

.field{ margin-bottom:20px; }
.field label, fieldset legend{ display:block; font-weight:700; margin-bottom:8px; color:var(--blue-dark); font-size:1.02rem; }
fieldset{ border:none; padding:0; margin:0 0 20px 0; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field input[type=number], .field input[type=file], .field input[type=password], .field input[type=search], .field select, .field textarea{ width:100%; padding:14px 16px; border:2px solid var(--veldrand); border-radius:12px; background:#fff; color:var(--text); font-size:1.05rem; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-dark); outline:3px solid var(--focus); outline-offset:2px; }
.field input::placeholder, .field textarea::placeholder{ color:#6f7f86; opacity:1; }
/* Vinkjes en keuzerondjes groter, makkelijker aan te tikken */
input[type=checkbox], input[type=radio]{ width:22px; height:22px; accent-color:var(--blue-dark); flex-shrink:0; cursor:pointer; }
.field textarea{ min-height:110px; resize:vertical; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:560px){ .checkbox-grid{ grid-template-columns:1fr 1fr 1fr; } }
.check-item{ display:flex; align-items:center; gap:10px; background:var(--blue-soft); padding:12px 14px; border-radius:10px; }
.check-item input{ width:22px;height:22px; flex-shrink:0; }
.radio-row{ display:flex; flex-wrap:wrap; gap:12px; }
.radio-item{ display:flex; align-items:center; gap:8px; background:var(--blue-soft); padding:12px 16px; border-radius:10px; }
.radio-item input{ width:20px;height:20px; }
.helper-note{ font-size:0.92rem; color:var(--text-muted); margin-top:6px; }

.confirm-box{ background:var(--green-soft); border:2px solid var(--green); border-radius:var(--radius); padding:26px; margin-top:20px; }
.confirm-box h3{ color:var(--green-dark); margin-bottom:8px; }
.error-box{ background:#fdeeee; border:2px solid #c94b4b; border-radius:var(--radius); padding:20px; margin-top:20px; color:#7a1f1f; }

.info-box{ background:var(--blue-soft); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
.info-box h3{ margin-bottom:10px; }
.mini-step{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.mini-step .num{ width:32px;height:32px;border-radius:50%;background:var(--blue); color:#fff; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:0.9rem; }

.process-list{ display:flex; flex-direction:column; gap:20px; max-width:760px; margin:0 auto; }
.process-step{ display:flex; gap:20px; align-items:flex-start; background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.process-step .num{ width:44px;height:44px;border-radius:50%; background:var(--blue); color:#fff; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:1.1rem; }

.commission-table{ width:100%; border-collapse:collapse; margin-top:16px; }
.commission-table th, .commission-table td{ text-align:left; padding:14px 16px; border-bottom:2px solid var(--border); }
.commission-table th{ color:var(--blue-dark); font-size:0.95rem; }

.faq-item{ border:2px solid var(--border); border-radius:var(--radius); margin-bottom:14px; overflow:hidden; }
.faq-item summary{ padding:20px 22px; cursor:pointer; font-weight:700; color:var(--blue-dark); font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:var(--blue-soft); }
.faq-item summary::after{ content:"+"; font-size:1.3rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item .faq-a{ padding:0 22px 20px 22px; color:var(--text-muted); }

.values-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:700px){ .values-grid{ grid-template-columns:1fr 1fr; } }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-info-item .emoji{ font-size:1.6rem; }

.cta-banner{ background:linear-gradient(135deg, var(--blue), var(--green-dark)); border-radius:var(--radius-lg); padding:40px 32px; text-align:center; color:#fff; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:#eaf6f0; }
.cta-banner .btn-outline{ background:#fff; }

footer.site-footer{ background:var(--blue-dark); color:#dceaef; padding:48px 0 24px 0; margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:32px; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
footer h4{ color:#fff; font-size:1.05rem; margin-bottom:12px; }
footer a{ color:#bcd7e0; text-decoration:none; }
footer a:hover{ text-decoration:underline; }
footer li{ margin-bottom:8px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; font-size:0.9rem; color:#a9c8d1; text-align:center; }

.status-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:0.8rem; font-weight:700; background:var(--blue-soft); color:var(--blue-dark); }

/* Ster-rating invoer (beoordeling geven) — grote, toegankelijke tapdoelen */
.ster-rating{ display:flex; flex-direction:row-reverse; justify-content:center; gap:6px; font-size:2.6rem; margin:12px 0 20px 0; }
.ster-rating input{ position:absolute; opacity:0; width:1px; height:1px; }
.ster-rating label{ cursor:pointer; color:var(--border); transition:color .15s; }
.ster-rating input:checked ~ label,
.ster-rating label:hover,
.ster-rating label:hover ~ label{ color:#c9860a; }
.ster-rating input:focus-visible + label{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }

/* Losse beoordelingskaart op het hulpverlenersprofiel */
.review-card{ border-top:2px solid var(--border); padding:18px 0; }
.review-card:first-child{ border-top:none; padding-top:0; }
.review-card .stars{ font-size:1.1rem; }
.review-card .review-meta{ color:var(--text-muted); font-size:0.9rem; margin-top:4px; }

/* Cookiemelding */
.cookie-banner{
	position:fixed; left:0; right:0; bottom:0; z-index:400; background:var(--blue-dark); color:#eaf3f6;
	padding:18px 24px; display:none; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; text-align:center;
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ margin:0; max-width:600px; color:#eaf3f6; }
.cookie-banner a{ color:#fff; text-decoration:underline; }

/* ===== Kaartweergave hulpverleners ===== */
.ssol-kaart-wrap{ margin:0 0 20px 0; }
#ssol-kaart{ width:100%; border:2px solid var(--border); border-radius:var(--radius); z-index:1; }
#ssol-kaart .leaflet-popup-content{ font-family:inherit; font-size:0.98rem; line-height:1.5; }
#ssol-kaart .leaflet-popup-content a{ color:var(--blue); font-weight:700; }
.ssol-eigen-marker{ color:var(--green-dark); font-size:22px; line-height:22px; text-align:center; text-shadow:0 0 3px #fff, 0 0 6px #fff; }
.ssol-kaart-lijst ul{ padding:0; }
.ssol-kaart-lijst li{ list-style:none; }
.ssol-vraagkaart{ width:100%; border:2px solid var(--border); border-radius:var(--radius); z-index:1; }
.ssol-vraagkaart-wrap{ margin:0 0 6px 0; }

/* ===== Aanbod: de twee grote keuzeknoppen ===== */
.ssol-aanbod{ border-width:3px; }
.ssol-aanbod-knoppen{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.ssol-aanbod-knoppen form{ margin:0; flex:1 1 220px; }
.ssol-aanbod-knoppen .btn{ width:100%; }

/* ===== Taalwisselaar (verschijnt alleen met een vertaalplugin) ===== */
.ssol-taalwissel{ display:flex; align-items:center; }
.ssol-taalwissel .trp-language-switcher{ margin:0; }
.ssol-taalwissel .trp-language-switcher > div{
	border:2px solid var(--border); border-radius:10px; padding:6px 10px; background:#fff;
}
.ssol-taalwissel img{ display:inline-block; vertical-align:middle; }
.ssol-taalwissel-mobiel{ margin-top:16px; justify-content:center; }
.ssol-taalwissel-mobiel .trp-language-switcher > div{ padding:12px 16px; font-size:1.1rem; }

/* ===== Toegankelijkheidsbalk ===== */
.ssol-toegankelijkheid{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ssol-hulpknop{
	display:inline-flex; align-items:center; gap:6px;
	background:#fff; border:2px solid var(--border); border-radius:10px;
	padding:8px 12px; cursor:pointer; font-weight:700; color:var(--blue-dark);
	font-size:0.92rem; min-height:44px; line-height:1;
}
.ssol-hulpknop:hover{ background:var(--blue-soft); }
.ssol-hulpknop[aria-pressed="true"]{ background:var(--green); border-color:var(--green-dark); color:#fff; }
.ssol-knopicoon{ font-size:1.1rem; }
/* Op smalle schermen alleen het icoon, anders wordt de header te vol */
@media (max-width:1100px){
	.ssol-hulpknop .ssol-knoplabel{
		position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
	}
	.ssol-hulpknop{ padding:8px 10px; }
}

/* ===== Hoog contrast ===== */
.ssol-hoog-contrast{
	--blue: #000000;
	--blue-dark: #000000;
	--blue-soft: #ffffff;
	--green: #00590f;
	--green-dark: #003d0a;
	--green-soft: #ffffff;
	--text: #000000;
	--text-muted: #1a1a1a;
	--border: #000000;
	--veldrand: #000000;
	--focus: #000000;
	--shadow: none;
}
.ssol-hoog-contrast body{ background:#fff; color:#000; }
.ssol-hoog-contrast .site-header,
.ssol-hoog-contrast .card,
.ssol-hoog-contrast .helper-card,
.ssol-hoog-contrast .info-box,
.ssol-hoog-contrast .choice-card{ background:#fff; border-color:#000; }
.ssol-hoog-contrast .hero,
.ssol-hoog-contrast .section-soft,
.ssol-hoog-contrast .section-soft-green{ background:#fff; }
.ssol-hoog-contrast .btn-primary,
.ssol-hoog-contrast .btn-green{ background:#000; color:#fff; border-color:#000; }
.ssol-hoog-contrast .btn-outline{ background:#fff; color:#000; border-color:#000; }
.ssol-hoog-contrast .site-footer{ background:#000; color:#fff; }
.ssol-hoog-contrast .site-footer a,
.ssol-hoog-contrast .site-footer p{ color:#fff; }
.ssol-hoog-contrast .cta-banner{ background:#000; }
.ssol-hoog-contrast .tag,
.ssol-hoog-contrast .status-pill,
.ssol-hoog-contrast .badge-verified{ background:#fff; color:#000; border:2px solid #000; }
.ssol-hoog-contrast .stars{ color:#000; }
.ssol-hoog-contrast a{ color:#00008b; text-decoration:underline; }
.ssol-hoog-contrast .step-num,
.ssol-hoog-contrast .mini-step .num,
.ssol-hoog-contrast .process-step .num,
.ssol-hoog-contrast .avatar{ background:#000 !important; color:#fff; }
/* Op smalle schermen mag de knoppenbalk netjes naar een tweede regel */
@media (max-width:760px){
	.header-actions{ flex-wrap:wrap; justify-content:center; width:100%; gap:8px; }
	.ssol-toegankelijkheid{ justify-content:center; }
}

/* ===== Toegankelijkheidsuitleg en gedragscode ===== */
.ssol-lijst{ padding-left:0; margin:12px 0; }
.ssol-lijst li{ list-style:none; position:relative; padding-left:28px; margin-bottom:12px; }
.ssol-lijst li::before{
	content:"✓"; position:absolute; left:0; top:0;
	color:var(--green); font-weight:700; font-size:1.1rem;
}
.ssol-gedragscode h3{ margin-top:0; }
.ssol-toegankelijk-blok .card h3{ margin-top:22px; }

/* ===== Printen van het verdienoverzicht ===== */
@media print{
	.site-header, .site-footer, .mobile-menu, .cookie-banner,
	.ssol-toegankelijkheid, .menu-toggle, .btn, .ssol-aanbod,
	.ssol-kaart-wrap, .ssol-vraagkaart-wrap{ display:none !important; }
	.ssol-verdiensten{ border:none !important; box-shadow:none !important; }
	body{ background:#fff; font-size:11pt; }
	.commission-table th, .commission-table td{ padding:6px 8px; }
}

/* =========================================================
   LEESCOMFORT — basis voor iedereen
   Uitgangspunten: geen puur wit (glare bij dyslexie), ruime
   regelafstand, korte regels, links uitgelijnd, geen cursief.
   ========================================================= */
:root{
	--papier: #fbfaf7;          /* zacht gebroken wit i.p.v. #fff */
	--regelafstand: 1.7;
	--regellengte: 68ch;
}
body{ background:var(--papier); line-height:var(--regelafstand); }

/* Leesbare regellengte voor lopende tekst */
.wrap p, .wrap li, .card p, .card li, .info-box p{ max-width:var(--regellengte); }
.center p, .center .lead,
.hero .wrap p, .step-item p, .trust-item p, .cta-banner p{ margin-left:auto; margin-right:auto; }

/* Nooit uitvullen (justify): dat geeft onregelmatige gaten tussen woorden.
   Ook niet als iemand het in de editor of Elementor aanzet. */
[style*="text-align: justify"], [style*="text-align:justify"],
.has-text-align-justify{ text-align:left !important; }
p{ margin-bottom:1.15em; }
em, i{ font-style:normal; font-weight:700; }   /* cursief is lastig leesbaar */

.card, .info-box, .helper-card, .choice-card{ background:#fff; }

/* =========================================================
   KLEUR PER PAGINA — accenten uit de regenboogring van het logo.
   De kleur zit in koppen, randen en cijfers, nooit achter tekst.
   ========================================================= */
body{ --accent: #17546f; --accent-zacht: #eaf3f6; }

.template-home            { --accent:#17546f; --accent-zacht:#e9f2f6; }
.template-hulp-nodig      { --accent:#2f8f6e; --accent-zacht:#e8f5ef; }
.template-hulp-aanbieden  { --accent:#c77d0a; --accent-zacht:#fdf3e0; }
.template-hoe-werkt-het   { --accent:#8e4a9e; --accent-zacht:#f5ecf7; }
.template-hulpverleners   { --accent:#1f7fa8; --accent-zacht:#e7f3f9; }
.template-over-ons        { --accent:#6aa02a; --accent-zacht:#f0f7e6; }
.template-faq             { --accent:#c0453f; --accent-zacht:#fceceb; }
.template-contact         { --accent:#2f6fbf; --accent-zacht:#eaf1fb; }
.template-account         { --accent:#17546f; --accent-zacht:#e9f2f6; }
.template-toegankelijkheid{ --accent:#8e4a9e; --accent-zacht:#f5ecf7; }

/* Waar de accentkleur zichtbaar wordt */
.hero{ background:linear-gradient(180deg, var(--accent-zacht) 0%, var(--papier) 100%); }
.hero h1{ color:var(--accent); }
.eyebrow{ color:var(--accent); }
.section-soft{ background:var(--accent-zacht); }
.step-num, .mini-step .num, .process-step .num{ background:var(--accent); }
.card h2, .card h3{ color:var(--accent); }
h2{ color:var(--accent); }

/* Gekleurd streepje onder koppen: herkenbaar zonder dat kleur
   de enige drager van betekenis is */
section > .wrap > h2,
.center > h2{
	position:relative; padding-bottom:14px;
}
section > .wrap > h2::after,
.center > h2::after{
	content:""; position:absolute; left:0; bottom:0;
	width:72px; height:5px; border-radius:3px; background:var(--accent);
}
section > .wrap.center > h2::after,
.center > h2::after{ left:50%; right:auto; transform:translateX(-50%); }

/* Kaarten krijgen een gekleurde bovenrand — vrolijk, maar de
   tekst blijft op een rustige ondergrond staan */
.card, .helper-card, .choice-card{ border-top:5px solid var(--accent); }
.info-box{ border-left:5px solid var(--accent); background:var(--accent-zacht); }

/* =========================================================
   LEESHULP-PANEEL
   ========================================================= */
.ssol-leeshulp-paneel{
	display:none; position:absolute; right:12px; top:100%;
	background:#fff; border:3px solid var(--blue-dark); border-radius:16px;
	padding:20px; width:min(340px, calc(100vw - 24px)); z-index:150;
	box-shadow:0 12px 32px rgba(16,61,82,0.22); text-align:left;
}
.ssol-leeshulp-paneel.open{ display:block; }
.ssol-leeshulp-paneel h3{ margin:0 0 4px 0; font-size:1.15rem; }
.ssol-leeshulp-paneel > p{ font-size:0.92rem; color:var(--text-muted); margin-bottom:14px; }
.ssol-leeshulp-groep{ margin-bottom:16px; }
.ssol-leeshulp-groep > span{ display:block; font-weight:700; margin-bottom:6px; font-size:0.95rem; }
.ssol-keuzes{ display:flex; gap:8px; flex-wrap:wrap; }
.ssol-keuzes button{
	flex:1 1 auto; min-width:70px; min-height:46px; cursor:pointer;
	border:2px solid var(--border); border-radius:10px; background:#fff;
	font-weight:700; font-size:0.92rem; padding:8px 10px; color:var(--text);
}
.ssol-keuzes button[aria-pressed="true"]{ border-color:var(--blue-dark); border-width:3px; }
.ssol-keuzes button[aria-pressed="true"]::after{ content:" ✓"; }
.ssol-staal{ display:inline-block; width:100%; height:20px; border-radius:4px; border:1px solid #bbb; margin-bottom:4px; }

/* Papierkleuren (tinten die bij visuele stress rust geven) */
.ssol-papier-wit    { --papier:#ffffff; }
.ssol-papier-creme  { --papier:#fbf6e9; }
.ssol-papier-blauw  { --papier:#eef4fa; }
.ssol-papier-groen  { --papier:#eef7ef; }
.ssol-papier-perzik { --papier:#fdf0e8; }

/* Regelafstand */
.ssol-regel-ruim   { --regelafstand:2.0; }
.ssol-regel-extra  { --regelafstand:2.4; }

/* Extra open letterbeeld: meer ruimte tussen letters en woorden */
.ssol-open-letters body,
.ssol-open-letters p,
.ssol-open-letters li,
.ssol-open-letters label,
.ssol-open-letters .btn{
	letter-spacing:0.05em; word-spacing:0.16em;
}

/* Hoog contrast blijft altijd winnen van de paginakleuren */
.ssol-hoog-contrast{ --papier:#ffffff; --accent:#000000; --accent-zacht:#ffffff; }
.ssol-hoog-contrast .hero{ background:#fff; }
.ssol-hoog-contrast .hero h1,
.ssol-hoog-contrast h2,
.ssol-hoog-contrast .eyebrow,
.ssol-hoog-contrast .card h2,
.ssol-hoog-contrast .card h3{ color:#000; }
.ssol-hoog-contrast .card,
.ssol-hoog-contrast .helper-card,
.ssol-hoog-contrast .choice-card{ border-top-color:#000; }

/* ===== Horizontaal logo in de footer ===== */
.ssol-footer-logo{ width:280px; max-width:100%; height:auto; margin:0 0 16px 0; }
@media (max-width:760px){ .ssol-footer-logo{ width:240px; } }
/* In hoog contrast is de donkere footer zwart; het logo blijft leesbaar,
   maar we geven het wat lucht zodat het niet in de rand valt */
.ssol-hoog-contrast .ssol-footer-logo{ background:#fff; padding:10px; border-radius:10px; }