/* ============================================================
   De_AIjk — Brand v2 "Van eik naar AI"
   Gedeelde reskin-laag. Laad DIT bestand ná css/styles.css.
   Herdefinieert de merk-tokens (groen #50c848 → paars #5a2d9b)
   zodat elke pagina die var(--primary-*) gebruikt automatisch
   meekleurt, plus gerichte component-overrides.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Merk-DNA: eik (groen) → data (paars) ---- */
  --oak-green:      #50c848;   /* blad, organisch, De_Eijk-wortels */
  --oak-green-dark: #3aa832;
  --oak-green-deep: #256b20;
  --ai-purple:      #5a2d9b;   /* data/AI, De_AIjk */
  --ai-purple-dark: #3f1f70;
  --ai-purple-deep: #2a1250;
  --ai-purple-light:#8b5fc9;
  --bridge-teal:    #2f9e8f;   /* brug in de gradient (ring-overgang) */

  /* Signatuur-gradient: blad → data */
  --grad-brand:      linear-gradient(120deg, var(--oak-green) 0%, var(--bridge-teal) 48%, var(--ai-purple) 100%);
  /* Knop-variant van de merkgradient: dezelfde reis blad → data, maar donker genoeg
     voor witte tekst. Wit haalt hier 5,33:1 (groen), 6,19:1 (teal) en 9,20:1 (paars);
     de lichte --grad-brand hierboven blijft voor decoratief gebruik. */
  --grad-brand-btn:  linear-gradient(120deg, #2f7a2a 0%, #1a6b73 48%, #5a2d9b 100%);
  --grad-brand-soft: linear-gradient(120deg, #eafbe8 0%, #eef7f5 45%, #efe8fa 100%);
  --grad-purple:     linear-gradient(135deg, var(--ai-purple) 0%, var(--ai-purple-dark) 100%);
  --grad-dark:       linear-gradient(150deg, #1e1433 0%, #160f24 55%, #120a1f 100%);

  /* ---- Bestaande semantische tokens overschrijven ---- */
  --primary-color:  #5a2d9b;
  --primary-light:  #8b5fc9;
  --primary-dark:   #3f1f70;
  --secondary-color:#3aa832;        /* leesbaar groen op wit (AA) */
  --secondary-bright:#50c848;       /* fel merk-groen voor accenten op donker */
  --text-color:     #241a33;        /* inkt met violette bias */
  --text-light:     #6b6478;
  --background-light:#faf9fc;        /* zeer licht violet-wit */
  --background-white:#ffffff;
  --background-dark: #160f24;        /* aubergine i.p.v. navy */
  --border-color:   #e9e5f0;

  --shadow-glow-green:  0 6px 22px rgba(80,200,72,0.35);
  --shadow-glow-purple: 0 6px 22px rgba(90,45,155,0.38);

  /* ---- Typografie ---- */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ====== Basis ====== */
body { background-color: var(--background-white); color: var(--text-color); }

h1, h2, h3, .hero-title, .section-title, .cta-title, .h1, .h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
h1, .hero-title { font-weight: 800; }
h2, .section-title, .cta-title { font-weight: 700; }

a { color: var(--primary-color); }
a:hover { color: var(--primary-dark); }

.section-tagline, .section-header .section-tagline {
  color: var(--primary-color);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Gradient-tekst utility (blad → data) */
.text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ====== Header / nav ====== */
.header { border-bottom: 1px solid var(--border-color); }
.navbar .logo span { font-style: normal !important; font-family: var(--font-display); letter-spacing: -0.02em; }
.nav-menu > li > a:hover, .nav-item-dropdown > a:hover { color: var(--primary-color); }
.dropdown-menu a:hover { background: var(--background-light); color: var(--primary-color); }

/* ====== Knoppen ====== */
.btn-primary {
  background: var(--grad-purple);
  border: none;
  box-shadow: var(--shadow-glow-purple);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }

.btn-secondary {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}
.btn-secondary:hover { background: var(--primary-color); color: #fff; }

.btn-submit, .btn.btn-submit { background: var(--grad-purple); border: none; }

/* "rainbow" knop → merk-gradient */
.btn-rainbow {
  position: relative; display: inline-block;
  padding: 1rem 2.5rem; border-radius: 999px;
  font-weight: 700; color: #fff; font-family: var(--font-sans);
  background: var(--grad-brand-btn); background-size: 200% 100%;
  animation: brandShift 6s ease infinite;
  box-shadow: var(--shadow-glow-purple);
  transition: transform .3s ease, box-shadow .3s ease;
}
.btn-rainbow:hover { transform: translateY(-2px); color:#fff; box-shadow: 0 10px 30px rgba(90,45,155,0.45); }
@keyframes brandShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion: reduce){ .btn-rainbow{ animation:none } }

/* ====== Donkere secties → aubergine + paars ====== */
.solutions-section-dark {
  background: var(--grad-dark);
  position: relative; overflow: hidden;
}
.solutions-section-dark::after {
  /* subtiele data-gloed rechtsboven */
  content:""; position:absolute; top:-120px; right:-120px; width:360px; height:360px;
  background: radial-gradient(circle, rgba(80,200,72,0.16), transparent 70%);
  pointer-events:none;
}
.solution-card, .solution-card-featured {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  transition: transform .35s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow .35s ease, border-color .35s ease;
}
.solution-card:hover, .solution-card-featured:hover {
  transform: translateY(-8px);
  border-color: rgba(80,200,72,0.5);
  box-shadow: var(--shadow-glow-green);
}
.solution-icon {
  background: var(--grad-brand);
  color: #fff;
  border-radius: 14px;
}
.solution-link { color: var(--secondary-bright); font-weight: 600; }
.solution-card:hover .solution-link i, .solution-card-featured:hover .solution-link i { transform: translateX(5px); }
.featured-tag { background: rgba(139,95,201,0.22); color: #d9c8f2; border-radius: 999px; }

/* Leesbaarheid op de donkere oplossingen-sectie (tekstkleuren erven anders de
   donkere inkt van de lichte secties) + ontbrekende ruimte/opmaak. */
.solutions-section-dark { padding: 6rem 0; }
.solutions-section-dark .container { position: relative; z-index: 1; }
.solutions-section-dark .section-tagline { color: var(--secondary-bright); }
.solutions-section-dark .section-title { color: #ffffff; }
.solutions-section-dark .section-description { color: rgba(255,255,255,0.78); }
.solutions-section-dark .solution-title { color: #ffffff; }
.solutions-section-dark .solution-description { color: rgba(255,255,255,0.74); }
.solutions-section-dark .solution-card,
.solutions-section-dark .solution-card-featured {
  display: flex; flex-direction: column;
  padding: 2rem; box-shadow: none;
}
.solutions-section-dark .featured-content { display: flex; flex-direction: column; flex: 1; }
.featured-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.featured-tag { display: inline-block; padding: .3rem .8rem; font-size: .8rem; font-weight: 500; line-height: 1.45; }

/* Een .section-description die niet in een (gecentreerde) .section-header staat,
   erfde `margin: 0 auto` uit styles.css en sprong daardoor ~175px naar rechts
   t.o.v. de links uitgelijnde kop erboven (case-pagina's). */
.container > .section-title + .section-description { margin-left: 0; margin-right: 0; }

/* ====== Voordelen ====== */
.benefit-number {
  font-family: var(--font-display);
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.benefit-item { transition: transform .3s ease; }
.benefit-item:hover { transform: translateY(-6px); }

/* ====== Aanpak ====== */
.step-number {
  background: var(--grad-purple);
  color: #fff; font-family: var(--font-display); font-weight: 700;
}

/* ====== Cases ====== */
.case-card {
  border: 1px solid var(--border-color);
  border-radius: 14px; overflow: hidden;
  transition: transform .35s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow .35s ease;
}
.case-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg, 0 10px 25px rgba(90,45,155,0.15)); }
.case-category { color: var(--primary-color); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size:.75rem; }
.case-link { color: var(--primary-color); font-weight: 600; }
.case-link:hover i { transform: translateX(5px); }

/* ====== CTA-sectie ====== */
.cta-section { background: var(--grad-purple); position: relative; overflow: hidden; }
.cta-section::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 120%, rgba(80,200,72,0.25), transparent 55%);
  pointer-events:none;
}

/* ====== Contact ====== */
/* `grid-column: span 2` maakte onder 576px (formulier = 1 kolom) een impliciete
   tweede kolom aan, waardoor naam/e-mail tot een paar pixels werden geknepen. */
.form-group.full-width { grid-column: 1 / -1; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(90,45,155,0.12);
  outline: none;
}
.contact-info {
  background: var(--grad-dark);
  padding: 2rem;
  border-radius: var(--border-radius, 12px);
  align-content: start;
}
/* Items binnen het donkere paneel: lichte kaartjes zonder padding lieten
   donkere banden zien; transparant + lichte tekst sluit aan op de rest van v2. */
.contact-info .info-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.contact-info .info-item i { color: var(--secondary-bright); }
.contact-info .info-item h3 { color: #ffffff; }
.contact-info .info-item p { color: rgba(255,255,255,0.74); }
.contact-info .info-item p a { color: #d9c8f2; }
.contact-info .info-item p a:hover { color: var(--secondary-bright); }
.contact-info .social-link:hover { background: var(--secondary-bright); box-shadow: var(--shadow-glow-green); }

/* ====== Footer ====== */
.footer { background: #120a1f; }
.footer a:hover { color: var(--secondary-bright); }

/* ====== Gedeelde nav-shell v2 (alle pagina's, zodat subpagina's dezelfde nav krijgen) ====== */
.header { position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); z-index: 100; transition: box-shadow .3s ease; }
.header.scrolled { box-shadow: 0 4px 20px rgba(20,10,40,0.07); }
.navbar { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.navbar .logo img { height: 48px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 1.6rem; }
.nav-menu > li > a { color: var(--text-color); font-weight: 500; }
.lang-switch { font-size: 1.05rem; font-weight: 600; }

/* Hamburger is een echte <button>: reset de knopstijl, behoud het uiterlijk. */
.mobile-toggle {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: 0; padding: 0; margin: 0; color: inherit;
  -webkit-appearance: none; appearance: none;
}
/* Geometrie vastzetten (styles.css en de inline blokken per pagina zetten er elk
   iets anders over heen) zodat het kruis hieronder altijd klopt: 21px hoog,
   drie streepjes van 2px op 0 / 9,5 / 19px. */
.navbar .mobile-toggle { height: 21px; justify-content: space-between; align-items: flex-start; }
.mobile-toggle span { display:block; width: 26px; height: 2px; background: var(--text-color); border-radius: 2px; transition: .3s; }
/* Open menu → de drie streepjes vormen een kruis. */
.mobile-toggle.active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .mobile-toggle span { transition: none; } }

/* Oplossingen-trigger is een echte <button> met aria-expanded; ziet eruit als de nav-links. */
.nav-item-dropdown > .dropdown-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 500; color: var(--text-color);
  line-height: inherit; cursor: pointer; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.nav-item-dropdown > .dropdown-toggle:hover { color: var(--primary-color); }
.nav-item-dropdown > .dropdown-toggle::after {
  content: ""; flex: none; width: .4em; height: .4em; margin-top: -.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.nav-item-dropdown > .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .1em; }
@media (prefers-reduced-motion: reduce){ .nav-item-dropdown > .dropdown-toggle::after { transition: none; } }

/* Openen op klik/Enter/spatie (.open) naast het bestaande :hover uit styles.css;
   :focus-within op de lijst zelf houdt hem open terwijl je er met Tab doorheen loopt. */
.nav-item-dropdown .dropdown-menu.open,
.nav-item-dropdown .dropdown-menu:focus-within {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.mobile-toggle:focus-visible,
.nav-item-dropdown > .dropdown-toggle:focus-visible {
  outline: 3px solid var(--primary-light); outline-offset: 4px; border-radius: 4px;
}

@media (max-width: 900px){
  .nav-menu { position: fixed; inset: 76px 0 auto 0; background:#fff; flex-direction:column; align-items:flex-start; gap:0; padding: .5rem 1.5rem 1.5rem; box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,.12)); transform: translateY(-120%); transition: transform .3s ease; z-index: 99; max-height: calc(100vh - 76px); overflow-y: auto; }
  .nav-menu.open { transform: none; }
  .nav-menu > li { width:100%; padding:.4rem 0; }
  .mobile-toggle { display:flex; }

  /* Mobiel: geen zwevend paneel maar een ingesprongen sublijst onder de knop.
     display:none/block i.p.v. alleen visueel verbergen, zodat de zes links ook
     echt buiten de tabvolgorde vallen zolang de sublijst dicht is. */
  .nav-menu .nav-item-dropdown { width: 100%; }
  .nav-menu .nav-item-dropdown > .dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-menu .dropdown-menu {
    display: none; position: static; width: 100%; min-width: 0;
    opacity: 1; visibility: visible; transform: none; transition: none;
    background: transparent; box-shadow: none; border-radius: 0;
    margin: 0; padding: 0; border-left: 2px solid var(--border-color);
  }
  .nav-menu .dropdown-menu.open { display: block; margin: .4rem 0 .2rem; }
  .nav-menu .dropdown-menu a { padding: .5rem 0 .5rem 1rem; font-size: .95rem; }
  .nav-menu .dropdown-menu a:hover { padding-left: 1.25rem; }
}

/* ====== Reveal-on-scroll (gedeeld) ======
   Alleen verbergen wanneer JavaScript daadwerkelijk draait: js/site-v2.js zet
   `.js` op <html>. Zonder JS valt de hele pagina terug op gewoon zichtbaar. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none } }

/* Trusted-by logorij (13-09-2026): vaste beeldhoogte zodat logo-vlakken en bijschriften op één lijn staan */
.trusted-logos { align-items: flex-start; }
.trusted-logo { max-width: 200px; }
.trusted-logo img { height: 96px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 12px; }
.trusted-logo p { min-height: 1.4em; }

/* CTA-knop (14-09-2026, besluit Joost): overal de merkgradient. De 34 subpagina's hebben nog een inline v1 "rainbow"-override;
   die wordt hier dwingend uitgeschakeld totdat die inline blokken bij go-live worden opgeruimd. */
.btn-rainbow {
  background: var(--grad-brand-btn) !important; background-size: 200% 100% !important;
  animation: brandShift 6s ease infinite !important; border-radius: 999px !important;
  overflow: visible !important; box-shadow: var(--shadow-glow-purple) !important;
  font-size: 1rem !important; font-weight: 700 !important; z-index: auto !important;
}
.btn-rainbow::before, .btn-rainbow::after { content: none !important; display: none !important; }
.btn-rainbow span, .btn-rainbow:hover span { text-shadow: none !important; }
.btn-rainbow:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(90,45,155,0.45) !important; }
@media (prefers-reduced-motion: reduce) { .btn-rainbow { animation: none !important; } }

/* ====== Case-carrousel (14-09-2026): 6 uitgelichte cases, doorklik naar alle cases ====== */
.case-carousel { position: relative; margin-top: 3rem; }

.case-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 1.5rem;          /* ruimte voor focusring en schaduw */
  margin: -4px -4px 0;
  scrollbar-width: thin;
}
.case-track::-webkit-scrollbar { height: 6px; }
.case-track:focus-visible { outline: 3px solid var(--ai-purple, #5a2d9b); outline-offset: 4px; border-radius: 14px; }
.case-track::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }

.case-track > .case-card {
  flex: 0 0 calc((100% - 4rem) / 3);
  scroll-snap-align: start;
  background: var(--background-white, #fff);
  display: flex;
  flex-direction: column;
}
.case-track > .case-card .case-content { display: flex; flex-direction: column; flex: 1; }
.case-track > .case-card .case-link { margin-top: auto; }

/* Eén beeldstijl voor alle kaarten: zelfde hoogte, zelfde zachte merkachtergrond */
.case-track .case-image,
.cases-all-grid .case-image {
  height: 200px;
  background: var(--grad-brand-soft);
  display: flex; align-items: center; justify-content: center;
}
.case-track .case-image img,
.cases-all-grid .case-image img { width: 100%; height: 100%; }
.case-image--contain img { object-fit: contain; padding: 18px; }
.case-image--cover img { object-fit: cover; }

/* Bediening */
.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin-top: .5rem; flex-wrap: wrap;
}
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-color); background: #fff;
  color: var(--primary-color); font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--primary-color); color: #fff; transform: translateY(-2px); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn:focus-visible { outline: 3px solid var(--ai-purple, #5a2d9b); outline-offset: 3px; }

.carousel-dots { display: flex; gap: .5rem; align-items: center; }
.carousel-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid var(--primary-color); background: transparent; cursor: pointer;
}
.carousel-dot[aria-current="true"] { background: var(--primary-color); }
.carousel-dot:focus-visible { outline: 3px solid var(--ai-purple, #5a2d9b); outline-offset: 3px; }

.cases-footer { display: flex; justify-content: center; margin-top: 2rem; }

/* Overzichtspagina met alle cases */
.cases-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 992px) {
  .case-track > .case-card { flex-basis: calc((100% - 2rem) / 2); }
}
@media (max-width: 700px) {
  .case-track { gap: 1rem; }
  .case-track > .case-card { flex-basis: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .case-track { scroll-behavior: auto; }
  .carousel-btn:hover:not(:disabled) { transform: none; }
}

/* Notitie onder de verzendknop + onderwerpveld */
.form-note { margin: .75rem 0 0; font-size: .9rem; color: var(--text-light); }
.form-group select {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--border-color);
  border-radius: 10px; background: #fff; font-family: inherit; font-size: 1rem; color: var(--text-color);
}
.form-group select:focus-visible { outline: 3px solid var(--ai-purple, #5a2d9b); outline-offset: 2px; }