/* ============================================================
   Stem & Klank – Logopedie Website  |  style.css
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --p:       #4a9b8e;
  --p-dark:  #2d7a6d;
  --p-light: #e8f5f3;
  --accent:  #e07b54;
  --bg:      #fafaf8;
  --bg-lt:   #f4f7f6;
  --bg-teal: #e6f4f1;
  --bg-teal-dark: #2d7a6d;
  --text:    #2c3e35;
  --text-lt: #5a7068;
  --white:   #ffffff;
  --border:  #d4e6e1;

  --ff-head: 'Playfair Display', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;

  --sp: clamp(3.5rem, 7vw, 6rem);  /* section padding */
  --gap: 1.75rem;
  --r:  12px;
  --rl: 20px;

  --sh-sm: 0 2px 8px  rgba(44,62,53,.08);
  --sh-md: 0 6px 24px rgba(44,62,53,.12);
  --sh-lg: 0 12px 40px rgba(44,62,53,.15);
  --ease: .22s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; scroll-padding-top: 68px; }
body  { font-family: var(--ff-body); color: var(--text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
img   { display: block; max-width: 100%; }
ul    { list-style: none; }
a     { color: var(--p-dark); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--accent); }

/* ── Layout helpers ────────────────────────────────────────── */
.container { width: min(1180px, 92%); margin-inline: auto; }
.section   { padding-block: var(--sp); }
.bg-light      { background: var(--bg-lt); }
.bg-teal       { background: var(--bg-teal); }
.bg-teal-dark  { background: var(--bg-teal-dark); color: var(--white); }

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--ff-head); line-height: 1.25; color: var(--text); }
h1 { font-size: clamp(2rem,5vw,3.4rem); font-weight:700; }
h2 { font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight:700; }
h3 { font-size: clamp(1.05rem,2vw,1.35rem); font-weight:700; }
h4 { font-size:1rem; font-weight:600; }
h1 em, h2 em { font-style:italic; color:var(--p); }
.bg-teal-dark h2,
.bg-teal-dark h3 { color:var(--white); }

.section-header { text-align:center; max-width:660px; margin:0 auto clamp(2rem,5vw,3.5rem); }
.section-header.light .eyebrow { color:rgba(255,255,255,.7); }
.eyebrow { display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--p); margin-bottom:.5rem; }
.section-intro { font-size:1rem; color:var(--text-lt); margin-top:.8rem; }
.bg-teal-dark .section-intro { color:rgba(255,255,255,.8); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn { display:inline-block; padding:.8em 1.9em; border-radius:50px; font-family:var(--ff-body); font-weight:500; font-size:.93rem; cursor:pointer; transition:all var(--ease); border:2px solid transparent; }
.btn-primary { background:var(--p); color:var(--white); border-color:var(--p); }
.btn-primary:hover { background:var(--p-dark); border-color:var(--p-dark); color:var(--white); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-outline { background:transparent; color:var(--p-dark); border-color:var(--p); }
.btn-outline:hover { background:var(--p); color:var(--white); }
.btn-nav { background:var(--p); color:var(--white)!important; padding:.48em 1.3em; border-radius:50px; font-weight:500; font-size:.88rem; transition:background var(--ease); }
.btn-nav:hover { background:var(--p-dark); color:var(--white)!important; }

/* ── Image placeholders ────────────────────────────────────── */
.img-placeholder {
  background:var(--p-light); border:2px dashed var(--border); border-radius:var(--rl);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:var(--p-dark); text-align:center; font-size:.82rem;
}
.ph-icon { font-size:2.6rem; line-height:1; }
.img-placeholder.large   { min-height:380px; width:100%; }
.img-placeholder.medium  { min-height:320px; width:100%; }
.img-placeholder.portrait { width:100%; aspect-ratio:3/4; border-radius:var(--rl) var(--rl) 0 0; }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,250,248,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); transition:box-shadow var(--ease);
}
header.scrolled { box-shadow:var(--sh-sm); }

/* Push main content below fixed header */
main { padding-top: 68px; }

.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; gap:1rem; }

.logo { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.logo-mark { width:42px; height:42px; border-radius:10px; background:var(--p); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; }
.logo-mark.small { width:34px; height:34px; font-size:.82rem; }
.logo-text { display:flex; flex-direction:column; line-height:1.2; }
.logo-name { font-family:var(--ff-head); font-weight:700; font-size:1.05rem; color:var(--text); }
.logo-sub  { font-size:.65rem; color:var(--text-lt); letter-spacing:.05em; }

.main-nav ul { display:flex; align-items:center; gap:clamp(.4rem,1.8vw,1.4rem); }
.main-nav a  { font-size:.87rem; font-weight:500; color:var(--text); padding:.3em 0; position:relative; }
.main-nav a:not(.btn-nav)::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--p); transition:width var(--ease); }
.main-nav a:not(.btn-nav):hover::after { width:100%; }
.main-nav a:not(.btn-nav):hover { color:var(--p-dark); }

.nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; }
/* Desktop: nav always visible */
@media (min-width: 701px) {
  .main-nav { display:block !important; }
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .28s, opacity .28s; }
.nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative; overflow:hidden;
  padding-top: clamp(2rem,6vw,5rem);
  padding-bottom: clamp(3rem,8vw,6rem);
  background:var(--bg);
  margin-top:0;
}

@media (max-width: 700px) {
  .hero { padding-top: 1.8rem; }
}
.hero-bg-shape {
  position:absolute; top:0; right:-8%; width:52vw; height:100%;
  background:radial-gradient(ellipse at 60% 40%, var(--p-light) 0%, transparent 68%);
  pointer-events:none; z-index:0;
}
.hero-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  position:relative; z-index:1;
}
/* Explicit order so CSS never fights DOM order */
.hero-text  { order:1; }
.hero-image { order:2; }
.hero-photo {
  width:100%; border-radius:var(--rl);
  box-shadow:var(--sh-lg);
  object-fit:cover;
  max-height:480px;
}

.hero-eyebrow { font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--p); margin-bottom:.9rem; }
.hero h1 { margin-bottom:1.1rem; }
.hero-lead { font-size:1rem; color:var(--text-lt); margin-bottom:1.8rem; max-width:500px; }
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-contact-strip { display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.84rem; color:var(--text-lt); padding-top:1.4rem; border-top:1px solid var(--border); }
.hero-contact-strip a { color:var(--p-dark); font-weight:500; }

/* ============================================================
   SERVICES STRIP
   ============================================================ */
.services-strip { background:var(--white); box-shadow:var(--sh-md); position:relative; z-index:2; }
.services-strip-inner { display:grid; grid-template-columns:repeat(3,1fr); }
.service-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.5rem; border-right:1px solid var(--border); color:inherit; transition:background var(--ease); }
.service-card:last-child { border-right:none; }
.service-card:hover { background:var(--p-light); }
.service-icon { font-size:2rem; margin-bottom:.7rem; }
.service-card h3 { font-size:1.08rem; margin-bottom:.35rem; }
.service-card p  { font-size:.84rem; color:var(--text-lt); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap); }
.team-card { background:var(--white); border-radius:var(--rl); overflow:hidden; box-shadow:var(--sh-sm); transition:box-shadow var(--ease),transform var(--ease); }
.team-card:hover { box-shadow:var(--sh-md); transform:translateY(-4px); }
.team-photo { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; display:block; }
.team-info { padding:1.4rem; }
.team-info h3 { margin-bottom:.2rem; }
.team-role { font-size:.78rem; color:var(--p); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.8rem; }
.team-info p { font-size:.88rem; color:var(--text-lt); }

/* ============================================================
   CONTENT CARDS (Logopedie)
   ============================================================ */
.content-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap); margin-bottom:2.5rem; }
.content-card { background:var(--white); border-radius:var(--r); padding:1.8rem; box-shadow:var(--sh-sm); border-left:4px solid var(--p); transition:box-shadow var(--ease); }
.content-card:hover { box-shadow:var(--sh-md); }
.content-icon { font-size:1.8rem; margin-bottom:.7rem; }
.content-card h3 { margin-bottom:.7rem; }
.content-card p  { font-size:.89rem; color:var(--text-lt); margin-bottom:.9rem; }
.content-card ul { list-style:disc; padding-left:1.1rem; font-size:.84rem; color:var(--text-lt); display:flex; flex-direction:column; gap:.3rem; }
.section-cta { text-align:center; background:var(--p-light); border-radius:var(--rl); padding:2.2rem; }
.section-cta p { font-size:.98rem; margin-bottom:1.1rem; color:var(--text-lt); }

/* ============================================================
   TWO-COLUMN
   ============================================================ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.two-col.reverse .two-col-image { order:2; }
.two-col.reverse .two-col-text  { order:1; }
.two-col-text h2 { margin-bottom:.9rem; }
.two-col-text h3 { margin-top:1.3rem; margin-bottom:.6rem; font-size:1.05rem; }
.two-col-text p  { color:var(--text-lt); font-size:.93rem; margin-bottom:.7rem; }
.two-col-text .btn { margin-top:.8rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:.45rem; margin:.7rem 0 .9rem; }
.tag { background:var(--white); border:1px solid var(--border); border-radius:50px; padding:.28em .85em; font-size:.78rem; font-weight:500; color:var(--p-dark); }
.benefit-list { display:flex; flex-direction:column; gap:.35rem; margin:.7rem 0 .9rem; font-size:.9rem; color:var(--text-lt); }

/* ============================================================
   WERKING – STEPS
   ============================================================ */
.steps { display:flex; align-items:flex-start; gap:.8rem; flex-wrap:wrap; margin-bottom:3.5rem; justify-content:center; }
.step { background:var(--white); border-radius:var(--r); padding:1.8rem 1.4rem; flex:1 1 180px; max-width:220px; box-shadow:var(--sh-sm); text-align:center; transition:box-shadow var(--ease); }
.step:hover { box-shadow:var(--sh-md); }
.step-number { font-family:var(--ff-head); font-size:2.2rem; font-weight:700; color:var(--p-light); -webkit-text-stroke:2px var(--p); margin-bottom:.7rem; }
.step h3 { font-size:.95rem; margin-bottom:.6rem; }
.step p  { font-size:.82rem; color:var(--text-lt); }
.step-arrow { font-size:1.6rem; color:var(--border); align-self:center; flex-shrink:0; }
.practical-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap); }
.practical-card { background:var(--white); border-radius:var(--r); padding:1.8rem; box-shadow:var(--sh-sm); }
.practical-card h3 { font-size:1rem; margin-bottom:.7rem; }
.practical-card p  { font-size:.86rem; color:var(--text-lt); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
.contact-info h3,
.contact-form-wrap h3 { color:var(--white); margin-bottom:1.2rem; font-size:1.2rem; }

/* Pill-style contact info */
.contact-pills { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.4rem; }
.contact-pill {
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:50px; padding:.55em 1.1em;
  color:rgba(255,255,255,.9); font-size:.88rem; font-weight:500;
  transition:background var(--ease);
  text-decoration:none;
}
.contact-pill:hover { background:rgba(255,255,255,.22); color:var(--white); }
.contact-pill.no-link { cursor:default; }
.contact-pill.no-link:hover { background:rgba(255,255,255,.12); }
.contact-pill span:first-child { font-size:1.05rem; flex-shrink:0; }

/* Map – static card */
.map-link {
  display:block; border-radius:var(--r); overflow:hidden;
  margin-bottom:1.2rem; text-decoration:none;
}
.map-static {
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r);
  padding:1.2rem 1.4rem;
  display:flex; flex-direction:column; gap:.4rem;
  transition:background var(--ease);
}
.map-link:hover .map-static { background:rgba(255,255,255,.22); }
.map-pin  { font-size:1.6rem; }
.map-text { color:rgba(255,255,255,.92); font-size:.92rem; line-height:1.5; }
.map-text strong { color:#fff; }
.map-cta  { font-size:.78rem; font-weight:600; color:rgba(255,255,255,.6); margin-top:.2rem; letter-spacing:.04em; }

.social-links { display:flex; gap:.7rem; }
.social-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; transition:background var(--ease); }
.social-btn:hover { background:rgba(255,255,255,.3); color:#fff; }

/* Form */
.contact-form-wrap { background:rgba(255,255,255,.08); border-radius:var(--rl); padding:clamp(1.4rem,3vw,2.2rem); border:1px solid rgba(255,255,255,.15); }
.contact-form { display:flex; flex-direction:column; gap:.9rem; }

/* Two fields side by side on desktop */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }

.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label { font-size:.82rem; font-weight:500; color:rgba(255,255,255,.9); }
.form-group input,
.form-group select,
.form-group textarea {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  border-radius:8px; padding:.7em .95em;
  font-family:var(--ff-body); font-size:.9rem; color:#fff; width:100%;
  transition:border-color var(--ease),background var(--ease); outline:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,.38); }
.form-group select option { background:var(--p-dark); color:#fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.15); }
.form-group textarea { resize:vertical; }

.form-check { flex-direction:row!important; align-items:flex-start; gap:.7rem; }
.form-check input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; margin-top:.22rem; accent-color:var(--accent); }
.form-check label { font-size:.78rem; color:rgba(255,255,255,.8); }
.form-check a { color:rgba(255,255,255,.85); text-decoration:underline; }

.contact-form .btn-primary { background:var(--accent); border-color:var(--accent); align-self:flex-start; margin-top:.3rem; }
.contact-form .btn-primary:hover { background:#c56640; border-color:#c56640; color:#fff; }
.contact-form .btn-primary:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.form-success { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); border-radius:var(--r); padding:1.4rem; color:#fff; font-size:.96rem; text-align:center; }

/* ============================================================
   PRIVACY BAR (compact)
   ============================================================ */
.privacy-bar { background:var(--bg-lt); padding:1.2rem 0; border-top:1px solid var(--border); }
.privacy-bar p { font-size:.8rem; color:var(--text-lt); max-width:800px; }
.privacy-bar a { color:var(--p-dark); text-decoration:underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--text); color:rgba(255,255,255,.72); padding-top:3.5rem; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .logo-mark { margin-bottom:.9rem; }
.footer-tagline { font-family:var(--ff-head); font-style:italic; font-size:1rem; color:rgba(255,255,255,.9); margin-bottom:.7rem; }
.footer-brand p { font-size:.85rem; line-height:1.8; }
.footer-brand a { color:rgba(255,255,255,.7); }
.footer-brand a:hover { color:#fff; }
.footer-nav h4 { font-family:var(--ff-body); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.1rem; }
.footer-nav ul { display:flex; flex-direction:column; gap:.55rem; }
.footer-nav a  { font-size:.85rem; color:rgba(255,255,255,.62); transition:color var(--ease); }
.footer-nav a:hover { color:#fff; }
.footer-bottom { padding:1.1rem 0; }
.footer-bottom .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.38); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top { position:fixed; bottom:1.8rem; right:1.8rem; width:42px; height:42px; border-radius:50%; background:var(--p); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; text-decoration:none; opacity:0; pointer-events:none; transition:opacity var(--ease),transform var(--ease),background var(--ease); box-shadow:var(--sh-md); z-index:50; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover   { background:var(--p-dark); color:#fff; transform:translateY(-3px); }

/* ============================================================
   RESPONSIVE – TABLET (≤ 960px)
   ============================================================ */
@media (max-width: 960px) {

  /* ── Hero: TEXT top, IMAGE below ─── */
  .hero-content { grid-template-columns:1fr; }
  .hero-text    { order:1; }
  .hero-image   { order:2; max-width:460px; margin:0 auto; }

  /* Services: stack */
  .services-strip-inner { grid-template-columns:1fr; }
  .service-card { border-right:none; border-bottom:1px solid var(--border); }
  .service-card:last-child { border-bottom:none; }

  /* Two-col: stack */
  .two-col { grid-template-columns:1fr; }
  .two-col.reverse .two-col-image { order:0; }
  .two-col.reverse .two-col-text  { order:0; }

  /* Contact: stack */
  .contact-grid { grid-template-columns:1fr; }

  /* Footer: 2-col */
  .footer-inner { grid-template-columns:1fr 1fr; gap:2rem; }
}

/* ============================================================
   RESPONSIVE – MOBILE (≤ 700px)
   ============================================================ */
@media (max-width: 700px) {

  /* Show hamburger */
  .nav-toggle { display:flex; }

  /* Slide-down mobile nav - use display none so it takes no space when closed */
  .main-nav {
    display:none;
    position:fixed; top:68px; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--border);
    padding:1.2rem 1.5rem; box-shadow:var(--sh-lg);
    z-index:99;
  }
  .main-nav.open { display:block; }
  .main-nav ul { flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav li { width:100%; }
  .main-nav a  { display:block; padding:.8rem 0; border-bottom:1px solid var(--border); width:100%; font-size:.95rem; }
  .main-nav li:last-child a { border-bottom:none; }
  .main-nav .btn-nav { background:none; color:var(--p-dark)!important; border-radius:0; padding:.8rem 0; }

  /* Form rows: stack on mobile */
  .form-row { grid-template-columns:1fr; }

  /* Steps: vertical */
  .steps { flex-direction:column; align-items:center; }
  .step  { max-width:100%; }
  .step-arrow { transform:rotate(90deg); }

  /* Hero actions stack */
  .hero-actions { flex-direction:column; }
  .hero-contact-strip { flex-direction:column; gap:.4rem; }

  /* Footer single col */
  .footer-inner { grid-template-columns:1fr; gap:1.5rem; }
  .footer-bottom .container { flex-direction:column; text-align:center; }
}

/* ── Extra small ────────────────────────────────────────────── */
@media (max-width: 460px) {
  .content-grid   { grid-template-columns:1fr; }
  .practical-grid { grid-template-columns:1fr; }
  .team-grid      { grid-template-columns:1fr; }
}