/**
 * Designsysteem — Van der Meer Installatietechniek
 * Bron: Forms/design_handoff_vandermeer_website/README.md
 *
 * Toegankelijkheid is hier geen bijzaak: de opdrachtgever is kleurenblind.
 * Betekenis mag nooit alleen uit kleur blijken, links zijn altijd onderstreept
 * en focus is altijd een zichtbare outline.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Basispalet */
  --petrol-50:   #E6EEF0;
  --petrol-100:  #CFDEE2;
  --petrol-900:  #0E3A47;
  --petrol-950:  #08262F;
  --petrol-975:  #05191F;

  --koper-50:    #FCEFE4;
  --koper-200:   #F3C99E;
  --koper-600:   #B4530F;
  --koper-700:   #8D3F0A;
  --koper-800:   #77340A;

  --ink:         #172023;
  --body:        #3A4749;
  --meta:        #4F5B5E;   /* lichtste toegestane tekstkleur op wit — 7,0:1 */
  --randsterk:   #6C7A7D;
  --zand:        #F7F3EE;
  --lijn:        #DCD3C9;

  /* Tekst op donkere vlakken */
  --opdonker:      #E7EEF0;
  --opdonker-zacht:#C9D8DC;

  /* Disabled — altijd met slotje-icoon erbij */
  --uit-vlak:   #DCD3C9;
  --uit-zacht:  #F1EDE7;
  --uit-rand:   #C9C0B5;
  --uit-tekst:  #5A5550;

  /* Beeldplaceholders */
  --foto-vlak: #D3CBC1;
  --foto-rand: #A99E92;

  /* Status — kleur is ondersteunend, icoon en woord dragen de betekenis */
  --status-info:     #14556B;  --status-info-vlak: #E6EEF0;
  --status-ok:       #1E6B45;  --status-ok-vlak:   #E8F2EB;
  --status-warn:     #8A5A00;  --status-warn-vlak: #FBF1DF;
  --status-err:      #A3232B;  --status-err-vlak:  #FBEBEC;

  /* Schaduwen */
  --schaduw-sm: 0 1px 2px 0 rgba(23,32,35,.06);
  --schaduw-md: 0 4px 6px -1px rgba(23,32,35,.08), 0 2px 4px -2px rgba(23,32,35,.06);
  --schaduw-lg: 0 10px 15px -3px rgba(23,32,35,.10), 0 4px 6px -4px rgba(23,32,35,.08);

  /* Focus */
  --focus-outline: 3px solid var(--koper-600);
  --focus-offset: 2px;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

/* Tailwind's preflight staat uit (zie head_assets.html: die reset zou de
   plugin-stijlen in custom.css slopen). De border-box-reset die daarin zit
   hebben we wél nodig: het hele ontwerp rekent ermee. Zonder deze regel telt
   padding bij de breedte op en steken containers, knoppen en velden net buiten
   hun kader. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--body);
  background: #fff;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: 'Bitter', Georgia, serif;
  color: var(--ink);
  margin-top: 0;
}

h1 { font-weight: 700; font-size: 44px; line-height: 1.15; }
h2 { font-weight: 600; font-size: 32px; line-height: 1.2; }
h3 { font-weight: 600; font-size: 24px; line-height: 1.3; }

@media (max-width: 767.98px) {
  html, body { font-size: 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
}

img { max-width: 100%; }
iframe { display: block; }

/* ==========================================================================
   3. Toegankelijkheid
   ========================================================================== */

/* Regel 6: links zijn altijd onderstreept, zodat ze niet alleen aan kleur
   te herkennen zijn. .no-underline is de bewuste uitzondering voor knoppen,
   kaarten en navigatie-items die hun eigen zichtbare drager hebben. */
a {
  color: var(--petrol-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}
a:hover, a:focus { color: var(--koper-700); }
a.no-underline, .no-underline { text-decoration: none !important; }

/* Regel 5: focus is altijd een zichtbare outline, nooit alleen een kleurwissel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Op koper vlak is een koperen outline onzichtbaar — daar wordt hij ink. */
.btn-primair:focus-visible,
.op-koper:focus-visible { outline: 3px solid var(--ink); }

/* Op donkere vlakken wordt de outline koper-200 voor genoeg contrast. */
.op-donker a:focus-visible,
.op-donker button:focus-visible { outline: 3px solid var(--koper-200); }

/* Regel 7: raakvlakken minimaal 44x44 op mobiel. */
@media (max-width: 767.98px) {
  a.raakvlak, button.raakvlak, .raakvlak {
    min-width: 44px;
    min-height: 44px;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skiplink naar de hoofdinhoud */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--petrol-900); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: underline;
}
.skiplink:focus { left: 0; color: #fff; }

/* ==========================================================================
   4. Hulpklassen
   ========================================================================== */

.img-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Beeldplaceholder — grijs vlak met streepjesrand en de bedoelde afmeting erin */
.fotoplaceholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--foto-vlak);
  border: 2px dashed var(--foto-rand);
  border-radius: 12px;
  color: #4A4139;
  font-size: 14px; font-weight: 600;
  text-align: center;
}

/* Leeskolom: circa 75 tekens per regel */
.leeskolom { max-width: 760px; }

/* ==========================================================================
   5. Terug naar boven
   ========================================================================== */

#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1040;
  width: 46px;
  height: 46px;
  background: var(--petrol-900);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: var(--schaduw-lg);
  transition: background .2s, transform .2s;
}
#back-to-top:hover { background: var(--petrol-950); color: #fff; transform: translateY(-2px); }
#back-to-top:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
#back-to-top.show { display: flex; }

/* Op mobiel staat onderaan de vaste actiebalk plus de WhatsApp-knop:
   de knop schuift omhoog zodat hij niets afdekt. */
@media (max-width: 767.98px) {
  #back-to-top { bottom: 9rem; right: 1rem; }
}