/* ==========================================================================
   Globale stijlen — Luxury Hair By Denise
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--tekst-body);
  font-weight: 400;
  line-height: 1.5;              /* gemeten: 17px → 25.5px */
  color: var(--kleur-zwart);
  background: var(--kleur-wit);
}

/* --- Containers -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Secties met brede zijranden (gemeten 114px op desktop) */
.sectie { padding-inline: var(--rand-zij); }

/* --- Koppen ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-kop); font-weight: 600; }

.kop--sectie {            /* gemeten: Inter Tight 38/600, lh 38 */
  font-size: var(--tekst-h2);
  line-height: 1;
}
.kop--sectie-groot {      /* gemeten: Inter Tight 40/600, lh 40 */
  font-size: var(--tekst-h2-groot);
  line-height: 1;
}
.kop--blok {              /* gemeten: Inter Tight 38/600, lh 45.6 = 1.2 */
  font-size: var(--tekst-h2);
  line-height: 1.2;
}
.uitgelijnd-midden { text-align: center; }

/* --- Knoppen ----------------------------------------------------------- */
/* Gemeten: padding 12px 24px, border 3px, radius 0, uppercase */
.knop {
  display: inline-block;
  padding: 12px 24px;
  border: var(--knop-rand) solid var(--kleur-zwart);
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: var(--tekst-accent);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transitie), color var(--transitie), border-color var(--transitie);
}
.knop--zwart   { background: var(--kleur-zwart); color: var(--kleur-wit); }
/* Gemeten: witte achtergrond, zwarte rand, padding 12px 20px */
.knop--omlijnd { background: var(--kleur-wit); color: var(--kleur-zwart); padding: 12px 20px; }
/* Gemeten: deze knop is de enige met een zichtbare hover-omkering */
/* Gemeten op de landingspagina's: bruin vlak, witte tekst, geen rand */
.knop--bruin   { background: var(--kleur-bruin); color: var(--kleur-wit); border-width: 0; }
.knop--invert  { background: var(--kleur-zwart); color: var(--kleur-wit); border-width: 0; padding: 12px 24px; }

/* Hover uitsluitend op apparaten met een echte muisaanwijzer */
@media (hover: hover) and (min-width: 1025px) {
  .knop--bruin:hover, .knop--bruin:focus-visible { background: #6d4b37; }
  .knop--invert:hover, .knop--invert:focus-visible {
    background: var(--kleur-wit);
    color: var(--kleur-zwart);
  }
}

/* De hero- en headerknop gebruiken Open Sans in plaats van Roboto (gemeten) */
.knop--hero   { font-family: var(--font-knop); font-size: 15px; font-weight: 700; }
.knop--header { font-family: var(--font-knop); font-size: 14px; font-weight: 700; }
/* De omlijnde knop komt op twee plekken voor met verschillende binnenruimte:
   de "Over ons"-knop op de homepage heeft 12px 20px, de telefoonknop in de
   header 12px 24px. Beide gemeten op de live site. */
.knop--omlijnd.knop--header {
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
}

/* --- Hulpmiddelen ------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--kleur-zwart);
  color: var(--kleur-wit);
  padding: 12px 20px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.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;
}