/* ==========================================================================
   STIJLBLAD ADP-WEBSITE
   Hier pas je kleuren, lettergroottes, afstanden en afrondingen aan.
   Eenheden: px = vaste pixels, rem = relatief aan basisgrootte (1rem = 16px), % = deel van de breedte,
   vw = % van de schermbreedte. clamp(min, voorkeur, max) laat tekst meegroeien met het scherm.
   ========================================================================== */

/* KLEUREN (hoofdinstelling). Wijzig hier één keer en de hele site volgt.
   --navy  = donkerblauw (logo, menuknop, donkere vlakken)     --gold = goud (accenten, knoppen)
   --bg    = paginaachtergrond                                  --card = achtergrond van kaarten
   --ink   = tekstkleur                                         --mute = grijze/zachte tekstkleur
   --sky   = lichtblauwe vlakken (tegel, actieve menu-item)     --line = dunne lijntjes en randen */
:root{--navy:#0A1F3F;--gold:#C4872B;--bg:#EEF2F7;--card:#fff;--ink:#0A1F3F;--mute:#4D5B70;--sky:#D6E3F3;--line:#D9E0EA;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* DONKERE MODUS: kleuren die worden gebruikt als het toestel op donker staat */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#060F20;--card:#0E2144;--ink:#F2F5FA;--mute:#A9B6CA;--sky:#16305C;--line:#1F3A66;--navy:#0A1F3F}}
:root[data-theme="dark"]{--bg:#060F20;--card:#0E2144;--ink:#F2F5FA;--mute:#A9B6CA;--sky:#16305C;--line:#1F3A66;--navy:#0A1F3F}
/* BASIS: hoogte, soepel scrollen en lettertype van de hele site. Lettertype: "Montserrat" voor tekst; font-size 16px = standaard tekstgrootte */
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:400 16px/1.6 Montserrat,system-ui,sans-serif}
/* KOPPEN: lettertype "Unbounded". Regelhoogte (line-height) 1.1 = strak. Groottes per kop staan verderop (.hero h1, .sh h2, .card h3) */
h1,h2,h3{font-family:Unbounded,Montserrat,system-ui,sans-serif;font-weight:600;line-height:1.1;margin:0}
a{color:inherit}
/* Gouden rand rond knop/veld bij toetsenbordbediening (toegankelijkheid). Niet verwijderen. */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* BREEDTE: max-width = maximale breedte van de inhoud; padding 0 20px = ruimte links/rechts */
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
/* MENUBALK: blijft bovenaan (sticky). padding = ruimte boven/onder */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;padding:14px 0 6px;background:var(--bg)}
nav{display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
/* LOGO + "ADP" LINKSBOVEN. .mk = witte cirkel (46px) achter het logo; .brand svg = logogrootte */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;letter-spacing:.04em}
.brand .mk{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center}
.brand svg{width:30px;height:30px}
/* MENULINKS: afstand (gap), pilvorm bij hover (border-radius:99px), kleur bij hover/actief = var(--sky) */
.links{display:flex;gap:6px;flex-wrap:wrap}
.links a{padding:8px 16px;border-radius:99px;text-decoration:none;font-weight:500}
.links a:hover,.links a[aria-current=page]{background:var(--sky)}
/* KNOPPEN: .btn = navy knop; .btn.gold = gouden knop. padding = binnenruimte, font = lettergrootte (15px), border-radius:99px = volledig rond */
.btn{display:inline-block;border:0;cursor:pointer;font:600 15px Montserrat,sans-serif;padding:14px 26px;border-radius:99px;background:var(--navy);color:#fff;text-decoration:none}
.btn.gold{background:var(--gold);color:#0A1F3F}
.btn:hover{filter:brightness(1.12)}
/* HERO-KAART: witte afgeronde kaart (border-radius 36px). grid-template-columns: 1.1fr .9fr = tekst links iets breder dan het beeld rechts */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;background:var(--card);border-radius:36px;padding:20px;margin-top:10px}
.hero .txt{padding:28px 24px 8px}
/* GROTE KOP: pas font-size aan. clamp(2rem, 4.6vw, 4rem) = minimaal 2rem, maximaal 4rem */
.hero h1{font-size:clamp(2rem,4.6vw,4rem);margin-bottom:22px}
/* TEKST ONDER DE KOP: font-size 1.05rem, kleur var(--mute), max-width = regelbreedte */
.hero p{max-width:46ch;color:var(--mute);font-size:1.05rem;margin:0 0 26px}
/* BEELDVLAK RECHTS IN DE HERO: achtergrondkleur navy, min-height = hoogte. .art svg.big = grootte van het logo daarin */
.art{background:var(--navy);border-radius:28px;display:grid;place-items:center;min-height:320px;position:relative;overflow:hidden}
.art svg.big{width:62%;max-width:300px}
.art .tag{position:absolute;left:18px;bottom:16px;right:18px;color:#cdd8ea;font-size:.8rem;letter-spacing:.18em;text-align:center}
/* DRIE TEGELS ONDER DE HERO: kolombreedtes 1fr 1.4fr 1fr. .tile.sky = lichtblauwe tegel met pijl. .arrow = witte ronde pijlknop (54px) */
.tiles{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px}
.tile{border-radius:28px;padding:22px 26px;background:var(--bg)}
.tile.sky{background:var(--sky);display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none}
.tile.sky b{font:600 1.1rem Unbounded,sans-serif}
.arrow{width:54px;height:54px;border-radius:50%;background:#fff;color:#0A1F3F;display:grid;place-items:center;font-size:1.4rem;flex:none}
.tile h3{font-size:1.05rem;margin-bottom:8px}
.tile p{margin:0;color:var(--mute);font-size:.92rem}
/* RUIMTE TUSSEN SECTIES: padding-top 72px. Vergroot of verklein dit getal voor meer/minder wit tussen de blokken */
section{padding:72px 0 0}
/* SECTIEKOP: .sh h2 = titel (clamp(1.6rem,3.2vw,2.5rem)), .sh p = uitleg ernaast/eronder */
.sh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.sh h2{font-size:clamp(1.6rem,3.2vw,2.5rem);max-width:20ch}
.sh p{max-width:44ch;color:var(--mute);margin:0}
/* 3 KOLOMMEN (diensten). Op mobiel wordt dit 1 kolom (zie @media onderaan) */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* DIENSTKAARTEN: padding 30px binnenruimte, border-radius 28px afronding. .ic = icoonvakje (kleuren per kaart); .card li:before = gouden bolletje */
.card{background:var(--card);border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:14px}
.card .ic{width:56px;height:56px;border-radius:18px;background:var(--navy);display:grid;place-items:center}
.card:nth-child(2) .ic{background:var(--gold)}
.card:nth-child(3) .ic{background:var(--sky)}
.card h3{font-size:1.2rem}
.card p{margin:0;color:var(--mute)}
.card ul{margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:6px;font-size:.92rem}
.card li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:10px}
/* OUR JOURNEY: navy achtergrond, witte tekst. .step = één stap met gouden lijn bovenaan */
.journey{background:var(--navy);color:#fff;border-radius:36px;padding:48px 36px}
.journey .sh p{color:#b9c6da}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{border-top:2px solid var(--gold);padding-top:18px;counter-increment:s}
.step:before{content:counter(s);font:600 .85rem Unbounded,sans-serif;color:var(--gold)}
.step h3{font-size:1.05rem;margin:8px 0}
.step p{margin:0;color:#b9c6da;font-size:.92rem}
/* CONTACT-SECTIE: twee kaarten naast elkaar. .contact .card.navy = gouden kaart rechts (tekstkleur navy) */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .card.navy{background:var(--gold);color:#0A1F3F}
.contact .card.navy p{color:#0A1F3F}
/* FOOTER: kleine tekst (.88rem) onderaan */
footer{padding:48px 0 32px;color:var(--mute);font-size:.88rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* VACATURES: .job = één vacaturekaart. .pill = labels (Full-time, Hybrid, Tetouan). .meta = rij met labels */
.jobs{display:grid;gap:12px}
.job{background:var(--card);border-radius:24px;padding:22px 26px;display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.job h3{font-size:1.05rem;margin-bottom:6px}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--sky);border-radius:99px;padding:3px 12px;font-size:.8rem;font-weight:500}
.job p{grid-column:1/-1;margin:0;color:var(--mute);font-size:.93rem}
/* POP-UP SOLLICITATIEFORMULIER: breedte min(560px, 94vw). ::backdrop = donkere achtergrond erachter */
dialog{border:0;border-radius:28px;padding:0;width:min(560px,94vw);background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(6,15,32,.6)}
/* FORMULIEREN: label = veldnaam, input/select/textarea = invulvelden (afronding 14px). .row = twee velden naast elkaar */
form{padding:28px;display:grid;gap:14px}
form h3{font-size:1.2rem}
label{display:grid;gap:6px;font-weight:500;font-size:.9rem}
input,select,textarea{font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
/* Kleine melding onder het sollicitatieformulier */
#msg{margin:0;font-size:.9rem;color:var(--mute)}
/* DOELGROEP-KNOPPEN IN DE HERO (MSP / Public sector / mkb). Geselecteerde knop = navy: .tabs button[aria-selected=true] */
.tabs{display:inline-flex;gap:4px;background:var(--bg);padding:5px;border-radius:99px;flex-wrap:wrap;margin-bottom:22px}
.tabs button{border:0;background:transparent;color:var(--ink);font:500 14px Montserrat,sans-serif;padding:10px 18px;border-radius:99px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
/* DRIE VOORDELEN IN DE HERO met gouden bolletjes */
.outs{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px;font-weight:500}
.outs li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);margin-right:12px}
/* BALK MET STANDAARDEN (ISO 27001 enz.). .chip = één pilletje */
.trust{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:18px;color:var(--mute);font-size:.88rem}
.chip{background:var(--card);border-radius:99px;padding:6px 16px;font-weight:500;color:var(--ink)}
/* RESULTATENBLOKKEN: .stat = één blok (navy), het 2e blok is goud. .stat b = groot cijfer (1.9rem) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--navy);color:#fff;border-radius:28px;padding:26px}
.stat:nth-child(2){background:var(--gold);color:#0A1F3F}
.stat b{display:block;font:600 1.9rem Unbounded,sans-serif}
.stat span{font-size:.88rem;opacity:.85}
.note{font-size:.8rem;color:var(--mute);margin-top:10px}
/* VEELGESTELDE VRAGEN: aanklikbare vragen (details/summary) */
details{background:var(--card);border-radius:20px;padding:18px 24px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
details p{margin:10px 0 0;color:var(--mute)}
.card form{padding:0}
.card input,.card select{background:var(--bg)}
#aok{margin:0;font-size:.88rem;color:var(--mute)}
/* MOBIEL (schermen smaller dan 860px): resultaten in 2 kolommen */
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}
/* TAALKIEZER in het menu */
#lang{font:500 14px Montserrat,sans-serif;padding:9px 12px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:auto}
/* ARABISCH (rechts-naar-links): ander lettertype "Noto Sans Arabic" en iets ruimere regelhoogte voor koppen */
html[lang=ar] *{font-family:"Noto Sans Arabic",Tahoma,sans-serif!important;letter-spacing:0!important}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.35}
.card li:before,.outs li:before{margin-right:0;margin-inline-end:10px}
/* PAGINAWISSEL: alleen de actieve pagina (.on) wordt getoond. Niet wijzigen. */
[data-page]{display:none}
[data-page].on{display:block}
/* MOBIEL: bijna alles wordt 1 kolom; menulinks onder het logo. Pas 860px aan om het omslagpunt te wijzigen */
@media(max-width:860px){.hero,.tiles,.grid3,.steps,.contact{grid-template-columns:1fr}.job,.row{grid-template-columns:1fr}.journey{padding:34px 22px}.links{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}}
/* Geen soepel scrollen voor mensen die minder beweging willen */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   FOTO'S TOEVOEGEN
   Foto in de hero: zie opmerking bij <div class="art"> in index.html.
   Andere foto's (bijv. team): gebruik <img class="photo" src="images/naam.jpg" alt="..."> in index.html.
   Afronding wijzig je met border-radius, hoogte met height.
   ========================================================================== */
.art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.photo{width:100%;height:auto;display:block;border-radius:28px;object-fit:cover}