/* Basisregels voor de publieke site. De pagina's zelf gebruiken inline styles uit het design;
   hover/focus-regels worden door build/build.mjs onderaan site.css toegevoegd. */

/* Geen globale box-sizing: het design gaat uit van de browserstandaard (content-box). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
[id] { scroll-margin-top: 92px; }

:focus-visible { outline: 2px solid #14C9B4; outline-offset: 3px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: #0C3244; color: #FFFFFF; font: 700 15px 'Instrument Sans', sans-serif;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---- Voorwaardelijke blokken uit het design (<sc-if> -> <dc-if>) ---- */
dc-if { display: contents; }
dc-if[data-if="isMobile"],
dc-if[data-if$="Open"] { display: none; }

@media (max-width: 1020px) {
  dc-if[data-if="isDesktop"] { display: none; }
  dc-if[data-if="isMobile"] { display: contents; }
}

/* Dropdowns in het menu: open bij hover, toetsenbordfocus of klik (touch) */
[data-dd]:hover > dc-if,
[data-dd]:focus-within > dc-if,
[data-dd].is-open > dc-if { display: contents; }
[data-dd]:hover > span,
[data-dd].is-open > span { background: #F0F7F6 !important; }
[data-dd].is-closed > dc-if { display: none; }

/* Mobiel menu */
.nav-open dc-if[data-if="mobileOpen"] { display: contents; }
.nav-open dc-if[data-if="mobileClosed"] { display: none; }

/* Homepage: partnerband */
[data-marquee] { -webkit-user-select: none; }

/* Formulieren (contact) */
.form-error { display: block; font-size: 13px; font-weight: 600; color: #B42318; }
.form-alert { border-radius: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.form-alert--ok { background: #E1F7F4; color: #075E55; border: 1px solid #9FE3D9; }
.form-alert--error { background: #FDECEA; color: #8A1C12; border: 1px solid #F5B5AE; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #D92D20 !important; }

/* Vacaturetekst uit het CMS */
[data-contact-form] input, [data-contact-form] textarea { box-sizing: border-box; width: 100%; min-width: 0; }
.rich p { margin: 0 0 16px; }
.rich ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rich li { display: flex; gap: 12px; align-items: baseline; }
.rich li::before { content: "—"; color: #14C9B4; font-weight: 700; flex-shrink: 0; }

/* ---- Privacyverklaring (juridische tekst) ---- */
.legal-layout { max-width: 1440px; margin: 0 auto; display: flex; gap: clamp(24px, 4vw, 56px); align-items: flex-start; }
.legal-toc {
  flex: 0 0 250px; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 2px;
  background: #FFFFFF; border: 1px solid #E3EAEC; border-radius: 20px; padding: 20px 14px;
  max-height: calc(100vh - 128px); overflow: auto;
}
.legal-toc__title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #6A8794; padding: 0 10px 8px; }
.legal-toc a { color: #0A1F2E; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.4; padding: 7px 10px; border-radius: 8px; }
.legal-toc a:hover, .legal-toc a:focus-visible { background: #F0F7F6; color: #0A8C7F; }
.legal-toc .legal-toc__sub { font-weight: 500; color: #33454F; padding-left: 22px; font-size: 13.5px; }

.legal {
  flex: 1 1 auto; min-width: 0; max-width: 920px; background: #FFFFFF; border: 1px solid #E3EAEC; border-radius: 20px;
  padding: clamp(24px, 4vw, 56px); font-size: 16px; line-height: 1.75; color: #33454F;
}
.legal h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.5px;
  color: #0A1F2E; line-height: 1.25; margin: 56px 0 16px; padding-bottom: 12px; border-bottom: 2px solid #E1F7F4;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; color: #0A8C7F; margin: 36px 0 10px; }
.legal h4 { font-size: 16px; font-weight: 700; color: #0A1F2E; margin: 28px 0 10px; }
.legal p { margin: 0 0 14px; }
.legal a { color: #0A8C7F; font-weight: 600; overflow-wrap: anywhere; }
.legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.legal ul li { position: relative; padding-left: 26px; }
.legal ul li::before { content: "—"; position: absolute; left: 0; color: #14C9B4; font-weight: 700; }
.legal-note { color: #5B6F7A; }

.legal-kv, .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 15px; line-height: 1.65; }
.legal-kv th, .legal-kv td, .legal-table th, .legal-table td { border: 1px solid #E3EAEC; padding: 12px 16px; text-align: left; vertical-align: top; }
.legal-kv th { width: 30%; background: #F0F7F6; color: #0A1F2E; font-weight: 700; }
.legal-kv td p, .legal-table td p { margin: 0 0 10px; }
.legal-kv td p:last-child { margin-bottom: 0; }
.legal-table thead th { background: #0F3C50; color: #FFFFFF; font-weight: 700; border-color: #0F3C50; }
.legal-table tbody th { background: #F0F7F6; color: #0A1F2E; font-weight: 700; width: 24%; }
.legal-table tbody th small { display: block; font-weight: 500; color: #6A8794; font-size: 13px; }
.legal-table td:last-child { width: 26%; }

@media (max-width: 960px) {
  .legal-layout { flex-direction: column; }
  .legal-toc { position: static; flex-basis: auto; width: 100%; max-height: none; box-sizing: border-box; }
  .legal { width: 100%; box-sizing: border-box; }
}
@media (max-width: 640px) {
  .legal-kv tr, .legal-table tr { display: block; border: 1px solid #E3EAEC; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
  .legal-kv th, .legal-kv td, .legal-table th, .legal-table td { display: block; width: auto !important; border: 0; padding: 10px 14px; }
  .legal-kv, .legal-table, .legal-kv tbody, .legal-table tbody { display: block; }
  .legal-table thead { display: none; }
  .legal-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6A8794; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Animaties lopen bewust altijd, ook als "Animatie-effecten" in Windows uit staat (veel gebruikers weten niet dat
   dat zo is). Alleen het vloeiend scrollen volgt de systeeminstelling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- gegenereerd uit style-hover / style-focus (build/build.mjs) ---- */
.h-b6e246e8:hover, .h-b6e246e8:focus-visible { color: #0A8C7F !important; }
.h-a1c5aa4b:hover, .h-a1c5aa4b:focus-visible { background: #F0F7F6 !important; }
.h-70855402:hover, .h-70855402:focus-visible { box-shadow: 0 10px 24px rgba(10,140,127,0.35) !important; transform: translateY(-1px) !important; }
.h-fdcc8110:hover, .h-fdcc8110:focus-visible { background: #10506A !important; }
.h-570c4adc:hover, .h-570c4adc:focus-visible { color: #6B4BD1 !important; }
.h-53587973:hover, .h-53587973:focus-visible { border-color: #14C9B4 !important; background: #F0F7F6 !important; }
.h-8a602906:hover, .h-8a602906:focus-visible { box-shadow: 0 8px 20px rgba(10,140,127,0.35) !important; transform: translateY(-1px) !important; }
.h-c20843f7:hover, .h-c20843f7:focus-visible { background: #F3EFFC !important; }
.h-dcddbb5f:hover, .h-dcddbb5f:focus-visible { background: #2FD4BE !important; }
.h-d1e1416c:hover, .h-d1e1416c:focus-visible { border-color: #2FD4BE !important; color: #2FD4BE !important; }
.h-4e5bd3c8:hover, .h-4e5bd3c8:focus-visible { border-color: #2FD4BE !important; color: #FFFFFF !important; }
.h-233a092d:hover, .h-233a092d:focus-visible { border-color: #0A8C7F !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-15135407:hover, .h-15135407:focus-visible { border-color: #B07406 !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-c7fd70c7:hover, .h-c7fd70c7:focus-visible { border-color: #1170A8 !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-30b093cc:hover, .h-30b093cc:focus-visible { border-color: #6B4BD1 !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-388fb6fb:hover, .h-388fb6fb:focus-visible { border-color: #C2542F !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-105164d6:hover, .h-105164d6:focus-visible { border-color: #2E7D3A !important; box-shadow: 0 14px 34px rgba(10,31,46,0.10) !important; transform: translateY(-3px) !important; }
.h-97b575a0:hover, .h-97b575a0:focus-visible { background: #14A08F !important; }
.h-25dd675f:hover, .h-25dd675f:focus-visible { background: rgba(47,212,190,0.18) !important; border-color: #2FD4BE !important; }
.h-6dc9aa4a:hover, .h-6dc9aa4a:focus-visible { border-color: #2FD4BE !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-0f83b2bc:hover, .h-0f83b2bc:focus-visible { border-color: #FFC65C !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-e7e7e90a:hover, .h-e7e7e90a:focus-visible { border-color: #5AC8FF !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-3761847e:hover, .h-3761847e:focus-visible { border-color: #A78BFA !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-05d33c01:hover, .h-05d33c01:focus-visible { border-color: #FF9E7A !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-9af9e733:hover, .h-9af9e733:focus-visible { border-color: #7EE787 !important; background: rgba(255,255,255,0.13) !important; transform: translateY(-3px) !important; }
.h-1f05289d:hover, .h-1f05289d:focus-visible { opacity: 1 !important; }
.h-b4d69ec2:hover, .h-b4d69ec2:focus-visible { border-color: #14C9B4 !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-861a7cc0:hover, .h-861a7cc0:focus-visible { background: #E1F7F4 !important; }
.h-affd4142:hover, .h-affd4142:focus-visible { color: #2FD4BE !important; }
.h-da1481bc:hover, .h-da1481bc:focus-visible { border-color: #0A8C7F !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-fb32cf98:hover, .h-fb32cf98:focus-visible { border-color: #B07406 !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-8d29d03e:hover, .h-8d29d03e:focus-visible { border-color: #1170A8 !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-f3c90ac2:hover, .h-f3c90ac2:focus-visible { border-color: #6B4BD1 !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-2c3b3bdb:hover, .h-2c3b3bdb:focus-visible { border-color: #C2542F !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-368889fd:hover, .h-368889fd:focus-visible { border-color: #2E7D3A !important; box-shadow: 0 12px 32px rgba(10,31,46,0.08) !important; }
.h-28f56e59:hover, .h-28f56e59:focus-visible { border-color: #14C9B4 !important; }
.h-79c17efc:hover, .h-79c17efc:focus-visible { border-color: #2FD4BE !important; }
.h-4017f437:hover, .h-4017f437:focus-visible { border-color: #5AC8FF !important; }
.h-32221281:hover, .h-32221281:focus-visible { background: #9D6BF5 !important; }
.h-26d979ed:hover, .h-26d979ed:focus-visible { border-color: #B79AF7 !important; color: #B79AF7 !important; }
.h-4d04f89e:hover, .h-4d04f89e:focus-visible { border-color: #7C3AED !important; box-shadow: 0 12px 32px rgba(43,16,96,0.10) !important; }
.h-f3e74606:hover, .h-f3e74606:focus-visible { border-color: #C9B2FF !important; background: rgba(255,255,255,0.13) !important; }
.h-5617bab1:hover, .h-5617bab1:focus-visible { border-color: #FFC65C !important; color: #FFC65C !important; }
.h-196eafff:hover, .h-196eafff:focus-visible { border-color: #5AC8FF !important; color: #5AC8FF !important; }
.h-9c1c269d:hover, .h-9c1c269d:focus-visible { border-color: #A78BFA !important; color: #A78BFA !important; }
.h-84e25f3a:hover, .h-84e25f3a:focus-visible { border-color: #FF9E7A !important; color: #FF9E7A !important; }
.h-22aab917:hover, .h-22aab917:focus-visible { border-color: #7EE787 !important; color: #7EE787 !important; }
.h-7b8b0508:hover, .h-7b8b0508:focus-visible { color: #0F3C50 !important; }
.h-891951bf:hover, .h-891951bf:focus-visible { background: #0A8C7F !important; }
.h-6bcf2807:hover, .h-6bcf2807:focus-visible { background: #0F3C50 !important; }
.h-dc65337b:hover, .h-dc65337b:focus-visible { color: #FFFFFF !important; }
.f-28f56e59:focus { border-color: #14C9B4 !important; }