/* Letselschade Hulp – modernisering (Design, okt 2026). Bron-CSS staat in lagen wp < oxygen < migration (scripts/modernize.py); deze stylesheet is ongelaagd en wint zonder !important. */
@layer wp,oxygen,migration;
/* Self-host: plaats fonts/figtree-latin-wght.woff2 in /assets/fonts/ (SIL OFL 1.1) */
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

/* Letselschade Hulp – design tokens (identiteit ongewijzigd: kleuren uit :root van de site) */
:root{
  /* Kleuren – ongewijzigd */
  --prim:#1480EC; --sec:#FFB08F; --color-title:#05164C; --color-text:#435079;
  --light-blue:#E2EFFC; --bkg-light:#F2F3F6; --border:#B3B8C9; --white:#fff;
  /* Afgeleid, alleen voor toegankelijkheid (AA) */
  --prim-strong:#0F6BC9; --btn-bg:#0F6BC9; --btn-bg-hover:#0B5BAD; --surface-blue:#0F6BC9;  /* vlakken met witte tekst (was #1480EC, 3.9:1 -> 5.0:1) */   /* tekst/links op wit: 5.0:1; knop-hover */
  --on-sec:#05164C;        /* tekst op perzik: 11.6:1 i.p.v. wit 1.8:1 */
  --focus-ring:0 0 0 3px #fff,0 0 0 6px var(--prim-strong);

  /* Typografie – Figtree, ratio 1.25 (major third), basis 17px */
  --font-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-small:0.875rem;                                     /* 14 */
  --fs-body:1.0625rem;                                     /* 17 */
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);           /* 17→20 */
  --fs-h6:1.0625rem;                                       /* 17 */
  --fs-h5:1.25rem;                                         /* 20 */
  --fs-h4:clamp(1.25rem,1.15rem + .4vw,1.5rem);            /* 20→24 */
  --fs-h3:clamp(1.4rem,1.25rem + .6vw,1.875rem);           /* 22→30 */
  --fs-h2:clamp(1.75rem,1.45rem + 1.2vw,2.375rem);         /* 28→38 */
  --fs-h1:clamp(2.125rem,1.6rem + 2.2vw,3.25rem);          /* 34→52 */
  --lh-tight:1.15; --lh-heading:1.25; --lh-body:1.65;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
  --tracking-heading:-0.015em;

  /* Spacing – 4/8px-basis */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y:clamp(var(--space-7),4vw + 2rem,var(--space-9));  /* 48→96 */
  --container:1300px; --container-narrow:880px; --gutter:clamp(20px,4vw,32px);
  --gap-s:var(--space-3); --gap-m:var(--space-5); --gap-l:var(--space-6);
  /* bestaande site-variabelen herijken op de schaal */
  --spacing-xs:var(--space-2); --spacing-s:var(--space-4); --spacing-m:var(--space-6);
  --spacing-l:var(--space-7); --spacing-xl:var(--space-8); --spacing-xxl:var(--space-10);

  /* Vorm & diepte */
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(5,22,76,.06),0 1px 3px rgba(5,22,76,.08);
  --shadow-2:0 4px 12px rgba(5,22,76,.08),0 2px 4px rgba(5,22,76,.05);
  --shadow-3:0 12px 32px rgba(5,22,76,.12);
  --box-shadow:var(--shadow-2);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;

  /* Iconen – Lucide, 1 lijndikte */
  --icon-size:24px; --icon-stroke:1.75;
}

/* Letselschade Hulp – modernisering als override bovenop bestaande Oxygen-HTML.
   Geen copy-, kleur-, logo- of sectiewijzigingen. Vereist tokens.css + Figtree. */

/* 1. Typografie: één familie, vaste schaal */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,body .ct-text-block,body .ct-headline,body p,body li,body a,body input,body textarea,body select,body button,
body .oxy-nav-menu,body .ct-link-text,body .gform_wrapper *{font-family:var(--font-sans)}
body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-text)}
body p,body li{line-height:var(--lh-body)}
h1,h2,h3,h4,h5,h6{letter-spacing:var(--tracking-heading);text-wrap:balance}
h1,h1.ct-headline{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-bold)}
h2,h2.ct-headline{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
h3,h3.ct-headline{font-size:var(--fs-h4);line-height:var(--lh-heading);font-weight:var(--fw-bold)}
h4{font-size:var(--fs-h5);line-height:var(--lh-heading);font-weight:var(--fw-semibold)}
h5,h6{font-size:var(--fs-h6);line-height:var(--lh-heading);font-weight:var(--fw-semibold)}
.ct-section.cta .cta_text .ct-headline{font-size:var(--fs-h3);line-height:var(--lh-heading)}
.banner .ct-text-block:not(.ct-link-text){font-size:var(--fs-lead)}
p.ct-headline{font-size:var(--fs-h5);line-height:1.35;font-weight:var(--fw-bold)}
small,.small{font-size:var(--fs-small)}

/* 2. Spacing & container */
.ct-section:not(.mobile_footer)>.ct-section-inner-wrap{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter)}
.ct-section:not(.header):not(.header_top):not(.banner):not(.mobile_footer):not(.footer_trust)>.ct-section-inner-wrap{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.ct-section.section_small>.ct-section-inner-wrap{max-width:var(--container-narrow)}
.btn_group{gap:var(--space-4)}

/* 3. Knoppen */
.ct-link.btn{padding:var(--space-4) var(--space-6);gap:var(--space-3);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-1);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ct-link.btn .ct-text-block{font-weight:var(--fw-semibold);font-size:var(--fs-body);letter-spacing:.005em}
.ct-link.btn:not(.btn_alt):not(.btn_white):not(.btn_sec){background-color:var(--btn-bg);border-color:var(--btn-bg)}
.ct-link.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.ct-link.btn:not(.btn_alt):not(.btn_white):not(.btn_sec):hover{background-color:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.ct-link.btn:not(.btn_alt):not(.btn_white):not(.btn_sec):hover .ct-text-block{color:#fff}
.ct-link.btn:not(.btn_alt):not(.btn_white):not(.btn_sec):hover::after{background-color:#fff}
/* perzik: tekst navy i.p.v. wit/perzik voor AA */
.ct-link.btn.btn_sec .ct-text-block,.ct-link.btn.btn_alt .ct-text-block{color:var(--on-sec)}
.ct-link.btn.btn_sec::after,.ct-link.btn.btn_alt::after{background-color:var(--on-sec)}
.ct-link.btn.btn_alt{border-width:2px}
.banner .ct-link.btn.btn_alt{background:rgba(255,255,255,.92)}
.banner .ct-link.btn.btn_alt .ct-text-block{color:var(--color-title)}
.ct-link.btn.btn_alt:hover .ct-text-block{color:var(--on-sec)}
.gform_button,.gform_wrapper input[type=submit]{border-radius:var(--radius-pill);font-weight:var(--fw-semibold)}

/* 4. Kaarten, formulieren, beelden */
.banner .ct-div-block a[href]:has(.ct-fancy-icon),.ct-div-block.card,.ct-div-block[class*=box]{border-radius:var(--radius-m);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.banner .ct-div-block a[href]:has(.ct-fancy-icon):hover{box-shadow:var(--shadow-2);border-color:var(--prim);transform:translateY(-2px)}
.banner .ct-div-block:has(> h3)+.ct-div-block,.banner .ct-div-block:has(> h3){border-radius:var(--radius-l)}
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),.gform_wrapper textarea,.gform_wrapper select{
  border-radius:var(--radius-s);border:1px solid var(--border);padding:var(--space-3) var(--space-4);font-size:var(--fs-body)}
.ct-image:not(.logo){border-radius:var(--radius-m)}
.ct-section.cta>.ct-section-inner-wrap{border-radius:var(--radius-l)}

/* 5. Iconen – Lucide, consistente lijn */
.ct-fancy-icon>svg{width:var(--icon-size);height:var(--icon-size)}
.ct-fancy-icon>svg{fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.ct-fancy-icon{color:var(--color-title)}
.banner .ct-fancy-icon{color:var(--prim)}

/* 6. Focus & interactie (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-s)}
.ct-link.btn:focus-visible{border-radius:var(--radius-pill)}
.ct-inner-content .ct-section:not(.banner) .ct-text-block a:not(.btn),.ct-inner-content .ct-section:not(.banner) p a{color:var(--prim-strong);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none;transform:none}}

/* 7. Mobiel */
@media (max-width:767px){
  .ct-link.btn{justify-content:center;width:100%}
  .ct-section:not(.header):not(.header_top):not(.banner):not(.mobile_footer):not(.footer_trust)>.ct-section-inner-wrap{padding-top:var(--space-7);padding-bottom:var(--space-7)}
}

/* 8. Hero-tegels: compacte labels, iets grotere iconen */
.banner_form_inner a.ct-link{border-radius:var(--radius-m);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.banner_form_inner a.ct-link:hover{box-shadow:var(--shadow-2);border-color:var(--prim);transform:translateY(-2px)}
.banner_form_inner a.ct-link :not(svg):not(use){font-size:var(--fs-small);line-height:1.35;font-weight:var(--fw-medium)}
.banner_form_inner .ct-fancy-icon>svg{width:28px;height:28px;color:var(--prim)}
.banner_form{border-radius:var(--radius-l);box-shadow:var(--shadow-3)}

/* 9. Mobiele actiebalk: hoogte/opbouw ongewijzigd laten */
.mobile_footer,.mobile_footer *{line-height:1.2}
.mobile_footer .ct-text-block{font-size:var(--fs-small)}

/* 10. Taalkeuze (GTranslate-select): compact in de topbalk, rechts naast de contactlinks */
.header_top_right{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4)}
.header_top .language_switch{width:auto;flex:0 0 auto}
.lsz-site .lsz-language{height:32px;min-width:0;padding:0 var(--space-2);gap:6px;border:1px solid currentColor;border-color:rgba(255,255,255,.4);border-radius:var(--radius-pill);background:transparent;color:inherit;font:var(--fw-semibold) var(--fs-small)/1 var(--font-sans)}
.lsz-language>svg{width:16px;height:16px}
.lsz-language>svg.lsz-language-chevron{width:12px;height:12px}
.lsz-language>select{font:16px var(--font-sans)}
.lsz-language:hover{background:rgba(255,255,255,.12)}
.lsz-language:focus-within{outline:none;box-shadow:var(--focus-ring)}
/* mobiel menu: bovenaan, lichte variant */
#mobile_menu .lsz-language{color:var(--color-title);border-color:var(--border);background:#fff}
#mobile_menu .lsz-language:hover{background:#f1f6fd}

/* 11. Mobiele actiebalk (perzik): iconen + labels één kleur (navy), ook WhatsApp */
.mobile_footer .ct-section-inner-wrap>div .ct-fancy-icon,
.mobile_footer .ct-section-inner-wrap>div .ct-fancy-icon>svg,
.mobile_footer .ct-section-inner-wrap>div .ct-text-block,
.mobile_footer a.ct-link{color:var(--on-sec);fill:currentColor;text-decoration:none}
.mobile_footer .ct-section-inner-wrap>div .ct-fancy-icon>svg{width:var(--icon-size);height:var(--icon-size)}
.mobile_footer a.ct-link{text-decoration:none;border-radius:var(--radius-s);padding:2px 6px}
.mobile_footer a.ct-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sec),0 0 0 4px var(--on-sec)}
.mobile_footer a.ct-link:active{background:rgba(5,22,76,.1)}
.mobile_footer a.ct-link[aria-current=page] .ct-text-block{font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px}

/* 12. USP-ticker mobiel: nooit breder dan het scherm */
.mobile_text_scroll{overflow:hidden;max-width:100%}
/* 13. Lange samenstellingen in koppen (bijv. aansprakelijkheidsverzekering) mogen afbreken op mobiel */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}

/* 14. Knoppen in formulieren en cookiebanner-hoofdknop volgen dezelfde knopkleur */
.gform_wrapper .gform_button,.gform_wrapper input[type=submit]{background-color:var(--btn-bg);border-color:var(--btn-bg);color:#fff}
.gform_wrapper .gform_button:hover,.gform_wrapper input[type=submit]:hover{background-color:var(--btn-bg-hover)}

/* 15. Header-telefoonicoon: vaste 24px, niet afsnijden */
.header_info .info_item>img.ct-image{width:var(--icon-size);height:var(--icon-size);flex:0 0 auto;overflow:visible;object-fit:contain}

/* 16. Google-score in het contactblok: één regel, icoon 16px */
.banner_trust{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:nowrap}
.banner_trust .banner_trust_inner{display:flex;align-items:center;margin:0}
.banner_trust img.lsz-google{width:16px;height:16px;margin:0}
.banner_trust .lsz-score{white-space:nowrap;font-size:var(--fs-small);color:var(--color-title);margin:0}

/* 17. Iconen in de mobiele actiebalk: lijnicoon, ook WhatsApp (geen vulling, geen merkgroen) */
.mobile_footer .ct-section-inner-wrap>div .ct-fancy-icon>svg{fill:none}

/* 18. Cookiebanner en -knop mobiel boven de actiebalk (hoogte via enhance.ts + safe area) */
@media (max-width:767px){
  .lsz-site~.lsz-privacy .lsz-consent,.lsz-privacy .lsz-consent{bottom:calc(var(--lsz-bar-height,72px) + env(safe-area-inset-bottom,0px) + 12px);max-height:calc(100dvh - var(--lsz-bar-height,72px) - env(safe-area-inset-bottom,0px) - 24px)}
  .lsz-privacy .lsz-cookies{bottom:calc(var(--lsz-bar-height,72px) + env(safe-area-inset-bottom,0px) + 8px)}
}

/* 19. QA-contrast (WCAG AA) zonder merkkleuren te wijzigen */
.header_info .online{color:var(--color-text)}                       /* "Bereikbaar tussen…": was #B3B8C9 op wit (2.0:1) */
.toc_title .ct-text-block{color:var(--prim-strong)}                 /* "Inhoudsopgave": 3.9:1 -> 5.0:1 */
.ct-section.footer .lsz-language{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}  /* taalkeuze in blauwe footer: was 2.0:1 */
.ct-section.footer .lsz-language:hover{background:rgba(255,255,255,.12)}

/* 20. Koppen volledig navy; perzik alleen op knoppen, actiebalk en kleine decoratieve elementen (Steven 15-10) */
:where(.ct-section:not(.banner):not(.footer):not(.cta)) :is(h1,h2,h3,h4).ct-headline{color:var(--color-title)}

/* 21. QA-contrast ronde 2 (alle tekst ≥ 4.5:1, groot ≥ 3:1) */
.ct-div-block.info_item .ct-text-block.online{color:var(--color-text)}          /* "Bereikbaar tussen…" (was #B3B8C9, 2.0:1) */
.ct-div-block.author .ct-text-block b{color:var(--color-title)}                 /* "Geschreven door:" was perzik (1.6:1) */
.trustpilot-widget a{color:var(--color-title)}                                  /* was #0074DB op lichtblauw (4.0:1) */
.ct-link.btn.btn_white .ct-text-block{color:var(--prim-strong)}                 /* witte knop: blauwe tekst 3.9:1 -> 5.0:1 */
.rank-math-breadcrumb a{color:inherit}                                         /* kruimelpad: geen perzik, volgt tekstkleur */
.oxy-easy-posts-pages .page-numbers,.oxy-easy-posts-pages .page-numbers.current{color:var(--color-title)}
.ct-inner-content a:not(.btn):not(.ct-link):not(.page-numbers){color:var(--prim-strong)}
.ct-inner-content .ct-section:is(.cta,[class*=blue]) a:not(.btn){color:#fff}
.stappen_nav>div.active :is(h3,.ct-headline){color:#fff}                       /* actieve stap op blauw */
.author-website a{color:var(--prim-strong)}
.gform_wrapper .gf_step .gf_step_number{color:var(--color-title)}                 /* calculator-stapnummer (was 3.3:1) */