/* Methorst Security — basisstijl.
   Tokens: docs/kleurpalet.md · Typografie: docs/typografie.md · Responsive: docs/responsive-audit.md
   Opmaak per pagina gebeurt in Elementor; hier staan alleen fonts, tokens, basisregels en hulpklassen. */

/* ---------- Lettertype (lokaal, AVG) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens (rollen; zie kleurpalet.md §2) ---------- */
:root{
  --ms-navy-50:#EAF1F8;--ms-navy-400:#76A6D7;--ms-navy-600:#326CA5;--ms-navy-700:#215586;--ms-navy-900:#0F2A44;
  --ms-groen-100:#E1F1EC;--ms-groen-600:#0E7C66;--ms-groen-700:#0B6655;
  --ms-grijs-50:#F4F7F9;--ms-grijs-200:#DDE3EA;--ms-grijs-400:#97A3AF;--ms-grijs-600:#52606D;--ms-grijs-900:#1F2933;
  --ms-amber-100:#FDE8DD;--ms-amber-700:#843A00;--ms-rood-50:#FFF4F2;--ms-rood-100:#FEE7E3;--ms-rood-600:#B42318;--ms-rood-700:#981910;

  --ms-surface:#FFFFFF;--ms-surface-alt:var(--ms-grijs-50);--ms-surface-brand:var(--ms-navy-50);--ms-surface-inverse:var(--ms-navy-900);
  --ms-border:var(--ms-grijs-200);--ms-border-strong:var(--ms-grijs-400);
  --ms-text:var(--ms-grijs-900);--ms-text-heading:var(--ms-navy-900);--ms-text-muted:var(--ms-grijs-600);
  --ms-text-on-inverse:#FFFFFF;--ms-text-on-inverse-muted:#C9D6E3;
  --ms-action:var(--ms-groen-600);--ms-action-hover:var(--ms-groen-700);--ms-focus:var(--ms-groen-600);
  --ms-success:var(--ms-groen-700);--ms-success-bg:var(--ms-groen-100);
  --ms-warning:var(--ms-amber-700);--ms-warning-bg:var(--ms-amber-100);
  --ms-danger:var(--ms-rood-600);--ms-danger-bg:var(--ms-rood-50);
  --ms-chart-ok:#0E7C66;--ms-chart-actie:#D08700;--ms-chart-kritiek:#B42318;

  --ms-font:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ms-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ms-radius:12px;--ms-radius-sm:8px;
  --ms-header-h:72px;
}

/* ---------- Basis ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--ms-font);color:var(--ms-text);background:var(--ms-surface);font-size:18px;line-height:28px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--ms-text-heading);overflow-wrap:break-word;text-wrap:balance}
p,li{text-wrap:pretty}
.elementor-widget-text-editor p,.ms-content p{max-width:65ch}
table,.ms-prijs,.ms-tabular{font-variant-numeric:tabular-nums}
a{color:var(--ms-action)}
:focus-visible{outline:3px solid var(--ms-focus);outline-offset:2px}
[id]{scroll-margin-top:calc(var(--ms-header-h) + 56px)}
@media (max-width:767px){
  body{font-size:16px;line-height:24px}
  h1,h2,h3{hyphens:auto}
}

/* Toegankelijkheid: "Naar de inhoud"-link */
.ms-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:#fff;color:var(--ms-text-heading);padding:12px 16px;border-radius:var(--ms-radius-sm);font-weight:600}
.ms-skip:focus{left:8px}

/* ---------- Hulpklassen (te gebruiken in Elementor via "CSS-klassen") ---------- */
.ms-eyebrow,.ms-eyebrow .elementor-heading-title{font-size:13px!important;line-height:16px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ms-action)!important}

.ms-ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ms-ticks li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:16px;line-height:24px}
.ms-ticks li::before{content:"✓";color:var(--ms-action);font-weight:700}
.ms-crosses li::before{content:"✕";color:var(--ms-navy-900)}

.ms-badge{display:inline-block;font-size:13px;line-height:20px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap}
.ms-badge--ok{background:var(--ms-success-bg);color:var(--ms-success)}
.ms-badge--actie{background:var(--ms-warning-bg);color:var(--ms-warning)}
.ms-badge--kritiek{background:var(--ms-rood-100);color:var(--ms-rood-700)}

.ms-mono{font-family:var(--ms-mono);font-size:14px;line-height:20px;background:var(--ms-grijs-50);border:1px solid var(--ms-border);border-radius:var(--ms-radius-sm);padding:16px;white-space:pre-wrap;color:var(--ms-text);overflow-x:auto;margin:0}
.ms-mono b{color:var(--ms-navy-900)}
@media (max-width:767px){.ms-mono{white-space:pre;font-size:13px}}

/* Rapportvoorbeeld (homepage-hero, auditpagina) */
.ms-report-row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--ms-border);font-size:16px;line-height:24px;align-items:start}
.ms-report-row:last-of-type{border-bottom:0}
.ms-report-row small{grid-column:1/-1;font-size:14px;line-height:20px;color:var(--ms-text-muted)}

/* Header: korte knoptekst op mobiel (responsive-audit #1–#2) */
.ms-cta-short{display:none}
@media (max-width:767px){.ms-cta-long{display:none}.ms-cta-short{display:inline}}
@media (max-width:359px){.ms-header-cta{display:none!important}}

/* Prijskaart uitgelicht */
.ms-pakket--uitgelicht{border:2px solid var(--ms-action)!important;box-shadow:0 12px 40px rgba(15,42,68,.10)}
@media (min-width:768px){.ms-pakket--uitgelicht{transform:translateY(-8px)}}

/* ---------- Terugval zonder Elementor ---------- */
.ms-fallback-header,.ms-fallback-footer,.ms-content{max-width:1200px;margin:0 auto;padding:24px 32px}
.ms-fallback-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ms-border)}
.ms-logo{font-weight:700;font-size:20px;color:var(--ms-navy-900);text-decoration:none}.ms-logo span{color:var(--ms-action)}
.ms-fallback-header ul,.ms-fallback-footer ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}

/* ---------- Header (Elementor Theme Builder) ---------- */
.elementor-location-header{position:sticky;top:0;z-index:50}
.admin-bar .elementor-location-header{top:32px}
@media (max-width:782px){.admin-bar .elementor-location-header{top:46px}}
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu--main .elementor-item{font-family:var(--ms-font);font-size:16px;font-weight:400;color:var(--ms-text);padding:12px 0!important;margin:0!important}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu>li{padding:0 16px}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var(--ms-navy-900)}
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{font-weight:600}
.elementor-location-header .e--pointer-underline .elementor-item:after{background-color:var(--ms-action)!important;height:2px}
.elementor-location-header .elementor-menu-toggle{width:44px;height:44px;font-size:24px;color:var(--ms-navy-900);background:transparent;border:0}
.elementor-location-header .elementor-nav-menu--dropdown{background:#fff;border-top:1px solid var(--ms-border);box-shadow:0 12px 24px rgba(15,42,68,.08)}
.elementor-location-header .elementor-nav-menu--dropdown a{color:var(--ms-text)!important;padding:14px var(--ms-gutter,16px)!important;font-size:17px;min-height:44px}
.elementor-location-header .elementor-nav-menu--dropdown a:hover,.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active{background:var(--ms-navy-50)!important;color:var(--ms-navy-900)!important}
@media (max-width:1024px){.elementor-location-header .elementor-widget-nav-menu{order:3;flex:0 0 auto;width:auto!important;max-width:44px}.elementor-location-header .elementor-menu-toggle{margin:0!important}}
@media (max-width:359px){.elementor-location-header a[href*="aanvragen"]{display:none!important}}

/* Lege dynamische alinea's (bijv. pakket met minder punten) niet tonen */
.e-paragraph-base:empty{display:none}

/* ---------- Aanvraagformulier ---------- */
.ms-keuzekaart{cursor:pointer;transition:border-color .12s,background-color .12s}
.ms-keuzekaart:hover{border-color:var(--ms-grijs-400)!important}
.ms-keuzekaart:has(input:checked){border-color:var(--ms-action)!important;background-color:#F0F8F5!important;box-shadow:inset 0 0 0 1px var(--ms-action)}
.ms-keuzekaart:has(input:focus-visible){outline:3px solid var(--ms-focus);outline-offset:2px}
form.e-form-base input[type=radio]:checked{background-color:var(--ms-action)!important;border-color:var(--ms-action)!important;box-shadow:inset 0 0 0 3px #fff}
form.e-form-base input:user-invalid,form.e-form-base textarea:user-invalid{border-color:var(--ms-danger)!important}
.ms-formulier-melding{font-size:15px;line-height:22px;margin:8px 0 0;color:var(--ms-text-muted)}
form.e-form-base .e-form-success-message-base,form.e-form-base .e-form-error-message-base{text-align:left}

/* ---------- Responsive-fixes na audit op de gebouwde site ---------- */
/* Mobiel menu: uitklapmenu rechts onder de hamburger i.p.v. volle breedte (voorkomt horizontaal scrollen) */
.elementor-location-header .elementor-widget-nav-menu{position:relative}
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{position:absolute!important;top:calc(100% + 14px);right:0;left:auto!important;width:min(320px,calc(100vw - 32px))!important;border-radius:12px;overflow:hidden}
/* Klikvlak = hele chip/tekstlink (global class-namen staan als class in de HTML) */
.ms-ankerchip a{display:inline-block!important;padding:10px 16px!important;margin:-10px -16px!important;color:inherit;cursor:pointer}
.ms-tekstlink a{display:inline-block!important;padding:10px 0!important;margin:-10px 0!important;color:inherit;cursor:pointer}
/* Keuzekaarten op smalle schermen: toelichting mag afbreken */
@media (max-width:767px){.ms-keuzekaart .ms-klein{flex-shrink:1!important;text-align:right;min-width:0}}

/* ---------- Kennisbank: artikeltekst (WordPress-inhoud in het Elementor-sjabloon) ---------- */
.elementor-widget-theme-post-content{font-size:18px;line-height:30px;color:var(--ms-text)}
.elementor-widget-theme-post-content h2{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.02em;margin:48px 0 16px}
.elementor-widget-theme-post-content h3{font-size:20px;line-height:28px;font-weight:600;margin:32px 0 8px}
.elementor-widget-theme-post-content p{margin:0 0 20px;max-width:68ch}
.elementor-widget-theme-post-content ul,.elementor-widget-theme-post-content ol{margin:0 0 20px;padding-left:24px}
.elementor-widget-theme-post-content li{margin-bottom:8px}
.elementor-widget-theme-post-content a{color:var(--ms-action);text-decoration:underline;text-underline-offset:3px}
.elementor-widget-theme-post-content code{font-family:var(--ms-mono);font-size:15px;background:var(--ms-grijs-50);border:1px solid var(--ms-border);border-radius:4px;padding:1px 6px}
@media (max-width:767px){.elementor-widget-theme-post-content{font-size:17px;line-height:28px}.elementor-widget-theme-post-content h2{font-size:24px;line-height:32px}}