/* ==========================================================================
   Smart Fit: themalaag (mobile first)
   Laadt na wsc-core. Herdefinieert de --wsc-* tokens naar het Smart Fit-palet
   en zet header, navigatie, footer en de vaste mobiele CTA neer.
   Breakpoints: 768px (tablet) en 992px (desktop), min-width.
   ========================================================================== */

@font-face {
  font-family: 'Leixo';
  src: local('Leixo'), local('Leixo Regular'),
       url('../fonts/Leixo.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --sf-ink:        #044561;
  --sf-ink-dark:   #04384F;
  --sf-ink-hover:  #016287;
  --sf-text:       #1C1C1A;
  --sf-muted:      #6B7072;
  --sf-line:       #E3E7E8;
  --sf-bg-soft:    #F4F6F7;
  --sf-orange:     #E95123;
  --sf-orange-h:   #D2441A;
  --sf-on-dark:    #C7D6DD;

  --sf-header-h:   76px;
  --sf-gutter:     5%;
  --sf-maxw:       1660px;

  --wsc-bg:         #FFFFFF;
  --wsc-surface:    #FFFFFF;
  --wsc-surface-2:  var(--sf-bg-soft);
  --wsc-ink:        var(--sf-ink);
  --wsc-ink-2:      var(--sf-text);
  --wsc-ink-3:      var(--sf-muted);
  --wsc-muted:      var(--sf-muted);
  --wsc-line:       var(--sf-line);
  --wsc-line-2:     var(--sf-line);
  --wsc-accent:     var(--sf-orange);
  --wsc-accent-h:   var(--sf-orange-h);
  --wsc-accent-2:   var(--sf-ink);
  --wsc-blue:       var(--sf-ink);
  --wsc-blue-h:     var(--sf-ink-hover);
  --wsc-footer-bg:  var(--sf-ink);
  --wsc-footer-ink: var(--sf-on-dark);

  --wsc-font-head:    'Poppins', system-ui, sans-serif;
  --wsc-font-display: 'Leixo', 'Jost', sans-serif;
  --wsc-font-body:    'Poppins', system-ui, sans-serif;

  --wsc-maxw:       1200px;
  --wsc-radius:     16px;
  --wsc-gutter:     5vw;
  --wsc-section-y:  56px;
}

@media (min-width: 768px) {
  :root { --wsc-section-y: 88px; }
}
@media (min-width: 992px) {
  :root { --sf-header-h: 104px; --sf-gutter: 4%; }
}

/* ---- Basis ---- */
.sf-theme {
  margin: 0;
  background: #fff;
  color: var(--sf-ink);
  font-family: var(--wsc-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sf-theme *, .sf-theme *::before, .sf-theme *::after { box-sizing: border-box; }
.sf-theme a { color: var(--sf-ink); text-decoration: none; }
.sf-theme a:hover { color: var(--sf-ink-hover); }
.sf-theme :focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sf-theme img { max-width: 100%; height: auto; }
.sf-container { max-width: var(--wsc-maxw); margin: 0 auto; padding: 0 var(--sf-gutter); }
.sf-section { padding-top: var(--wsc-section-y); padding-bottom: var(--wsc-section-y); }
.sf-main { display: block; }
/* Ruimte onder de pagina voor de vaste mobiele CTA */
.sf-page { padding-bottom: 72px; }

@media (min-width: 768px) { .sf-page { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sf-theme * { transition: none !important; animation: none !important; }
}

/* ---- Knoppen ---- */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 14px 24px; border: 0; border-radius: 100px;
  font: 700 15px/1.2 var(--wsc-font-body); cursor: pointer;
  transition: background .2s, transform .2s;
}
.sf-theme .sf-btn--primary { background: var(--sf-orange); color: #fff; }
.sf-theme .sf-btn--primary:hover { background: var(--sf-orange-h); color: #fff; transform: translateY(-2px); }
.sf-theme .sf-btn--dark { background: var(--sf-ink); color: #fff; width: 100%; }
.sf-theme .sf-btn--dark:hover { background: var(--sf-ink-hover); color: #fff; }

/* ---- Header (mobiel: balk met burger, menu klapt eronder open) ---- */
.sf-header {
  position: relative; z-index: 60;
  background: radial-gradient(ellipse at 23% 46%, #e2ecf9 0, transparent 43%), #fcfefd;
}
.sf-header__inner {
  position: relative; max-width: var(--sf-maxw); margin: 0 auto;
  height: var(--sf-header-h); padding: 0 var(--sf-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sf-header__brand { display: flex; flex-direction: column; gap: 6px; flex: none; }
.sf-header__brand img { display: block; height: 28px; width: auto; }
.sf-header__tagline {
  width: 0; min-width: 100%; font-size: 8px; letter-spacing: .18em; font-weight: 700;
  color: var(--sf-ink-dark); white-space: nowrap; text-transform: uppercase;
  text-align: justify; text-align-last: justify;
}
.sf-header__burger {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: 14px;
  background: var(--sf-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.sf-header__burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.sf-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sf-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sf-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sf-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  padding: 0 var(--sf-gutter) 16px;
}
.sf-nav.is-open { display: block; }
.sf-nav__list {
  list-style: none; margin: 0; padding: 12px; background: #fff;
  border: 1px solid var(--sf-line); border-radius: 20px 20px 0 0;
  box-shadow: 0 16px 40px rgba(2,69,96,.16);
  max-height: calc(100svh - var(--sf-header-h) - 96px); overflow-y: auto;
}
.sf-nav__item { position: relative; }
.sf-nav__link { display: block; padding: 14px; min-height: 48px; border-radius: 12px; font-weight: 600; color: var(--sf-ink-dark); }
.sf-nav__link:hover, .sf-nav__link.is-active { background: var(--sf-bg-soft); }
.sf-nav__toggle {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: none; cursor: pointer;
}
.sf-nav__toggle::before {
  content: ''; display: block; width: 8px; height: 8px; margin: 0 auto;
  border-right: 2px solid var(--sf-ink-dark); border-bottom: 2px solid var(--sf-ink-dark);
  transform: rotate(45deg); transition: transform .2s;
}
.sf-nav__toggle[aria-expanded="true"]::before { transform: rotate(-135deg); }
.sf-nav__sub { display: none; list-style: none; margin: 0; padding: 0 0 8px 14px; }
.sf-nav__item.is-open > .sf-nav__sub { display: block; }
.sf-nav__sub a { display: block; padding: 12px 14px; min-height: 44px; border-radius: 10px; font-weight: 500; color: var(--sf-ink-dark); }
.sf-nav__sub a:hover { background: var(--sf-bg-soft); }
.sf-nav__cta { display: flex; width: 100%; margin-top: 0; border-radius: 0 0 20px 20px; min-height: 52px; }
.sf-nav.is-open .sf-nav__cta { box-shadow: 0 16px 40px rgba(2,69,96,.16); }

/* ---- Header desktop ---- */
@media (min-width: 992px) {
  .sf-header__brand img { height: clamp(26px, 2.6vw, 40px); }
  .sf-header__tagline { font-size: clamp(8px, .7vw, 11px); }
  .sf-header__burger { display: none; }
  .sf-nav {
    display: flex; position: static; padding: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 34px;
  }
  .sf-nav__list { display: flex; align-items: center; gap: 34px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; max-height: none; overflow: visible; }
  .sf-nav__link { padding: 10px 0; min-height: 0; font-weight: 400; font-size: 16px; border-radius: 0; }
  .sf-nav__link:hover, .sf-nav__link.is-active { background: none; color: var(--sf-ink-hover); }
  .sf-nav__item--has-sub > .sf-nav__link::after { content: '▾'; font-size: 11px; margin-left: 6px; }
  .sf-nav__toggle { display: none; }
  .sf-nav__sub {
    display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 200px; padding: 8px; background: #fff; border: 1px solid var(--sf-line);
    border-radius: 16px; box-shadow: 0 12px 32px rgba(2,69,96,.12); z-index: 50;
    visibility: hidden; opacity: 0; transition: opacity .15s;
  }
  .sf-nav__item:hover > .sf-nav__sub, .sf-nav__item:focus-within > .sf-nav__sub { visibility: visible; opacity: 1; }
  .sf-nav__sub a { font-weight: 600; padding: 12px 14px; }
  .sf-nav__cta { width: auto; margin: 0; border-radius: 17px; padding: 17px 25px; box-shadow: none; }
  .sf-nav.is-open .sf-nav__cta { box-shadow: none; }
}

/* ---- Vaste mobiele CTA ---- */
.sf-mobcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 12px 5vw; background: #fff; border-top: 1px solid var(--sf-line);
}
@media (min-width: 768px) { .sf-mobcta { display: none; } }

/* ---- Footer ---- */
.sf-footer { background: var(--sf-ink); color: var(--sf-on-dark); padding: 64px 0 32px; }
.sf-footer a { color: var(--sf-on-dark); }
.sf-footer a:hover { color: #fff; }
.sf-footer h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.sf-footer__brand { margin-bottom: 40px; font-size: 14px; }
.sf-footer__brand img { display: block; height: 28px; width: auto; margin-bottom: 12px; }
.sf-footer__cols { display: grid; grid-template-columns: 1fr; gap: 32px 24px; margin-bottom: 40px; font-size: 14px; }
.sf-footer__bottom {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: 13px; color: #8AA3AF; display: flex; flex-wrap: wrap; gap: 8px 24px;
}
@media (min-width: 576px) { .sf-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sf-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }

/* Op de home ligt de header transparant over de hero heen */
.sf-home .sf-header { background: transparent; }

/* Op de home staat al een oranje knop in de hero: geen vaste balk eronder */
.sf-home .sf-mobcta { display: none; }
.sf-home .sf-page { padding-bottom: 0; }