/* ============================================================
   Kapsalon Jacqueline — client-theme.css
   Brand: warm rosé-champagne + near-black + cream
   Typography: Cormorant Garamond (display) + Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Brand palette ───────────────────────────────────── */
  --brand:       #C4896A;       /* warm terracotta-rosé */
  --brand-rgb:   196, 137, 106;
  --brand-2:     #9C5E41;       /* deeper sienna */
  --brand-2-rgb: 156, 94, 65;
  --accent:      #E8C9B0;       /* light champagne cream */
  --accent-rgb:  232, 201, 176;

  /* ── Canvas / surfaces ───────────────────────────────── */
  --canvas:      #FDFAF7;       /* warm off-white */
  --surface:     #F5EDE5;       /* blush beige */

  /* ── Text ────────────────────────────────────────────── */
  --ink:         #1C1410;       /* deep near-black (warm) */
  --muted:       #7A6357;       /* warm taupe */

  /* ── Fonts ───────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Radii — soft but not bubbly ─────────────────────── */
  --radius-m:    6px;
  --radius-l:    10px;
}

/* ── Hero heading override — elegant serif italic ───────── */
.hero-full__heading {
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ── Hero: stronger gradient scrim for nav + CTA legibility */
.hero-full::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.25) 35%,
    rgba(0,0,0,0.35) 65%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-full__content { position: relative; z-index: 2; }
.hero-full__scroll   { position: relative; z-index: 2; }

/* ── Eyebrow label tweak ─────────────────────────────────── */
.eyebrow {
  letter-spacing: 0.12em;
  font-weight: 500;
  font-size: var(--step--2);
}

/* ── Hero CTA buttons — full width stacked on mobile ─────── */
@media (max-width: 520px) {
  .hero-full__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m);
  }
  .hero-full__actions .btn {
    text-align: center;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Services card grid — dark variant accent ────────────── */
.card-grid.--dark .card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
}

/* ── Story section italic subheading ─────────────────────── */
.story__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--brand);
}

/* ── Testimonial quote — Cormorant ───────────────────────── */
.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.7;
}

/* ── CTA band — override eyebrow colour ──────────────────── */
.cta-band .eyebrow {
  color: rgba(255,255,255,0.7);
}

/* ── Gallery header eyebrow ──────────────────────────────── */
.gallery .eyebrow {
  color: rgba(255,255,255,0.55);
}

/* ── Footer brand colour on logo ─────────────────────────── */
.site-footer__logo {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* ── Nav logo brand ──────────────────────────────────────── */
.site-nav__logo {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ── Contact section background ─────────────────────────── */
.contact-section {
  background: var(--surface);
}

/* ── Stat numbers — brand colour ─────────────────────────── */
.story__stat-number {
  color: var(--brand);
}

/* ── Services section (features) — light surface ─────────── */
.services-section {
  background: var(--surface);
}

/* ── Prijslijst table ────────────────────────────────────── */
.prijslijst {
  background: var(--canvas);
  padding-block: var(--section-pad);
}

.prijslijst__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prijslijst__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3xl) var(--space-4xl);
  margin-top: var(--space-3xl);
}

.prijslijst__category h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--brand);
  border-bottom: 1px solid var(--accent);
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-l);
}

.prijslijst__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-xs);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: var(--step--1);
  color: var(--ink);
}

.prijslijst__item span:last-child {
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  margin-left: var(--space-m);
}

@media (max-width: 720px) {
  .prijslijst__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ── Openingstijden inline block ─────────────────────────── */
.openingstijden {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-l);
  font-size: var(--step--1);
  color: var(--ink);
  margin-top: var(--space-l);
}

.openingstijden .day {
  font-weight: 500;
  color: var(--muted);
}

.openingstijden .gesloten {
  color: var(--muted);
  font-style: italic;
}

/* ── Contact grid responsive ─────────────────────────────── */
@media (max-width: 720px) {
  .contact-section [style*="grid-template-columns:1fr 1fr"] {
    display: block !important;
  }
  .contact-section [style*="grid-template-columns:1fr 1fr"] > * + * {
    margin-top: var(--space-3xl);
  }
}

/* ── Ensure contact section inner column reads well ─────── */
.contact-section .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Contact 2-col grid ──────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  margin-top: var(--space-3xl);
  align-items: start;
}

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ── Gallery card image aspect ratio — wider, not so tall ── */
.card-grid--dark .card__image-wrap {
  aspect-ratio: 4 / 3;
}
.card-grid--dark .card--featured .card__image-wrap {
  aspect-ratio: 16 / 10;
}

/* ── Gallery cards on mobile — cap height ────────────────── */
@media (max-width: 520px) {
  .card-grid--dark .card__image-wrap img {
    max-height: 220px;
    object-fit: cover;
    width: 100%;
  }
}

/* ── Mobile nav logo — slightly larger ───────────────────── */
@media (max-width: 520px) {
  .site-nav__logo {
    font-size: var(--step-0);
  }
}

/* ── CTA band mobile — button spacing ────────────────────── */
@media (max-width: 520px) {
  .cta-band__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
  }
  .cta-band__actions .btn {
    min-height: 52px;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
  }
}