/*
Theme Name: Kapsalon Zeist Child
Theme URI: https://kapsalonzeist.nl
Description: Child theme voor Kapsalon Zeist, gebaseerd op Astra.
Author: Bhaja
Template: astra
Version: 1.0.0
Text Domain: kapsalon-zeist-child
*/

:root{
  --paper:#F1EAD9;
  --paper-2:#E6DBC3;
  --ink:#211A14;
  --ink-soft:#6B5D4C;
  --accent:#7C2632;
  --accent-2:#C6893F;
  --line:rgba(33,26,20,0.14);
  --card:#FBF7EE;
  --shadow: 0 1px 2px rgba(33,26,20,0.06);
  --font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:'Work Sans', 'Segoe UI', sans-serif;
}

/* Deze homepage-template rendert los van Astra's eigen header/footer,
   dus we resetten hier bewust in plaats van op Astra's stijlen te bouwen. */
.ksz-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
}
.ksz-page *{box-sizing:border-box;}
.ksz-page img{max-width:100%;display:block;}
.ksz-page a{color:inherit;}
.ksz-page h1,.ksz-page h2,.ksz-page h3{font-family:var(--font-display);font-weight:800;letter-spacing:0.01em;text-wrap:balance;margin:0;}
.ksz-wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.ksz-eyebrow{
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--accent);font-weight:600;
}
.ksz-btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:2px;
  font-family:var(--font-body);font-weight:600;font-size:0.95rem;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.ksz-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;}
.ksz-btn.ksz-btn-primary{background:var(--accent);color:#FBF7EE;}
.ksz-btn.ksz-btn-primary:hover{transform:translateY(-1px);}
.ksz-btn.ksz-btn-ghost{border-color:var(--ink);color:var(--ink);}
.ksz-btn.ksz-btn-ghost:hover{background:var(--ink);color:var(--paper);}

/* header */
.ksz-header{
  position:sticky;top:0;z-index:20;
  background:rgba(241,234,217,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.ksz-nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px;}
.ksz-logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);}
.ksz-logo-mark{flex-shrink:0;display:block;}
.ksz-logo-top{font-size:1.5rem;font-weight:800;letter-spacing:0.01em;line-height:1;}
.ksz-nav-links{display:flex;gap:30px;font-size:0.94rem;font-weight:500;}
.ksz-nav-links a{text-decoration:none;position:relative;padding:4px 0;}
.ksz-nav-links a:hover{color:var(--accent);}
@media (max-width:820px){ .ksz-nav-links{display:none;} }

/* stripe divider */
.ksz-stripe{
  height:14px;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 18px, var(--accent-2) 18px 36px, transparent 36px 40px);
  opacity:0.9;
}

/* hero */
.ksz-hero{padding:76px 0 64px;}
.ksz-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
@media (max-width:900px){ .ksz-hero-grid{grid-template-columns:1fr;} }
.ksz-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:0.96;margin:14px 0 22px;}
.ksz-hero h1 em{font-style:normal;color:var(--accent);}
.ksz-hero p.ksz-lead{max-width:46ch;color:var(--ink-soft);font-size:1.08rem;margin:0 0 30px;}
.ksz-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;}

.ksz-hero-art{
  position:relative;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%, var(--paper-2), transparent 68%);
}
.ksz-hero-art svg{width:78%;height:78%;}

/* sections */
.ksz-section{padding:78px 0;}
.ksz-section-head{max-width:56ch;margin-bottom:42px;}
.ksz-section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:10px;}

/* services */
.ksz-services-group{margin-bottom:44px;}
.ksz-services-group:last-child{margin-bottom:0;}
.ksz-services-label{font-size:1.05rem;font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);margin-bottom:6px;}
.ksz-services{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.ksz-service-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.ksz-service-name{font-weight:600;font-size:1.06rem;}
.ksz-service-price{font-family:var(--font-display);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* gallery */
.ksz-gallery-rows{display:flex;flex-direction:column;gap:14px;}
.ksz-gallery-grid{display:grid;gap:14px;}
.ksz-gallery-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.ksz-gallery-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .ksz-gallery-grid.cols-4, .ksz-gallery-grid.cols-3{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .ksz-gallery-grid.cols-4, .ksz-gallery-grid.cols-3{grid-template-columns:repeat(2,1fr);} }
.ksz-shot{
  position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--ink);
}
.ksz-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ksz-shot::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(0deg, rgba(0,0,0,0.55), transparent 48%);
}
.ksz-shot-tag{position:relative;z-index:1;color:#FBF7EE;font-size:0.78rem;font-weight:600;padding:12px 14px;letter-spacing:0.02em;}

/* about */
.ksz-about-grid{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;}
@media (max-width:640px){ .ksz-about-grid{grid-template-columns:1fr;} }
.ksz-portrait{
  width:168px;height:168px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 200deg, #8A5A3A, #7C2632, #C6893F, #8A5A3A);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:#FBF7EE;text-align:center;
}
.ksz-about-text p{color:var(--ink-soft);max-width:60ch;}
.ksz-about-text h3{font-size:1.5rem;margin-bottom:6px;}

/* booking */
.ksz-booking{background:var(--paper-2);}
.ksz-booking-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;}
@media (max-width:900px){ .ksz-booking-grid{grid-template-columns:1fr;} }
.ksz-hours-table{width:100%;border-collapse:collapse;margin-top:22px;}
.ksz-hours-table td{padding:7px 0;border-bottom:1px solid var(--line);font-size:0.94rem;}
.ksz-hours-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);}
.ksz-book-card{
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:30px;box-shadow:var(--shadow);
}

/* footer */
.ksz-footer{border-top:1px solid var(--line);padding:52px 0 36px;}
.ksz-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;}
@media (max-width:700px){ .ksz-footer-grid{grid-template-columns:1fr;} }
.ksz-footer h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-soft);margin:0 0 14px;font-weight:600;}
.ksz-footer address{font-style:normal;color:var(--ink-soft);line-height:1.8;}
.ksz-foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.82rem;color:var(--ink-soft);}