/* RAEV — basis-CSS (design tokens + componenten).
   Bron: docs/design/raev-huisstijlgids.html. Buildless: werkt direct via <link> in de mockups,
   en kan later 1-op-1 in het custom theme (raev-theme) geënqueued worden.
   Utility-laag via Tailwind: zie tailwind.config.js (mapt naar dezelfde tokens). */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700&family=Work+Sans:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Kernkleuren */
  --raev-color-primary: #374375;
  --raev-color-accent: #ff6525;
  --raev-color-secondary: #79a5cc;
  --raev-color-bg: #fffcf5;

  /* Blauw-schaal */
  --raev-blue-950: #1c2242; --raev-blue-900: #232a52; --raev-blue-800: #2b3363;
  --raev-blue-700: #374375; --raev-blue-600: #465490; --raev-blue-500: #5c69a6;
  --raev-blue-400: #7c87bb; --raev-blue-300: #a3acd2; --raev-blue-200: #ccd2e7;
  --raev-blue-100: #e6e9f4; --raev-blue-50: #f2f4fa;

  /* Oranje-schaal */
  --raev-orange-900: #9c3200; --raev-orange-800: #c34413; --raev-orange-700: #e2551d;
  --raev-orange-600: #ff6525; --raev-orange-500: #ff7d47; --raev-orange-400: #ff9a6b;
  --raev-orange-300: #ffb897; --raev-orange-200: #ffd6c2; --raev-orange-100: #ffece0;
  --raev-orange-50: #fff5ef;

  /* Skyblue-schaal */
  --raev-skyblue-700: #3f6f96; --raev-skyblue-600: #5a8bb3; --raev-skyblue-500: #79a5cc;
  --raev-skyblue-400: #9cbcda; --raev-skyblue-300: #bdd2e6; --raev-skyblue-200: #dce8f1;
  --raev-skyblue-100: #eef4f9;

  /* Neutraal / warm */
  --raev-cream-0: #fffcf5; --raev-cream-50: #fbf7ee;
  --raev-sand-100: #f3ede1; --raev-sand-200: #e7dfd0;
  --raev-warmgray-300: #d3c9b8; --raev-warmgray-400: #b3a894; --raev-warmgray-500: #8f8471;
  --raev-warmgray-600: #6d6353; --raev-warmgray-700: #4f473c;
  --raev-ink-800: #322d26; --raev-ink-900: #211e19;

  /* Semantisch */
  --raev-success: #3f7d52; --raev-success-bg: #e7f3ea; --raev-success-border: #a9d4b6;
  --raev-warning: #b8791a; --raev-warning-bg: #fbeed9; --raev-warning-border: #e9c07f;
  --raev-error: #c33f3f; --raev-error-bg: #fbe4e4; --raev-error-border: #eaa8a8;
  --raev-info: #3f6f96; --raev-info-bg: #e8f1f7; --raev-info-border: #b9d3e5;

  /* Tekst / links / borders */
  --raev-text-heading: var(--raev-blue-700);
  --raev-text-body: var(--raev-ink-900);
  --raev-text-muted: var(--raev-warmgray-600);
  --raev-text-inverse: var(--raev-cream-0);
  --raev-text-on-accent: var(--raev-ink-900);
  --raev-link: var(--raev-blue-700);
  --raev-link-hover: var(--raev-orange-600);
  --raev-border-default: var(--raev-sand-200);
  --raev-border-strong: var(--raev-warmgray-400);
  --raev-focus-ring: var(--raev-orange-600);

  /* Knoppen — ponytail: klant-voorkeur = lichte tekst op oranje; oranje verdiept (700/800) voor leesbare witte tekst. */
  --raev-btn-primary-bg: var(--raev-orange-700); --raev-btn-primary-bg-hover: var(--raev-orange-800);
  --raev-btn-primary-text: var(--raev-cream-0);
  --raev-btn-secondary-bg: var(--raev-blue-700); --raev-btn-secondary-bg-hover: var(--raev-blue-800);
  --raev-btn-secondary-text: var(--raev-cream-0);
  --raev-btn-disabled-bg: var(--raev-sand-200); --raev-btn-disabled-text: var(--raev-warmgray-500);

  /* Typografie */
  --raev-font-heading: 'Barlow', -apple-system, Helvetica, Arial, sans-serif;
  --raev-font-body: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
  --raev-text-h1: 700 3rem/1.15 var(--raev-font-heading);
  --raev-text-h2: 700 2.25rem/1.2 var(--raev-font-heading);
  --raev-text-h3: 600 1.75rem/1.25 var(--raev-font-heading);
  --raev-text-h4: 600 1.375rem/1.3 var(--raev-font-body);
  --raev-text-h5: 600 1.125rem/1.4 var(--raev-font-body);
  --raev-text-body-md: 400 1rem/1.6 var(--raev-font-body);
  --raev-text-small: 400 0.875rem/1.5 var(--raev-font-body);
  --raev-text-caption: 600 0.75rem/1.4 var(--raev-font-body);

  /* Spacing / radius / shadow */
  --raev-space-xs: 4px; --raev-space-sm: 8px; --raev-space-md: 12px; --raev-space-lg: 16px;
  --raev-space-xl: 24px; --raev-space-2xl: 32px; --raev-space-3xl: 48px; --raev-space-4xl: 64px;
  --raev-space-5xl: 96px;
  --raev-radius-sm: 6px; --raev-radius-md: 10px; --raev-radius-lg: 16px; --raev-radius-xl: 24px;
  --raev-radius-pill: 999px;
  --raev-shadow-sm: 0 1px 2px rgba(33,30,25,0.06);
  --raev-shadow-md: 0 4px 12px rgba(33,30,25,0.10);
  --raev-shadow-lg: 0 12px 32px rgba(33,30,25,0.14);

  /* Component-tokens */
  --raev-badge-location-bg: var(--raev-skyblue-100); --raev-badge-location-text: var(--raev-skyblue-700);
  --raev-badge-sector-bg: var(--raev-sand-100); --raev-badge-sector-text: var(--raev-warmgray-700);
  /* ponytail: klant-voorkeur = geen donkere tekst op oranje; oranje-800 + crème-tekst = leesbaar (AA) op de kleine tag. */
  --raev-badge-new-bg: var(--raev-orange-800); --raev-badge-new-text: var(--raev-cream-0);
  --raev-card-bg: var(--raev-cream-0); --raev-card-border: var(--raev-sand-200);
  --raev-card-shadow: var(--raev-shadow-md); --raev-card-radius: var(--raev-radius-lg);
  --raev-input-border: var(--raev-warmgray-300); --raev-input-border-focus: var(--raev-blue-700);
  --raev-input-border-error: var(--raev-error); --raev-input-bg-error: var(--raev-error-bg);

  /* Layout */
  --raev-container: 1120px;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--raev-text-body-md);
  color: var(--raev-text-body);
  background: var(--raev-color-bg);
}
h1, h2, h3, h4, h5 { color: var(--raev-text-heading); margin: 0 0 var(--raev-space-lg); }
h1 { font: var(--raev-text-h1); } h2 { font: var(--raev-text-h2); }
h3 { font: var(--raev-text-h3); } h4 { font: var(--raev-text-h4); } h5 { font: var(--raev-text-h5); }
p { margin: 0 0 var(--raev-space-lg); }
a { color: var(--raev-link); text-decoration: none; }
a:hover { color: var(--raev-link-hover); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--raev-focus-ring); outline-offset: 2px; }

/* Mobiel: kleinere koppen */
@media (max-width: 720px) {
  :root { --raev-text-h1: 700 2.125rem/1.15 var(--raev-font-heading);
          --raev-text-h2: 700 1.625rem/1.2 var(--raev-font-heading); }
}

/* ---------------------------------------------------------------- Layout */
.raev-container { max-width: var(--raev-container); margin-inline: auto; padding-inline: var(--raev-space-xl); }
.raev-section { padding-block: var(--raev-space-5xl); }
@media (max-width: 720px) { .raev-section { padding-block: var(--raev-space-4xl); } }
.raev-text-muted { color: var(--raev-text-muted); }
.raev-eyebrow { font: var(--raev-text-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--raev-orange-700); }

/* ---------------------------------------------------------------- Buttons */
.raev-btn {
  display: inline-flex; align-items: center; gap: var(--raev-space-sm);
  font: var(--raev-text-h5); cursor: pointer; border: 0;
  padding: var(--raev-space-md) var(--raev-space-xl);
  border-radius: var(--raev-radius-md); text-decoration: none;
  transition: background-color .15s ease;
}
.raev-btn--primary { background: var(--raev-btn-primary-bg); color: var(--raev-btn-primary-text); }
.raev-btn--primary:hover { background: var(--raev-btn-primary-bg-hover); color: var(--raev-btn-primary-text); }
.raev-btn--secondary { background: var(--raev-btn-secondary-bg); color: var(--raev-btn-secondary-text); }
.raev-btn--secondary:hover { background: var(--raev-btn-secondary-bg-hover); color: var(--raev-btn-secondary-text); }
.raev-btn--ghost { background: transparent; color: var(--raev-blue-700); box-shadow: inset 0 0 0 1px var(--raev-border-strong); }
.raev-btn--ghost:hover { background: var(--raev-blue-50); }
.raev-btn[disabled], .raev-btn--disabled { background: var(--raev-btn-disabled-bg); color: var(--raev-btn-disabled-text); pointer-events: none; }

/* ---------------------------------------------------------------- Badges */
.raev-badge {
  display: inline-flex; align-items: center;
  font: var(--raev-text-caption); padding: 2px var(--raev-space-md);
  border-radius: var(--raev-radius-pill); white-space: nowrap;
}
.raev-badge--location { background: var(--raev-badge-location-bg); color: var(--raev-badge-location-text); }
.raev-badge--sector { background: var(--raev-badge-sector-bg); color: var(--raev-badge-sector-text); }
.raev-badge--new { background: var(--raev-badge-new-bg); color: var(--raev-badge-new-text); }
.raev-badge--contract { background: var(--raev-blue-100); color: var(--raev-blue-700); }

/* ---------------------------------------------------------------- Cards */
.raev-card {
  background: var(--raev-card-bg); border: 1px solid var(--raev-card-border);
  border-radius: var(--raev-card-radius); box-shadow: var(--raev-card-shadow);
  padding: var(--raev-space-xl);
}
/* Vacaturekaart (kerncomponent) */
.raev-vaccard { display: flex; flex-direction: column; gap: var(--raev-space-md); }
.raev-vaccard__title { font: var(--raev-text-h4); color: var(--raev-text-heading); margin: 0; }
.raev-vaccard__company { color: var(--raev-text-muted); font: var(--raev-text-small); }
.raev-vaccard__badges { display: flex; flex-wrap: wrap; gap: var(--raev-space-sm); }
.raev-vaccard__meta { font: var(--raev-text-small); color: var(--raev-text-muted); }

/* ---------------------------------------------------------------- Forms */
.raev-field {
  width: 100%; font: var(--raev-text-body-md); color: var(--raev-text-body);
  background: #fff; border: 1px solid var(--raev-input-border);
  border-radius: var(--raev-radius-md); padding: var(--raev-space-md) var(--raev-space-lg);
}
.raev-field:focus { outline: 0; border-color: var(--raev-input-border-focus); box-shadow: 0 0 0 3px var(--raev-blue-100); }
.raev-field--error { border-color: var(--raev-input-border-error); background: var(--raev-input-bg-error); }
.raev-label { display: inline-block; font: var(--raev-text-small); font-weight: 600; margin-bottom: var(--raev-space-xs); }

/* Zoek/filterbalk */
.raev-searchbar { display: flex; flex-wrap: wrap; gap: var(--raev-space-md); background: #fff;
  border: 1px solid var(--raev-border-default); border-radius: var(--raev-radius-lg);
  box-shadow: var(--raev-shadow-md); padding: var(--raev-space-md); }
.raev-searchbar .raev-field { flex: 1 1 160px; border: 0; }

/* ---------------------------------------------------------------- Header / footer / whatsapp */
.raev-header { position: sticky; top: 0; z-index: 20; background: var(--raev-cream-0);
  border-bottom: 1px solid var(--raev-border-default); }
.raev-header__bar { display: flex; align-items: center; gap: var(--raev-space-xl);
  padding-block: var(--raev-space-lg); }
.raev-nav { display: flex; align-items: center; gap: var(--raev-space-xl);
  font: var(--raev-text-small); flex: 1; }
.raev-nav a { color: var(--raev-text-body); padding-block: 8px; white-space: nowrap; }
.raev-nav a:hover { color: var(--raev-link-hover); }
.raev-nav a.is-active { color: var(--raev-blue-700); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--raev-orange-600); }
.raev-nav__divider { width: 1px; align-self: stretch; background: var(--raev-border-default);
  margin-inline: var(--raev-space-xs); }
/* Hamburger (mobiel) */
.raev-burger { display: none; margin-left: auto; width: 44px; height: 44px;
  border: 1px solid var(--raev-border-strong); border-radius: var(--raev-radius-md);
  background: #fff; align-items: center; justify-content: center; cursor: pointer; }

.raev-footer { background: var(--raev-blue-700); color: var(--raev-cream-0); }
.raev-footer a { color: var(--raev-skyblue-200); }
.raev-footer__credit { border-top: 1px solid var(--raev-blue-600); font: var(--raev-text-small);
  padding-block: var(--raev-space-lg); color: var(--raev-skyblue-300);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--raev-space-sm);
  /* Extra ruimte onderaan: de vaste WhatsApp-knop zweeft rechtsonder en zou de credit afdekken. */
  padding-bottom: calc(var(--raev-space-lg) + 60px); }

.raev-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: var(--raev-space-sm);
  background: var(--raev-success); color: #fff; border-radius: var(--raev-radius-pill);
  padding: var(--raev-space-md) var(--raev-space-lg); box-shadow: var(--raev-shadow-lg); font: var(--raev-text-small); }
/* a:hover is specifieker dan .raev-whatsapp en kleurde de tekst oranje op groen. */
.raev-whatsapp:hover, .raev-whatsapp:focus { color: #fff; }

/* Anker-links (#sectie) stoppen anders onder de plakkende header. */
html { scroll-padding-top: 96px; }