/* ==========================================================================
   Blacksheepz – algemene thema-stijlen (header, footer, typografie, formulieren)
   Breakpoints (gelijk aan Flatsome): small < 550px, medium < 850px, large >= 850px
   ========================================================================== */

:root {
  --bsm-primary: #e74545;
  --bsm-alert: #b20000;
  --bsm-dark: #1d1d1d;
  --bsm-text: #666;           /* was #777 (4,48:1) – huisstijl v0.6, nu 5,74:1 op wit */
  --bsm-text-on-light: #5e5e5e; /* tekst op lichtgrijs #f1f1f1: 5,74:1 */
  --bsm-header: #000;         /* was #1d1d1d – rood menu-item haalt zo 5,33:1 */
  --bsm-heading: #3d3d3d;
  --bsm-container: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Blokthema-standaarden neutraliseren: Flatsome had geen blockGap tussen secties. */
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block: 0; }
.bsm-main { padding: 0 !important; }
.bsm-page-content > * { margin-block: 0; }

/* Typografie zoals Flatsome */
p { margin: 0 0 1.3em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; width: 100%; }
h1 { font-size: 1.7em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h6 { font-size: .85em; letter-spacing: .05em; text-transform: uppercase; }
.uppercase { text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.lead, p.lead { font-size: 1.3em; }
@media (max-width: 549px) {
  h1 { font-size: 1.4em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1em; }
  .lead, p.lead { font-size: 1.1em; }
}
.is-dark, .is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4, .is-dark h5, .is-dark h6, .is-dark p { color: #fff; }
.is-dark a { color: currentColor; }
.is-dark p { color: #f1f1f1; }

/* ------------------------------------------------------------------ Header */
/* Sticky: het template-part-element (<header>) om de header heen moet plakken, niet de binnenste groep */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(> .bsm-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}
body.admin-bar header.wp-block-template-part:has(> .bsm-header) { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.wp-block-template-part:has(> .bsm-header) { top: 0; } }
.bsm-header { background: var(--bsm-dark); }

.bsm-topbar {
  min-height: 30px;
  padding: 0 15px;
  background: var(--bsm-dark);
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
}
.bsm-topbar p { margin: 0; color: #fff; display: flex; align-items: center; gap: 0; }
.bsm-topbar a { color: #fff; }
.bsm-topbar a:hover { color: var(--bsm-primary); }
.bsm-topbar .fas, .bsm-topbar .far { margin-right: 2px; font-size: 11px; }
.bsm-topbar__divider {
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 10px;
  background: rgba(255, 255, 255, .2);
}
.bsm-social.wp-block-social-links { gap: 0 !important; margin: 0; }
.bsm-social.wp-block-social-links .wp-social-link { margin: 0 !important; padding: 0 3.6px; }
.bsm-social.wp-block-social-links.has-small-icon-size { font-size: 12px; }
.bsm-social .wp-block-social-link-anchor { padding: 0 !important; }
.bsm-social .wp-social-link a:hover { color: var(--bsm-primary) !important; opacity: 1; }

.bsm-mainheader {
  height: 85px;
  padding: 0 15px;
  gap: 30px;
  background: var(--bsm-dark);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: height .3s;
}
.bsm-header.is-stuck .bsm-mainheader { height: 70px; }
.bsm-logo-main { flex: 0 0 auto; margin: 0 !important; }
.bsm-logo-main img { width: 244px; height: auto; max-height: 85px; }
@media (max-width: 849px) {
  .bsm-mainheader { height: 56px; justify-content: center; position: relative; }
  .bsm-logo-main img { width: 160px; }
  /* Geen transform: die zou het (fixed) mobiele menu-overlay opsluiten in de knop */
  .bsm-mainheader .bsm-nav { position: absolute; left: 15px; top: 0; bottom: 0; display: flex; align-items: center; }
}

/* Navigatie */
.bsm-nav.wp-block-navigation {
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 12.8px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  gap: 16px;
}
.bsm-nav .wp-block-navigation__container { gap: 16px; }
.bsm-nav .wp-block-navigation-item__content { padding: 10px 0; color: #fff; line-height: 1; font-size: 12.8px; }
.bsm-nav .wp-block-navigation-item__content:hover,
.bsm-nav .current-menu-item > .wp-block-navigation-item__content,
.bsm-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.bsm-nav .wp-block-navigation-item.current-menu-item > a { color: var(--bsm-primary) !important; }
.bsm-nav .wp-block-navigation__submenu-icon { width: 8px; height: 8px; margin-left: 3px; }
.bsm-nav .wp-block-navigation__submenu-icon svg { stroke: currentColor; }
/* Dropdown */
.bsm-nav .wp-block-navigation__submenu-container {
  background: var(--bsm-dark) !important;
  border: 2px solid var(--bsm-primary) !important;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
  padding: 20px !important;
  min-width: 260px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  top: calc(100% + 10px) !important;
}
.bsm-nav .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.bsm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 0 !important;
  margin: 0 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, .8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  line-height: 1.3;
}
.bsm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content { border-bottom: 0; }
.bsm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: #fff !important; }
/* Mobiel menu (overlay) */
.bsm-nav .wp-block-navigation__responsive-container-open { color: #fff; }
.bsm-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--bsm-dark) !important;
  padding: 30px 20px;
  font-size: 1rem;
}
.bsm-nav .is-menu-open .wp-block-navigation__submenu-container {
  border: 0 !important;
  box-shadow: none;
  padding: 0 0 0 15px !important;
  min-width: 0 !important;
}

/* ------------------------------------------------------------------ Footer */
.bsm-footer { color: #f1f1f1; }
.bsm-footer__widgets { padding: 30px 15px 0; }
.bsm-footer__cols.wp-block-columns {
  max-width: var(--bsm-container);
  margin: 0 auto;
  gap: 0;
  flex-wrap: wrap !important;
}
.bsm-footer__cols > .wp-block-column { padding: 0 15px 24px; flex: 0 0 33.3333% !important; max-width: 33.3333%; }
@media (max-width: 849px) {
  .bsm-footer__cols > .wp-block-column { flex-basis: 100% !important; max-width: 100%; }
  .bsm-footer__cols > .wp-block-column:empty { display: none; }
}
.bsm-footer p { margin: 0; line-height: 1.6; }
.bsm-footer a { color: #fff; }
.bsm-footer a:hover { color: var(--bsm-primary); }
.bsm-footer__brand.wp-block-heading { font-size: 1.7em; margin: 0 0 .5em; color: #fff; }
.bsm-footer__tech { color: #fff; }
.bsm-footer__tech i { margin-right: 6px; }
.bsm-footer__social { font-size: 1.4em; }
.bsm-footer__social a { margin-right: 10px; }
.bsm-footer__bottom {
  max-width: var(--bsm-container);
  margin: 0 auto;
  padding: 10px 15px 15px;
  border-top: 1px solid var(--bsm-primary);
  font-size: .9em;
}
.bsm-footer__bottom p { padding-top: 1.6em; }
@media (max-width: 549px) {
  .bsm-footer__bottom { justify-content: center !important; text-align: center; }
}

/* ------------------------------------------------------------ Case-pagina */
.bsm-case-title { padding: 28px 15px !important; }
.bsm-case-title .wp-block-post-title {
  margin: 0;
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bsm-case { padding-top: 30px !important; }
.bsm-case .wp-block-post-content > .bsm-row:first-child { margin-top: 0; }
.bsm-case .case-type { text-transform: none; letter-spacing: 0; font-size: 1.125em; }

/* --------------------------------------------------------- Blog/overig */
.bsm-blog { padding: 40px 15px !important; }
.bsm-blog .wp-block-post-title { margin-top: 1em; }
.bsm-page-title { margin: 40px 0 20px; }

/* ------------------------------------------------------ Gravity Forms */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea {
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1) !important;
  padding: 5px 4px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 16px !important;
  color: #333 !important;
  min-height: 40px;
  background: #fff !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: #666; opacity: 1; }
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit] {
  background-color: var(--bsm-primary) !important;
  border: 1px solid rgba(0, 0, 0, .05) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 2.4em !important;
  min-height: 40px;
  padding: 0 1.2em !important;
  cursor: pointer;
}
.gform_wrapper .gform_button:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2); }

/* ---------------------------------------------------- Details (accordion) */
.wp-block-details {
  border-top: 1px solid #ddd;
  padding: .5em 0;
}
.wp-block-details summary {
  font-weight: 700;
  color: var(--bsm-heading);
  padding: .6em 0;
  cursor: pointer;
}
.wp-block-details[open] summary { color: #dc3232; }

/* Mobiele topbar: alleen telefoonnummer, gecentreerd (zoals Flatsome) */
@media (max-width: 849px) {
  .bsm-topbar { justify-content: center !important; }
  .bsm-topbar .bsm-social,
  .bsm-topbar__divider,
  .bsm-topbar__contact a { display: none !important; }
}

/* Ruimte tussen logo en menu (ook in de site-editor) */
.bsm-mainheader.wp-block-group { gap: 30px !important; }
/* Copyright-regel: © + jaartal + naam op één regel */
.bsm-copyright { gap: .3em !important; padding-top: 1.6em; color: #fff; }
.bsm-footer__bottom .bsm-copyright p { padding-top: 0; }

/* ---------------------------------------------------- Embeds (kaart e.d.) */
.bsm-embed iframe { display: block; width: 100%; height: var(--bsm-h, 450px); border: 0; }
@media (max-width: 549px) {
  .bsm-embed iframe { height: var(--bsm-h-sm, var(--bsm-h, 450px)); }
}

/* Tablet (600–849px): hamburger-menu zoals Flatsome, niet de volledige menubalk */
@media (min-width: 600px) and (max-width: 849px) {
  .bsm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .bsm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}


/* ------------------------------------------------ Contrast (huisstijl v0.6, WCAG AA)
   Zie Huisstijl/03 Website-checks/2026-10-01-contrast-voor-na.png */
/* Header zwart i.p.v. #1d1d1d, zodat het rode actieve menu-item leesbaar is. */
.bsm-header,
.bsm-topbar,
.bsm-mainheader,
.bsm-nav .wp-block-navigation__submenu-container,
.bsm-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bsm-header) !important; }
/* Tekst op lichtgrijze vlakken iets donkerder. */
.has-light-background-color,
.has-light-background-color p,
.has-light-background-color li { color: var(--bsm-text-on-light); }
/* Rode links in lopende tekst: donkerrood (7,26:1). */
.entry-content p a[style*="e74545"],
.has-primary-color:is(p, span, a):not(.wp-element-button),
p a.has-primary-color { color: var(--bsm-alert) !important; }
/* Gevulde rode knoppen: witte tekst op #e74545 (3,94:1) alleen als grote, vette tekst. */
.bsm-button.is-filled:not(.is-color-alert):not(.is-color-success):not(.is-color-white):not(.is-color-dark),
.wp-block-button:not(.is-style-outline) > .wp-element-button:not(.has-background) {
  font-size: max(1em, 19px);
  font-weight: 700;
}


/* ------------------------------------------------ Toegankelijkheid & huisstijl (websitecheck 1-10-2026) */
/* Zichtbare focus voor toetsenbordgebruikers */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bsm-primary);
  outline-offset: 2px;
}
.is-dark :where(a, button):focus-visible,
.bsm-footer :where(a, button):focus-visible,
.bsm-header :where(a, button):focus-visible { outline-color: #fff; }

/* Footerlogo (wit SVG, zelfde bestand als de header) */
.bsm-footer__logo { margin: 0 0 1em; }
.bsm-footer__logo img { width: 200px; height: auto; }

/* Rode tekstknoppen (onderstreept/outline/link) op licht: donkerrood #B20000 (7,3:1) */
.bsm-button.is-color-primary:is(.is-underline, .is-link, .is-outline) { --bsm-btn: var(--bsm-alert); }
/* …en op donker juist het lichtere accentrood (5,3:1 op zwart) */
.is-dark .bsm-button:is(.is-underline, .is-link, .is-outline):is(.is-color-alert, .is-color-primary) { --bsm-btn: var(--bsm-primary); }
.is-dark .bsm-button.is-underline:hover, .is-dark .bsm-button.is-link:hover { color: #fff; }

/* Kop die eruitziet als de intro-tekst (Home-H1) */
.bsm-lead-heading.wp-block-heading {
  font-family: var(--wp--preset--font-family--open-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--bsm-text, #666);
}

/* Kaart pas laden na klik (privacy) */
.bsm-embed { position: relative; }
.bsm-embed iframe[data-src]:not([src]) { visibility: hidden; }
.bsm-consent__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 30px;
  text-align: center;
  background: var(--bsm-light, #f1f1f1);
  color: var(--bsm-text-on-light, #5e5e5e);
}
.bsm-consent__overlay p { margin: 0; max-width: 34em; }
.bsm-consent__overlay strong { color: var(--bsm-heading); }
.bsm-consent__overlay .bsm-button { margin: .5em; }
.bsm-consent__link { color: var(--bsm-alert); text-decoration: underline; }
.bsm-embed.is-loaded .bsm-consent__overlay { display: none; }
.bsm-consent__link { display: inline-block; white-space: nowrap; }


/* ======================================================================
   Mobiel/tablet-verbeteringen (check 13-10-2026)
   ====================================================================== */

/* Mobiel menu: volledig scherm, grote tikvlakken, submenu's uitgeklapt */
.bsm-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000;
  padding: 70px 24px 40px !important;
  overflow-y: auto;
}
.bsm-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; }
.bsm-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; }
.bsm-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.bsm-nav .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 14px 0 !important;
  font-size: 17px !important;
  line-height: 1.2;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.bsm-nav .is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  padding: 0 0 6px 16px !important;
  width: 100%;
}
.bsm-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 15px !important;
  text-transform: none;
  margin: 0;
  padding: 10px 0 !important;
}
.bsm-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.bsm-nav .wp-block-navigation__responsive-container-close { top: 22px !important; right: 20px !important; color: #fff; }
.bsm-nav .wp-block-navigation__responsive-container-close svg,
.bsm-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
.bsm-nav .wp-block-navigation__responsive-container-open { padding: 8px; margin-left: -8px; }

/* Tikvlakken in de footer minimaal 44 px */
.bsm-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: 0; }
.bsm-footer__social { margin-left: -12px !important; }
.bsm-footer__bottom a { display: inline-block; padding: 12px 0; }
.bsm-topbar a { display: inline-block; padding: 4px 0; }

/* Minimale leesbare tekstgrootte */
.bsm-featured-box__text p,
.bsm-featured-box__text li { font-size: max(1em, 14px); }
.bsm-featured-box__text[style*="font-size:small"] { font-size: 15px !important; }
.bsm-button { font-size: max(.97em, 13px); }
.bsm-banner .bsm-button { font-size: max(.97em, 14px); }

/* Rode vlakken met witte koptekst: altijd ≥ 19 px vet (contrastregel huisstijl) */
.bsm-banner h3, .is-banner-text h3 { font-size: max(2em, 19px); }
@media (max-width: 549px) {
  .bsm-banner h3 { font-size: max(1.6em, 19px); }
}
/* Formulierknop: witte tekst op rood → 19 px vet */
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit] { font-size: 19px !important; padding: 0 1.4em !important; min-height: 48px; }

/* Featured boxes op mobiel: kleiner icoon, meer ruimte voor tekst */
@media (max-width: 549px) {
  .bsm-featured-box { --bsm-icon-w: 64px !important; }
  .bsm-featured-box.is-pos-left .bsm-featured-box__text { padding-left: .85em; }
}

/* Case-tegels: op touchscreens (geen hover) de titel altijd tonen */
@media (hover: none) {
  .bsm-image-box.text-hover-slide .bsm-image-box__text { opacity: 1; transform: none; pointer-events: auto; }
  .bsm-image-box.text-hover-slide .bsm-image-box__overlay-add { opacity: .35; }
}

/* Contactblok: op smalle schermen eerst het formulier, dan de kaart */
@media (max-width: 849px) {
  .bsm-row:has(> .bsm-col .bsm-embed):has(.gform_wrapper) > .bsm-col:has(.bsm-embed) { order: 2; }
  .bsm-embed iframe { height: min(var(--bsm-h, 450px), 420px); }
}
@media (max-width: 549px) {
  .bsm-embed iframe { height: var(--bsm-h-sm, 300px); }
}

/* Slider met pijlen "buiten": binnen het scherm houden als er geen ruimte is */
html { overflow-x: clip; }
.bsm-row.is-full-width .bsm-slider.nav-outside .bsm-slider__arrow.is-prev { right: auto; left: 0; }
.bsm-row.is-full-width .bsm-slider.nav-outside .bsm-slider__arrow.is-next { left: auto; right: 0; }

/* Lange e-mailadressen niet midden in een woord afbreken */
.bsm-page-content a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Koppen die voor de juiste volgorde een niveau hoger staan, houden hun oude formaat */
.wp-block-heading.bsm-h3 { font-size: 1.25em; line-height: 1.3; }
.wp-block-heading.bsm-h4 { font-size: 1.125em; line-height: 1.2; }
.wp-block-heading.bsm-h5 { font-size: 1em; }
:is(.bsm-banner, .is-banner-text) .wp-block-heading.bsm-h3 { font-size: max(2em, 19px); font-weight: 400; line-height: 1; }
:is(.bsm-banner, .is-banner-text) .wp-block-heading.bsm-h4 { font-size: 1.5em; }
.is-banner-text .bsm-featured-box .wp-block-heading.bsm-h4 { font-size: 1.5em; }

/* Slogan in paginabanners (opgemaakte tekst i.p.v. kop) */
.bsm-banner .bsm-banner-title,
.is-banner-text .bsm-banner-title {
  font-family: var(--wp--preset--font-family--roboto);
  font-weight: 700;
  font-size: max(2em, 19px);
  line-height: 1.05;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: .2em 0;
  color: inherit;
}
@media (max-width: 549px) {
  .bsm-banner .bsm-banner-title { font-size: max(1.6em, 19px); }
}

/* Titel in case-tegels */
.bsm-image-box .bsm-tile-title {
  font-family: var(--wp--preset--font-family--roboto);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.3;
  margin: .1em 0;
  color: inherit;
}
.bsm-image-box.is-dark .bsm-tile-title { color: #fff; }
/* Klikbare telefoon/e-mail in contactblok: groter tikvlak */
.bsm-page-content .wp-block-html a[href^="tel:"],
.bsm-page-content .wp-block-html a[href^="mailto:"],
.bsm-page-content a[href^="mailto:"] { display: inline-block; padding: 8px 0; color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; }

/* Dienstpagina's: intro, lijsten met vinkje/kruis, stappen en FAQ (10-2026) */
p.bsm-lead { font-size: 1.12em; line-height: 1.65; color: #444; }
ul.bsm-list-check, ul.bsm-list-cross { list-style: none; padding-left: 0; }
ul.bsm-list-check li, ul.bsm-list-cross li { position: relative; padding-left: 1.9em; margin: 0 0 .6em; }
ul.bsm-list-check li::before, ul.bsm-list-cross li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.2em; height: 1.2em;
  background: currentColor; -webkit-mask: var(--bsm-li-icon) center / contain no-repeat; mask: var(--bsm-li-icon) center / contain no-repeat;
}
ul.bsm-list-check li::before { color: #b20000; --bsm-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
ul.bsm-list-cross li::before { color: #e74545; --bsm-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.is-dark ul.bsm-list-check li::before { color: #ff7a7a; }
p.bsm-step-nr { font-family: Roboto, sans-serif; font-weight: 700; font-size: 2.6em; line-height: 1; color: #e74545; margin: 0 0 .2em; letter-spacing: -.02em; }
details.wp-block-details { border: 1px solid #e3e3e3; border-radius: 10px; padding: 0; margin: 0 0 .75em; background: #fff; }
details.wp-block-details > summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative;
  font-family: Roboto, sans-serif; font-weight: 700; color: #222; min-height: 44px;
}
details.wp-block-details > summary::-webkit-details-marker { display: none; }
details.wp-block-details > summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5em; font-weight: 400; color: #b20000; transition: transform .2s ease;
}
details.wp-block-details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
details.wp-block-details > summary:focus-visible { outline: 2px solid #b20000; outline-offset: 2px; border-radius: 10px; }
details.wp-block-details > :not(summary) { padding: 0 20px 4px; }
@media (max-width: 549px) {
  .bsm-featured-box.has-icon { --bsm-tile: 52px; }
  .bsm-featured-box.has-icon .bsm-featured-box__circle { padding: 13px; border-radius: 14px; }
  p.bsm-step-nr { font-size: 2.2em; }
}
main a[href^="tel:"] { display: inline-block; padding: 11px 0; }

/* =====================================================================
   Header 2026 – rustiger, met witruimte en een vaste inhoudsbreedte
   ===================================================================== */
:root { --bsm-container: 1240px; --bsm-gutter: max(24px, calc((100% - var(--bsm-container)) / 2)); }
.bsm-topbar,
.bsm-mainheader { padding-left: var(--bsm-gutter) !important; padding-right: var(--bsm-gutter) !important; }

/* Topbar: klein en ingetogen */
.bsm-topbar {
  min-height: 36px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bsm-topbar p, .bsm-topbar a { color: rgba(255, 255, 255, .72); }
.bsm-topbar a { text-decoration: none; transition: color .2s ease; }
.bsm-topbar a:hover { color: #fff; }
.bsm-topbar .fas, .bsm-topbar .far { margin-right: 6px; font-size: 11px; color: var(--bsm-primary); }
.bsm-topbar__divider { margin: 0 16px; background: rgba(255, 255, 255, .16); }
.bsm-social.wp-block-social-links .wp-social-link { padding: 0 6px; }
.bsm-social .wp-social-link a { color: rgba(255, 255, 255, .72) !important; }

/* Hoofdbalk: logo links, menu rechts, knop helemaal rechts */
.bsm-mainheader { height: 84px; gap: 40px !important; border-bottom: 0; }
.bsm-header.is-stuck .bsm-mainheader { height: 68px; }
.bsm-logo-main img { width: 200px; transition: width .3s ease; }
.bsm-header.is-stuck .bsm-logo-main img { width: 170px; }
.bsm-mainheader > .bsm-nav { margin-left: auto; }
.bsm-header { transition: box-shadow .3s ease; }
.bsm-header.is-stuck { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* Menu: groter, luchtiger, rode streep bij hover/actief */
.bsm-nav.wp-block-navigation { font-size: 14px !important; letter-spacing: .06em; }
.bsm-nav .wp-block-navigation__container { gap: 30px; }
.bsm-nav > .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative; padding: 12px 0; font-size: 14px;
}
.bsm-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--bsm-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.bsm-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.bsm-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.bsm-nav .wp-block-navigation-item__content:hover { color: #fff !important; }
.bsm-nav .current-menu-item > .wp-block-navigation-item__content,
.bsm-nav .current-menu-ancestor > .wp-block-navigation-item__content { color: #fff !important; }
.bsm-nav .wp-block-navigation__submenu-container { border-radius: 10px; padding: 8px 0 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); min-width: 230px !important; }
.bsm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 11px 20px !important; letter-spacing: .03em; }
.bsm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--bsm-primary) !important; background: rgba(255, 255, 255, .04); }

/* Knop in de header (donkerrood: wit haalt 7,3:1, dus ook op 14px leesbaar) */
.bsm-header-cta { flex: 0 0 auto; margin: 0 !important; }
.bsm-header-cta .wp-block-button__link {
  background: #b20000; color: #fff; border-radius: 999px;
  padding: 11px 22px; font-family: Roboto, sans-serif; font-weight: 700;
  font-size: 14px !important; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}
.bsm-header-cta .wp-block-button__link:hover { background: #e74545; transform: translateY(-1px); }
@media (max-width: 1024px) and (min-width: 850px) {
  .bsm-nav .wp-block-navigation__container { gap: 20px; }
  .bsm-mainheader { gap: 24px !important; }
}
@media (max-width: 849px) {
  .bsm-mainheader { height: 60px; justify-content: center; }
  .bsm-header-cta { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
  .bsm-header-cta .wp-block-button__link { padding: 9px 14px; font-size: 12px !important; }
  .bsm-mainheader .bsm-nav { left: 16px; }
}
@media (max-width: 549px) {
  .bsm-header-cta { display: none; }
}

/* =====================================================================
   Home 2026 – deals-banner en dienstkaarten
   ===================================================================== */
.bsm-eyebrow {
  display: inline-block; margin: 0 0 14px !important; padding: 6px 14px; border-radius: 999px;
  font-family: Roboto, sans-serif; font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .14); color: #fff !important;
}

/* Deals: diagonaal verloop in huisstijlrood, Bryce rechts */
.bsm-deals.bsm-section {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #b20000 0%, #d23a3a 55%, #e74545 100%) !important;
  padding: 72px 0 56px !important; min-height: 0 !important;
}
.bsm-deals::before {
  content: ""; position: absolute; right: -120px; top: -160px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.bsm-deals .bsm-row { align-items: center; }
.bsm-deals__title.wp-block-heading {
  margin: 0 0 16px; color: #fff; font-family: Roboto, sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.01em; text-transform: none;
}
.bsm-deals p:not(.bsm-eyebrow) { color: rgba(255, 255, 255, .92) !important; font-size: 17px; line-height: 1.65; max-width: 560px; }
.bsm-deals .bsm-btn-row { margin-top: 10px; }
.bsm-deals .bsm-button,
.bsm-services .bsm-button { border-radius: 999px; padding: 0 1.6em; }
.bsm-deals .bsm-button.is-color-white.is-filled { color: #b20000; font-size: 16px; }
.bsm-deals .bsm-button.is-color-white.is-filled:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .2); transform: translateY(-2px); }
.bsm-deals .bsm-button.is-outline { font-size: 16px; border-color: rgba(255, 255, 255, .7); }
.bsm-deals .bsm-button.is-outline:hover { color: #b20000; }
.bsm-deals__visual { text-align: center; }
.bsm-deals__bryce img { width: min(300px, 80%); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .3)); }
@media (prefers-reduced-motion: no-preference) {
  .bsm-deals__bryce img { animation: bsm-float 6s ease-in-out infinite; }
  @keyframes bsm-float { 50% { transform: translateY(-10px); } }
}
@media (max-width: 849px) {
  .bsm-deals.bsm-section { padding: 48px 0 32px !important; text-align: center; }
  .bsm-deals p:not(.bsm-eyebrow) { margin-left: auto; margin-right: auto; }
  .bsm-deals__visual { order: -1; }
  .bsm-deals__bryce img { width: 170px; }
}

/* Diensten: drie kaarten op donker */
.bsm-services.bsm-section { padding: 80px 0 64px !important; min-height: 0 !important; margin: 0 !important; background: #111 !important; }
.bsm-services .bsm-eyebrow { background: rgba(231, 69, 69, .16); color: #ff8a8a !important; }
.bsm-services__title.wp-block-heading {
  margin: 0 0 40px; color: #fff; font-family: Roboto, sans-serif; font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.15; text-transform: none;
}
.bsm-services__grid .bsm-col__inner { height: 100%; }
.bsm-card.bsm-featured-box {
  height: 100%; box-sizing: border-box; align-items: flex-start; text-align: left;
  padding: 32px 28px 26px; border-radius: 18px;
  background: linear-gradient(180deg, #1c1c1c, #161616); border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bsm-card.bsm-featured-box:hover { transform: translateY(-4px); border-color: rgba(231, 69, 69, .5); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.bsm-card .bsm-featured-box__icon { margin-bottom: 18px; }
.bsm-card .wp-block-heading { margin: 0 0 10px !important; color: #fff; font-family: Roboto, sans-serif; font-size: 22px; font-weight: 700; text-transform: none; }
.bsm-card p { color: rgba(255, 255, 255, .72) !important; font-size: 15.5px; line-height: 1.65; }
.bsm-card p.bsm-card__link { margin: 18px 0 0; }
.bsm-card__link a {
  color: #ff7a7a !important; font-weight: 700; text-decoration: none !important; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.bsm-card__link a::after { content: "→"; transition: transform .2s ease; }
.bsm-card:hover .bsm-card__link a::after { transform: translateX(4px); }
@media (max-width: 849px) {
  .bsm-services.bsm-section { padding: 56px 0 40px !important; }
  .bsm-services__grid > .bsm-col { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsm-card.bsm-featured-box, .bsm-header-cta .wp-block-button__link { transition: none; }
}
/* Fijnafstelling header/deals */
.bsm-deals.bsm-section { padding: 64px 0 48px !important; }
.bsm-deals .bsm-col { padding-bottom: 0 !important; }
.bsm-deals .bsm-image { margin-bottom: 0 !important; }
.bsm-deals__bryce img { width: min(250px, 70%); }
.bsm-deals .bsm-button { display: inline-flex; align-items: center; justify-content: center; height: 50px; line-height: 1; margin: 0 12px 12px 0; vertical-align: middle; }
.bsm-deals .bsm-button.is-outline { border-width: 2px; }
.bsm-card__link a::after { font-size: 1.15em; line-height: 1; }
@media (max-width: 849px) {
  .bsm-deals .bsm-button { margin: 0 6px 12px; }
  .bsm-topbar__contact a[href^="tel:"] { display: inline-flex !important; align-items: center; }
  .bsm-services__grid > .bsm-col { margin-bottom: 0; }
}
@media (max-width: 599px) {
  .wp-block-buttons.bsm-header-cta { display: none !important; }
}
/* Sticky header herstellen: 'hidden' op body maakt van body een scrollcontainer,
   waardoor position:sticky niet meer werkt. 'clip' knipt wél af zonder dat effect. */
body { overflow-x: clip !important; }
/* Mobiel menu: items onder elkaar (menu is rechts uitgelijnd voor desktop) */
.bsm-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.bsm-nav .is-menu-open .wp-block-navigation__container { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; }
.bsm-nav .is-menu-open .wp-block-navigation-item__content { font-size: 17px !important; }
/* Uitklapmenu: subtiele rand met rode bovenkant */
.bsm-nav .wp-block-navigation__submenu-container { border: 1px solid rgba(255, 255, 255, .1) !important; border-top: 2px solid var(--bsm-primary) !important; }
.bsm-nav .is-menu-open .wp-block-navigation-item { align-items: stretch !important; }
.bsm-nav .is-menu-open .wp-block-navigation__submenu-container { align-items: stretch !important; width: 100% !important; padding-left: 16px !important; border: 0 !important; box-shadow: none !important; }
.bsm-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-align: left; padding-left: 0 !important; }
.bsm-nav .wp-block-navigation__responsive-container.is-menu-open { padding-top: 84px !important; }
.bsm-nav .is-menu-open .wp-block-navigation__responsive-container-close { position: fixed !important; top: 20px !important; right: 20px !important; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }

/* =====================================================================
   Paginakop (hero) vervolgpagina's – 2026
   ===================================================================== */
.bsm-hero.bsm-section {
  position: relative; overflow: hidden; min-height: 0 !important; margin: 0 !important;
  padding: 72px 0 64px !important;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(231, 69, 69, .35), rgba(231, 69, 69, 0) 70%),
    linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%) !important;
}
.bsm-hero::after { /* dunne rode lijn onderaan */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #b20000, #e74545);
}
.bsm-hero .bsm-row { align-items: center; }
.bsm-hero .bsm-col { padding-bottom: 0 !important; }
.bsm-hero .bsm-eyebrow { background: rgba(231, 69, 69, .18); color: #ff8a8a !important; }
.bsm-hero__title.wp-block-heading {
  margin: 0 0 16px !important; color: #fff !important; font-family: Roboto, sans-serif; font-weight: 700;
  font-size: clamp(32px, 4.2vw, 54px) !important; line-height: 1.08; letter-spacing: -.015em; text-transform: none;
}
.bsm-hero p.bsm-hero__lead { color: rgba(255, 255, 255, .8) !important; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 620px; margin-bottom: 28px; }
.bsm-hero .bsm-button { display: inline-flex; align-items: center; justify-content: center; height: 52px; line-height: 1; margin: 0 12px 12px 0; font-size: 16px; }
.bsm-hero .bsm-button.is-color-alert.is-filled { background: #b20000; }
.bsm-hero .bsm-button.is-color-alert.is-filled:hover { background: #e74545; box-shadow: 0 12px 28px rgba(231, 69, 69, .35); transform: translateY(-2px); }
.bsm-hero .bsm-button.is-outline { border-color: rgba(255, 255, 255, .45); }
.bsm-hero .bsm-button.is-outline:hover { background: #fff; color: #111; }
.bsm-hero__visual { text-align: center; }
.bsm-hero .bsm-image { margin: 0 !important; }
.bsm-hero__bryce img { width: min(230px, 75%); height: auto; margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
@media (prefers-reduced-motion: no-preference) { .bsm-hero__bryce img { animation: bsm-float 6s ease-in-out infinite; } }
@media (max-width: 849px) {
  .bsm-hero.bsm-section { padding: 44px 0 40px !important; }
  .bsm-hero__visual { display: none; }
  .bsm-hero .bsm-button { margin: 0 8px 10px 0; height: 48px; font-size: 15px; }
}

/* Knoppen sitebreed: pil-vorm i.p.v. hoekig (Flatsome-stijl) */
.bsm-button { border-radius: 999px; padding-left: 1.6em; padding-right: 1.6em; }
.bsm-button.is-underline, .bsm-button.is-link { border-radius: 0; padding-left: 0; padding-right: 0; }
.gform_wrapper .gform_button, .gform_wrapper input[type="submit"] { border-radius: 999px !important; padding-left: 2em !important; padding-right: 2em !important; }

/* Eerste inhoudsblok na de hero: lucht */
.bsm-hero + .bsm-row, .bsm-hero + * { margin-top: 48px; }

/* =====================================================================
   Blog – overzicht (/blog/) en losse blog – 2026-11
   ===================================================================== */
.bsm-blog-wrap { max-width: var(--bsm-container); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.bsm-blog-wrap--narrow { max-width: 800px; }
.bsm-blog-hero .wp-block-post-title.bsm-hero__title {
  margin: 0 0 12px !important; color: #fff !important; font-family: Roboto, sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.8vw, 48px) !important; line-height: 1.1; letter-spacing: -.015em; text-transform: none;
}
.bsm-blog-hero .bsm-eyebrow a { color: inherit !important; text-decoration: none; }
.bsm-post__date, .bsm-blog-hero .wp-block-post-date { color: rgba(255, 255, 255, .7); font-size: 15px; }

.bsm-blog-listing { padding-top: 56px; padding-bottom: 72px; }
.bsm-postcards.is-layout-grid { gap: 28px; }
@media (max-width: 849px) { .bsm-postcards.is-layout-grid { grid-template-columns: 1fr !important; } }
.bsm-postcard {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #ececec; border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bsm-postcard:hover { transform: translateY(-4px); border-color: rgba(231, 69, 69, .4); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
.bsm-postcard__img { margin: 0 !important; }
.bsm-postcard__img img { display: block; width: 100%; object-fit: cover; }
.bsm-postcard__body { padding: 22px 24px 26px; }
.bsm-postcard__date { color: #e74545; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bsm-postcard__title { margin: 8px 0 10px !important; font-size: 21px !important; line-height: 1.3; text-transform: none; }
.bsm-postcard__title a { color: #1d1d1d; text-decoration: none; }
.bsm-postcard__title a:hover { color: #e74545; }
.bsm-postcard__excerpt p { margin: 0; font-size: 15px; line-height: 1.6; }
.bsm-postcard__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 12px; color: #e74545; font-weight: 700; text-decoration: none; }
.bsm-blog-pagination { margin-top: 40px; justify-content: center; }
.bsm-blog-empty { font-size: 18px; text-align: center; padding: 24px 0; }

.bsm-post__body { padding-top: 48px; padding-bottom: 72px; }
.bsm-post__img { margin: 0 0 32px !important; }
.bsm-post__img img { border-radius: 14px; }
.bsm-post__body .bsm-prose { font-size: 17px; line-height: 1.75; }
.bsm-post__body .bsm-prose h2 { margin-top: 1.8em; font-size: 26px; text-transform: none; }
.bsm-post__body .bsm-prose h3 { margin-top: 1.5em; font-size: 20px; text-transform: none; }
.bsm-post-cta {
  margin: 56px 0 32px; padding: 32px 32px 28px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, #b20000 0%, #d23a3a 55%, #e74545 100%);
}
.bsm-post-cta .bsm-post-cta__title { margin: 0 0 8px !important; color: #fff !important; font-size: 24px !important; text-transform: none; }
.bsm-post-cta p { color: rgba(255, 255, 255, .92) !important; }
.bsm-post-cta .wp-block-button__link { background: #fff !important; color: #b20000 !important; border-radius: 999px; font-weight: 700; }
.bsm-post-nav { margin: 6px 0; }
.bsm-post-nav a { color: #e74545; }