/*
Theme Name:   Hello Elementor Child – ByteMonkeys
Description:  ByteMonkeys brand child theme for Hello Elementor
Template:     hello-elementor
Version:      1.1.0
Author:       ByteMonkeys
Author URI:   https://bytemonkeys.nl
Text Domain:  hello-elementor-child
*/

/* ── Brand Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* ── Core brand colors ── */
  --bm-navy:        #0A0E1A;   /* dark hero / footer */
  --bm-charcoal:    #1C2333;   /* dark surfaces      */
  --bm-charcoal-lg: #232B3E;

  /* ── Accent ── */
  --bm-blue:        #0099CC;   /* primary CTA – richer, campai-readable */
  --bm-blue-light:  #00D4FF;   /* highlight / hero glow                 */
  --bm-blue-dim:    rgba(0, 153, 204, 0.10);
  --bm-blue-hover:  #007AA3;
  --bm-purple:      #6C5CE7;

  /* ── Light surface palette (campai.nl inspiration) ── */
  --bm-white:       #FFFFFF;
  --bm-surface:     #F6F8FB;   /* alternate section bg  */
  --bm-surface-md:  #EEF2F7;   /* subtle divider/border */

  /* ── Typography on light ── */
  --bm-text-900:    #0A0E1A;   /* headings on light bg */
  --bm-text-700:    #2D3748;   /* strong body text     */
  --bm-text-500:    #64748B;   /* secondary / meta     */
  --bm-text-300:    #94A3B8;   /* muted                */

  /* ── Typography on dark ── */
  --bm-dark-text:   #F1F5F9;
  --bm-dark-muted:  #94A3B8;

  /* ── Borders ── */
  --bm-border-light: #E2E8F0;
  --bm-border-blue:  rgba(0, 153, 204, 0.20);
  --bm-border-dark:  rgba(255, 255, 255, 0.08);

  /* ── Typography ── */
  --bm-font-heading: 'Plus Jakarta Sans', sans-serif;
  --bm-font-body:    'Inter', sans-serif;

  /* ── Font scale ── */
  --bm-text-xs:   0.75rem;
  --bm-text-sm:   0.875rem;
  --bm-text-base: 1rem;
  --bm-text-lg:   1.125rem;
  --bm-text-xl:   1.25rem;
  --bm-text-2xl:  1.5rem;
  --bm-text-3xl:  1.875rem;
  --bm-text-4xl:  2.25rem;
  --bm-text-5xl:  3rem;
  --bm-text-6xl:  3.75rem;

  /* ── Spacing ── */
  --bm-space-xs:  0.5rem;
  --bm-space-sm:  1rem;
  --bm-space-md:  2rem;
  --bm-space-lg:  4rem;
  --bm-space-xl:  6rem;
  --bm-space-2xl: 9rem;

  /* ── Border radius ── */
  --bm-radius-xs: 4px;
  --bm-radius-sm: 8px;
  --bm-radius-md: 14px;
  --bm-radius-lg: 24px;
  --bm-radius-xl: 40px;
  --bm-radius-full: 999px;

  /* ── Shadows (light surfaces) ── */
  --bm-shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --bm-shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.06);
  --bm-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.08);
  --bm-shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.10);
  --bm-shadow-blue: 0 4px 20px rgba(0, 153, 204, 0.22);
  --bm-shadow-glow: 0 0 48px rgba(0, 212, 255, 0.25);

  /* ── Transitions ── */
  --bm-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --bm-transition: all 0.22s var(--bm-ease);
}

/* ── Global Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Default body is LIGHT – like campai.nl */
body {
  font-family: var(--bm-font-body);
  background-color: var(--bm-white);
  color: var(--bm-text-700);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--bm-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bm-text-900);
  margin-bottom: 0.75em;
}
h1 { font-size: var(--bm-text-5xl); font-weight: 800; }
h2 { font-size: var(--bm-text-4xl); font-weight: 700; }
h3 { font-size: var(--bm-text-2xl); }
h4 { font-size: var(--bm-text-xl);  }
h5 { font-size: var(--bm-text-lg);  }
h6 { font-size: var(--bm-text-base);}

@media (max-width: 1024px) {
  h1 { font-size: var(--bm-text-4xl); }
  h2 { font-size: var(--bm-text-3xl); }
}
@media (max-width: 768px) {
  h1 { font-size: var(--bm-text-3xl); }
  h2 { font-size: var(--bm-text-2xl); }
  h3 { font-size: var(--bm-text-xl);  }
}

/* ── Body text ────────────────────────────────────────────────────────────── */
p {
  color: var(--bm-text-700);
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
  color: var(--bm-blue);
  text-decoration: none;
  transition: var(--bm-transition);
}
a:hover { color: var(--bm-blue-hover); }

/* ── Hello Elementor overrides ────────────────────────────────────────────── */
.site-header {
  background-color: var(--bm-white);
  border-bottom: 1px solid var(--bm-border-light);
  box-shadow: var(--bm-shadow-xs);
}
.site-footer {
  background-color: var(--bm-navy);
  border-top: none;
}

/* Reset Elementor section padding */
.e-con, .elementor-section {
  --padding-top: 0;
  --padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS
   campai.nl pattern: white → light gray → white → white → light gray
   ByteMonkeys keeps dark sections for hero and CTA only
   ══════════════════════════════════════════════════════════════════════════ */

/* Light sections */
.bm-section-white  { background-color: var(--bm-white)   !important; }
.bm-section-light  { background-color: var(--bm-surface)  !important; }
.bm-section-subtle { background-color: var(--bm-surface-md) !important; }

/* Dark sections (hero / CTA / footer) */
.bm-section-dark {
  background-color: var(--bm-navy) !important;
}
.bm-section-dark h1,
.bm-section-dark h2,
.bm-section-dark h3,
.bm-section-dark h4,
.bm-section-dark h5,
.bm-section-dark h6,
.bm-section-dark .elementor-heading-title {
  color: var(--bm-white) !important;
}
.bm-section-dark p,
.bm-section-dark .elementor-widget-text-editor p {
  color: var(--bm-dark-muted) !important;
}
.bm-section-dark a { color: var(--bm-blue-light); }

/* ── Section padding ──────────────────────────────────────────────────────── */
.bm-section     { padding: var(--bm-space-xl) 0; }
.bm-section-sm  { padding: var(--bm-space-lg) 0; }
.bm-section-lg  { padding: var(--bm-space-2xl) 0; }

/* ── Utility: colors ──────────────────────────────────────────────────────── */
.bm-accent        { color: var(--bm-blue)       !important; }
.bm-text-dark     { color: var(--bm-text-900)   !important; }
.bm-text-muted    { color: var(--bm-text-500)   !important; }
.bm-text-white    { color: var(--bm-white)       !important; }

/* ── Gradient text ────────────────────────────────────────────────────────── */
.bm-gradient-text {
  background: linear-gradient(135deg, var(--bm-blue) 0%, var(--bm-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION  (campai.nl: white, sticky, box-shadow on scroll)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-nav-sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--bm-white) !important;
  border-bottom: 1px solid var(--bm-border-light);
  box-shadow: var(--bm-shadow-xs);
  transition: box-shadow 0.25s var(--bm-ease);
}
.bm-nav-sticky .elementor-nav-menu a,
.bm-nav-sticky .elementor-nav-menu--main .elementor-item {
  color: var(--bm-text-900) !important;
  font-weight: 600;
  font-size: 0.9375rem;
}
.bm-nav-sticky .elementor-nav-menu--main .elementor-item:hover,
.bm-nav-sticky .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--bm-blue) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGE / LABEL  (campai.nl uses small colored labels above section titles)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-badge {
  display: inline-block;
  background: var(--bm-blue-dim);
  color: var(--bm-blue);
  font-size: var(--bm-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--bm-radius-full);
  border: 1px solid rgba(0, 153, 204, 0.20);
  margin-bottom: 1rem;
}
/* Badge variant for dark sections */
.bm-section-dark .bm-badge,
.bm-hero .bm-badge {
  background: rgba(0, 212, 255, 0.12);
  color: var(--bm-blue-light);
  border-color: rgba(0, 212, 255, 0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Primary:  solid blue (campai-style solid CTA)
   Outline:  border blue
   Ghost:    text only
   ══════════════════════════════════════════════════════════════════════════ */
.bm-btn-primary,
.elementor-button.bm-btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--bm-blue) !important;
  color: var(--bm-white) !important;
  font-family: var(--bm-font-heading);
  font-weight: 700;
  font-size: var(--bm-text-base);
  border: 2px solid var(--bm-blue) !important;
  border-radius: var(--bm-radius-sm) !important;
  padding: 14px 32px !important;
  transition: var(--bm-transition) !important;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: var(--bm-shadow-blue);
}
.bm-btn-primary:hover,
.elementor-button.bm-btn-primary:hover {
  background: var(--bm-blue-hover) !important;
  border-color: var(--bm-blue-hover) !important;
  color: var(--bm-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 153, 204, 0.35);
}

.bm-btn-outline,
.elementor-button.bm-btn-outline {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: var(--bm-blue) !important;
  font-family: var(--bm-font-heading);
  font-weight: 700;
  font-size: var(--bm-text-base);
  border: 2px solid var(--bm-blue) !important;
  border-radius: var(--bm-radius-sm) !important;
  padding: 12px 30px !important;
  transition: var(--bm-transition) !important;
  cursor: pointer;
}
.bm-btn-outline:hover,
.elementor-button.bm-btn-outline:hover {
  background: var(--bm-blue) !important;
  color: var(--bm-white) !important;
  transform: translateY(-2px);
}

/* Outline on dark backgrounds */
.bm-section-dark .bm-btn-outline,
.bm-hero .elementor-button.bm-btn-outline {
  color: var(--bm-white) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.bm-section-dark .bm-btn-outline:hover,
.bm-hero .elementor-button.bm-btn-outline:hover {
  background: var(--bm-white) !important;
  color: var(--bm-navy) !important;
  border-color: var(--bm-white) !important;
}

.bm-btn-ghost,
.elementor-button.bm-btn-ghost {
  background: transparent !important;
  color: var(--bm-blue) !important;
  font-weight: 600;
  border: none !important;
  padding: 0 !important;
  transition: var(--bm-transition) !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.bm-btn-ghost::after { content: '→'; transition: var(--bm-transition); }
.bm-btn-ghost:hover { color: var(--bm-blue-hover) !important; }
.bm-btn-ghost:hover::after { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO SECTION  (stays dark – ByteMonkeys identity)
   Campai.nl-inspired: full-width background image, left-aligned content
   ══════════════════════════════════════════════════════════════════════════ */
.bm-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 90% 70% at 60% 50%, rgba(0, 212, 255, 0.09) 0%, transparent 65%),
    linear-gradient(135deg, #0A0E1A 0%, #0D1627 60%, #111827 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle dot-grid pattern (ByteMonkeys "stippen" – inspired by campai.nl dots) */
.bm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 212, 255, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: 0.6;
}
/* Decorative glow blob */
.bm-hero::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.bm-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--bm-white) !important;
  margin-bottom: 1.25rem;
}
/* Highlighted word in hero h1 */
.bm-hero h1 em {
  font-style: normal;
  color: var(--bm-blue-light);
}
.bm-hero .hero-subtitle {
  font-size: var(--bm-text-lg);
  color: var(--bm-dark-muted) !important;
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.bm-hero .hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Trust line below CTA (e.g. "✓ Geen verplichtingen · ✓ Reactie binnen 1 dag") */
.bm-hero .hero-trust {
  margin-top: 1.25rem;
  font-size: var(--bm-text-sm);
  color: var(--bm-dark-muted);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.bm-hero .hero-trust span::before {
  content: '✓ ';
  color: var(--bm-blue-light);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   SERVICE CARDS  (campai.nl: white cards with shadow, icon, title, text, link)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-service-card {
  background: var(--bm-white);
  border: 1px solid var(--bm-border-light);
  border-radius: var(--bm-radius-md);
  padding: 2rem 1.75rem;
  transition: var(--bm-transition);
  height: 100%;
  box-shadow: var(--bm-shadow-xs);
}
.bm-service-card:hover {
  border-color: var(--bm-blue);
  box-shadow: var(--bm-shadow-blue);
  transform: translateY(-5px);
}
.bm-service-card .card-icon {
  width: 56px;
  height: 56px;
  background: var(--bm-blue-dim);
  border-radius: var(--bm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--bm-blue);
  font-size: 1.5rem;
}
.bm-service-card h3,
.bm-service-card .elementor-heading-title {
  color: var(--bm-text-900) !important;
  font-size: var(--bm-text-xl);
  margin-bottom: 0.6rem;
}
.bm-service-card p,
.bm-service-card .elementor-widget-text-editor p {
  color: var(--bm-text-500) !important;
  font-size: var(--bm-text-sm);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Service card on a dark section */
.bm-section-dark .bm-service-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bm-border-dark);
  box-shadow: none;
}
.bm-section-dark .bm-service-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--bm-blue-light);
  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.15);
}
.bm-section-dark .bm-service-card h3,
.bm-section-dark .bm-service-card .elementor-heading-title {
  color: var(--bm-white) !important;
}
.bm-section-dark .bm-service-card p,
.bm-section-dark .bm-service-card .elementor-widget-text-editor p {
  color: var(--bm-dark-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG / POST CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.bm-blog-card {
  background: var(--bm-white);
  border: 1px solid var(--bm-border-light);
  border-radius: var(--bm-radius-md);
  overflow: hidden;
  transition: var(--bm-transition);
  box-shadow: var(--bm-shadow-xs);
}
.bm-blog-card:hover {
  border-color: var(--bm-blue);
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow-md);
}
.bm-blog-card .card-meta {
  font-size: var(--bm-text-xs);
  color: var(--bm-text-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.bm-blog-card .card-title {
  font-size: var(--bm-text-lg);
  font-weight: 700;
  color: var(--bm-text-900);
  margin: 0.5rem 0;
  line-height: 1.4;
}
.bm-blog-card .card-excerpt {
  font-size: var(--bm-text-sm);
  color: var(--bm-text-500);
  line-height: 1.6;
}

/* Elementor Posts widget */
.elementor-posts .elementor-post {
  background: var(--bm-white);
  border: 1px solid var(--bm-border-light);
  border-radius: var(--bm-radius-md);
  overflow: hidden;
  transition: var(--bm-transition);
  box-shadow: var(--bm-shadow-xs);
}
.elementor-posts .elementor-post:hover {
  border-color: var(--bm-blue);
  transform: translateY(-5px);
  box-shadow: var(--bm-shadow-md);
}
.elementor-posts .elementor-post__title a { color: var(--bm-text-900); }
.elementor-posts .elementor-post__title a:hover { color: var(--bm-blue); }
.elementor-posts .elementor-post__excerpt { color: var(--bm-text-500); }

/* ══════════════════════════════════════════════════════════════════════════
   STATS / COUNTER BLOCKS  (campai.nl uses these with bold numbers)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-stat { text-align: center; }
.bm-stat .stat-number {
  font-family: var(--bm-font-heading);
  font-size: var(--bm-text-5xl);
  font-weight: 800;
  color: var(--bm-blue);
  line-height: 1;
  display: block;
}
.bm-stat .stat-label {
  font-size: var(--bm-text-sm);
  color: var(--bm-text-500);
  margin-top: 0.5rem;
  font-weight: 600;
}

/* Elementor Counter widget */
.elementor-counter .elementor-counter-number-wrapper {
  color: var(--bm-blue) !important;
  font-family: var(--bm-font-heading) !important;
  font-weight: 800 !important;
}
.elementor-counter .elementor-counter-title {
  color: var(--bm-text-500) !important;
  font-weight: 600 !important;
  font-size: var(--bm-text-sm) !important;
}

/* On dark sections, counter numbers stay blue but title goes light */
.bm-section-dark .elementor-counter .elementor-counter-title,
.bm-section-dark .bm-stat .stat-label {
  color: var(--bm-dark-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA BANNER SECTION  (stays dark with blue glow – ByteMonkeys signature)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-cta-banner {
  background: linear-gradient(135deg, #0A0E1A 0%, #111827 100%) !important;
  padding: var(--bm-space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bm-cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.09) 0%, transparent 70%);
  pointer-events: none;
}
.bm-cta-banner h2,
.bm-cta-banner .elementor-heading-title {
  color: var(--bm-white) !important;
}
.bm-cta-banner p,
.bm-cta-banner .elementor-widget-text-editor p {
  color: var(--bm-dark-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVIDERS
   ══════════════════════════════════════════════════════════════════════════ */
.bm-divider {
  border: none;
  height: 1px;
  background: var(--bm-border-light);
  margin: 0;
}
.bm-divider-blue {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bm-blue), transparent);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICON BOXES  (campai.nl uses icon + title + text pattern in columns)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-icon-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 0;
}
.bm-icon-box .icon-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--bm-blue-dim);
  border-radius: var(--bm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-blue);
  font-size: 1.25rem;
}
.bm-icon-box h4 {
  color: var(--bm-text-900);
  font-size: var(--bm-text-base);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.bm-icon-box p {
  color: var(--bm-text-500);
  font-size: var(--bm-text-sm);
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST BAR / LOGO STRIP  (campai.nl has a client logo carousel)
   ══════════════════════════════════════════════════════════════════════════ */
.bm-trust-bar {
  border-top: 1px solid var(--bm-border-light);
  border-bottom: 1px solid var(--bm-border-light);
  padding: 2rem 0;
  background: var(--bm-surface);
}
.bm-trust-bar .trust-label {
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-text-300);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS  (light variant to match white/light sections)
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  background: var(--bm-white) !important;
  border: 1.5px solid var(--bm-border-light) !important;
  border-radius: var(--bm-radius-sm) !important;
  color: var(--bm-text-900) !important;
  padding: 12px 16px !important;
  font-size: var(--bm-text-base) !important;
  transition: var(--bm-transition);
  box-shadow: var(--bm-shadow-xs);
}
.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
  border-color: var(--bm-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--bm-blue-dim) !important;
}
.elementor-form .elementor-field-group input::placeholder,
.elementor-form .elementor-field-group textarea::placeholder {
  color: var(--bm-text-300) !important;
}
.elementor-form .elementor-field-label {
  color: var(--bm-text-700) !important;
  font-weight: 600 !important;
  font-size: var(--bm-text-sm) !important;
  margin-bottom: 0.4rem !important;
}
.elementor-form .e-form__buttons .elementor-button {
  background: var(--bm-blue) !important;
  color: var(--bm-white) !important;
  border: none !important;
  border-radius: var(--bm-radius-sm) !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-family: var(--bm-font-heading) !important;
  box-shadow: var(--bm-shadow-blue);
  transition: var(--bm-transition) !important;
}
.elementor-form .e-form__buttons .elementor-button:hover {
  background: var(--bm-blue-hover) !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCORDION / FAQ
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--bm-border-light) !important;
  background: var(--bm-white) !important;
  border-radius: var(--bm-radius-sm) !important;
  margin-bottom: 8px;
  box-shadow: var(--bm-shadow-xs);
  overflow: hidden;
}
.elementor-accordion .elementor-tab-title {
  color: var(--bm-text-900) !important;
  font-weight: 700 !important;
  font-family: var(--bm-font-heading) !important;
  padding: 1.25rem 1.5rem !important;
}
.elementor-accordion .elementor-tab-title.elementor-active {
  color: var(--bm-blue) !important;
  border-bottom: 1px solid var(--bm-border-light);
}
.elementor-accordion .elementor-tab-content {
  color: var(--bm-text-700) !important;
  padding: 1.25rem 1.5rem !important;
  line-height: 1.7;
}

/* Accordion on dark backgrounds */
.bm-section-dark .elementor-accordion .elementor-accordion-item {
  border-color: var(--bm-border-dark) !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: none;
}
.bm-section-dark .elementor-accordion .elementor-tab-title {
  color: var(--bm-white) !important;
}
.bm-section-dark .elementor-accordion .elementor-tab-content {
  color: var(--bm-dark-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG SINGLE POST  (light reading experience)
   ══════════════════════════════════════════════════════════════════════════ */
.single-post .entry-content {
  font-size: var(--bm-text-lg);
  line-height: 1.85;
  color: var(--bm-text-700);
  max-width: 740px;
  margin: 0 auto;
}
.single-post .entry-content h2 {
  font-size: var(--bm-text-3xl);
  color: var(--bm-text-900);
  margin: 2.5rem 0 1rem;
}
.single-post .entry-content h3 {
  font-size: var(--bm-text-2xl);
  color: var(--bm-text-900);
  margin: 2rem 0 0.75rem;
}
.single-post .entry-content p  { margin-bottom: 1.5rem; }
.single-post .entry-content a  { color: var(--bm-blue); }
.single-post .entry-content ul,
.single-post .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.single-post .entry-content li { margin-bottom: 0.5rem; }
.single-post .entry-content blockquote {
  border-left: 4px solid var(--bm-blue);
  padding: 1rem 1.75rem;
  background: var(--bm-surface);
  border-radius: 0 var(--bm-radius-sm) var(--bm-radius-sm) 0;
  margin: 2rem 0;
  font-size: var(--bm-text-lg);
  font-style: italic;
  color: var(--bm-text-700);
}
.single-post .entry-content code {
  background: var(--bm-surface);
  border: 1px solid var(--bm-border-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
  color: var(--bm-blue);
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════════════════ */
.rank-math-breadcrumb { color: var(--bm-text-300); font-size: var(--bm-text-sm); }
.rank-math-breadcrumb a { color: var(--bm-text-300); }
.rank-math-breadcrumb a:hover { color: var(--bm-blue); }
.rank-math-breadcrumb .separator { color: var(--bm-text-300); margin: 0 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER  (dark – campai.nl also has a dark footer)
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-location-footer {
  background-color: var(--bm-navy) !important;
}
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6,
.elementor-location-footer .elementor-heading-title {
  color: var(--bm-white) !important;
}
.elementor-location-footer p,
.elementor-location-footer .elementor-widget-text-editor p {
  color: var(--bm-dark-muted) !important;
}
.elementor-location-footer a { color: var(--bm-dark-muted); }
.elementor-location-footer a:hover { color: var(--bm-blue-light); }

/* Footer icon list links */
.elementor-location-footer .elementor-icon-list-text { color: var(--bm-dark-muted) !important; }
.elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text {
  color: var(--bm-blue-light) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bm-surface); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bm-blue); }

/* ── Selection ────────────────────────────────────────────────────────────── */
::selection { background: rgba(0, 153, 204, 0.18); color: var(--bm-navy); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --bm-space-xl:  4.5rem;
    --bm-space-2xl: 6.5rem;
  }
}
@media (max-width: 768px) {
  :root {
    --bm-space-lg:  2.5rem;
    --bm-space-xl:  3.5rem;
    --bm-space-2xl: 5rem;
  }
  .bm-hero { min-height: auto; padding: 5rem 0 4rem; }
  .bm-hero .hero-ctas { flex-direction: column; align-items: flex-start; }
  .bm-hero .hero-trust { flex-direction: column; gap: 0.5rem; }
  .bm-service-card { padding: 1.5rem; }
}
@media (max-width: 480px) {
  h1 { font-size: var(--bm-text-2xl) !important; }
  h2 { font-size: var(--bm-text-xl)  !important; }
  .bm-btn-primary,
  .bm-btn-outline { padding: 12px 24px !important; font-size: var(--bm-text-sm) !important; }
}