/* ============================== */
/*  Voet & Beauty Pure – Styles   */
/* ============================== */

/* ---------- Vars & base ---------- */
:root{
  --ink:#6e655f;
  --muted:#9a8f86;
  --brand:#b9a596;
  --brand-2:#e9e1da;
  --bg:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.02);
  --radius:18px;
}

*{ box-sizing:border-box }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
a{ color:var(--ink); text-decoration:none }
a:hover{ opacity:.85 }
.container{ max-width:1200px; margin-inline:auto; padding:clamp(7px,1.5vw,12px) }
.muted{ color:var(--muted) }

/* Typografie */
h2,h3,h4{ font-size:clamp(20px,2.8vw,28px); margin:.35rem 0 .55rem }
p, ul, ol{ margin-block:.5rem .85rem }
p + ul { margin-top:.25rem }
ul{ padding-left:1.1rem }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #f0ece8;
  backdrop-filter:saturate(160%) blur(8px);
}
header.site .nav-wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
}
.nav-left,.nav-right{ display:flex; gap:18px; flex-wrap:wrap }
.nav-left{ justify-content:flex-end }
.nav-right{ justify-content:flex-start }
.logo{ display:flex; align-items:center; gap:10px; justify-self:center }
.logo img{ max-width:100px; width:100%; height:auto }

/* Compact bij scroll */
header.site.compact .nav-wrap{ padding-block:6px; gap:6px }
header.site.compact .logo img{ max-height:34px }
header.site.compact .nav-left a,
header.site.compact .nav-right a{ padding-block:2px; font-size:13px }

/* ---------- Hero band ---------- */
.hero-band{ position:relative }
.band{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.band img{ width:100%; height:min(56vh,350px); object-fit:cover }

/* ---------- Content ---------- */
section{ padding:4px 0 }
.grid{ display:grid; gap:10px }
.split-2{ grid-template-columns:1fr 1fr }
@media (max-width:980px){ .split-2{ grid-template-columns:1fr } }

.card{
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); margin:0; padding:12px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; border:0;
  background:#a38b7a; color:#fff; font-weight:700;
  box-shadow:var(--shadow); cursor:pointer;
}
.btn:hover{ filter:brightness(1.05) }
.btn.outline{ background:#fff; color:var(--ink); outline:1px solid #e7e0db }

/* ---------- Team ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px; align-items:stretch;
}
.team-card{
  padding:18px; text-align:center;
  display:flex; flex-direction:column; height:100%;
  --member-brand:#a38b7a;
  --member-tint: color-mix(in oklab, var(--member-brand) 18%, white);
  border-top:4px solid var(--member-brand);
}
.team-card img{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; margin:0 auto 10px;
  box-shadow:0 0 0 4px var(--member-tint), var(--shadow);
}
.role{ color:var(--muted); font-size:14px }
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--member-tint); font-size:12px; margin-bottom:14px;
}
.team-card :is(p,div):has(.btn){ margin-top:auto }
.team-card .btn{ background:var(--member-brand) }
.team-card .btn.outline{ background:#fff; color:var(--member-brand); outline-color:var(--member-brand) }

/* ---------- Footer ---------- */
footer{
  background:#faf8f6; border-top:1px solid #f0ece8; margin-top:30px;
}
.footer-grid{
  display:grid; gap:20px; grid-template-columns:1fr 1fr 1fr; align-items:start;
}
.foot-list{
  list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--muted);
}
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr } }

/* ---------- Mobile nav ---------- */

/* verberg mobiele drawer standaard */
.mobile-drawer{ display:none }
.mobile-drawer .mobile-nav{ display:none }

.hamburger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  border:1px solid #e7e0db; background:#fff; box-shadow:var(--shadow);
}
.hamburger span{
  display:block; width:18px; height:2px; background:var(--ink); position:relative;
}
.hamburger span::before,.hamburger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
}
.hamburger span::before{ top:-6px }
.hamburger span::after{ top:6px }

/* ===== MOBIEL: logo midden, hamburger rechts ===== */
@media (max-width:800px){
  body.no-scroll{ overflow:hidden }

  /* Desktop-navigatie verbergen op mobiel */
  .nav-left, .nav-right { display:none !important }

  /* Header grid met vaste gebieden */
  header.site .nav-wrap{
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:"left logo right";
    align-items:center; gap:12px;
  }

  /* Logo exact in het midden */
  .logo{
    grid-area:logo;
    justify-self:center;
  }
  .logo img{
    max-width:120px; width:100%; height:auto;
  }

  /* Hamburger rechts */
  .hamburger{
    grid-area:right;
    justify-self:end;
    display:inline-flex !important;
    position:relative;
    z-index:10;
  }

  header.site{ transition:transform .28s ease, box-shadow .28s ease }

  /* Overlay */
  header.site::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.34);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1;
  }
  header.site.is-open::after{ opacity:1 }

  /* Drawer actief */
  .mobile-drawer{
    display:grid;
    position:fixed; inset:0;
    grid-template-columns:1fr min(86vw,340px);
    background:rgba(0,0,0,.34);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:9998;
    pointer-events:none;
  }
  .mobile-drawer.is-open{
    transform:translateX(0);
    pointer-events:auto;
  }
  .mobile-drawer .drawer-close{
    grid-column:1; grid-row:1;
    width:100%; height:100%; border:0; background:transparent; cursor:pointer;
  }
  .mobile-drawer .mobile-nav{
    display:flex;
    grid-column:2; grid-row:1;
    background:#fff; color:var(--ink);
    padding:18px; flex-direction:column; gap:14px;
    box-shadow:var(--shadow);
  }
  .mobile-drawer .mobile-nav a{
    font-weight:600; padding:8px 6px; border-radius:10px;
  }
  .mobile-drawer .mobile-nav a:hover{ background:var(--brand-2) }
  .mobile-drawer .mobile-nav .cta{
    background:var(--ink); color:#fff; text-align:center; border-radius:999px;
    padding:12px 16px; font-weight:800;
  }
  .mobile-drawer .mobile-nav .tel{
    border:1px solid #e7e0db; text-align:center; border-radius:999px;
    padding:12px 16px; font-weight:700;
  }
}

/* ---------- Slider (optioneel) ---------- */
.slider{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); background:#000 }
.slides{ display:flex; will-change:transform; transition:transform .5s ease }
.slide{ min-width:100%; position:relative; aspect-ratio:21/9; display:grid; place-items:end start }
.slide img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:auto; height:auto; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; z-index:10000; background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:12px; box-shadow:var(--shadow);
}
:where(a,button,input,select,textarea):focus{ outline:2px solid var(--brand); outline-offset:2px }

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#ede9e6; --muted:#b7ada5; --brand:#bba99b; --brand-2:#2a2623;
    --bg:#151311; --shadow:0 10px 28px rgba(0,0,0,.35);
  }
  body{ background:#151311; color:#ede9e6 }
  header.site{ background:#1c1917; border-bottom:1px solid #2a2623 }
  .card{ background:#1c1917; box-shadow:var(--shadow) }
  .btn{ background:#a38b7a; color:#141313 }
  .btn.outline{ background:#1c1917; color:var(--ink); outline:1px solid #3a332e }
  .mobile-drawer .mobile-nav{ background:#1c1917; color:var(--ink) }
  .mobile-drawer .mobile-nav a:hover{ background:#2a2623 }
}

/* --- Contactformulier --- */
.contact-card{ padding:clamp(16px,2.5vw,24px) }
.contact-form .field{ margin:12px 0 }
.contact-form label{ display:block; font-weight:600; margin:0 0 6px }
.form-input{
  width:100%; padding:14px 16px; border:1px solid #e7e0db; border-radius:14px;
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease; font:inherit;
}
.form-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
textarea.form-input{ min-height:140px; resize:vertical }
.btn-gradient{
  display:block; width:100%; border:0; border-radius:14px;
  padding:14px 18px; font-weight:800; color:#fff; cursor:pointer;
  background:#a38b7a; box-shadow:var(--shadow);
}
.btn-gradient:hover{ filter:brightness(1.04) }
.btn-gradient:active{ transform:translateY(1px) }

/* === Behandelingen: tekst + foto naast elkaar === */

.card h2{ margin:.2rem 0 .45rem }
.card p.lead{ margin:0 0 .35rem; color:var(--muted) }
/* al aanwezig, maar voor zekerheid: */
.card p + ul{ margin-top:.25rem }

/* Split layout */
.card-split{
  display:grid;
  grid-template-columns:1fr 1fr; /* tekst | foto (of andersom met .reverse) */
  align-items:center;            /* centreert tekst verticaal naast de foto */
  gap:20px;
}

/* Foto rechts op desktop wanneer .reverse is gezet */
.card-split.reverse .card-img{ order:2 }
.card-split.reverse .card-content{ order:1 }

/* Afbeelding begrenzen zodat hij de tekst niet wegduwt */
.card-split .card-img{
  width:100%;
  max-height:420px;              /* pas aan naar wens (bv. 360–480px) */
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:block;
}

/* Lijsten iets compacter binnen content */
.card-split .card-content ul{
  margin:.35rem 0 .6rem;
  padding-left:1.1rem;
}

/* Knoppenrij onder de tekst */
.card-split .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:.35rem;
}

/* Stacking op mobiel + natuurlijke leesvolgorde */
@media (max-width:800px){
  .card-split{ grid-template-columns:1fr }
  .card-split .card-img{ max-height:none; height:auto }
  .card-split.reverse .card-img,
  .card-split.reverse .card-content{ order:initial }
}

/* (optioneel) iets lagere heldhoogte op deze pagina */
.hero-band .band img{ height:min(48vh,300px) }