/* Website EDM Services B.V. Tokens uit design/edm/project/tokens.json, componenten uit
 * design/edm/project/components/bundle.css (hieronder letterlijk overgenomen). Licht en donker volgen
 * de voorkeur van het apparaat; geen script. */

/* Letters: zelf gehost, SIL Open Font License (design/letterlicenties/). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}

/* Tokens, thema licht */
:root{
color-scheme:light dark;
--grond:#FFFFFF;--vlak:#F3F5F9;--inkt:#0F1B3D;--gedempt:#5B6680;--lijn:#DDE2EC;--lijn-sterk:#858FA8;--op-inkt:#FFFFFF;
--edm:#FF3B5C;--dossiercontrole:#00A36C;--glazenbol:#7A4DFF;--vaart:#0091FF;--datastekker:#FF6A1A;
--edm-tekst:#CA3455;--dossiercontrole-tekst:#048060;--glazenbol-tekst:#784CFB;--vaart-tekst:#0470C9;--datastekker-tekst:#B75224;
--accent:var(--edm);--accent-tekst:var(--edm-tekst);
--aandacht:#8A5A00;--aandacht-vlak:#FFF4DC;
--font-display:"Bricolage Grotesque",system-ui,sans-serif;--font-sans:"Instrument Sans",system-ui,sans-serif;
--ruimte-1:4px;--ruimte-2:8px;--ruimte-3:12px;--ruimte-4:16px;--ruimte-5:24px;--ruimte-6:32px;--ruimte-7:48px;--ruimte-8:72px;
--hoek-s:6px;--hoek-m:8px;--hoek-l:10px;--hoek-xl:14px;--hoek-rond:999px
}

/* Thema donker: diep marine, geen zwart. De woordmerken wisselen mee. */
@media (prefers-color-scheme:dark){
:root{--grond:#0C1430;--vlak:#141D40;--inkt:#F2F5FF;--gedempt:#9AA6C7;--lijn:#26315A;--lijn-sterk:#5A6694;--op-inkt:#0C1430;
--edm-tekst:#FF3B5C;--dossiercontrole-tekst:#00A36C;--glazenbol-tekst:#926DFF;--vaart-tekst:#0091FF;--datastekker-tekst:#FF6A1A;
--aandacht:#F5B84A;--aandacht-vlak:#3A2E14}
}

/* EDM — componenten. Leest alleen tokens (tokens.css). Geen schaduwen, geen verlopen. */

/* Merk kiezen: zet data-merk op <html>, <body> of een blok. Zonder data-merk is het accent EDM. */
[data-merk="edm"]{--accent:var(--edm);--accent-tekst:var(--edm-tekst)}
[data-merk="dossiercontrole"]{--accent:var(--dossiercontrole);--accent-tekst:var(--dossiercontrole-tekst)}
[data-merk="glazenbol"]{--accent:var(--glazenbol);--accent-tekst:var(--glazenbol-tekst)}
[data-merk="vaart"]{--accent:var(--vaart);--accent-tekst:var(--vaart-tekst)}
[data-merk="datastekker"]{--accent:var(--datastekker);--accent-tekst:var(--datastekker-tekst)}

.edm{font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--inkt);background:var(--grond)}
.edm *{box-sizing:border-box}
.edm :focus-visible{outline:3px solid var(--accent-tekst);outline-offset:2px}
.edm :where(a){color:var(--accent-tekst)}

/* Woordmerk: twee <img>, het thema kiest. */
.edm-logo{display:inline-block;height:24px;width:auto;vertical-align:middle}
.edm-logo--donker{display:none}
[data-theme="dark"] .edm-logo--licht{display:none}
[data-theme="dark"] .edm-logo--donker{display:inline-block}

/* De punt: elke kop eindigt op een gekleurde punt. */
.edm-punt{color:var(--accent)}

/* Koppen */
.edm-kop{font-family:var(--font-display);color:var(--inkt);margin:0}
.edm-kop--display{font-weight:800;font-size:clamp(38px,6.2vw,72px);line-height:.95;letter-spacing:-.035em}
.edm-kop--display > span{display:block}
.edm-kop--1{font-weight:700;font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:-.02em}
.edm-kop--2{font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.01em}
.edm-kop--3{font-weight:700;font-size:22px;line-height:1.2}

/* Knoppen */
.edm-knop{display:inline-flex;align-items:center;gap:var(--ruimte-2);font:600 16px/1.2 var(--font-sans);border:0;border-radius:var(--hoek-m);padding:11px 18px;cursor:pointer;text-decoration:none;background:var(--inkt);color:var(--op-inkt)}
.edm-knop:hover{background:var(--accent-tekst);color:var(--op-inkt)}
.edm-knop--secundair{background:none;color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--inkt)}
.edm-knop--secundair:hover{background:var(--vlak);color:var(--inkt)}
.edm-knop--link{background:none;color:var(--accent-tekst);padding:11px 4px;text-decoration:underline;text-underline-offset:3px}
.edm-knop--link:hover{background:none;color:var(--inkt)}
.edm-knop[disabled]{background:var(--vlak);color:var(--gedempt);box-shadow:inset 0 0 0 1px var(--lijn);cursor:not-allowed}

/* Label */
.edm-label{display:inline-block;font:600 13px/1.4 var(--font-sans);padding:3px 9px;border-radius:var(--hoek-rond);background:var(--vlak);color:var(--inkt);border:1px solid var(--lijn)}
.edm-label--aandacht{background:var(--aandacht-vlak);color:var(--aandacht);border-color:var(--aandacht-vlak)}
.edm-label--accent::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}

/* Navigatie */
.edm-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-2) var(--ruimte-4);padding:14px var(--ruimte-5);border-bottom:1px solid var(--lijn);background:var(--grond)}
.edm-nav__menu{display:flex;flex-wrap:wrap;gap:var(--ruimte-1);margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.edm-nav__item{display:block;color:var(--gedempt);padding:6px 9px;border-radius:var(--hoek-s);font-size:14px;text-decoration:none}
.edm-nav__item:hover{color:var(--inkt);background:var(--vlak)}
.edm-nav__item[aria-current="page"]{color:var(--inkt);box-shadow:inset 0 -2px 0 var(--accent)}
.edm-nav__taal{font-size:13px;color:var(--gedempt)}
.edm-nav__taal b{color:var(--inkt)}

/* Hero */
.edm-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--ruimte-6);align-items:center;padding:var(--ruimte-7) var(--ruimte-5)}
.edm-hero__sub{margin:var(--ruimte-4) 0 var(--ruimte-5);max-width:46ch;color:var(--gedempt);font-size:17px}
.edm-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--ruimte-3);align-items:center}
.edm-hero .edm-label{margin-bottom:var(--ruimte-3)}
@media (max-width:720px){.edm-hero{grid-template-columns:1fr;padding:var(--ruimte-6) var(--ruimte-4)}}

/* Voorbeeldscherm: een vlak met statusregels */
.edm-voorbeeld{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-l);padding:14px;font-size:14px}
.edm-voorbeeld small{display:block;color:var(--gedempt);margin-bottom:var(--ruimte-2)}
.edm-voorbeeld__regel{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--lijn)}
.edm-voorbeeld__ok{color:var(--gedempt)}

/* Merkfamilie: een regel per merk, gescheiden door haarlijnen */
.edm-familie{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.edm-familie li{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:var(--ruimte-4);align-items:center;padding:var(--ruimte-4) 0;border-bottom:1px solid var(--lijn)}
.edm-familie p{margin:0;color:var(--gedempt)}
.edm-familie a{font-size:14px;white-space:nowrap}
@media (max-width:640px){.edm-familie li{grid-template-columns:1fr;gap:var(--ruimte-2)}}

/* Citaat */
.edm-citaat{margin:0;padding:var(--ruimte-5) 0;border-top:1px solid var(--lijn)}
.edm-citaat blockquote{margin:0;font:700 22px/1.3 var(--font-display);color:var(--inkt);max-width:40ch}
.edm-citaat figcaption{margin-top:var(--ruimte-3);font-size:14px;color:var(--gedempt)}
.edm-citaat figcaption b{color:var(--inkt);font-weight:600}

/* Invoer */
.edm-veld{display:grid;gap:6px;max-width:420px}
.edm-veld label{font-size:14px;font-weight:600;color:var(--inkt)}
.edm-veld input{font:400 16px/1.4 var(--font-sans);color:var(--inkt);background:var(--grond);border:1px solid var(--lijn-sterk);border-radius:var(--hoek-m);padding:10px 12px}
.edm-veld input::placeholder{color:var(--gedempt)}
.edm-veld__hulp{font-size:14px;color:var(--gedempt)}
.edm-rij{display:flex;flex-wrap:wrap;gap:var(--ruimte-2);align-items:end}

/* Pagina-indeling van de website; alleen tokens en de componenten hierboven. */
html,body{margin:0;background:var(--grond)}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%}
.site{max-width:1120px;margin:0 auto;padding:0 var(--ruimte-4)}
.site .edm-nav{padding-left:0;padding-right:0}
.site .edm-hero{padding:var(--ruimte-8) 0}
.site-sectie{padding:var(--ruimte-7) 0;border-top:1px solid var(--lijn)}
.site-sectie > .edm-kop--2{font-size:clamp(26px,4vw,34px)}
.site-intro{margin:var(--ruimte-3) 0 var(--ruimte-6);max-width:60ch;color:var(--gedempt);font-size:17px}
.site-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ruimte-6) var(--ruimte-7)}
.site-raster p{margin:var(--ruimte-2) 0 0;max-width:60ch}
.site-contact{display:flex;flex-wrap:wrap;gap:var(--ruimte-3);align-items:center}
.site-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ruimte-2) var(--ruimte-5);padding:var(--ruimte-5) 0 var(--ruimte-7);border-top:1px solid var(--lijn);font-size:14px;color:var(--gedempt)}
.site-voet a{color:var(--inkt)}
@media (max-width:720px){
.site .edm-hero{padding:var(--ruimte-7) 0}
.site-raster{grid-template-columns:1fr}
}
/* De woordmerken wisselen mee met het thema (bundle.css doet dat via data-theme; hier zonder script). */
@media (prefers-color-scheme:dark){
.edm-logo--licht{display:none}
.edm-logo--donker{display:inline-block}
}