/*
Theme Name: Solvas
Theme URI: https://www.solvas.be
Author: Ozalith
Description: Block theme voor Solvas, 1 op 1 gebouwd op de goedgekeurde mockup v1.3.
Version: 0.1.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: solvas
*/

/* ===== SOLVAS - CENTRAL STYLESHEET ===== */

/* Font faces */
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Thin_13132.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Light_13129.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Regular_13131.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Medium_13130.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Bold_13127.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-ExtraBold_13128.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daxline Pro'; src: url('fonts/DaxlinePro-Black_13126.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Variables */
:root {
  --solvas-blue: #00738B;
  --solvas-blue-dark: #005A6D;
  --solvas-blue-light: #E8F4F7;
  --solvas-blue-lighter: #F2FAFB;
  --solvas-grey: #6D6E70;
  --solvas-dark: #1A1A1A;
  --solvas-orange: #D85A30;
  --solvas-orange-light: #FDF0EB;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}


/* ===== VOLLE BREEDTE =====
   De site is niet boxed. Banden lopen van rand tot rand, hun inhoud blijft
   gecentreerd binnen --site-max. Voor elementen smaller dan --site-max valt
   de berekening terug op --gutter, dus deze waarde is overal veilig. */
:root {
  --site-max: 1200px;
  --gutter: 40px;
  --bleed: max(var(--gutter), calc((100% - var(--site-max)) / 2));
}
@media (max-width: 768px) { :root { --gutter: 20px; } }

/* De inhoud binnen een band blijft op maat, ook als de band breder is. */
.footer-grid, .test-grid { max-width: var(--site-max); margin-inline: auto; }

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Daxline Pro', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--solvas-dark); background: #fff; }
a { text-decoration: none; color: inherit; }
.page-wrapper { background: #fff; min-height: 100vh; }

/* ===== TOP BAR ===== */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 24px; padding: 8px var(--bleed); background: #f8f9fa; font-size: 13px; border-bottom: 1px solid #eee; }
.topbar a { color: var(--solvas-grey); transition: color 0.2s; }
.topbar a:hover { color: var(--solvas-blue); }
.topbar .lang { display: flex; gap: 8px; margin-right: auto; font-weight: 500; }
.topbar .lang a.active { color: var(--solvas-blue); }

/* ===== HEADER ===== */
.header { display: flex; align-items: center; padding: 20px var(--bleed); background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.logo { display: flex; align-items: center; }
.logo img { height: 100px; width: auto; }

/* ===== MAIN NAV + MEGA MENU ===== */
.main-nav { display: flex; gap: 0; position: relative; margin-left: auto; }
.main-nav > .nav-item { position: relative; }
.main-nav > .nav-item > a { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--solvas-dark); border-radius: var(--radius); transition: all 0.2s; cursor: pointer; }
.main-nav > .nav-item > a:hover,
.main-nav > .nav-item:hover > a { background: var(--solvas-blue-light); color: var(--solvas-blue); }
.main-nav > .nav-item > a.active { background: var(--solvas-blue); color: #fff; }
.main-nav > .nav-item > a .fa-chevron-down { font-size: 10px; transition: transform 0.2s; }
.main-nav > .nav-item:hover > a .fa-chevron-down { transform: rotate(180deg); }

.mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #e8e8e8; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 32px; display: none; z-index: 200; min-width: 600px; }
.nav-item:hover .mega-menu { display: flex; }
.mega-menu::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: #fff; border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; rotate: 45deg; border-radius: 3px 0 0 0; }

.mega-col { flex: 1; padding: 0 20px; min-width: 170px; }
.mega-col:not(:last-child) { border-right: 1px solid #f0f0f0; }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { padding-right: 0; }
.mega-col h4 { font-size: 13px; font-weight: 700; color: var(--solvas-blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--solvas-blue-light); }
.mega-col ul { list-style: none; }
.mega-col ul li { margin-bottom: 2px; }
.mega-col ul li a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--solvas-grey); padding: 6px 8px; border-radius: 6px; transition: all 0.15s; }
.mega-col ul li a:hover { background: var(--solvas-blue-light); color: var(--solvas-blue); }
.mega-col ul li a i { font-size: 12px; color: var(--solvas-blue); opacity: 0.5; width: 16px; text-align: center; }
.mega-col ul li a:hover i { opacity: 1; }
.mega-col ul li.more a { font-weight: 700; color: var(--solvas-blue); margin-top: 4px; }
.mega-col ul li.more a:hover { background: var(--solvas-blue); color: #fff; }
.mega-col ul li.more a:hover i { color: #fff; }
.nav-item.nav-simple > a { }

/* ===== HEADER ACTION BUTTONS ===== */
.header-actions { display: flex; gap: 8px; margin-left: 12px; }
.header-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; transition: all 0.2s; white-space: nowrap; }
.header-btn-outline { background: transparent; color: var(--solvas-blue); border: 1.5px solid var(--solvas-blue); }
.header-btn-outline:hover { background: var(--solvas-blue); color: #fff; }
.header-btn-schade { background: var(--solvas-orange); color: #fff; border: 1.5px solid var(--solvas-orange); }
.header-btn-schade:hover { background: #C04D28; border-color: #C04D28; }

/* ===== HERO (homepage) ===== */
.hero { background: var(--solvas-blue); color: #fff; padding: 0; position: relative; overflow: hidden; min-height: 500px; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,77,94,0.88) 0%, rgba(0,77,94,0.55) 50%, rgba(0,77,94,0.3) 100%); }
.hero::after { content: none; }
.hero::before { content: none; }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: calc(560px + var(--bleed) + var(--gutter)); padding: 72px var(--gutter) 80px var(--bleed); }
.hero h2 { font-size: 36px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.5px; }
.hero p { font-size: 16px; line-height: 1.7; opacity: 0.88; margin-bottom: 28px; }

/* ===== INNER PAGE HERO ===== */
.page-hero { color: #fff; padding: 0; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,77,94,0.9) 0%, rgba(0,77,94,0.7) 100%); }
.page-hero-content { position: relative; z-index: 2; padding: 48px var(--bleed) 40px; }
.page-hero h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.page-hero .breadcrumb { font-size: 13px; opacity: 0.7; }
.page-hero .breadcrumb a { color: #fff; opacity: 0.8; }
.page-hero .breadcrumb a:hover { opacity: 1; }
.page-hero .breadcrumb span { margin: 0 8px; }

/* ===== BUTTONS ===== */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--solvas-blue); font-size: 14px; font-weight: 700; padding: 12px 28px; border-radius: var(--radius); transition: all 0.2s; letter-spacing: 0.3px; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); font-size: 14px; font-weight: 500; padding: 11px 24px; border-radius: var(--radius); transition: all 0.2s; margin-left: 12px; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.btn-submit { display: inline-flex; align-items: center; gap: 8px; background: var(--solvas-blue); color: #fff; font-family: 'Daxline Pro', sans-serif; font-size: 14px; font-weight: 700; padding: 14px 32px; border: none; border-radius: var(--radius); cursor: pointer; transition: all 0.2s; margin-top: 8px; }
.btn-submit:hover { background: var(--solvas-blue-dark); transform: translateY(-1px); }

/* ===== PILLARS ===== */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 var(--bleed); margin-top: -40px; position: relative; z-index: 10; }
.pillar { background: #fff; border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; box-shadow: var(--shadow-md); border: 1px solid transparent; transition: all 0.3s; cursor: pointer; }
.pillar:hover { border-color: var(--solvas-blue); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* De vier kaarten onder de hero zitten elk in een anker. Dat anker is het
   rasteritem en rekt wel mee met de rij, maar de witte doos erbinnen stopt
   bij zijn eigen tekst. Daardoor stond "Lenen" lager dan de rest, omdat die
   tekst op één regel past en de andere op twee.
   Geldt voor de drie rasters waar het anker zelf het rasteritem is:
   .pillars, .cards-grid en .zone-grid. Nagemeten over alle 50 pagina's:
   daarbuiten komt deze constructie alleen voor in .ins-col ("verplicht vs.
   aanbevolen"), en daar staan de kaarten onder elkaar in een kolom. Een
   hoogte van 100% zou daar betekenen dat één kaart de hele kolom vult, dus
   die blijft er bewust buiten. */
.pillars > a,
.cards-grid > a,
.zone-grid > a { display: block; height: 100%; }
.pillars > a > .pillar,
.cards-grid > a > .card,
.zone-grid > a > .zone-card { height: 100%; }
.pillar .icon { width: 52px; height: 52px; border-radius: 50%; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.pillar .icon i { font-size: 24px; color: var(--solvas-blue); }
.pillar h3 { font-size: 15px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 6px; }
.pillar p { font-size: 13px; color: var(--solvas-grey); line-height: 1.5; }

/* ===== SECTIONS ===== */
.section { padding: 56px var(--bleed); }
.section-header { text-align: center; margin-bottom: 36px; }
.section-header h2 { font-size: 28px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 8px; }
.section-header .accent { display: inline-block; width: 48px; height: 3px; background: var(--solvas-blue); border-radius: 2px; }
.section-header p { font-size: 15px; color: var(--solvas-grey); margin-top: 12px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.section.alt { background: var(--solvas-blue-lighter); }

/* ===== PAGE CONTENT ===== */
.page-content { padding: 48px var(--bleed); }

/* Een band die in de pagina zelf al een maximumbreedte meekrijgt (de
   smalle tekstkolommen, bv. op Geschiedenis), mag niet ook nog de
   bleed-padding dragen. Die padding rekent met de volle breedte van de
   pagina, niet met de 800px van de band, en kneep de tekstkolom daardoor
   dicht tot een strook van 95px. Zo'n band heeft genoeg aan de gutter. */
.page-content[style*="max-width"],
.section[style*="max-width"] { padding-inline: var(--gutter); }

.page-content h2 { font-size: 24px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 16px; }
.page-content h3 { font-size: 18px; font-weight: 700; color: var(--solvas-blue); margin-bottom: 12px; margin-top: 32px; }
.page-content p { font-size: 15px; color: var(--solvas-grey); line-height: 1.7; margin-bottom: 16px; }
.page-content .lead { font-size: 17px; color: var(--solvas-dark); line-height: 1.7; margin-bottom: 24px; }

/* ===== INSURANCE GRID ===== */
.ins-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.ins-col-header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }
.ins-col.verplicht .ins-col-header { background: var(--solvas-blue); color: #fff; }
.ins-col.aanbevolen .ins-col-header { background: var(--solvas-orange); color: #fff; }
.ins-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #fff; border-radius: var(--radius); border: 1px solid #eee; margin-bottom: 10px; transition: all 0.2s; cursor: pointer; }
.ins-card:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-sm); }
.ins-col.aanbevolen .ins-card:hover { border-color: var(--solvas-orange); }
.ins-card .ins-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ins-col.verplicht .ins-icon { background: var(--solvas-blue-light); }
.ins-col.verplicht .ins-icon i { color: var(--solvas-blue); }
.ins-col.aanbevolen .ins-icon { background: var(--solvas-orange-light); }
.ins-col.aanbevolen .ins-icon i { color: var(--solvas-orange); }
.ins-card .ins-icon i { font-size: 20px; }
.ins-card .ins-name { font-size: 14px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 3px; }
.ins-card .ins-desc { font-size: 12px; color: var(--solvas-grey); line-height: 1.5; }

/* Doelgroep-label op de kaarten "Verplicht vs. aanbevolen" (feedback 07/2026) */
.ins-target { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 10px; margin-bottom: 6px; }
.ins-target.ondernemers { background: var(--solvas-blue-light); color: var(--solvas-blue); }
.ins-target.particulieren { background: #eef4ea; color: #4a7c3f; }
.ins-target.beide { background: #f1f0f5; color: #5b5470; }
.ins-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: -8px 0 24px; font-size: 12px; color: var(--solvas-grey); }
.ins-card .ins-arrow { margin-left: auto; color: #ccc; font-size: 16px; align-self: center; transition: color 0.2s; }
.ins-card:hover .ins-arrow { color: var(--solvas-blue); }

/* ===== SKETCH BANNER ===== */
.sketch-banner { max-width: 900px; margin: 32px auto 0; background: var(--solvas-blue-light); border-radius: var(--radius-lg); padding: 24px 28px; display: flex; align-items: center; gap: 20px; border: 1px solid rgba(0,115,139,0.15); }
.sketch-banner .sketch-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--solvas-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sketch-banner .sketch-icon i { font-size: 24px; color: #fff; }
.sketch-banner .sketch-text { flex: 1; }
.sketch-banner .sketch-text h3 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 4px; }
.sketch-banner .sketch-text p { font-size: 13px; color: var(--solvas-grey); line-height: 1.5; }
.sketch-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--solvas-blue); color: #fff; font-size: 13px; font-weight: 500; padding: 10px 20px; border-radius: var(--radius); white-space: nowrap; transition: all 0.2s; }
.sketch-btn:hover { background: var(--solvas-blue-dark); }

/* ===== TESTIMONIALS ===== */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.test-card { background: #fff; border-radius: var(--radius-lg); padding: 24px; border: 1px solid #eee; transition: all 0.2s; }
.test-card:hover { box-shadow: var(--shadow-md); }
.test-card .stars { color: #F0A030; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.test-card .quote { font-size: 14px; color: var(--solvas-dark); line-height: 1.6; font-style: italic; margin-bottom: 16px; }
.test-card .author { display: flex; align-items: center; gap: 10px; }
.test-card .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--solvas-blue); }
.test-card .author-info .name { font-size: 13px; font-weight: 700; color: var(--solvas-dark); }
.test-card .author-info .role { font-size: 11px; color: var(--solvas-grey); }

/* ===== CTA STRIP ===== */
.cta-strip { background: linear-gradient(135deg, var(--solvas-blue) 0%, #004D5E 100%); padding: 48px var(--bleed); display: flex; align-items: center; justify-content: space-between; }
.cta-strip h3 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.cta-strip p { font-size: 14px; color: rgba(255,255,255,0.8); }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--solvas-blue); font-size: 14px; font-weight: 700; padding: 14px 28px; border-radius: var(--radius); transition: all 0.2s; }
.cta-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ===== FLOATING ACTION BUTTONS ===== */
.fab-container { position: fixed; right: max(20px, calc((100vw - 1200px)/2 + 20px)); bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.fab { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 28px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-lg); border: none; font-family: 'Daxline Pro', sans-serif; }
.fab:hover { transform: translateY(-2px); }
.fab.schade { background: var(--solvas-orange); }
.fab.schade:hover { background: #C04D28; }
.fab.contact { background: var(--solvas-blue); }
.fab.contact:hover { background: var(--solvas-blue-dark); }
.fab i { font-size: 18px; }

/* ===== FOOTER ===== */
.footer { background: #162029; padding: 48px var(--bleed) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.footer h4 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 16px; }
.footer a, .footer p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 2; display: block; transition: color 0.2s; }
.footer a:hover { color: rgba(255,255,255,0.8); }
.footer .footer-logo { margin-bottom: 12px; }
.footer .footer-logo img { height: 80px; width: auto; filter: brightness(1.3); }
.footer .footer-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 280px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.3); }

/* ===== BADGE ===== */
.mockup-badge { position: fixed; top: 16px; left: 16px; background: var(--solvas-orange); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 20px; z-index: 300; letter-spacing: 0.5px; box-shadow: var(--shadow-md); }

/* ===== CARDS GRID ===== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 24px 0; }
.card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 24px; transition: all 0.2s; }
.card:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-md); }
.card .card-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card .card-icon i { font-size: 20px; color: var(--solvas-blue); }
.card h4 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 8px; }
.card p { font-size: 13px; color: var(--solvas-grey); line-height: 1.6; margin-bottom: 12px; }
.card .card-link { font-size: 13px; font-weight: 700; color: var(--solvas-blue); display: inline-flex; align-items: center; gap: 6px; }
.card .card-link:hover { color: var(--solvas-blue-dark); }

/* ===== CONTACT FORM ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { font-family: 'Daxline Pro', sans-serif; font-size: 14px; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--radius); transition: border-color 0.2s; outline: none; color: var(--solvas-dark); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--solvas-blue); box-shadow: 0 0 0 3px rgba(0,115,139,0.1); }
.form-group textarea { resize: vertical; min-height: 120px; }

/* ===== OFFICE CARDS ===== */
/* Logoraster partnerpagina (feedback 09/2026).
   De naam staat eronder als vangnet: valt een logo weg, dan blijft die leesbaar. */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.logo-tile { position: relative; background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); height: 92px; display: flex; align-items: center; justify-content: center; padding: 14px; transition: all 0.2s; }
.logo-tile:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-sm); }
.logo-tile img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.logo-tile .logo-fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--solvas-blue); line-height: 1.3; }
@media (max-width: 700px) {
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .logo-tile { height: 76px; }
}

/* Zelf gehoste video (okt 2026) */
.solvas-video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); outline: none; }
.video-note { font-size: 12px; color: var(--solvas-grey); line-height: 1.5; margin: 10px 2px 0; }
.video-block { background: var(--solvas-blue-light); border: 1px solid rgba(0,115,139,0.15);
  border-radius: var(--radius-lg); padding: 24px 28px 28px; margin-bottom: 40px; }
.video-block-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.video-block-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--solvas-blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.video-block-icon i { font-size: 24px; color: #fff; }
@media (max-width: 600px) {
  .video-block { padding: 20px; }
  .video-block-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Beleggingssimulator (okt 2026) ---- */
.sim-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.sim-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 28px; }
.sim-h3 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin: 0 0 20px; }

.sim-field { margin-bottom: 20px; }
.sim-field label { display: block; font-size: 14px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 6px; }
.sim-val { float: right; font-weight: 700; color: var(--solvas-blue); }
.sim-input { display: flex; align-items: stretch; border: 1px solid #ddd; border-radius: var(--radius); overflow: hidden; background: #fff; }
.sim-input .sim-prefix { display: flex; align-items: center; padding: 0 14px; background: #f4f6f7; color: var(--solvas-grey); font-weight: 700; border-right: 1px solid #ddd; }
.sim-input input { flex: 1; width: 100%; border: 0; padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--solvas-dark); outline: none; background: transparent; }
.sim-help { font-size: 12px; color: var(--solvas-grey); line-height: 1.5; margin: 6px 0 0; }

.sim-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--solvas-blue-light); outline: none; }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--solvas-blue); cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sim-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--solvas-blue); cursor: pointer; border: 3px solid #fff; }
.sim-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--solvas-grey); margin-top: 6px; }

.sim-result { border-top: 1px solid #f0f0f0; }
.sim-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #e8e8e8; font-size: 15px; font-weight: 700; color: var(--solvas-dark); }
.sim-row span:last-child { white-space: nowrap; }
.sim-row-total { border-bottom: 0; border-top: 2px solid var(--solvas-blue); margin-top: 4px; padding-top: 14px; font-size: 17px; color: var(--solvas-blue); }
.sim-neg { color: var(--solvas-orange); }

.sim-chart-head { display: flex; gap: 20px; margin: 18px 0 8px; }
.sim-legend { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--solvas-grey); }
.sim-swatch, .sim-tip em { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.sw-gestort { background: #9FC4CE; }
.sw-winst { background: #00738B; }

.sim-chart { position: relative; padding-left: 46px; }
.sim-yas { position: absolute; left: 0; top: 0; width: 42px; height: 190px; }
.sim-yas span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--solvas-grey); white-space: nowrap; }
.sim-chart svg { width: 100%; height: 190px; display: block; overflow: visible; }
.sim-a1 { fill: #9FC4CE; }
.sim-a2 { fill: #00738B; stroke: #fff; stroke-width: 2; }
.sim-ln { fill: none; stroke: var(--solvas-blue-dark); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sim-gl { stroke: rgba(0,0,0,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sim-cross { stroke: var(--solvas-blue-dark); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sim-dot { fill: #fff; stroke: var(--solvas-blue-dark); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sim-axis { position: relative; height: 18px; margin-top: 2px; margin-left: 46px; }
.sim-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--solvas-grey); white-space: nowrap; }

.sim-tip { position: absolute; top: 4px; background: #fff; border: 1px solid #e3e3e3; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 12px; min-width: 150px; pointer-events: none; z-index: 3; }
.sim-tip strong { display: block; color: var(--solvas-dark); margin-bottom: 6px; font-size: 12px; }
.sim-tip span { display: flex; align-items: center; gap: 7px; color: var(--solvas-grey); line-height: 1.9; }
.sim-tip b { margin-left: auto; color: var(--solvas-dark); }
.sim-tip .tot { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 4px; padding-left: 18px; }

.sim-toggle { margin-top: 16px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--solvas-blue); cursor: pointer; text-decoration: underline; }
.sim-tabel { margin-top: 12px; max-height: 260px; overflow-y: auto; border: 1px solid #eee; border-radius: var(--radius); }
.sim-tabel table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sim-tabel th, .sim-tabel td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #f2f2f2; }
.sim-tabel th:first-child, .sim-tabel td:first-child { text-align: left; }
.sim-tabel thead th { position: sticky; top: 0; background: #f8f9fa; color: var(--solvas-dark); font-weight: 700; }
.sim-tabel td { color: var(--solvas-grey); }
.sim-tabel td strong { color: var(--solvas-dark); }

.sim-disclaimer { margin-top: 24px; background: #fff; border: 1px solid #eee; border-left: 4px solid var(--solvas-blue); border-radius: var(--radius); padding: 20px 24px; }
.sim-disclaimer p { font-size: 12px; color: var(--solvas-grey); line-height: 1.65; margin: 0 0 10px; }
.sim-disclaimer p:last-child { margin-bottom: 0; }
.sim-disclaimer strong { color: var(--solvas-dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  .sim-grid { grid-template-columns: 1fr; }
  .sim-card { padding: 22px; }
  .sim-chart svg { height: 170px; }
  .sim-yas { height: 170px; }
}

.office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 24px 0; }
.office-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s; }
.office-card:hover { box-shadow: var(--shadow-md); }
.office-card .office-img { height: 140px; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; }
.office-card .office-img i { font-size: 36px; color: var(--solvas-blue); opacity: 0.4; }
.office-card .office-info { padding: 16px; }
.office-card h4 { font-size: 15px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 4px; }
.office-card .services { font-size: 12px; color: var(--solvas-blue); font-weight: 500; margin-bottom: 8px; }
.office-card p { font-size: 12px; color: var(--solvas-grey); line-height: 1.5; margin-bottom: 0; }

/* ===== TEAM GRID ===== */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 24px 0; }
.team-member { text-align: center; }
.team-member .avatar-lg { width: 100px; height: 100px; border-radius: 50%; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 28px; font-weight: 700; color: var(--solvas-blue); }
/* Portretfoto's in de teamcirkels (feedback 09/2026).
   De initialen staan eronder: valt de foto weg, dan blijven ze zichtbaar. */
.team-member .avatar-lg { overflow: hidden; position: relative; }
.team-member .avatar-lg .avatar-ini { position: relative; z-index: 0; }
.team-member .avatar-lg img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: var(--solvas-blue-light); }
.team-member h4 { font-size: 14px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 2px; }
.team-member p { font-size: 12px; color: var(--solvas-grey); }

/* ===== BOOKINGS WIDGET ===== */
.bookings-widget { background: var(--solvas-blue-light); border: 1px solid rgba(0,115,139,0.15); border-radius: var(--radius-lg); padding: 32px; text-align: center; margin: 32px 0; }
.bookings-widget h3 { color: var(--solvas-dark); margin-top: 0; }
.bookings-widget .bookings-placeholder { background: #fff; border: 2px dashed #ccc; border-radius: var(--radius); padding: 48px; margin-top: 16px; color: var(--solvas-grey); font-size: 14px; }

/* ===== NEWS GRID ===== */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 24px 0; }
.news-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s; }
.news-card:hover { box-shadow: var(--shadow-md); }
.news-card .news-img { height: 160px; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; }
.news-card .news-img i { font-size: 36px; color: var(--solvas-blue); opacity: 0.3; }
.news-card .news-body { padding: 20px; }
.news-card .news-date { font-size: 12px; color: var(--solvas-blue); font-weight: 500; margin-bottom: 6px; }
.news-card h4 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 8px; line-height: 1.4; }
.news-card p { font-size: 13px; color: var(--solvas-grey); line-height: 1.6; margin-bottom: 12px; }

/* ===== JOBS ===== */
.job-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; display: flex; align-items: center; gap: 20px; transition: all 0.2s; }
.job-card:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-sm); }
.job-card .job-icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.job-card .job-icon i { font-size: 20px; color: var(--solvas-blue); }
.job-card .job-info { flex: 1; }
.job-card h4 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 4px; }
.job-card .job-meta { font-size: 12px; color: var(--solvas-grey); }
.job-card .job-meta span { margin-right: 16px; }

/* ===== KLANTENZONE ===== */
/* Openingsuren per kantoor (feedback 09/2026) */
.office-hours { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.office-hours .oh-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--solvas-blue); margin-bottom: 8px; }
.office-hours .oh-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; line-height: 1.6; }
.office-hours .oh-day { color: var(--solvas-dark); font-weight: 700; white-space: nowrap; }
.office-hours .oh-time { color: var(--solvas-grey); text-align: right; }
.office-hours .oh-note { font-size: 11px; color: var(--solvas-grey); line-height: 1.5; margin: 8px 0 0; font-style: italic; }

/* Vaste kolomrasters die op kleiner scherm netjes afbouwen (feedback 09/2026) */
.office-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.zone-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.zone-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .office-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .zone-grid.cols-3,
  .zone-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .office-grid.cols-3,
  .cards-grid.cols-2,
  .zone-grid.cols-3,
  .zone-grid.cols-4 { grid-template-columns: 1fr; }
  .office-hours .oh-row { flex-direction: column; gap: 0; }
  .office-hours .oh-time { text-align: left; }
}

.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.zone-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: all 0.2s; cursor: pointer; }
.zone-card:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.zone-card i { font-size: 28px; color: var(--solvas-blue); margin-bottom: 12px; }
.zone-card h4 { font-size: 14px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 4px; }
.zone-card p { font-size: 12px; color: var(--solvas-grey); }

/* ===== NEWSLETTER ===== */
.newsletter-box { background: var(--solvas-blue-light); border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: center; gap: 24px; margin: 24px 0; }
.newsletter-box .nl-text { flex: 1; }
.newsletter-box h3 { margin-top: 0; }
.newsletter-box .nl-form { display: flex; gap: 8px; }
.newsletter-box input { flex: 1; font-family: 'Daxline Pro', sans-serif; font-size: 14px; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--radius); outline: none; }
.newsletter-box input:focus { border-color: var(--solvas-blue); }

/* ===== TIMELINE (sketch page) ===== */
.timeline { position: relative; max-width: 700px; margin: 32px auto; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 3px; background: var(--solvas-blue-light); border-radius: 2px; }
.timeline-item { position: relative; margin-bottom: 32px; }
.timeline-item::before { content: ''; position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--solvas-blue); background: #fff; }
.timeline-item.verplicht::before { background: var(--solvas-blue); }
.timeline-item.aanbevolen::before { border-color: var(--solvas-orange); background: var(--solvas-orange); }
.timeline-item .tl-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.timeline-item.verplicht .tl-badge { background: var(--solvas-blue); color: #fff; }
.timeline-item.aanbevolen .tl-badge { background: var(--solvas-orange); color: #fff; }
.timeline-item h4 { font-size: 16px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 4px; }
.timeline-item .tl-scene { font-size: 14px; color: var(--solvas-grey); line-height: 1.6; font-style: italic; margin-bottom: 4px; }
.timeline-item .tl-quote { font-size: 13px; color: var(--solvas-dark); background: var(--solvas-blue-lighter); padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid var(--solvas-blue); margin-top: 8px; }
.timeline-item.aanbevolen .tl-quote { border-left-color: var(--solvas-orange); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .ins-container { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h2 { font-size: 28px; }
  .cta-strip { flex-direction: column; gap: 20px; text-align: center; }
  .header { padding: 12px var(--bleed); flex-wrap: wrap; }
  .main-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
  .main-nav > .nav-item > a { padding: 6px 10px; font-size: 13px; }
  .mega-menu { position: fixed; left: 5%; right: 5%; transform: none; min-width: auto; width: 90%; flex-wrap: wrap; }
  .mega-col { min-width: 140px; padding: 0 12px; }
  .header-actions { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .section { padding: 40px var(--bleed); }
  .sketch-banner { flex-direction: column; text-align: center; }
  .form-grid { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .newsletter-box { flex-direction: column; }
  .newsletter-box .nl-form { width: 100%; }
  .page-content { padding: 32px var(--bleed); }
}

/* ===== FAQ ACCORDION ===== */
.faq-categories { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.faq-cat-btn { padding: 10px 20px; border-radius: 24px; font-size: 13px; font-weight: 700; border: 1.5px solid #ddd; background: #fff; color: var(--solvas-grey); cursor: pointer; transition: all 0.2s; font-family: 'Daxline Pro', sans-serif; }
.faq-cat-btn:hover { border-color: var(--solvas-blue); color: var(--solvas-blue); }
.faq-cat-btn.active { background: var(--solvas-blue); color: #fff; border-color: var(--solvas-blue); }
.faq-group { margin-bottom: 40px; }
.faq-group-title { font-size: 18px; font-weight: 700; color: var(--solvas-blue); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.faq-group-title i { font-size: 16px; }
.faq-item { background: #fff; border: 1px solid #eee; border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; transition: all 0.2s; }
.faq-item:hover { border-color: var(--solvas-blue-light); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; gap: 16px; }
.faq-question h4 { font-size: 15px; font-weight: 700; color: var(--solvas-dark); margin: 0; flex: 1; }
.faq-question .faq-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--solvas-blue-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s; }
.faq-question .faq-toggle i { font-size: 12px; color: var(--solvas-blue); transition: transform 0.3s; }
.faq-item.open .faq-question .faq-toggle { background: var(--solvas-blue); }
.faq-item.open .faq-question .faq-toggle i { color: #fff; transform: rotate(180deg); }
.faq-answer { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-item.open .faq-answer { padding: 0 24px 20px; max-height: 500px; }
.faq-answer p { font-size: 14px; color: var(--solvas-grey); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------------------
   Mobiele correctie voor inline kolomrasters.
   In de mockup staat op ~130 plaatsen een inline
   style="grid-template-columns: ..." met een vast aantal kolommen.
   Een inline stijl wint van een gewone mediaquery, dus die rasters
   bleven driekoloms op een telefoon en duwden de pagina horizontaal
   breder dan het scherm. Deze twee regels dwingen ze alsnog terug.

   WORDPRESS: bij de migratie hoort dit opgelost te worden aan de bron,
   door die inline stijlen te vervangen door klassen met eigen
   breakpoints (zoals .office-grid / .cards-grid / .zone-grid hierboven).
   Deze blok mag dan weg.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Lange namen (bv. Charlotte Van Den Brande) duwden hun kaartje breder
   dan de kolom op een smal scherm. */
.team-member { min-width: 0; }
.team-member h4 { overflow-wrap: break-word; }

/* ------------------------------------------------------------------
   Zoekpagina. De zoekfunctie in de mockup is een eenvoudige lijst in
   JavaScript; in WordPress neemt de ingebouwde zoekfunctie dat over,
   maar deze opmaak van de resultaten blijft bruikbaar.
   ------------------------------------------------------------------ */
.zoek-hit { display: block; background: #fff; border: 1px solid #eee; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.zoek-hit:hover { border-color: var(--solvas-blue); box-shadow: var(--shadow-sm); }
.zoek-hit-t { display: block; font-size: 15px; font-weight: 700; color: var(--solvas-blue); margin-bottom: 3px; }
.zoek-hit-d { display: block; font-size: 13px; color: var(--solvas-grey); line-height: 1.5; }
.zoek-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zoek-chip { display: inline-block; padding: 10px 18px; background: #fff; border: 1px solid #e0e0e0; color: var(--solvas-blue); border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.zoek-chip:hover { border-color: var(--solvas-blue); background: var(--solvas-blue-lighter); }


/* ===== WORDPRESS ===== */
/* Het logo is het site-logo van WordPress, zodat het in de admin te vervangen is. */
.wp-block-site-logo.logo { line-height: 0; }
.wp-block-site-logo.logo img { height: 100px; width: auto; }
.footer-logo .wp-block-site-logo img { height: 80px; width: auto; filter: brightness(1.3); }
/* De blok-editor zet standaard marges op alles; de mockup regelt dat zelf. */
.page-wrapper .wp-block-group { margin-block-start: 0; }

/* ===== PATTERN-RASTERS =====
   Deze klassen vervangen de ~130 inline "grid-template-columns" uit de mockup.
   Daardoor mag de noodregel met !important onderaan deze stylesheet weg zodra
   alle pagina's omgezet zijn naar patterns. */
.solvas-grid { display: grid; gap: 20px; margin: 24px 0; }
.solvas-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.solvas-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.solvas-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.solvas-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 980px; margin: 0 auto; }
.solvas-split.beeld-groter { grid-template-columns: 1fr 1.15fr; }
.solvas-split img { width: 100%; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* De witte kaart met rand: 238 keer inline in de mockup, nu een klasse. */
.solvas-kaart { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 24px; }
.solvas-kaart h4 { font-size: 15px; font-weight: 700; color: var(--solvas-dark); margin-bottom: 6px; }
.solvas-kaart p { font-size: 13px; color: var(--solvas-grey); line-height: 1.6; margin: 0; }

/* Het lichtblauwe uitlichtblok. */
.solvas-uitlicht { background: var(--solvas-blue-lighter); border-left: 4px solid var(--solvas-blue); border-radius: var(--radius-lg); padding: 24px; margin: 24px 0; }

@media (max-width: 900px) {
  .solvas-grid.cols-3, .solvas-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .solvas-split, .solvas-split.beeld-groter { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .solvas-grid.cols-2, .solvas-grid.cols-3, .solvas-grid.cols-4 { grid-template-columns: 1fr; }
}

/* De footer-balk onderaan duwde "Legal | Privacy | Cookies" onder elkaar,
   omdat beide spans in een flexcontainer mochten krimpen. */
.footer-bottom { gap: 16px; flex-wrap: wrap; }
.footer-bottom span { white-space: nowrap; }
/* .footer a staat op display:block voor de kolommen; in de balk onderaan niet. */
.footer-bottom a { display: inline; }
/* De eerste span draagt nu ook de credit en mag dus wel afbreken. */
.footer-bottom span:first-child { white-space: normal; }
.footer-credit { opacity: 0.75; }
.footer-credit:hover { opacity: 1; }

/* ===== WORDPRESS: losse blokken in de pagina-inhoud =====
   Pagina's worden opgebouwd uit patterns die hun eigen container meebrengen.
   Wie rechtstreeks een alinea of een titel in de pagina zet, krijgt hier de
   juiste breedte en marges. Blokken op volle breedte blijven vrij. */
/* ===== WORDPRESS: de wikkels rond de pagina =====
   WordPress zet een blokmarge van 24px tussen de template parts en de
   inhoud, en nog eens tussen de blokken onderling. Elke band van deze site
   regelt zijn eigen afstand met padding, dus die marges geven alleen witte
   stroken boven en onder de inhoud. Ze gaan hier uit. */
.wp-site-blocks > *,
.page-wrapper > *,
.wp-block-post-content > .hero,
.wp-block-post-content > .page-hero,
.wp-block-post-content > .page-content,
.wp-block-post-content > .section,
.wp-block-post-content > .cta-strip,
.wp-block-post-content > div[style] {
  margin-block: 0;
}

/* De vier kaarten onder de hero vallen er half overheen; dat is de marge uit
   de mockup. Ze staat hier opnieuw omdat de blokmarge van WordPress er
   anders overheen gaat. */
.wp-block-post-content > .pillars { margin-block: -40px 0; }

.wp-block-post-content > p,
.wp-block-post-content > h1,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > blockquote,
.wp-block-post-content > figure,
.wp-block-post-content > .wp-block-table,
.wp-block-post-content > .wp-block-buttons {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wp-block-post-content > p { font-size: 15px; color: var(--solvas-grey); line-height: 1.7; margin-bottom: 16px; }
.wp-block-post-content > h2 { font-size: 24px; font-weight: 700; color: var(--solvas-dark); margin: 32px auto 16px; }
.wp-block-post-content > h3 { font-size: 18px; font-weight: 700; color: var(--solvas-blue); margin: 32px auto 12px; }
.wp-block-post-content > ul,
.wp-block-post-content > ol { padding-inline-start: calc(var(--gutter) + 20px); margin-bottom: 16px; font-size: 15px; color: var(--solvas-grey); line-height: 1.8; }

/* De header en de footer zijn nu groepsblokken, zodat het megamenu en de
   footerkolommen er als blok in kunnen. Het groepsblok brengt eigen marges
   mee; die zetten we hier uit zodat de opmaak ongewijzigd blijft. */
.header.wp-block-group,
.footer.wp-block-group,
.footer-grid.wp-block-group { margin-block: 0; }
.header.wp-block-group > *,
.footer.wp-block-group > *,
.footer-grid.wp-block-group > * { margin-block: 0; }

/* ===== MOBIEL MENU =====
   Op een aanraakscherm bestaat hover niet: wie op "Ondernemer" tikt springt
   meteen naar die pagina en ziet het megamenu nooit. Onder 900px verdwijnt
   de menubalk daarom en komt er een hamburger. De knoppen Contact en
   Schade melden blijven wel staan. */
.nav-toggle { display: none; }
.mobiel-menu[hidden],
.mobiel-paneel[hidden] { display: none; }

@media (max-width: 900px) {
  .header { flex-wrap: nowrap; gap: 8px; padding: 10px var(--bleed); }
  /* even specifiek als de regel die het logo op 100px zet, anders wint die */
  .logo img,
  .wp-block-site-logo.logo img { height: 56px; }
  .main-nav { display: none; }

  /* de snelkoppelingen uit de topbalk verhuizen naar het hamburgermenu */
  .topbar > a { display: none; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; width: 44px; height: 44px; padding: 0 9px; flex: none;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--solvas-dark); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .header-actions { order: 2; margin-left: auto; gap: 6px; }
  .header-btn { padding: 7px 12px; font-size: 12px; }

  /* Het paneel hangt onder de header. Die staat op sticky en is dus een
     positioneringskader, zodat top:100% hier klopt zonder hoogte te meten. */
  .mobiel-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 150;
    background: #fff; border-top: 1px solid #eee; box-shadow: var(--shadow-lg);
    max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  body.menu-open { overflow: hidden; }

  .mobiel-kop,
  .mobiel-los {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 14px var(--bleed);
    font-family: inherit; font-size: 16px; font-weight: 700; color: var(--solvas-dark);
    background: none; border: 0; border-bottom: 1px solid #f0f0f0;
    text-align: left; cursor: pointer;
  }
  .mobiel-kop i { font-size: 12px; color: var(--solvas-grey); transition: transform 0.2s; }
  .mobiel-kop[aria-expanded="true"] { color: var(--solvas-blue); }
  .mobiel-kop[aria-expanded="true"] i { transform: rotate(180deg); }

  .mobiel-paneel { padding: 4px var(--bleed) 14px; background: var(--solvas-blue-lighter); border-bottom: 1px solid #f0f0f0; }
  .mobiel-paneel h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--solvas-grey); margin: 14px 0 2px; }
  .mobiel-paneel a { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; color: var(--solvas-dark); border-bottom: 1px solid rgba(0,0,0,0.05); }
  .mobiel-paneel a i { width: 18px; text-align: center; font-size: 14px; color: var(--solvas-blue); }
  .mobiel-paneel a.mobiel-alles { font-weight: 700; color: var(--solvas-blue); }

  .mobiel-extra { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 18px var(--bleed) 0; }
  .mobiel-extra a { font-size: 13px; color: var(--solvas-grey); }
  .mobiel-extra a i { color: var(--solvas-blue); }
}

@media (max-width: 420px) {
  .logo img,
  .wp-block-site-logo.logo img { height: 48px; }
  .header-btn { padding: 6px 10px; font-size: 11px; gap: 4px; }
}

/* De twee knoppen in de hero staan naast elkaar met een marge links op de
   tweede. Breken ze af naar een eigen regel, dan doet die marge niets meer
   en plakken ze tegen elkaar. Onder de 600px zetten we ze daarom bewust
   onder elkaar, over de volle breedte: dat leest beter op een telefoon en
   het zijn meteen ruimere tikdoelen. */
@media (max-width: 600px) {
  .hero-content .btn-primary,
  .hero-content .btn-outline { display: flex; width: 100%; justify-content: center; margin-left: 0; }
  .hero-content .btn-outline { margin-top: 10px; }
}

/* ===== INFOAVOND EN INSCHRIJVINGSFORMULIER ===== */
.page-hero-content .hero-sub { font-size: 17px; color: rgba(255,255,255,0.9); line-height: 1.6; margin-top: 10px; max-width: 640px; }

.inschrijfblok { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px 32px; }
.inschrijfformulier .form-grid { margin-top: 0; }
.inschrijf-fout { background: var(--solvas-orange-light); border-left: 3px solid var(--solvas-orange); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; color: var(--solvas-dark); }
.inschrijf-klein { font-size: 12px; color: var(--solvas-grey); margin-top: 14px; }

/* Het lokaas voor botscripts. Buiten beeld, maar niet display:none, want
   dat slaan sommige scripts over. */
.solvas-vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  .inschrijfblok { padding: 22px var(--gutter); }
  .inschrijfformulier .btn-submit { width: 100%; justify-content: center; }
  .page-hero-content .hero-sub { font-size: 15px; }
}