/* ============================================================
   ISATIS, Design tokens (handoff naar Elementor Site Settings)
   Bron van waarheid voor: Globals → Colors + Typography
   Beslissingen op 2026-05-11 (v1):
   - Style direction: licht, rust, software-look
   - Primary CTA = blauw (rust + brand)
   - Cyan = accent + monospace-labels
   - Yellow = sparzaam (één highlight-moment per pagina)
   - Red = alleen voor alerts/errors, niet op homepage
   ============================================================ */

:root {
  /* --- Colors --- mappen naar Elementor Site Settings → Global Colors */
  --e-global-color-primary:    #38C4EA; /* slug: primary      , main brand color (cyan), primary CTA */
  --e-global-color-secondary:  #0D59D1; /* slug: secondary    , deep blue, anchors & structural accents */
  --e-global-color-accent:     #EEC611; /* slug: accent       , yellow bg/border/badge only */
  --e-global-color-accent-ink: #8C7300; /* slug: accent-ink   , yellow as TEXT (legible) */
  --e-global-color-alert:      #FE5B5B; /* slug: alert        , red, alerts/errors only */

  --e-global-color-text:       #0F1A2E; /* slug: text     , body + headings */
  --e-global-color-text-dim:   #5A6478; /* slug: text-dim , secondary text, labels */
  --e-global-color-text-mute:  #9097A6; /* slug: text-mute, captions, helper text */

  --e-global-color-bg:         #FFFFFF; /* slug: bg       , page background */
  --e-global-color-bg-soft:    #F7F8FB; /* slug: bg-soft  , alt section bg, card surface */
  --e-global-color-border:     #E6E9F0; /* slug: border   , hairlines, card borders */

  /* --- Typography --- mappen naar Elementor Site Settings → Global Fonts */
  --e-global-typography-primary-font-family:    'JetBrains Mono', monospace;
  --e-global-typography-primary-font-weight:    700;

  --e-global-typography-secondary-font-family:  'JetBrains Mono', monospace;
  --e-global-typography-secondary-font-weight:  600;

  --e-global-typography-text-font-family:       'Inter', sans-serif;
  --e-global-typography-text-font-weight:       400;

  --e-global-typography-accent-font-family:     'JetBrains Mono', monospace;
  --e-global-typography-accent-font-weight:     500;
}

/* ============================================================
   Typography scale, mapping naar Elementor Global Fonts
   Slug = Elementor Global Font naam
   ============================================================ */

/* slug: heading-1, Hero H1 */
.t-heading-1 {
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--e-global-color-text);
}

/* slug: heading-2, Section H2 */
.t-heading-2 {
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--e-global-color-text);
}

/* slug: heading-3, Card H3 */
.t-heading-3 {
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  color: var(--e-global-color-text);
}

/* slug: label-mono, // CAREERS style label */
.t-label-mono {
  font-family: var(--e-global-typography-accent-font-family);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
}

/* slug: stat-mono, 30+ / 200+ big numbers */
.t-stat-mono {
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--e-global-color-text);
}

/* slug: lead, intro paragraph onder H1/H2 */
.t-lead {
  font-family: var(--e-global-typography-text-font-family);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--e-global-color-text-dim);
}

/* slug: body, default paragraph */
.t-body {
  font-family: var(--e-global-typography-text-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--e-global-color-text-dim);
}

/* slug: caption, small helper text */
.t-caption {
  font-family: var(--e-global-typography-text-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--e-global-color-text-mute);
}

/* ============================================================
   Section spacing, uniform vertical rhythm
   ============================================================ */
:root {
  --space-section-d: 80px;   /* desktop */
  --space-section-t: 80px;   /* tablet  */
  --space-section-m: 80px;   /* mobile  */
  --space-head-gap:  14px;   /* tussen label, h2, sub */
  --space-head-to-grid: 40px;

  /* ── Fluïde spacing-systeem (één bron van waarheid) ──
     Verticale sectie-padding: 60px op tablet/telefoon, vloeiend naar 80px op desktop.
     Horizontale gutter: 20px op tablet/telefoon, vloeiend naar 24px op desktop
     (op brede schermen onzichtbaar omdat content < --content-max). */
  --section-pad-y: 60px;
  --gutter: 20px;
  --content-max: 1200px;
  --measure: 68ch;        /* comfortabele leesbreedte voor lopende tekst (~75 tekens) */
}
@media (min-width: 1024px) {
  :root {
    --section-pad-y: clamp(60px, calc(60px + 20 * (100vw - 1024px) / 256), 80px);
    --gutter: clamp(20px, calc(20px + 4 * (100vw - 1024px) / 256), 24px);
  }
}
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; }
/* Touch-apparaten: formuliervelden minstens 44px hoog voor comfortabele tap-targets */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
}

/* ── Scrollbare tab-rijen (telefoon): rand-fades volgen de scrollpositie.
     Classes worden per pagina door een klein scriptje getoggeld. ── */
@media (max-width: 640px) {
  .scroll-fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .scroll-fade-l {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26px);
    mask-image: linear-gradient(to right, transparent, #000 26px);
  }
  .scroll-fade-lr {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  }
}

/* Lange samengestelde woorden (vaak in NL, bv. "zorgtoeleveringsketen") mogen
   binnen kaart-/banner-titels afbreken i.p.v. uit de kaart te snijden. */
.pj-banner__title,
.eu-bento__title,
.cs-hero__title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}