/* ============================================================
   Brantec — componenten (richting: Kobalt 🔷)
   Header · knoppen · hero · kaarten · facts · stappen ·
   CTA-band (6°-snede) · footer · formulier
   Alles via tokens — nooit ruwe waarden.
   ============================================================ */

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
}
.brand {
  font-size: 18px;
  font-weight: var(--weight-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav { display: none; gap: var(--sp-5); }
.site-nav a {
  font-size: var(--fs-body-s);
  min-height: 44px;
  font-weight: var(--weight-ui);
  text-decoration: none;
  color: var(--text-secondary);
  padding-block: var(--sp-2);
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text-primary); }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

@media (min-width: 1024px) {
  .site-nav { display: flex; margin-left: var(--sp-6); }
}
@media (max-width: 1023px) {
  .site-header__actions .btn--primary { display: none; } /* CTA zit in drawer + hero; alléén de header-actie verbergen */
}
@media (max-width: 480px) {
  /* header rustig op smalle telefoons: de bel-CTA staat groot in hero, drawer, CTA-band en op contact */
  .site-header__actions .btn--tel { display: none; }
}

/* mobiel menu */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border-functional);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border-functional);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-toggle:active { transform: scale(0.97); }
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
.drawer.is-open { opacity: 1; transform: none; }
.drawer:not(.is-open) { transition-duration: 180ms; } /* exit snapt sneller dan enter */
.drawer[hidden] { display: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-3); }
.drawer nav { display: flex; flex-direction: column; margin-top: var(--sp-7); }
.drawer nav a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-heading-s);
  font-weight: var(--weight-heading);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.drawer nav a .num {
  font-size: var(--fs-label);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
}
.drawer .btn { margin-top: var(--sp-6); }
.drawer .btn--tel { margin-top: var(--sp-4); }

/* ============ KNOPPEN ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: calc(var(--sp-2) + 2px) var(--sp-5);
  font-size: var(--fs-button);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-button);
  font-family: inherit;
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.65; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { border-color: var(--border-functional); color: var(--text-primary); background: transparent; }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); }
.btn--tel { border-color: var(--border-functional); color: var(--text-primary); background: transparent; white-space: nowrap; }
.btn--tel:hover { border-color: var(--accent); color: var(--accent-text); }
.btn .arr { transition: transform var(--dur-fast) var(--ease-out); }

/* op het blauwe vlak (CTA-band) */
.btn--inverse { background: var(--on-accent); color: var(--text-primary); }
.btn--inverse:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn--ghost-inverse { border-color: var(--on-accent); color: var(--on-accent); }
.btn--ghost-inverse:hover { background: var(--on-accent); color: var(--text-primary); }
/* focusring op het blauwe vlak: leesbaar (donker thema on-accent-donker, licht thema wit) */
.cta-band :focus-visible { outline-color: var(--on-accent); }

/* pijllink */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-body-s);
  font-weight: var(--weight-ui);
  text-decoration: none;
  color: var(--accent-text);
}
.arrow-link .arr { transition: transform var(--dur-fast) var(--ease-out); }

/* tweedelige CTA (label-box + pijlvierkant) */
.cta-duo { display: flex; align-items: stretch; gap: var(--sp-2); }
.cta-duo__label {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--on-accent);
  border-radius: var(--r-md);
  font-size: var(--fs-button);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-button);
  text-decoration: none;
  color: var(--on-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta-duo__label:hover { background: var(--on-accent); color: var(--text-primary); }
.cta-duo__label:active { transform: scale(0.97); }
.cta-duo__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border-radius: var(--r-md);
  background: var(--on-accent);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 18px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta-duo__arrow:hover { background: var(--bg-elevated); }
.cta-duo__arrow:active { transform: scale(0.97); }

/* ============ HERO ============ */
.hero { padding-block: clamp(48px, 8vw, 104px) var(--section); }
.hero__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 7fr 5fr; } }
.hero__title { margin-bottom: var(--sp-6); }
.hero__title .accent { color: var(--accent-text); }
.hero__sub { margin-bottom: var(--sp-7); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hero__note { margin-top: var(--sp-5); font-size: var(--fs-body-s); color: var(--text-muted); }

.hero__panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-7);
  min-height: 280px;
  overflow: hidden;
}
.hero__panel::before { /* hairline-signatuur (snede-motief) */
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg,
    transparent 49.55%,
    var(--border-hairline) 49.55%,
    var(--border-hairline) 50.45%,
    transparent 50.45%);
  pointer-events: none;
}
.hero__tags { position: relative; display: flex; flex-direction: column; }
.hero__tags li {
  list-style: none;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-label);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hero__tags { margin: 0; padding: 0; }
.hero__tags li:last-child { border-bottom: 0; }

/* ============ KAARTEN ============ */
.card-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--bg-panel);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.card .kicker { margin-bottom: 0; font-size: var(--fs-label); }
.card h3 { font-size: var(--fs-heading-s); }
.card p { color: var(--text-secondary); font-size: var(--fs-body-s); margin: 0; }
.card .arrow-link { margin-top: auto; padding-top: var(--sp-3); }

/* ============ FACTS ============ */
.facts { display: grid; gap: 0 var(--sp-8); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facts--3 { grid-template-columns: repeat(3, 1fr); } }
.fact { padding-block: var(--sp-6); border-top: 1px solid var(--border-hairline); }
.fact h3 { font-size: var(--fs-heading-s); margin-bottom: var(--sp-2); }
.fact p { color: var(--text-secondary); margin: 0; max-width: 46ch; }

/* ============ STAPPEN ============ */
.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding-top: var(--sp-5); border-top: 1px solid var(--border-hairline); }
.step .num {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--fs-heading-s); margin-bottom: var(--sp-2); }
.step p { color: var(--text-secondary); font-size: var(--fs-body-s); margin: 0; }

/* ============ CTA-BAND (blauw vlak · 1× per pagina · 6°-snede) ============ */
.cta-band {
  background: var(--accent);
  color: var(--on-accent);
  clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
  padding-block: calc(var(--section) + 2.5rem) var(--section);
  margin-top: calc(-2.5rem);
}
.cta-band h2 {
  font-size: var(--fs-display-l);
  font-weight: var(--weight-display);
  line-height: var(--lh-display-l);
  letter-spacing: var(--tracking-display-l);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.cta-band p { color: var(--on-accent); margin-bottom: var(--sp-6); max-width: 56ch; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============ DIENSTBLOKKEN (afwisselend) ============ */
.service { display: grid; gap: var(--sp-6); padding-block: var(--sp-8); border-top: 1px solid var(--border-hairline); }
@media (min-width: 1024px) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-9); padding-block: var(--sp-9); }
  .service--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .service--flip .service__body { order: -1; }
}
.service h2 {
  font-size: var(--fs-display-l);
  font-weight: var(--weight-display);
  line-height: var(--lh-display-l);
  letter-spacing: var(--tracking-display-l);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.service .lead { margin-bottom: var(--sp-5); }
.service ul { color: var(--text-secondary); font-size: var(--fs-body-s); margin-bottom: var(--sp-6); }
.service .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============ FORMULIER ============ */
.form { max-width: 560px; }
.fields { display: grid; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-body-s); font-weight: var(--weight-ui); }
.field .hint { font-size: var(--fs-label); color: var(--text-muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1px solid var(--border-functional);
  border-radius: var(--r-md);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field .error { display: none; font-size: var(--fs-body-s); color: var(--error-text); }
.field.has-error .error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error-border); }
.form .btn { margin-top: var(--sp-6); }
.form .form-note { margin-top: var(--sp-4); font-size: var(--fs-label); color: var(--text-muted); }
.form-status { margin-top: var(--sp-4); font-size: var(--fs-body-s); color: var(--text-secondary); }

/* ============ TEKSTPAGINA (privacy / 404 / bedankt) ============ */
.prose { max-width: 62ch; }
.prose h2 { font-size: var(--fs-heading-m); margin-bottom: var(--sp-4); }
.prose h3 { font-size: var(--fs-heading-s); margin: var(--sp-6) 0 var(--sp-2); }
.prose p, .prose li { color: var(--text-secondary); }
.notice { padding-block: var(--section); }

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}
.footer-grid { display: grid; gap: var(--sp-7); margin-bottom: var(--sp-7); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer .brand { display: inline-block; margin-bottom: var(--sp-3); color: var(--text-primary); }
.site-footer h3 {
  font-size: var(--fs-label);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--border-functional);
  color: var(--text-secondary);
}
.site-footer a:hover { color: var(--accent-text); text-decoration-color: var(--accent-text); }
.fact-tel { margin: 0; }
.fact-tel a { font-size: var(--fs-stat); font-weight: var(--weight-display); letter-spacing: -0.01em; text-decoration: none; color: var(--text-primary); }
.fact-tel a:hover { color: var(--accent-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font-size: var(--fs-label);
}

/* ============ TOEGANKELIJKHEID (toetsenbord) ============ */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arr { transform: translateX(4px); }
  .arrow-link:hover .arr { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .arrow-link, .site-nav a { transition-duration: 1ms; }
  .btn:active, .nav-toggle:active, .theme-toggle:active,
  .cta-duo__label:active, .cta-duo__arrow:active { transform: none; }
  .btn:hover .arr, .arrow-link:hover .arr { transform: none; }
}