/* ==========================================================================
   Allround JDV Services
   Ontwerptokens: pas kleuren en maten hier aan, nergens anders.
   ========================================================================== */

:root {
  /* Basiskleuren, afgeleid uit het logo */
  --navy-900:   #02203f;   /* letters JDV, diepste vlak */
  --navy-800:   #0a2c4d;
  --navy-700:   #123a5e;
  --navy-100:   #d3e0ea;
  --blauw-600:  #0a6b96;   /* donkerder, voor links op wit */
  --blauw-500:  #0789c2;   /* de golf in het logo */
  --blauw-100:  #e2f0f8;
  --oranje-500: #e58435;   /* de streep over de V */
  --oranje-700: #a85819;   /* donkerder, voor tekst op wit */
  --oranje-200: #f7cfa8;
  --wit:        #ffffff;
  --grijs-50:   #f3f6f9;
  --grijs-100:  #e8eef3;
  --lijn-grijs: #dbe4ec;
  --inkt-900:   #12212e;
  --inkt-600:   #4c5c6b;
  --rood-700:   #9a2f2f;
  --rood-50:    #fdf0ee;

  /* Betekenislaag */
  --canvas:      var(--wit);
  --canvas-alt:  var(--grijs-50);
  --canvas-diep: var(--navy-900);
  --inkt:        var(--inkt-900);
  --inkt-zacht:  var(--inkt-600);
  --primair:     var(--navy-800);
  --accent:      var(--oranje-500);
  --accent-tekst: var(--oranje-700);
  --link:        var(--blauw-600);
  --lijn:        var(--lijn-grijs);

  /* Ritme */
  --ruimte-1: 0.5rem;
  --ruimte-2: 1rem;
  --ruimte-3: 1.5rem;
  --ruimte-4: 2.5rem;
  --ruimte-5: 4rem;
  --ruimte-6: 6rem;

  --breedte: 1140px;
  --breedte-tekst: 68ch;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--inkt);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--ruimte-2); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 var(--ruimte-2); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-800); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 1.25rem; }

.overslaan {
  position: absolute; left: -9999px;
  background: var(--primair); color: #fff; padding: var(--ruimte-2); z-index: 10;
}
.overslaan:focus { left: var(--ruimte-2); top: var(--ruimte-2); }

/* ---------- Kop ---------- */

.kop { background: var(--canvas); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 5; }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); min-height: 88px; flex-wrap: wrap; }

.merk { display: block; text-decoration: none; line-height: 0; flex-shrink: 0; }
.merk img { display: block; width: 168px; height: auto; }

.nav { display: flex; align-items: center; gap: var(--ruimte-3); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.nav a:hover { color: var(--accent); }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block; background: var(--accent); color: var(--navy-900) !important;
  padding: 0.8rem 1.5rem; border-radius: var(--radius); text-decoration: none;
  font-weight: 700; font-size: 1rem; border: 2px solid var(--accent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.knop:hover { background: #f09a52; border-color: #f09a52; color: var(--navy-900) !important; }
.knop-klein { padding: 0.5rem 1rem; font-size: 0.92rem; }
.knop-rand { background: transparent; color: var(--primair) !important; border-color: var(--lijn); }
.knop-rand:hover { background: var(--grijs-50); border-color: var(--primair); color: var(--primair) !important; }

/* ---------- Secties ---------- */

.sectie { padding: var(--ruimte-5) 0; }
.sectie-diep { background: var(--canvas-diep); color: var(--navy-100); }
.sectie-diep h2 { color: #fff; }
.sectie-diep a { color: var(--oranje-200); }
.sectie-alt { background: var(--canvas-alt); }
.sectie-kop { max-width: var(--breedte-tekst); margin-bottom: var(--ruimte-4); }
.sectie-kop p { color: var(--inkt-zacht); font-size: 1.1rem; margin-bottom: 0; }

.held { padding: var(--ruimte-6) 0 var(--ruimte-5); }
.held-tekst { max-width: 40ch; }
.held p.leidend { font-size: 1.2rem; color: var(--inkt-zacht); max-width: 54ch; margin-bottom: var(--ruimte-4); }
.held-acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }

.opsomming { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; margin-top: var(--ruimte-5); padding-top: var(--ruimte-4); border-top: 1px solid var(--lijn); }
.opsomming div { flex: 1 1 180px; }
.opsomming dt { font-weight: 600; color: var(--primair); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.3rem; }
.opsomming dd { margin: 0; color: var(--inkt-zacht); }

/* ---------- Diensten ---------- */

.diensten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--ruimte-3); align-items: start; }

.dienst {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: var(--ruimte-3); display: flex; flex-direction: column; height: 100%;
  min-width: 0;
}
.dienst h3 { color: var(--primair); overflow-wrap: break-word; }
.dienst .samenvatting { color: var(--inkt); font-weight: 500; margin-bottom: var(--ruimte-2); }
.dienst p { color: var(--inkt-zacht); font-size: 0.97rem; }

.inbegrepen { list-style: none; padding: 0; margin: 0 0 var(--ruimte-3); }
.inbegrepen li { position: relative; padding-left: 1.4rem; margin-bottom: 0.35rem; font-size: 0.95rem; color: var(--inkt-zacht); }
.inbegrepen li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--blauw-500); border-radius: 50%; }

.prijs { margin-top: auto; padding-top: var(--ruimte-2); border-top: 1px solid var(--lijn); }
.prijs .bedrag { font-size: 1.5rem; font-weight: 700; color: var(--primair); }
.prijs .eenheid { font-weight: 500; color: var(--inkt); }
.prijs .toelichting { display: block; font-size: 0.85rem; color: var(--inkt-zacht); margin-top: 0.15rem; }

/* ---------- Nog-in-te-vullen markering ---------- */

.ontbreekt {
  border: 2px dashed var(--rood-700); background: var(--rood-50);
  padding: var(--ruimte-3); border-radius: var(--radius); color: var(--rood-700);
}
.ontbreekt h3 { color: var(--rood-700); margin-top: 0; }
.ontbreekt p { color: var(--rood-700); margin-bottom: 0; }
.ontbreekt code { background: var(--wit); padding: 0.1rem 0.35rem; border-radius: 2px; font-size: 0.9em; }
.ontbreekt-inline { color: var(--rood-700); font-weight: 600; }

/* ---------- Tekstpagina's (voorwaarden, privacy) ---------- */

.tekstpagina { padding: var(--ruimte-5) 0; }
.tekstpagina .inhoud { max-width: var(--breedte-tekst); }
.tekstpagina h2 { margin-top: var(--ruimte-4); font-size: 1.4rem; }
.tekstpagina h3 { margin-top: var(--ruimte-3); }
.tekstpagina ul, .tekstpagina ol { padding-left: 1.3rem; margin-bottom: var(--ruimte-2); }
.tekstpagina li { margin-bottom: 0.4rem; }
.tekstpagina .bijgewerkt { color: var(--inkt-zacht); font-size: 0.92rem; border-bottom: 1px solid var(--lijn); padding-bottom: var(--ruimte-2); margin-bottom: var(--ruimte-3); }

.let-op {
  background: #fdf2e6; border-left: 4px solid var(--accent);
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--ruimte-3);
}
.let-op p { margin-bottom: 0; font-size: 0.97rem; }

.gegevens { border-collapse: collapse; width: 100%; margin-bottom: var(--ruimte-3); }
.gegevens th, .gegevens td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.gegevens th { width: 38%; font-weight: 600; color: var(--primair); }

/* ---------- Voet ---------- */

.voet { background: var(--canvas-diep); color: var(--navy-100); padding: var(--ruimte-5) 0 var(--ruimte-3); margin-top: var(--ruimte-6); }
.voet-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ruimte-4); }
.voet-kop { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.09em; color: #fff; margin-bottom: var(--ruimte-2); font-weight: 600; }
.voet-tekst { font-size: 0.95rem; color: var(--navy-100); margin-bottom: var(--ruimte-2); }
.voet a { color: var(--oranje-200); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet-lijst { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.voet-lijst li { margin-bottom: 0.45rem; }
.voet-onder { margin-top: var(--ruimte-4); padding-top: var(--ruimte-3); border-top: 1px solid rgba(255,255,255,0.16); display: flex; justify-content: space-between; gap: var(--ruimte-2); flex-wrap: wrap; font-size: 0.88rem; color: #9db3c6; }
.voet-onder p { margin: 0; }

/* ---------- Klein scherm ---------- */

@media (max-width: 700px) {
  :root { --ruimte-5: 3rem; --ruimte-6: 3.5rem; }
  .kop-binnen { min-height: auto; padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .nav { gap: var(--ruimte-2); font-size: 0.95rem; }
  .merk img { width: 132px; }
  .kop-binnen { min-height: auto; }
  .held { padding: var(--ruimte-4) 0; }
  .voet-onder { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Tarieventabel binnen een dienst ---------- */

.tarieven { margin-bottom: 0.5rem; }
.tariefregel {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--lijn);
}
.tariefregel:last-child { border-bottom: none; padding-bottom: 0.2rem; }
.tarief-label { font-size: 0.88rem; color: var(--inkt-zacht); }
.tarief-waarde { font-size: 0.95rem; color: var(--inkt-zacht); overflow-wrap: break-word; }
.bedrag-klein { font-weight: 700; color: var(--primair); font-size: 1.05rem; }

/* ---------- Bewijsblok ---------- */

.bewijs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ruimte-3); }
.bewijs article { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--ruimte-3); }
.bewijs h3 { color: var(--primair); margin-bottom: 0.5rem; }
.bewijs p { color: var(--inkt-zacht); font-size: 0.97rem; margin-bottom: 0; }

.cijfer { display: block; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.4rem; }
.cijfer-bij { font-size: 1.05rem; color: var(--inkt-zacht); max-width: 46ch; }
.sectie-diep .cijfer { color: var(--oranje-500); }
.sectie-diep .cijfer-bij { color: var(--navy-100); }

/* ---------- Bewijs-afbeelding ---------- */

.bewijsraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ruimte-3); margin-top: var(--ruimte-4);
}
.bewijsbeeld { margin: 0; }
.bewijsbeeld img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.16); background: #000;
}
.bewijsbeeld figcaption {
  margin-top: 0.7rem; font-size: 0.88rem; color: var(--navy-100); opacity: 0.85;
}
.sectie .bewijsbeeld img { border-color: var(--lijn); }
.sectie .bewijsbeeld figcaption { color: var(--inkt-zacht); }

/* ---------- Contactformulier ---------- */

.formulier { margin-top: var(--ruimte-3); }

.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ruimte-3); }

.veld { margin-bottom: var(--ruimte-2); }
.veld label {
  display: block; font-weight: 600; font-size: 0.92rem;
  color: var(--primair); margin-bottom: 0.35rem;
}
.verplicht { color: var(--oranje-700); }

.veld input,
.veld select,
.veld textarea {
  width: 100%; padding: 0.65rem 0.75rem;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--wit); color: var(--inkt);
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.veld textarea { resize: vertical; min-height: 7rem; }

.veld input:hover,
.veld select:hover,
.veld textarea:hover { border-color: #b9c8d6; }

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none; border-color: var(--blauw-500);
  box-shadow: 0 0 0 3px rgba(7, 137, 194, 0.18);
}

.veld select {
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234c5c6b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}

.veld-uitleg { font-size: 0.88rem; color: var(--inkt-zacht); margin-bottom: var(--ruimte-3); }

.formulier button { cursor: pointer; font-family: inherit; }

/* Spamval: onzichtbaar voor mensen, wel invulbaar voor bots */
.honingpot {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
}

@media (max-width: 620px) {
  .veld-rij { grid-template-columns: 1fr; }
}

.voet-naam { color: #fff; font-weight: 600; }

/* ---------- Knop per dienst ---------- */

.dienst-knop {
  margin-top: var(--ruimte-3);
  align-self: flex-start;
  text-align: center;
}

/* Tekst die alleen voor schermlezers bestaat */
.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 620px) {
  .dienst-knop { align-self: stretch; }
}

/* ---------- Hulpklassen (vervangen inline stijlen, zodat de CSP streng kan zijn) ---------- */

.tekstkolom { max-width: var(--breedte-tekst); }
.tekstkolom-smal { max-width: 60ch; }
.ruimte-boven { margin-top: var(--ruimte-4); }
.kleine-noot { font-size: 0.92rem; opacity: 0.75; margin-top: var(--ruimte-3); }