/* ======================================================================
   📘 Kleurenvariabelen
   --------------------------------------------------------------------*/

:root {

  /* === AUTH knoppen === */
  --auth-btn-bg: #265684;
  --auth-btn-text: #FFFFFF;
  --auth-btn-bg-hover: #3473B3;
  --auth-btn-text-hover: #FFFFFF;

  /* === JURIDISCH modal knoppen === */
  --jur-btn-bg: #265684;
  --jur-btn-text: #FFFFFF;
  --jur-btn-bg-hover: #3473B3;
  --jur-btn-text-hover: #FFFFFF;

/* =========================== LIGHT THEME =========================== */
  --theme-color: #265684;
  --main-color: #265684;
  --main-new: #265684;
  --main-color-hover: #3473B3;
  
  --TekstVak-headers-achtergrond: #e0e0e0;
  --TekstVak-headers-tekst: #265684; 

  --website-achtergrond: #FFFFFF;
  --website-teksten: #333333;

  --textvak-achtergrond: #FFFFFF;
  --textvak-omlijning: #CCCCCC;

  --knoppen-achtergrond: #265684;
  --knoppen-tekst: #FFFFFF;
  --knoppen-achtergrond-extra: #C13320;
  --knoppen-tekst-extra: #FFFFFF;

  --doclink-knop: #265684;
  --doclink-knop-hover: #3473B3;
  --doclink-tekst: #FFFFFF;

  --tekst-algemeen: #333333;
  --tekst-specifiek: #6B7280;

  --notch-topbar-achtergrond: #265684;
  --topbar-tekst: #FFFFFF;
  --topbar-knop-tekst: #FFFFFF;
  --topbar-afbeeldingen: #FFFFFF;

  --taalselector-achtergrond: #FFFFFF;
  --taalselector-tekst: #000000;

  --textvak-header-tekst: #255684;
  --textvak-header-achtergrond: #F7F7F8;

  --meldingen-rood: #C13320;
  --meldingen-groen: #00BFA6;
  --meldingen-blauw: #265684;

  --selectvak-omlijning: #CCCCCC;

  --links: #265684;
  --links-hover: #3473B3;

  --backtotop-knop: #265684;
  --backtotop-knop-hover: #3473B3;

  --checkbox-omlijning: #265684;
  --checkbox-vinkje: #265684;

  --menu-achtergrond: #265684;
  --menu-tekst: #FFFFFF;

  /* Extra grijstinten */
  --knoppen-tekst-grijs: #333333;
  --knoppen-achtergrond-grijs: #DDDDDD;
  --knoppen-tekst-groen: #265684;
  --brand-kleur: #265684;
  --basistekst-zwart: #111111;
  --grijs-licht-777: #777777;
  --grijs-licht-ccc: #CCCCCC;
  --grijs-licht-ddd: #DDDDDD;
  --grijs-licht-eee: #EEEEEE;
  --grijs-licht-e5e7eb: #E5E7EB;
  --grijs-licht-ececec: #ECECEC;
  --geel-highlight-ffd760: #FFD760;
  --geel-highlight-ffe58a: #FFE58A;
  --geel-highlight-ffe58f: #FFE58F;
  --geel-background-fff3cd: #FFF3CD;

  /* Transparanten */
  --overlay-black-005: rgba(0,0,0,0.05);
  --overlay-black-015: rgba(0,0,0,0.15);
  --overlay-black-018: rgba(0,0,0,0.18);
  --overlay-black-02: rgba(0,0,0,0.2);
  --overlay-black-03: rgba(0,0,0,0.3);
  --overlay-black-045: rgba(0,0,0,0.45);
  --overlay-black-06: rgba(0,0,0,0.6);
  --overlay-black-0: rgba(0,0,0,0);
  --overlay-green-03: rgba(0, 191, 166, 0.3);

  --overlay-white-06: rgba(255,255,255,0.6);
  --overlay-white-07: rgba(255,255,255,0.7);
  --overlay-white-015: rgba(255,255,255,0.15);

  /* === Knoppen expliciet === */
  --knop1-bg: #265684;
  --knop1-text: #FFFFFF;
  --knop1-bg-hover: #3473B3;

  --knop2-bg: #265684;
  --knop2-text: #FFFFFF;
  --knop2-bg-hover: #3473B3;

  --knop3-bg: #265684;
  --knop3-text: #FFFFFF;
  --knop3-bg-hover: #3473B3;

  --knop-more-bg: #eeeeee;
  --knop-more-text: #265684;
  --knop-more-bg-hover: #e0e0e0;

  /* === Pagina achtergrond === */
  --Header: #e0e0e0;
  --Footer: #e0e0e0;
  --Main-00: #eeeeee;
  --Main-01: #FFFFFF;
  --Main-02: #FFFFFF;
  --Main-03: #FFFFFF;
  --Main-04: #FFFFFF;
  --Main-05: #FFFFFF;
  --Main-06: #FFFFFF;
  --Main-07: #FFFFFF;
  --Main-08: #FFFFFF;
  --Main-09: #FFFFFF;
  --Alt0-00: #315680;
  --Alt0-01: #eeeeee;
  --Alt0-02: #FFFFFF;
  --Alt0-03: #FFFFFF;
  --Alt0-04: #FFFFFF;
  --Alt0-05: #FFFFFF;
  --Alt0-06: #FFFFFF;
  --Alt0-07: #FFFFFF;
  --Alt0-08: #FFFFFF;
  --Alt0-09: #FFFFFF;
  --Alt1-00: #eeeeee;
  --Alt1-01: #FFFFFF;
  --Alt1-02: #FFFFFF;
  --Alt1-03: #FFFFFF;
  --Alt1-04: #FFFFFF;
  --Alt1-05: #FFFFFF;
  --Alt1-06: #FFFFFF;
  --Alt1-07: #FFFFFF;
  --Alt1-08: #FFFFFF;
  --Alt1-09: #FFFFFF;
  --Alt2-00: #eeeeee;
  --Alt2-01: #FFFFFF;
  --Alt2-02: #FFFFFF;
  --Alt2-03: #FFFFFF;
  --Alt2-04: #FFFFFF;
  --Alt2-05: #FFFFFF;
  --Alt2-06: #FFFFFF;
  --Alt2-07: #FFFFFF;
  --Alt2-08: #FFFFFF;
  --Alt2-09: #FFFFFF;
  --Alt3-00: #eeeeee;
  --Alt3-01: #FFFFFF;
  --Alt3-02: #FFFFFF;
  --Alt3-03: #FFFFFF;
  --Alt3-04: #FFFFFF;
  --Alt3-05: #FFFFFF;
  --Alt3-06: #FFFFFF;
  --Alt3-07: #FFFFFF;
  --Alt3-08: #FFFFFF;
  --Alt3-09: #FFFFFF;
  --Alt4-00: #eeeeee;
  --Alt4-01: #FFFFFF;
  --Alt4-02: #FFFFFF;
  --Alt4-03: #FFFFFF;
  --Alt4-04: #FFFFFF;
  --Alt4-05: #FFFFFF;
  --Alt4-06: #FFFFFF;
  --Alt4-07: #FFFFFF;
  --Alt4-08: #FFFFFF;
  --Alt4-09: #FFFFFF;
  --Alt5-00: #eeeeee;
  --Alt5-01: #FFFFFF;
  --Alt5-02: #FFFFFF;
  --Alt5-03: #FFFFFF;
  --Alt5-04: #FFFFFF;
  --Alt5-05: #FFFFFF;
  --Alt5-06: #FFFFFF;
  --Alt5-07: #FFFFFF;
  --Alt5-08: #FFFFFF;
  --Alt5-09: #FFFFFF;
}

/* ============================ DARK THEME =========================== */
@media (prefers-color-scheme: dark) {
  :root {

  --knoppen-tekst-grijs: #EAEAEA;
  --knoppen-achtergrond-grijs: #333333;

  /* ===== DARK THEME ===== */
  --theme-color: #3473B3;
  --main-color: #3473B3;
  --main-new: #3473B3;
  --main-color-hover: #4C8DD1;
  
  --TekstVak-headers-achtergrond: #121212;
  --TekstVak-headers-tekst: #E6EAF0; 

  --website-achtergrond: linear-gradient(135deg, #000000, #121212);
  --website-teksten: #EAEAEA;

  --textvak-achtergrond: #1E1E1E;
  --textvak-omlijning: #333333;

  --knoppen-achtergrond: #3473B3;
  --knoppen-tekst: #FFFFFF;
  --knoppen-achtergrond-extra: #C13320;
  --knoppen-tekst-extra: #FFFFFF;

  --doclink-knop: #3473B3;
  --doclink-knop-hover: #4C8DD1;
  --doclink-tekst: #FFFFFF;

  --tekst-algemeen: #EAEAEA;
  --tekst-specifiek: #A0A0A0;

  --notch-topbar-achtergrond: #265684;
  --topbar-tekst: #FFFFFF;
  --topbar-knop-tekst: #FFFFFF;
  --topbar-afbeeldingen: #FFFFFF;

  --taalselector-achtergrond: #1E1E1E;
  --taalselector-tekst: #000000;

  --textvak-header-tekst: #EAEAEA;
  --textvak-header-achtergrond: #2A2A2A;

  --meldingen-rood: #FF5555;
  --meldingen-groen: #00D4B0;
  --meldingen-blauw: #4C8DD1;
  
  --selectvak-omlijning: #444444;

  --links: #5FAAFF;
  --links-hover: #8BC4FF;

  --backtotop-knop: #3473B3;
  --backtotop-knop-hover: #4C8DD1;
  
  --knoppen-tekst-groen: #00D4B0;

  /* Checkbox kleuren */
  --checkbox-omlijning: #4C8DD1;
  --checkbox-vinkje: #4C8DD1;

  --menu-achtergrond: #265684;
  --menu-tekst: #FFFFFF;

  /* === Transparanten (dark mode) === */
  --overlay-black-005: rgba(0, 0, 0, 0.3);
  --overlay-black-015: rgba(0, 0, 0, 0.45);
  --overlay-black-018: rgba(0, 0, 0, 0.55);
  --overlay-black-02:  rgba(0, 0, 0, 0.6);
  --overlay-black-03:  rgba(0, 0, 0, 0.7);
  --overlay-black-045: rgba(0, 0, 0, 0.75);
  --overlay-black-06:  rgba(0, 0, 0, 0.85);
  --overlay-black-0:   rgba(0, 0, 0, 0);
  --overlay-green-03:  rgba(0, 191, 166, 0.25);

  --overlay-white-06:  rgba(255,255,255,0.1);
  --overlay-white-07:  rgba(255,255,255,0.15);
  --overlay-white-015: rgba(255,255,255,0.05);

  /* === Knoppen: expliciete variabelen (donker) === */
  --knop1-bg: #3473B3;
  --knop1-text: #FFFFFF;
  --knop1-bg-hover: #4C8DD1;

  --knop2-bg: #4C4C4C;
  --knop2-text: #FFFFFF;
  --knop2-bg-hover: #5FAAFF;

  --knop3-bg: #FF5555;
  --knop3-text: #FFFFFF;
  --knop3-bg-hover: #4C8DD1;

  /* === Leesmeer knop === */
  --knop-more-bg: #2A2A2A;
  --knop-more-text: #EAEAEA;
  --knop-more-bg-hover: #3A3A3A;

  /* === Pagina achtergrond === */
  --Header: #1E1E1E;
  --Footer: #1E1E1E;
  --Main-00: #121212;
  --Main-01: #1E1E1E;
  --Main-02: #1E1E1E;
  --Main-03: #1E1E1E;
  --Main-04: #1E1E1E;
  --Main-05: #1E1E1E;
  --Main-06: #1E1E1E;
  --Main-07: #1E1E1E;
  --Main-08: #1E1E1E;
  --Main-09: #1E1E1E;
  --Alt0-00: #121212;
  --Alt0-01: #315680;
  --Alt0-02: #1E1E1E;
  --Alt0-03: #1E1E1E;
  --Alt0-04: #1E1E1E;
  --Alt0-05: #1E1E1E;
  --Alt0-06: #1E1E1E;
  --Alt0-07: #1E1E1E;
  --Alt0-08: #1E1E1E;
  --Alt0-09: #1E1E1E;
  --Alt1-00: #121212;
  --Alt1-01: #1E1E1E;
  --Alt1-02: #1E1E1E;
  --Alt1-03: #1E1E1E;
  --Alt1-04: #1E1E1E;
  --Alt1-05: #1E1E1E;
  --Alt1-06: #1E1E1E;
  --Alt1-07: #1E1E1E;
  --Alt1-08: #1E1E1E;
  --Alt1-09: #1E1E1E;
  --Alt2-00: #121212;
  --Alt2-01: #1E1E1E;
  --Alt2-02: #1E1E1E;
  --Alt2-03: #1E1E1E;
  --Alt2-04: #1E1E1E;
  --Alt2-05: #1E1E1E;
  --Alt2-06: #1E1E1E;
  --Alt2-07: #1E1E1E;
  --Alt2-08: #1E1E1E;
  --Alt2-09: #1E1E1E;
  --Alt3-00: #121212;
  --Alt3-01: #1E1E1E;
  --Alt3-02: #1E1E1E;
  --Alt3-03: #1E1E1E;
  --Alt3-04: #1E1E1E;
  --Alt3-05: #1E1E1E;
  --Alt3-06: #1E1E1E;
  --Alt3-07: #1E1E1E;
  --Alt3-08: #1E1E1E;
  --Alt3-09: #1E1E1E;
  --Alt4-00: #121212;
  --Alt4-01: #1E1E1E;
  --Alt4-02: #1E1E1E;
  --Alt4-03: #1E1E1E;
  --Alt4-04: #1E1E1E;
  --Alt4-05: #1E1E1E;
  --Alt4-06: #1E1E1E;
  --Alt4-07: #1E1E1E;
  --Alt4-08: #1E1E1E;
  --Alt4-09: #1E1E1E;
  --Alt5-00: #121212;
  --Alt5-01: #1E1E1E;
  --Alt5-02: #1E1E1E;
  --Alt5-03: #1E1E1E;
  --Alt5-04: #1E1E1E;
  --Alt5-05: #1E1E1E;
  --Alt5-06: #1E1E1E;
  --Alt5-07: #1E1E1E;
  --Alt5-08: #1E1E1E;
  --Alt5-09: #1E1E1E;
  }
}
  /* Fix: geen automatische streepjes meer vóór modal-links */
  .doc-link::before {
  content: none !important;
  content: none !important;
}
  /* Forceer: modal-links geen eigen pipes meer */
  .doc-link::before,
  .doc-link::after {
  content: none !important;
  display: none !important;
}
  /* === Footer link alignment normalization === */
  table.footer-links td { padding: 0 !important; }
  table.footer-links td:first-child { width: 15px; }
  table.footer-links a, table.footer-links .doc-link {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  line-height: 1.6 !important;
  vertical-align: baseline;
}
  /* Footer: prevent double pipes from modal link pseudo-elements */
  table.footer-links a.doc-link::before,
  table.footer-links a.doc-link::after {
  content: none !important;
}
  /* Forceer altijd knopstijl voor doc-link-btn, ook op mobiel/dark/modal */
  .doc-link-btn {
  display: inline-block !important;
  background-color: #265684 !important;
  color: #FFFFFF !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  margin: 5px !important;
  transition: background-color 0.3s ease !important;
}
  .doc-link-btn:hover {
  background-color: #3473B3 !important;
}
  /* === Prevent mobile (iOS/Safari) auto-zoom on form fields === */
  @media (max-width: 600px) {
  input, select, textarea {
  font-size: 16px !important; /* iOS zooms if < 16px */
  }
}
  /* ✅ Menu hover styling */
  nav.offcanvas .menu a:hover {
  background: #3473B3;
  color: #fff;
}
  /* ✅ Menu divider (Safari/mac-proof) Gebruik in je menu .txt:*/
  .menu .menu-divider + li > a::before,
  .menu li.menu-sep-before > a::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 1px solid #fff;
  margin: 6px 0;
}
  /* ✅ Menu divider via class has-divider */
  nav.offcanvas .menu li.has-divider a::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 1px solid #fff;
  margin: 6px 0;
}

  /* ✅Zet hover-kleuren gelijk aan de basis op touch-devices */
  @media (hover: none), (pointer: coarse) {
  :root {
    /* AUTH */
    --auth-btn-bg-hover: #008C7A;
    --auth-btn-text-hover: #FFFFFF;

    /* JURIDISCH */
    --jur-btn-bg-hover: #008C7A;
    --jur-btn-text-hover: #FFFFFF;
  }
}



    /* =========================================================
       Nieuwe basiskleuren toegevoegd op 2025-10-09
       ========================================================= */
    --accent-rood: #C13320;             /* Waarschuwingen of foutmeldingen */
    --accent-geel: #FFD60A;             /* Waarschuwing / highlight (bijv. "nieuw"-label) */
    --accent-groen: #00875A;            /* Bevestiging of success-state */
    --overlay-zwart40: rgba(0,0,0,0.4); /* Transparante overlay of schaduwlaag */



/* =========================================================
   Basis body-stijl — tekstkleur donker, achtergrond licht
   ========================================================= */
body {
  color: var(--tekst-donker);
  background-color: var(--vlak-licht);
}

html, body {
  background: var(--vlak-licht, #FFFFFF) !important;
}