/* Kapsalon Absolu — huisstijl "Donker & luxe", letter van de oude site (Droid Sans) */
@font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/droid-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/droid-sans-700.woff2') format('woff2'); }

:root {
  --grond: #141412;
  --paneel: #1c1b18;
  --lijn: #2c2b27;
  --tekst: #f2efe9;
  --tekst2: #b8b2a6;
  --accent: #c9a273;
  --serif: 'Droid Sans', Verdana, sans-serif;
  --sans: 'Droid Sans', Verdana, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: var(--tekst); }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0 0 20px; }
h1 { font-size: clamp(38px, 5.5vw, 62px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 26px; }
p { margin: 0 0 16px; }
.stil { color: var(--tekst2); }

/* Knoppen */
.knop {
  display: inline-block;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
}
.knop:hover { background: rgba(201, 162, 115, 0.12); color: var(--accent); }
.knop-accent { background: var(--accent); color: var(--grond); }
.knop-accent:hover { background: #d8b588; color: var(--grond); }

/* Navigatie */
.hoofdnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding: 20px 48px;
  border-bottom: 1px solid var(--lijn);
}
.merk, .voet-merk {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 7px;
  color: var(--accent);
  text-decoration: none;
}
.merk:hover { color: var(--accent); }
.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.navlinks a {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 2px;
}
.navlinks a.actief { color: var(--accent); border-bottom: 1px solid var(--accent); }
.nav-tel { padding: 13px 24px; font-size: 13px; }

/* Secties */
.sectie { max-width: 1280px; margin: 0 auto; padding: 72px 48px; }
.sectie-smal { max-width: 760px; margin: 0 auto; padding: 72px 32px; }
.sectie-paneel { background: var(--paneel); }
.volle-breedte { max-width: none; }
.kicker {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.midden { text-align: center; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.hero > div { flex: 1 1 420px; min-width: 0; }
.hero .hero-kader { flex: 1 1 480px; min-width: 0; height: 560px; overflow: hidden; }
.hero-kader img { width: 100%; height: 100%; object-fit: cover; }
.hero p.intro { font-size: 17px; color: var(--tekst2); margin-bottom: 32px; }

/* Mededeling */
.mededeling {
  background: var(--accent);
  color: var(--grond);
  text-align: center;
  padding: 14px 24px;
  font-weight: 700;
}

/* Drieluik (usp's) */
.drieluik {
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 56px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  justify-content: center;
  text-align: center;
}
.drieluik > div { flex: 1 1 280px; max-width: 380px; }
.drieluik h3 { color: var(--accent); font-size: 26px; margin-bottom: 8px; }
.drieluik p { color: var(--tekst2); font-size: 15px; margin: 0; }

/* Prijzen */
.prijs-sectie { margin-bottom: 48px; }
.prijs-opmerking { color: var(--tekst2); font-size: 14px; margin-top: -12px; }
.prijsrij {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lijn);
}
.prijsrij .prijs { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* Openingsuren */
.urenrij {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  color: #cfc9bd;
}

/* Galerij */
.galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.galerij a { display: block; }
.galerij img { width: 100%; height: 300px; object-fit: cover; }

/* Lightbox */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 9, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.lightbox button {
  position: absolute;
  background: none;
  border: none;
  color: var(--tekst);
  font-size: 34px;
  cursor: pointer;
  padding: 14px 18px;
}
.lightbox .lb-sluit { top: 12px; right: 16px; }
.lightbox .lb-vorige { left: 8px; }
.lightbox .lb-volgende { right: 8px; }

/* Formulieren */
label { display: block; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; color: var(--tekst2); }
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%;
  background: var(--paneel);
  border: 1px solid var(--lijn);
  color: var(--tekst);
  padding: 13px 14px;
  font: inherit;
  margin-bottom: 20px;
}
input:focus, textarea:focus, .knop:focus, a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.veld-website { position: absolute; left: -9999px; top: -9999px; }
.melding-ok { border: 1px solid var(--accent); color: var(--accent); padding: 14px 18px; margin-bottom: 24px; }
.melding-fout { border: 1px solid #c97373; color: #e0a2a2; padding: 14px 18px; margin-bottom: 24px; }

/* Footer */
.site-voet {
  border-top: 1px solid var(--lijn);
  padding: 40px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 48px;
  align-items: center;
  font-size: 14px;
  color: var(--tekst2);
}
.voet-merk { font-size: 20px; letter-spacing: 6px; color: var(--tekst); }
.voet-klein { margin-left: auto; font-size: 13px; }

/* Tweekoloms blok */
.twee-kolommen { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.twee-kolommen > * { flex: 1 1 360px; min-width: 0; }
.twee-kolommen img { width: 100%; height: 440px; object-fit: cover; }

@media (max-width: 640px) {
  .hoofdnav, .sectie, .drieluik, .site-voet { padding-left: 20px; padding-right: 20px; }
  .hero .hero-kader { height: 380px; }
}