/* ==========================================================
   Pedicure Delft, Nootdorp en Pijnacker — huisstijl
   Aardetinten met een messing-gouden accent
   ========================================================== */

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Kleuren */
  --kalksteen: #F3ECE6;   /* paginagrond: zacht linnen met een blush-toon */
  --zand: #EADDD3;        /* rustige vlakken: blush-zand */
  --leem: #D6C3B6;        /* lijnen, randen: oudroze klei */
  --omber: #4B3B36;       /* tekst: zacht cacao */
  --walnoot: #7A635A;     /* secundaire tekst */
  --mos: #8B6457;         /* links: rozenhout */
  --mokka: #7A605A;       /* tarievenkaart en voettekst */
  --goud: #D4B77E;        /* accent: champagnegoud */
  --goud-diep: #A88754;   /* goud op lichte grond (lijnen) */
  --licht: #FBF5F0;       /* tekst op mokka */
  --licht-zacht: #F0E3DA; /* secundaire tekst op mokka */
  --rond: 6px;

  --serif: "Marcellus", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Karla", "Segoe UI", Helvetica, Arial, sans-serif;

  --maat: 72rem;          /* maximale breedte */
  --rand: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kalksteen);
  color: var(--omber);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; max-width: 38em; }

a { color: var(--mos); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--omber); }

:focus-visible { outline: 2px solid var(--goud-diep); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--omber); color: var(--licht); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

.wrap { max-width: var(--maat); margin: 0 auto; padding: 0 var(--rand); }

/* Nog in te vullen informatie: valt op, zodat niets vergeten wordt */
.invullen {
  background: #F3E6B8;
  color: #5A4410;
  border-bottom: 1px dashed #8E7136;
  padding: 0 .2em;
  font-style: normal;
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.knop-goud { background: var(--goud); color: var(--omber); }
.knop-goud:hover { background: #C6A76D; color: var(--omber); }
.knop-lijn { border-color: var(--omber); color: var(--omber); background: transparent; }
.knop-lijn:hover { background: var(--omber); color: var(--kalksteen); }

/* ---------- Kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 236, 230, .96);
  border-bottom: 1px solid var(--zand);
}
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; }

.merk { text-decoration: none; color: var(--omber); line-height: 1.1; }
.merk-naam { font-family: var(--serif); font-size: 1.45rem; display: block; }
.merk-sub { font-size: .82rem; color: var(--walnoot); display: block; margin-top: .15rem; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--omber); text-decoration: none; font-size: .98rem; }
.nav a:hover { text-decoration: underline; }
.nav .knop { color: var(--omber); padding: .65rem 1.1rem; }
.nav .knop:hover { text-decoration: none; }

.menu-knop {
  display: none;
  background: none; border: 1px solid var(--omber); color: var(--omber);
  font: 600 .95rem var(--sans); padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
}

@media (max-width: 56rem) {
  .menu-knop { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kalksteen); border-bottom: 1px solid var(--zand); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem var(--rand) 1.25rem; }
  .nav li { width: 100%; }
  .nav a { display: block; padding: .7rem 0; font-size: 1.05rem; }
  .nav .knop { display: inline-block; margin-top: .6rem; padding: .8rem 1.2rem; }
}

/* ---------- Secties ---------- */
.sectie { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.sectie-zand { background: var(--zand); }
.intro { max-width: 40rem; margin-bottom: 2.75rem; }
.intro p { color: var(--walnoot); }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 5.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
@media (min-width: 52rem) { .hero-grid { grid-template-columns: 1.25fr .85fr; } }
.hero-lead { font-size: 1.2rem; color: var(--walnoot); max-width: 32em; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 2.25rem; }
.hero-feiten { display: flex; flex-wrap: wrap; gap: .4rem 2rem; padding: 1.1rem 0 0; border-top: 1px solid var(--leem); font-size: .98rem; color: var(--walnoot); margin: 0; }
.hero-feiten div { margin: 0; }
.hero-feiten strong { color: var(--omber); font-weight: 600; }

/* Fotoplekken: worden later vervangen door echte foto's */
.foto {
  background: var(--zand);
  border: 1px solid var(--leem);
  border-radius: var(--rond);
  display: flex; align-items: flex-end;
  padding: 1rem;
  color: var(--walnoot);
  font-size: .88rem;
  overflow: hidden;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-staand { aspect-ratio: 4 / 5; }
.foto-liggend { aspect-ratio: 3 / 2; }
/* Hero-foto als boog, met een fijne gouden lijn eromheen */
.hero .foto { border: 0; border-radius: 999px 999px var(--rond) var(--rond); outline: 1px solid var(--goud); outline-offset: 10px; margin: 10px; }
.foto-hero { padding: 0; }
.foto-hero img { object-position: 70% 50%; }

/* ---------- Behandelingen ---------- */
.diensten { display: grid; gap: 2.75rem 4rem; }
@media (min-width: 48rem) { .diensten { grid-template-columns: 1fr 1fr; } }
.dienst h3 { margin-bottom: .45em; }
.dienst h3::before {
  content: ""; display: block; width: 2.5rem; height: 2px; background: var(--goud); margin-bottom: 1rem;
}
.dienst p { color: var(--walnoot); }
.dienst ul { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--walnoot); }
.dienst li { margin-bottom: .2rem; }

/* ---------- Tarievenkaart (donker paneel) ---------- */
.tarieven { background: var(--mokka); color: var(--licht); }
.tarieven h2, .tarieven h3 { color: var(--licht); }
.tarieven .intro p { color: var(--licht-zacht); }
.tarieven a { color: var(--goud); }
.kaart-grid { display: grid; gap: 3rem 4.5rem; }
@media (min-width: 56rem) { .kaart-grid { grid-template-columns: 1.1fr 1fr; } }
.kaart h3 { padding-bottom: .7rem; border-bottom: 1px solid var(--goud); margin-bottom: 1.1rem; }

.prijslijst { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.prijslijst li { display: flex; align-items: baseline; gap: .6rem; padding: .42rem 0; }
.prijslijst .naam { flex: 0 1 auto; }
.prijslijst .stip { flex: 1 1 1.5rem; border-bottom: 1px dotted rgba(212, 183, 126, .75); transform: translateY(-.3em); min-width: 1.5rem; }
.prijslijst .prijs { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--licht); }
.prijslijst .toelichting { display: block; font-size: .88rem; color: var(--licht-zacht); }

.massagetabel { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.massagetabel th, .massagetabel td { text-align: left; padding: .55rem .4rem .55rem 0; border-bottom: 1px dotted rgba(212, 183, 126, .6); font-weight: 400; }
.massagetabel thead th { color: var(--licht-zacht); font-size: .9rem; }
.massagetabel td { color: var(--licht); }
.massagetabel th:last-child, .massagetabel td:last-child { text-align: right; padding-right: 0; }
.kaart-noot { font-size: .92rem; color: var(--licht-zacht); }
.tarieven .invullen { background: #8A6E5E; color: #FFF1D6; border-bottom-color: var(--goud); }

/* ---------- Over Asha ---------- */
.over-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) { .over-grid { grid-template-columns: .8fr 1.2fr; } }
.kenmerken { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.kenmerken li { padding: .6rem 0 .6rem 1.4rem; border-top: 1px solid var(--leem); position: relative; }
.kenmerken li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .5rem; height: .5rem; background: var(--goud); border-radius: 50%; }

/* ---------- Reviews ---------- */
.score { display: flex; align-items: baseline; gap: 1rem; margin: -1rem 0 2.75rem; flex-wrap: wrap; }
.score-cijfer { font-family: var(--serif); font-size: 3.4rem; line-height: 1; }
.score-tekst { color: var(--walnoot); max-width: 22rem; font-size: .98rem; }
.reviews { columns: 1; column-gap: 3rem; }
@media (min-width: 44rem) { .reviews { columns: 2; } }
@media (min-width: 64rem) { .reviews { columns: 3; } }
.review { break-inside: avoid; margin: 0 0 2.25rem; padding-left: 1.25rem; border-left: 2px solid var(--goud); }
.review blockquote { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; }
.review figcaption { font-size: .9rem; color: var(--walnoot); }
.review-bron { margin-top: .5rem; font-size: .9rem; color: var(--walnoot); }

/* ---------- Afspraak ---------- */
.afspraak-grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 52rem) { .afspraak-grid { grid-template-columns: 1.3fr 1fr; } }
.boekmodule {
  background: var(--zand);
  border: 1px solid var(--leem);
  border-radius: var(--rond);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  min-height: 14rem;
}
.boekmodule p { color: var(--walnoot); }
.direct { list-style: none; padding: 0; margin: 0; }
.direct li { padding: 1rem 0; border-top: 1px solid var(--leem); }
.direct li:last-child { border-bottom: 1px solid var(--leem); }
.direct .label { display: block; font-size: .9rem; color: var(--walnoot); }
.direct a { font-family: var(--sans); font-weight: 600; font-size: 1.3rem; color: var(--omber); text-decoration: none; }
.direct a:hover { text-decoration: underline; }

/* ---------- Werkgebied & contact ---------- */
.plaatsen { display: grid; gap: 2rem 3rem; margin-bottom: 4rem; }
@media (min-width: 48rem) { .plaatsen { grid-template-columns: repeat(3, 1fr); } }
.plaats { padding-top: 1rem; border-top: 2px solid var(--goud); }
.plaats p { color: var(--walnoot); }

.contact-grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }
address { font-style: normal; }
.uren { border-collapse: collapse; width: 100%; max-width: 24rem; font-variant-numeric: tabular-nums; }
.uren th, .uren td { text-align: left; font-weight: 400; padding: .35rem 0; border-bottom: 1px solid var(--zand); }
.uren th { color: var(--walnoot); padding-right: 2rem; }
.uren .dicht td { color: var(--walnoot); }

/* ---------- Lokale pagina's ---------- */
.kruimel { font-size: .9rem; color: var(--walnoot); padding-top: 1.5rem; }
.kruimel a { color: var(--walnoot); }
.feitenrij { display: grid; gap: 1.5rem 3rem; margin-top: 2rem; }
@media (min-width: 48rem) { .feitenrij { grid-template-columns: repeat(3, 1fr); } }
.feit { padding-top: 1rem; border-top: 1px solid var(--leem); }
.feit strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin-bottom: .3rem; }
.feit span { color: var(--walnoot); font-size: .98rem; }
.tekst { max-width: 40rem; }
.tekst h2 { margin-top: 2.5rem; }
.tekst h2:first-child { margin-top: 0; }

/* ---------- Voet ---------- */
.voet { background: var(--mokka); color: var(--licht-zacht); padding: 3.5rem 0 2.5rem; font-size: .95rem; }
.voet a { color: var(--licht); }
.voet-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 48rem) { .voet-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.voet .merk-naam { color: var(--licht); }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: .35rem; }
.voet-onder { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(212, 183, 126, .45); font-size: .85rem; }
.voet .invullen { background: #8A6E5E; color: #FFF1D6; }

/* Foto bij elke behandeling */
.dienst .foto { margin-bottom: 1.5rem; }
.dienst .foto:has(img) + h3::before { display: none; }

/* Online agenda (Treatwell) */
.agenda-frame { width: 100%; height: 680px; border: 0; border-radius: var(--rond); background: #fff; display: block; }
.agenda-knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.agenda-noot { font-size: .88rem; margin-top: 1rem; }

/* Lege fotoplekken iets laten afsteken op een zandkleurige sectie */
.sectie-zand .foto { background: var(--kalksteen); }

/* Lokale pagina's: de drie feiten onder elkaar naast de foto */
.hero-grid .feitenrij { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 40rem) and (max-width: 51.99rem) { .hero-grid .feitenrij { grid-template-columns: repeat(3, 1fr); } }

/* Zodra er een echte foto in staat: geen binnenrand en kader meer */
.foto:has(img) { padding: 0; border: 0; background: none; }
.review time { color: var(--walnoot); opacity: .85; }

/* Algemene voorwaarden: rustige artikelkoppen */
.voorwaarden h2 { font-size: 1.4rem; margin-top: 2.25rem; margin-bottom: .5em; }

/* ---------- Lokale pagina's ---------- */
.twee-kolom { display: grid; gap: 2.5rem 4.5rem; }
@media (min-width: 52rem) { .twee-kolom { grid-template-columns: 1fr 1fr; } }
.twee-kolom p { color: var(--walnoot); }

.diensten-kort .dienst h3::before { display: block; }

/* Stappen: echte volgorde, dus genummerd */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 2rem 3rem; }
@media (min-width: 48rem) { .stappen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .stappen { grid-template-columns: repeat(4, 1fr); } }
.stappen li { counter-increment: stap; position: relative; padding-top: 3.4rem; }
.stappen li::before {
  content: counter(stap);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--goud-diep); color: var(--goud-diep);
  font-family: var(--serif); font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.stappen strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin-bottom: .35rem; }
.stappen span { color: var(--walnoot); }

/* Veelgestelde vragen */
.faq { max-width: 46rem; border-top: 1px solid var(--leem); }
.faq details { border-bottom: 1px solid var(--leem); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--serif); font-size: 1.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.5rem; color: var(--goud-diep); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.25rem; }
.faq details p { color: var(--walnoot); margin: 0; }

.knop-klein { padding: .6rem 1.1rem; font-size: .95rem; }
.hero-feiten a { color: var(--omber); }

/* Sfeerbeelden bij Over Asha */
.sfeer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.25rem; max-width: 28rem; }
.sfeer img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--rond); }

/* Persoonlijke tekst van Asha */
.bio { font-family: var(--serif); font-size: 1.22rem; line-height: 1.6; color: var(--omber); }

/* Lege fotoplekken tonen we niet: ze verschijnen vanzelf zodra er een foto in staat */
.foto:not(:has(img)) { display: none; }

/* Behandelingen: drie met foto naast elkaar, medische voetzorg als brede strook */
@media (min-width: 64rem) { .diensten:not(.diensten-kort) { grid-template-columns: repeat(3, 1fr); gap: 2.75rem 3rem; } }
.dienst-breed {
  grid-column: 1 / -1;
  background: var(--kalksteen);
  border-radius: var(--rond);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; gap: .5rem 3rem;
}
@media (min-width: 48rem) { .dienst-breed { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.dienst-breed ul { margin: 2.6rem 0 0; }
@media (max-width: 47.99rem) { .dienst-breed ul { margin-top: 0; } }

/* Drie klachten uitgelicht in de brede strook */
.klachten { margin: 0; display: grid; gap: 1.1rem; }
.klachten div { padding-left: 1rem; border-left: 2px solid var(--goud); }
.klachten dt { font-family: var(--serif); font-size: 1.15rem; margin-bottom: .2rem; }
.klachten dd { margin: 0; color: var(--walnoot); }

/* Waarvoor kun je bij Asha terecht */
.waarvoor { margin: 0; display: grid; gap: 2rem 2.5rem; }
@media (min-width: 44rem) { .waarvoor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .waarvoor { grid-template-columns: repeat(4, 1fr); } }
.waarvoor div { border-top: 2px solid var(--goud); padding-top: 1rem; }
.waarvoor dt { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .35rem; }
.waarvoor dd { margin: 0; color: var(--walnoot); font-size: 1rem; }
.waarvoor-noot { margin-top: 2.5rem; color: var(--walnoot); }