/* ==========================================================================
   Pedicuresalon Margreet van Hartskamp
   Ontwerp: diep pine-groen, groen-getint chalkwit, duifblauw accent.
   Signatuur: de boog (arch). Typografie bewust groot: het publiek is 60+.
   ========================================================================== */

:root {
  /* Kleur */
  --ink:         #1e2b26;
  --ink-soft:    #4a5b54;
  --paper:       #f6f7f3;
  --paper-warm:  #ede9df;
  --white:       #ffffff;
  --pine:        #2f5d50;
  --pine-deep:   #23473d;
  --sage:        #9db5a4;
  --sage-light:  #cfdcd0;
  --blue:        #4f7f91;
  --blue-deep:   #3c6674;
  --line:        #dcdfd6;

  /* Typografie */
  --font-display: "Signika", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.9375rem;
  --step-0:  1.1875rem;   /* 19px basis, bewust groot */
  --step-1:  1.375rem;
  --step-2:  1.6875rem;
  --step-3:  2.125rem;
  --step-4:  2.75rem;
  --step-5:  clamp(2.5rem, 1.6rem + 3.6vw, 4rem);

  /* Ruimte */
  --gap:      1.25rem;
  --gap-lg:   2.5rem;
  --section:  clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --measure:  62ch;
  --radius:   14px;
  --arch:      999px 999px 14px 14px;  /* de signatuur, voor hoge smalle panelen */
  /* Op een brede kaart lost 999px op naar de halve kaartbreedte, dus groeit de
     koepel mee en loopt de titel er dwars doorheen. Een vaste straal begrenst
     hoe ver de boog naar binnen komt, ongeacht de kaartbreedte. */
  --arch-card: 140px 140px 14px 14px;

  --shadow: 0 1px 2px rgba(30, 43, 38, .05), 0 12px 28px -18px rgba(30, 43, 38, .3);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pine); text-underline-offset: .18em; }
a:hover { color: var(--blue-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--pine-deep);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: var(--white);
  padding: .9rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, 1140px); margin-inline: auto; }
/* De balk blijft bovenaan staan, dus een anker moet eronder uitkomen. */
[id] { scroll-margin-top: 8rem; }
.section { padding-block: var(--section); }
.section--tint { background: var(--paper-warm); }
.section--pine { background: var(--pine-deep); color: var(--sage-light); }
.section--pine h2, .section--pine h3 { color: var(--white); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 .8rem;
}
.section--pine .eyebrow { color: var(--sage); }
.lead { font-size: var(--step-1); color: var(--ink-soft); }
.section--pine .lead { color: var(--sage-light); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 247, 243, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 76px; padding-block: .6rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.2;
  color: var(--pine-deep); text-decoration: none; margin-right: auto;
}
.brand__mark {
  width: 34px; height: 40px; flex: none;
  background: var(--pine); border-radius: var(--arch);
  position: relative;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 8px 8px 0;
  background: var(--sage); border-radius: 999px 999px 3px 3px;
}
/* Alleen de plaatsnaam onder de bedrijfsnaam, niet elke span in .brand. */
.brand__text > span { display: block; font-size: .78rem; font-weight: 400; color: var(--blue-deep); letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.0625rem; text-decoration: none; color: var(--ink);
  padding: .6rem .7rem; border-radius: 8px;
}
.nav a:hover { background: var(--sage-light); color: var(--pine-deep); }
.nav a[aria-current="page"] { color: var(--pine); box-shadow: inset 0 -3px 0 var(--blue); }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  background: var(--white); color: var(--pine-deep);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .9rem; min-height: 52px; cursor: pointer;
}
.nav-toggle b { display: block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }

/* --- Knoppen -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 56px; padding: .8rem 1.5rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--call { background: var(--pine); color: var(--white); }
.btn--call:hover { background: var(--pine-deep); color: var(--white); }
.btn--mail { background: var(--white); color: var(--pine-deep); border-color: var(--sage); }
.btn--mail:hover { background: var(--sage-light); color: var(--pine-deep); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--sage); }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--white); }
.btn--sm { min-height: 48px; font-size: 1rem; padding: .6rem 1.1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

.header-call {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pine); color: var(--white); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  padding: .7rem 1.15rem; border-radius: 999px; min-height: 52px;
  white-space: nowrap;
}
.header-call:hover { background: var(--pine-deep); color: var(--white); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--section); }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; grid-template-columns: 1.05fr .95fr; }
.hero p.lead { max-width: 46ch; }

/* De boog: signatuurvorm, met CSS getekend zodat er geen nepfoto nodig is. */
.arch {
  position: relative; border-radius: var(--arch); overflow: hidden;
  background: linear-gradient(170deg, var(--sage-light) 0%, var(--sage) 55%, var(--pine) 100%);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
.arch::before {
  content: ""; position: absolute; inset: 14px; border-radius: var(--arch);
  border: 1px solid rgba(255, 255, 255, .45);
}
.arch__note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(to top, rgba(35, 71, 61, .92), rgba(35, 71, 61, 0));
  color: var(--white); font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.35;
}
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: 2.5rem;
}
.trust div { background: var(--paper); padding: 1.1rem 1.2rem; }
.trust strong { display: block; font-family: var(--font-display); color: var(--pine-deep); font-size: 1.0625rem; }
.trust span { font-size: var(--step--1); color: var(--ink-soft); }

/* --- Kaarten -------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-lg); margin-top: 2.5rem; }
.card {
  background: var(--white); border: 1px solid var(--line);
  /* Bovenmarge houdt de titel onder de welving van de boog. */
  border-radius: var(--arch-card); padding: 4.5rem 1.9rem 2rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); }
.card ul { padding-left: 1.15rem; margin: 0 0 1.2rem; color: var(--ink-soft); }
.card li { margin-bottom: .3rem; }
.card .card__cta { margin-top: auto; padding-top: .6rem; font-family: var(--font-display); font-weight: 600; }

/* --- Stappen (de behandeling is echt een volgorde) ------------------------ */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.steps li { counter-increment: step; background: var(--paper); padding: 1.15rem 1.4rem 1.15rem 4.2rem; position: relative; max-width: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 1.3rem; top: 1.15rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--pine); color: var(--white);
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  display: grid; place-items: center;
}
.section--tint .steps li { background: var(--white); }

/* --- Citaat --------------------------------------------------------------- */
.quote { text-align: center; }
.quote blockquote {
  margin: 0 auto; max-width: 20ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--white);
}
.quote cite { display: block; margin-top: 1.4rem; font-style: normal; color: var(--sage); font-size: var(--step-0); }

/* --- Prose / FAQ ---------------------------------------------------------- */
.prose { max-width: var(--measure); }
/* Als .prose op hetzelfde element zit als .wrap, zou margin-inline:auto de
   smalle kolom midden op de pagina zetten, uit lijn met de rest. Container op
   volle breedte houden en in plaats daarvan de kinderen beperken. */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: var(--measure); }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }

.facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.facts li {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--sage);
  border-radius: 4px var(--radius) var(--radius) 4px; padding: 1.1rem 1.3rem; max-width: none;
  color: var(--ink-soft);
}

.faq { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--pine-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 1rem;
  font-size: 1.7rem; color: var(--blue); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p, .faq details > ul { margin-bottom: 1.3rem; color: var(--ink-soft); }

/* --- Contact -------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr 1fr; align-items: start; }
.nap { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.nap li { margin-bottom: 1.1rem; max-width: none; }
.nap strong { display: block; font-family: var(--font-display); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); }
.nap a, .nap span { font-size: var(--step-1); color: var(--pine-deep); font-family: var(--font-display); font-weight: 600; }
.section--pine .nap strong { color: var(--sage); }
.section--pine .nap a, .section--pine .nap span { color: var(--white); }

.map-link { display: block; text-decoration: none; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.map-link img { width: 100%; }
.map-link span { display: block; padding: 1rem 1.2rem; font-family: var(--font-display); font-weight: 600; color: var(--pine-deep); }
.map-link:hover span { background: var(--sage-light); }
.map-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--sage-light); color: var(--pine-deep); font-family: var(--font-display); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--pine-deep); color: var(--sage-light); padding-block: var(--section) 2.5rem; }
.site-footer a { color: var(--white); }
.site-footer h2, .site-footer h3 { color: var(--white); font-size: var(--step-1); }
/* De NAP-blokken staan hier op een donkere ondergrond en hebben eigen kleuren nodig. */
.site-footer .nap strong { color: var(--sage); }
.site-footer .nap a, .site-footer .nap span { color: var(--white); }
.footer-grid { display: grid; gap: var(--gap-lg); grid-template-columns: 1.3fr 1fr 1fr; }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: .5rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(207, 220, 208, .25);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: var(--step--1); color: var(--sage);
}
.footer-bottom a { color: var(--sage-light); }

/* --- Broodkruimels -------------------------------------------------------- */
.crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-top: 1.6rem; }
.crumbs a { color: var(--blue-deep); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--sage); }

/* --- Beweging ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover { transform: none; }
}

/* --- Responsief ----------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .arch { max-width: 420px; order: -1; }
  .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, 1fr); }
}

/* De volledige balk heeft naam, zeven links en het telefoonnummer naast elkaar
   nodig. Onder ongeveer 1040px past dat niet meer en gaan de links over twee
   regels breken, dus daar klapt het menu in. */
@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .95rem .6rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
}

@media (max-width: 780px) {
  .header-call span { display: none; }
  .brand__text { font-size: .95rem; }
  .brand__text > span { display: none; }
}

@media (max-width: 520px) {
  :root { --step-0: 1.125rem; }
  .wrap { width: min(100% - 2rem, 1140px); }
  .btn { width: 100%; }
  .trust { grid-template-columns: 1fr; }
  .quote blockquote { font-size: var(--step-3); max-width: none; }
}