/* main.css — basisstijl van wellsun.nl
   Inhoud: 1. design tokens (kleuren, fonts, maten)  2. fonts  3. basis  4. header en menu
           5. footer  6. algemene onderdelen (koppen, tekst, knoppen, secties)  7. hulpklassen
   Waarden zijn gemeten op de oude Wix-site (zie docs/INVENTARIS.md §7). */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  --kleur-navy: #23203e;        /* hoofdtekst, koppen, donkere secties */
  --kleur-geel: #f7c52d;        /* actief menu-item, opsommingstekens */
  --kleur-groen: #8fcc91;       /* partnersectie, verzendknop */
  --kleur-blauw-donker: #0c3c60;
  --kleur-blauw: #39729b;
  --kleur-blauw-licht: #6ea4ca;
  --kleur-lijn: #0a3942;        /* lijn boven de footer */
  --kleur-wit: #fff;
  --kleur-grijs-licht: #f4f4f6;
  --kleur-focus: #1a73e8;

  /* Font: Figtree (vrij, SIL Open Font License), gekozen als vervanger van Averta (checklist G12).
     Ander font? Pas alleen --font-basis en de @font-face-regels hieronder aan. */
  --font-basis: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --gewicht-licht: 300;
  --gewicht-normaal: 400;
  --gewicht-halfvet: 600;
  --gewicht-vet: 700;

  --tekst-klein: 0.75rem;       /* 12px footer */
  --tekst-menu: 0.875rem;       /* 14px */
  --tekst-basis: 1.125rem;      /* 18px */
  --tekst-kop-3: 1.875rem;      /* 30px */
  --tekst-kop-2: 2.5rem;        /* 40px */
  --regelhoogte: 1.35;
  --regelhoogte-lijst: 1.5;

  --breedte-inhoud: 980px;      /* inhoudskolom oude site */
  --rand: 1.25rem;              /* zijmarge op kleine schermen */
  --header-hoogte: 81px;
  --ruimte-1: 0.5rem;
  --ruimte-2: 1rem;
  --ruimte-3: 1.5rem;
  --ruimte-4: 2.5rem;
  --ruimte-5: 4rem;
}

/* 2. Fonts (lokaal gehost, geen externe CDN) ----------------------------- */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-700-normal.woff2") format("woff2"); }

/* 3. Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-basis);
  font-weight: var(--gewicht-licht);
  font-size: var(--tekst-basis);
  line-height: var(--regelhoogte);
  color: var(--kleur-navy);
  background: var(--kleur-wit);
}
img, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--kleur-blauw); }
:focus-visible { outline: 3px solid var(--kleur-focus); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--gewicht-normaal); line-height: 1.2; margin: 0 0 var(--ruimte-3); }
p { margin: 0 0 var(--ruimte-3); }
ul { margin: 0 0 var(--ruimte-3); padding-left: 0; }
address { font-style: normal; }

.skiplink {
  position: absolute; left: var(--ruimte-2); top: -100px; z-index: 100;
  padding: var(--ruimte-1) var(--ruimte-2); background: var(--kleur-navy); color: var(--kleur-wit);
}
.skiplink:focus { top: var(--ruimte-2); }

/* 4. Header en menu ----------------------------------------------------- */
.site-header {
  position: relative; z-index: 50;   /* scrolt mee, net als op de oude site */
  background: var(--kleur-wit);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.site-header__binnen {
  max-width: var(--breedte-inhoud); margin: 0 auto;
  min-height: var(--header-hoogte);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--rand);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo { margin-left: 5px; }   /* zichtbaar logo begint op de oude site 5px rechts van de inhoudskolom */
.site-header__logo img { width: 175px; height: auto; }
.hoofdmenu ul { list-style: none; margin: 0; padding: 0; display: flex; }
.hoofdmenu a {
  display: block; padding: 0.35rem 10px;
  font-size: var(--tekst-menu); font-weight: var(--gewicht-normaal);
  text-decoration: none; color: var(--kleur-navy);
}
/* Actief/hover: de oude site kleurde de tekst geel (contrast 1,6:1, onvoldoende voor WCAG AA).
   Nu blijft de tekst navy en geeft een gele streep aan welke pagina actief is. */
.hoofdmenu a { position: relative; }
.hoofdmenu a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--kleur-geel); transform: scaleX(0); transition: transform 0.15s; }
.hoofdmenu a:hover::after, .hoofdmenu a[aria-current="page"]::after { transform: scaleX(1); }
.hoofdmenu a:hover { color: var(--kleur-navy); }
.menuknop { display: none; }

@media (min-width: 1020px) {
  .site-header__binnen { padding: 0; }
}

/* Mobiel menu: hamburger rechts, logo gecentreerd (zoals de mobiele Wix-versie) */
@media (max-width: 767px) {
  :root { --header-hoogte: 70px; }
  .site-header__binnen { justify-content: center; position: relative; }
  .site-header__logo { margin-left: 0; }
  .site-header__logo img { width: 154px; }
  .menuknop {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: var(--ruimte-1); top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; color: var(--kleur-blauw-donker);
  }
  .menuknop__streep, .menuknop__streep::before, .menuknop__streep::after {
    display: block; width: 26px; height: 3px; background: currentColor; content: ""; position: relative;
    transition: transform 0.2s, background-color 0.2s;
  }
  .menuknop__streep::before { position: absolute; top: -9px; }
  .menuknop__streep::after { position: absolute; top: 9px; }
  .menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
  .menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(9px) rotate(45deg); }
  .menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-9px) rotate(-45deg); }

  .hoofdmenu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kleur-wit); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
  }
  /* Zonder JavaScript blijft het menu gewoon zichtbaar onder het logo */
  .js .hoofdmenu:not([data-open]) { display: none; }
  .hoofdmenu ul { flex-direction: column; padding: var(--ruimte-1) 0 var(--ruimte-2); }
  .hoofdmenu a { padding: 0.8rem var(--ruimte-4); font-size: 1.125rem; text-align: center; }
  html:not(.js) .hoofdmenu { position: static; box-shadow: none; }
  html:not(.js) .site-header__binnen { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 5. Footer ------------------------------------------------------------- */
.site-footer { padding: var(--ruimte-4) var(--rand) var(--ruimte-4); }
.site-footer__binnen {
  max-width: calc(var(--breedte-inhoud) + 8px); margin: 0 auto;
  border-top: 1px solid var(--kleur-lijn);
  padding-top: 2.1rem;
}
.site-footer__regel {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.9rem;
  font-size: var(--tekst-klein); font-weight: var(--gewicht-normaal); text-align: center;
}
@media (max-width: 767px) {
  .site-footer { padding-top: 0.5rem; padding-bottom: 1.5rem; }
  .site-footer__binnen { padding-top: 1.2rem; }
  .site-footer__regel { font-size: 0.875rem; gap: 0.1rem 1.5rem; }
}

/* 6. Algemene onderdelen ------------------------------------------------ */
.inhoud { max-width: var(--breedte-inhoud); margin: 0 auto; padding: 0 var(--rand); }
@media (min-width: 1020px) { .inhoud { padding: 0; } }
.sectie { padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-3); }
.kop-2 { font-size: var(--tekst-kop-2); font-weight: var(--gewicht-normaal); }
.kop-3 { font-size: var(--tekst-kop-3); font-weight: var(--gewicht-licht); }
@media (max-width: 767px) {
  :root { --tekst-kop-2: 2rem; --tekst-kop-3: 1.5rem; --tekst-basis: 1.0625rem; }
}

/* Opsomming met gele bolletjes (zoals op de oude site) */
.lijst-geel { list-style: none; padding: 0; line-height: var(--regelhoogte-lijst); }
.lijst-geel li { position: relative; padding-left: 2rem; }
.lijst-geel li::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kleur-geel);
}

/* Omlijnde knop (zoals "Website" / "Brochure" en de footerknop op de oude site) */
.knop-omlijnd {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6rem 1.5rem;
  border: 1px solid var(--kleur-navy); background: transparent;
  font: inherit; font-weight: var(--gewicht-normaal); color: var(--kleur-navy); text-decoration: none;
}
.knop-omlijnd:hover { background: var(--kleur-navy); color: var(--kleur-wit); }

/* 7. Hulpklassen -------------------------------------------------------- */
.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;
}