/* ==========================================================================
   knect-groep.nl – stylesheet
   Bron: Branddeck (maatgevend), Figma-wireframe en huisstijl/tokens-en-drift.md
   Regel: componenten gebruiken alleen de tokens hieronder, geen losse kleuren.
   ========================================================================== */

/* ---------- Lettertype (zelf gehost, geen Google Fonts) ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* KG */
  --kn-primair: #181925;          /* slate */
  --kn-op-primair: #fffcfb;       /* kalkwit */
  --kn-interactie: #005ed2;       /* KG-blauw: knoppen, links, vinkjes, focus */
  --kn-op-interactie: #ffffff;

  /* Merken – alleen bij hun eigen merk gebruiken */
  --kn-ad: #a1b971;
  --kn-cs: #ff8547;
  --kn-op-merk: #181925;          /* altijd donkere tekst op groen/oranje (WCAG) */
  --kn-ad-secundair: #ff8547;     /* secundaire kleur AD (Branddeck) */
  --kn-cs-secundair: #005ed2;     /* secundaire kleur CS (Branddeck) */

  /* Tekst en vlakken */
  --kn-tekst: #181925;
  --kn-tekst-2: #434343;
  --kn-tekst-3: #6b6767;
  --kn-tekst-op-donker: #e6e3df;
  --kn-tekst-op-donker-2: #c9c7c4;
  --kn-achtergrond: #fffcfb;
  --kn-achtergrond-2: #f4f4f3;
  --kn-lijn: #e6e3df;
  --kn-lijn-donker: #3a3b47;

  /* Typografie */
  --kn-font: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kn-kop: 600;
  --kn-tekstgewicht: 400;

  /* Vorm */
  --kn-afschuining: 12px;         /* afgeschuinde hoek rechtsonder (knoppen, vinkje) */
  --kn-breedte: 1200px;
  --kn-goot: 16px;
  --kn-kophoogte: 72px;           /* hoogte vaste navigatiebalk, voor ankerlinks */
}
@media (min-width: 768px) {
  :root { --kn-goot: 40px; }
}
@media (min-width: 1024px) {
  :root { --kn-kophoogte: 88px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kn-kophoogte); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kn-achtergrond);
  color: var(--kn-tekst);
  font-family: var(--kn-font);
  font-weight: var(--kn-tekstgewicht);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: var(--kn-kop); line-height: 1.08; letter-spacing: -0.015em; }
p, ul { margin: 0; }
a { color: var(--kn-tekst); }
a:hover { color: var(--kn-interactie); }
:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.donker :focus-visible, .band-blauw :focus-visible { outline-color: var(--kn-op-primair); }

.container {
  max-width: calc(var(--kn-breedte) + 2 * var(--kn-goot));
  margin: 0 auto;
  padding-inline: var(--kn-goot);
}
.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: var(--kn-goot); top: -100px; z-index: 10;
  background: var(--kn-interactie); color: var(--kn-op-interactie);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skiplink:focus { top: 12px; color: var(--kn-op-interactie); }

/* ---------- Knoppen: rechthoekig, afgeschuinde hoek rechtsonder, pijl ↗ ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 24px;
  font: 600 17px/1.25 var(--kn-font); text-decoration: none; text-align: center;
  background: var(--kn-primair); color: var(--kn-op-primair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kn-afschuining)), calc(100% - var(--kn-afschuining)) 100%, 0 100%);
  transition: filter .15s ease;
}
.knop:hover { filter: brightness(1.12); }
.knop svg { flex: none; }
.knop--blauw { background: var(--kn-interactie); color: var(--kn-op-interactie); }
.knop--blauw:hover { color: var(--kn-op-interactie); }
.knop--licht { background: var(--kn-op-primair); color: var(--kn-tekst); }
.knop--licht:hover { color: var(--kn-tekst); filter: brightness(.95); }
.knop--licht-blauw { background: var(--kn-op-primair); color: var(--kn-interactie); }
.knop--licht-blauw:hover { color: var(--kn-interactie); filter: brightness(.95); }
.knop--ad { background: var(--kn-ad); color: var(--kn-op-merk); }
.knop--ad:hover { color: var(--kn-op-merk); filter: brightness(.95); }
.knop--cs { background: var(--kn-cs); color: var(--kn-op-merk); }
.knop--cs:hover { color: var(--kn-op-merk); filter: brightness(.95); }
.knop--omlijnd {
  clip-path: none; background: transparent; color: var(--kn-tekst);
  border: 2px solid currentColor; padding: 12px 20px;
}
.knop--omlijnd:hover { color: var(--kn-interactie); filter: none; }
.knop--omlijnd-licht { clip-path: none; background: transparent; color: var(--kn-op-interactie); border: 2px solid currentColor; padding: 12px 22px; }
.knop--omlijnd-licht:hover { color: var(--kn-op-interactie); filter: none; background: rgba(255, 255, 255, .1); }
.knop--breed { width: 100%; }
@media (min-width: 768px) { .knop--breed { width: auto; } }

/* ---------- Vinkjeslijst ---------- */
.vinkjes { list-style: none; padding: 0; display: grid; gap: 12px; }
.vinkjes li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
/* Het vinkje is één symbool; de kleuren komen via deze twee variabelen */
.vinkje { width: 24px; height: 24px; flex: none; --vinkje-vlak: var(--kn-interactie); --vinkje-haak: var(--kn-op-primair); }
/* Merkkaarten: vinkjes in de secundaire kleur van het merk */
.merkkaart--ad .vinkje { --vinkje-vlak: var(--kn-ad-secundair); --vinkje-haak: var(--kn-op-merk); }
.merkkaart--cs .vinkje { --vinkje-vlak: var(--kn-cs-secundair); --vinkje-haak: var(--kn-op-primair); }

/* ---------- Kop (navigatie) ---------- */
/* Vaste navigatiebalk: blijft bovenin staan tijdens scrollen */
.kop { border-bottom: 1px solid var(--kn-lijn); background: var(--kn-achtergrond); position: sticky; top: 0; z-index: 20; }
.kop__balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.kop__logo img { height: 38px; width: auto; }
.kop__nav { display: none; }
.kop__nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: 28px; }
.kop__nav a:not(.knop) { text-decoration: none; font-size: 16px; }
.kop__nav .knop { min-height: 44px; padding: 11px 20px; font-size: 16px; }
.kop__nav .knop--omlijnd { padding: 9px 18px; }
.kop__mobiel { display: flex; align-items: center; gap: 8px; }
.icoonknop {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kn-primair); color: var(--kn-op-primair); cursor: pointer; border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.icoonknop--blauw { background: var(--kn-interactie); color: var(--kn-op-interactie); }
.icoonknop:hover { color: var(--kn-op-primair); }
.menu { position: static; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__paneel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--kn-kophoogte)); overflow-y: auto;
  background: var(--kn-achtergrond); border-bottom: 1px solid var(--kn-lijn);
  padding: 8px var(--kn-goot) 24px;
}
.menu__paneel ul { list-style: none; padding: 0; display: grid; }
.menu__paneel li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--kn-lijn); text-decoration: none; font-size: 18px; font-weight: 500; }
.menu__paneel .knop { margin-top: 20px; width: 100%; }
.menu[open] .icoon-open { display: none; }
.menu:not([open]) .icoon-dicht { display: none; }
@media (min-width: 1024px) {
  .kop__balk { min-height: 88px; }
  .kop__logo img { height: 48px; }
  .kop__nav { display: block; }
  .kop__mobiel { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 32px 48px; }
.hero__raster { display: grid; gap: 40px; align-items: center; }
.hero__tekst { display: grid; gap: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--kn-lijn); background: #fff; font-size: 15px; text-decoration: none;
}
.chip svg { stroke: var(--kn-interactie); }
.chip:hover { border-color: var(--kn-interactie); }
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.03; letter-spacing: -0.02em; }
.hero__intro { color: var(--kn-tekst-2); max-width: 34em; }
/* Reviewwidget (Trustindex) – de widget brengt zijn eigen opmaak mee */
.reviews { min-height: 48px; max-width: 100%; overflow: hidden; text-align: left; }
/* Trustindex centreert zijn widget met zeer specifieke selectors. Via het id #reviews
   winnen onze regels altijd, zodat de widget links uitlijnt met de tekst erboven. */
#reviews .ti-widget,
#reviews .ti-widget-container,
#reviews .ti-header,
#reviews .ti-footer {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  justify-content: start !important;
  justify-items: start !important;
}
#reviews .ti-widget-container > *,
#reviews .ti-header > * { margin-left: 0 !important; justify-self: start !important; }
/* De widget heeft eigen binnenruimte links; weghalen zodat het Google-logo gelijk staat met de tekst */
#reviews .ti-widget,
#reviews .ti-widget-container,
#reviews .ti-header { padding-left: 0 !important; }

/* Twee kolommen foto's, verspringend: links valt de onderste foto weg, rechts de bovenste */
.mozaiek {
  height: 370px; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.mozaiek__kolom { display: grid; gap: 10px; align-content: start; }
.mozaiek__kolom:first-child { margin-top: -50px; }
.mozaiek__kolom:last-child { margin-top: -150px; }
.mozaiek img { width: 100%; height: 190px; object-fit: cover; }
@media (min-width: 1024px) {
  .hero { padding-block: 56px 72px; }
  .hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
  .hero__tekst { gap: 28px; }
  .hero__intro { font-size: 19px; }
  .mozaiek { height: 580px; gap: 16px; }
  .mozaiek__kolom { gap: 16px; }
  .mozaiek__kolom:first-child { margin-top: -90px; }
  .mozaiek__kolom:last-child { margin-top: -250px; }
  .mozaiek img { height: 300px; }
}

/* ---------- Banden ---------- */
.band { padding-block: 56px; }
@media (min-width: 1024px) { .band { padding-block: 104px; } }
.donker { background: var(--kn-primair); color: var(--kn-op-primair); }
.licht-2 { background: var(--kn-achtergrond-2); }
.band-blauw { background: var(--kn-interactie); color: var(--kn-op-interactie); }

/* Visie */
.visie__raster { display: grid; gap: 24px; }
.visie h2 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.02em; }
.visie__tekst { display: grid; gap: 18px; color: var(--kn-tekst-op-donker); }
.visie__tekst .vinkjes { color: var(--kn-op-primair); margin-top: 6px; }
.visie__tekst .knop { margin-top: 10px; justify-self: start; }
@media (max-width: 767px) { .visie__tekst .knop { justify-self: stretch; } }
@media (min-width: 1024px) {
  .visie__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 64px; }
  .visie__tekst { font-size: 18px; gap: 20px; }
}

/* Merken */
.merken { display: grid; gap: 28px; }
.merken > h2 { font-size: clamp(32px, 4vw, 48px); max-width: 15em; }
.merkkaart { background: var(--kn-achtergrond); border: 1px solid var(--kn-lijn); border-top: 8px solid; display: grid; }
.merkkaart--ad { border-top-color: var(--kn-ad); }
.merkkaart--cs { border-top-color: var(--kn-cs); }
.merkkaart__foto { width: 100%; height: 210px; object-fit: cover; }
.merkkaart__tekst { padding: 24px 20px 28px; display: grid; gap: 16px; align-content: start; }
.label { justify-self: start; font-size: 14px; font-weight: 600; padding: 5px 10px; color: var(--kn-op-merk); }
.merkkaart--ad .label { background: var(--kn-ad); }
.merkkaart--cs .label { background: var(--kn-cs); }
.merkkaart h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; }
.merkkaart h3 span { display: block; font-weight: 400; }
.merkkaart__tekst > p { color: var(--kn-tekst-2); }
.merkkaart .knop { margin-top: 4px; }
@media (max-width: 767px) { .merkkaart .knop { width: 100%; } }
@media (min-width: 768px) { .merkkaart .knop { justify-self: start; } }
@media (min-width: 1024px) {
  .merken { gap: 48px; }
  .merkkaart { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .merkkaart__tekst { padding: 48px; gap: 20px; }
  .merkkaart__foto { height: 100%; min-height: 380px; order: 2; }
}

/* Partnerlogo's */
.samenwerking { display: grid; gap: 16px; padding-top: 16px; }
.samenwerking p { font-weight: 600; font-size: 18px; }
.samenwerking ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.samenwerking li { background: var(--kn-achtergrond); border: 1px solid var(--kn-lijn); height: 80px; display: flex; align-items: center; justify-content: center; padding: 14px 18px; }
.samenwerking img { max-height: 40px; width: auto; }
@media (min-width: 1024px) {
  .samenwerking { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; padding-top: 40px; }
  .samenwerking ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Partner worden */
.partner__raster { display: grid; gap: 28px; align-items: center; }
.collage { position: relative; height: 320px; }
.collage__vlak { position: absolute; left: 0; bottom: 0; width: 62%; height: 64%; background: var(--kn-primair); }
.collage__groot { position: absolute; left: 24px; top: 24px; width: calc(100% - 48px); height: 260px; object-fit: cover; }
.collage__klein { position: absolute; object-fit: cover; border: 6px solid var(--kn-achtergrond); }
.collage__klein--boven { display: none; }
.collage__klein--onder { right: 0; bottom: 0; width: 44%; height: 130px; }
.partner__tekst { display: grid; gap: 20px; }
.partner__tekst h2 { font-size: clamp(32px, 4vw, 48px); }
.partner__tekst p { color: var(--kn-tekst-2); }
.partner__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.partner__acties a:not(.knop) { color: var(--kn-interactie); padding-block: 10px; }
@media (max-width: 767px) { .partner__acties { flex-direction: column; align-items: stretch; text-align: center; } }
@media (min-width: 1024px) {
  .partner__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
  .collage { height: 520px; }
  .collage__groot { left: 48px; top: 40px; width: calc(100% - 96px); height: 420px; }
  .collage__klein { border-width: 8px; }
  .collage__klein--boven { display: block; left: 16px; top: 0; width: 42%; height: 170px; }
  .collage__klein--onder { bottom: 24px; width: 40%; height: 210px; }
  .partner__tekst { gap: 24px; font-size: 18px; }
}

/* Vacatures */
.vacatures { display: grid; gap: 18px; }
.vacatures h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 16em; }
.vacatures h2 span { font-weight: 400; }
.vacatures__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 767px) { .vacatures__knoppen .knop { width: 100%; } }

/* ---------- Voet ---------- */
.voet { padding-block: 48px 28px; }
.voet__raster { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voet__merk { grid-column: 1 / -1; display: grid; gap: 16px; color: var(--kn-tekst-op-donker-2); }
.voet__merk img { height: 46px; width: auto; }
.voet h2 { font-size: 16px; letter-spacing: 0; margin-bottom: 8px; }
.voet ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.voet a { color: var(--kn-op-primair); text-decoration: none; display: inline-block; padding-block: 6px; }
.voet a:hover { text-decoration: underline; color: var(--kn-op-primair); }
.voet address { font-style: normal; color: var(--kn-tekst-op-donker-2); }
.voet__contact { grid-column: 1 / -1; }
.voet__onder {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--kn-lijn-donker);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 14px; color: var(--kn-tekst-op-donker-2);
}
.voet__onder a { color: var(--kn-tekst-op-donker-2); text-decoration: underline; padding: 0; }
@media (min-width: 1024px) {
  .voet { padding-block: 72px 32px; }
  .voet__raster { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
  .voet__merk { grid-column: auto; }
  .voet__merk img { height: 52px; }
  .voet__contact { grid-column: auto; }
}

/* ---------- Tekstpagina (privacy) ---------- */
.tekstpagina { max-width: calc(760px + 2 * var(--kn-goot)); margin: 0 auto; padding: 48px var(--kn-goot) 88px; display: grid; gap: 36px; }
.tekstpagina h1 { font-size: clamp(38px, 5vw, 52px); }
.tekstpagina section { display: grid; gap: 12px; border-top: 1px solid var(--kn-lijn); padding-top: 28px; }
.tekstpagina h2 { font-size: 24px; letter-spacing: 0; }
.tekstpagina p { color: var(--kn-tekst-2); line-height: 1.65; }
.tekstpagina p strong { color: var(--kn-tekst); }
.tekstpagina a { color: var(--kn-interactie); }
.bovenkop { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kn-interactie); }
.datum { font-size: 15px; color: var(--kn-tekst-3); }

/* ---------- Hulpklassen (geen inline stijlen, zodat de CSP streng kan blijven) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vinkje__vlak { fill: var(--vinkje-vlak); }
.vinkje__haak { fill: none; stroke: var(--vinkje-haak); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tekstpagina__kop { display: grid; gap: 14px; }
.voet__onder--los { margin-top: 0; padding-top: 0; border-top: 0; }