/* ============================================
   CreaNails — merkpalet (roze → lavendel, branding)
   Mobile-first, Hostinger-ready static site
   ============================================ */

:root {
  /* Decoratieve merkkleuren — rechtstreeks uit het logo gemeten.
     Alleen voor vlakken, lijnen en accenten: zet hier nooit tekst op,
     daarvoor zijn --color-link en --color-brand-mauve bedoeld. */
  --color-brand-rose: #de95ac;        /* het woord "Crea" */
  --color-brand-rose-light: #eeb6c6;  /* de roze bloesems */
  --color-brand-lilac: #af93bd;       /* het woord "Nails" */
  --color-brand-lilac-deep: #8e739e;  /* donkerste paars in het logo */

  /* Leesbare varianten van dezelfde kleuren.
     Elke waarde hieronder haalt minstens 4,5:1 tegen de achtergrond
     waarop hij gebruikt wordt (WCAG AA voor gewone tekst). */
  --color-brand-mauve: #6f6280;         /* 5,4:1 op wit — labels, footer-kopjes */
  --color-link: #6b5a94;                /* 6,0:1 op wit — links in lopende tekst */

  /* Verloop van de hoofdknop: wit blijft leesbaar over de volle lengte
     (5,0:1 → 5,6:1 → 6,0:1) in plaats van de eerdere 1,8:1. */
  --gradient-btn: linear-gradient(135deg, #a4586d 0%, #8e5578 45%, #6b5a94 100%);
  --color-bg: #fff8fa;
  --color-bg-alt: #fdf6f9;
  --color-white: #ffffff;
  --color-paper: #faf4f7;
  --color-pastel: #fceef4;
  --color-pastel-mid: #f3e4ee;
  --color-pastel-lilac: #f0eaf5;
  --color-sand: #ebe4e8;
  --color-stone: #cfc4d0;
  --color-accent: var(--color-brand-rose);
  --color-accent-deep: #b86b82;
  --color-accent-soft: #efd8e4;
  --color-accent-wash: rgba(217, 145, 165, 0.2);
  --color-border: rgba(26, 26, 26, 0.07);
  --color-border-rose: rgba(217, 145, 165, 0.28);
  --color-text: #1a1a1a;
  --color-text-muted: #5a535f;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 10px 36px rgba(165, 148, 194, 0.09), 0 4px 14px rgba(217, 145, 165, 0.06);
  --shadow-hover: 0 18px 48px rgba(165, 148, 194, 0.14), 0 8px 20px rgba(26, 26, 26, 0.05);
  --header-h: 72px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

/* Pastel: roze + vleug lavendel (merkgradient) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 85% 70% at 50% -15%, rgba(252, 238, 245, 0.92) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 100% 25%, rgba(232, 224, 245, 0.5) 0%, transparent 52%),
    var(--color-bg);
  pointer-events: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-text);
}

/* Links in lopende tekst onderstrepen: kleur alleen is te weinig
   houvast voor wie kleuren slecht onderscheidt. */
p a,
li a,
dd a,
address a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.06em;
}

/* Zichtbare focus op alles wat je met het toetsenbord kunt bereiken. */
:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sla de navigatie over — verschijnt zodra je erheen tabt. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--color-white);
  color: var(--color-text);
  border: 2px solid var(--color-link);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

#main:focus {
  outline: none;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin-top: 0;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

.lead {
  font-size: 1.125rem;
  max-width: 36rem;
}

/* ---------- Layout ---------- */
.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.section--tight {
  padding-top: 2rem;
}

.section-showcase {
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.section-showcase h2 {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 249, 252, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-rose);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-block: 0.35rem;
  gap: 1rem;
}

/* Header-logo: het bloemmerk uit het logo naast het woordmerk.
   Het volledige logo is bijna vierkant en zou in een balk van 72px
   onleesbaar klein worden; die versie staat daarom in de hero. */
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.logo__mark {
  width: clamp(34px, 8vw, 42px);
  height: auto;
  flex-shrink: 0;
}

.logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.logo:hover .logo__name {
  opacity: 0.88;
}

.logo__name {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 3.2vw, 1.52rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--color-text);
  transition: opacity var(--transition);
}

.logo__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-brand-rose), var(--color-brand-lilac));
}

.logo__sub {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-brand-mauve);
  line-height: 1;
}

/* Mobile nav toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--color-text);
  background: linear-gradient(135deg, var(--color-pastel-mid) 0%, var(--color-pastel-lilac) 100%);
}

@media (max-width: 767px) {
  .nav-wrap {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    /* Dekkend paneel: een blur eronder zie je toch niet en kost frames */
    background: #fffafc;
    padding: 1rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }

  .nav-wrap.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 768px) {
  .nav-wrap {
    display: block !important;
  }

  .nav {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--gradient-btn);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  filter: brightness(1.03);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  color: var(--color-link);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-link);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--color-pastel);
  border-color: var(--color-border-rose);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 10vw, 6rem) 0 clamp(4rem, 9vw, 5.5rem);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-alt) 100%);
}

/* Met het logo in de hero is er geen aparte gloed nodig: de
   pastelachtergrond zit al in het logo zelf. */
.hero--logo {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
  /* #fefbfc is exact de randkleur van logo.png. Door de hero daarmee
     te laten beginnen valt de rand van de afbeelding weg in de
     achtergrond in plaats van als lichte rechthoek op te vallen. */
  background: linear-gradient(180deg, #fefbfc 0%, #fefbfc 68%, var(--color-bg-alt) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.hero__content {
  text-align: center;
  max-width: 38rem;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

/* De h1 bevat het logo als afbeelding; de alt-tekst is de kop. */
.hero__title {
  margin: 0 0 1rem;
  line-height: 0;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.1s;
}

.hero__logo {
  width: min(30rem, 88%);
  height: auto;
  margin-inline: auto;
}

.hero .lead {
  margin-inline: auto;
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.36s;
}

.hero__cta {
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.5s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Cards & grids ---------- */
.card {
  background: linear-gradient(165deg, #ffffff 0%, var(--color-pastel) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border-rose);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.grid-2 {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.grid-3 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Inhoudsblok (editoriaal) ---------- */
.content-block {
  background: linear-gradient(165deg, #ffffff 0%, var(--color-paper) 55%, var(--color-pastel-mid) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--color-border-rose);
  box-shadow: var(--shadow-soft);
}

/* ---------- Gallery placeholders ---------- */
.gallery-item {
  /* Nagelfoto's zijn vrijwel altijd staand; een liggende uitsnede
     zou het werk half wegsnijden. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border-rose);
}

.gallery-item--neutral {
  background: linear-gradient(145deg, #faf6f7 0%, #f0e8eb 50%, #e5d9dd 100%);
}

.gallery-item--sand {
  background: linear-gradient(155deg, #f3e8e4 0%, #e8d9d4 45%, #dcc9c2 100%);
}

.gallery-item--blossom {
  background: linear-gradient(160deg, #fdeef3 0%, #e8c8d8 40%, #d4b8e0 100%);
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  pointer-events: none;
}

.gallery-item span {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* ---------- Services list (expandable) ---------- */
.service-card {
  margin-bottom: 1.5rem;
}

.service-card:last-child {
  margin-bottom: 0;
}

.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.service-meta strong {
  color: var(--color-text);
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 1px solid var(--color-border-rose);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-brand-lilac);
  box-shadow: 0 0 0 3px rgba(165, 148, 194, 0.2);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* Honeypot — hidden from users */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.alert--success {
  background: rgba(200, 230, 210, 0.5);
  border: 1px solid rgba(120, 180, 140, 0.4);
  color: #2d4a35;
}

.alert--error {
  background: rgba(248, 215, 218, 0.6);
  border: 1px solid rgba(200, 100, 110, 0.35);
  color: #5c2a30;
}

/* ---------- Booking ---------- */
.booking-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .booking-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
}

.slot-btn {
  padding: 0.65rem 0.5rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-rose);
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 253, 0.95);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.slot-btn:hover:not(:disabled) {
  background: var(--color-pastel);
  border-color: var(--color-accent-soft);
}

.slot-btn.is-selected {
  background: var(--gradient-btn);
  color: var(--color-white);
  border-color: transparent;
  font-weight: 600;
}

.slot-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.booking-summary {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
}

.booking-confirmation {
  padding: 2rem;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-pastel) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-rose);
  box-shadow: var(--shadow-soft);
}

.booking-confirmation:not([hidden]) {
  animation: fadeUp 0.6s ease;
}

.booking-confirmation:focus {
  outline: none;
}

.confirmation-ref {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.confirmation-ref strong {
  color: var(--color-text);
  letter-spacing: 0.08em;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  padding: 0 0 2.75rem;
  border-top: none;
  background: linear-gradient(180deg, var(--color-pastel-mid) 0%, var(--color-pastel) 42%, var(--color-paper) 100%);
}

/* Zachte golf: overgang van main naar footer */
.site-footer__wave {
  line-height: 0;
  margin-top: -2px;
}

.site-footer__wave-svg {
  display: block;
  width: 100%;
  height: clamp(44px, 7vw, 64px);
}

.site-footer__main {
  padding-top: 0.25rem;
}

.site-footer__grid {
  display: grid;
  gap: 2.25rem 2.5rem;
  padding: 0.5rem 0 2rem;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.site-footer__blossom {
  margin-bottom: 0.65rem;
  opacity: 0.92;
}

.site-footer__blossom img {
  display: block;
  width: 52px;
  height: auto;
}

.footer-wordmark {
  margin: 0;
  text-align: left;
}

.footer-wordmark__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.footer-wordmark__sub {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-mauve);
}

.site-footer__tagline {
  margin: 0.85rem 0 0;
  max-width: 22rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.site-footer__heading {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-mauve);
}

.site-footer__cta-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Wat lucht tussen de openingstijden en de knop eronder */
.footer-hours + .site-footer__cta-text {
  margin-top: 1.25rem;
}

.btn--footer {
  padding: 0.7rem 1.5rem;
  font-size: 0.875rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
}

.footer-nav--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.footer-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.footer-nav a:hover {
  color: var(--color-link);
}

.site-footer__bottom {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-rose);
}

.site-footer__bottom-rule {
  display: block;
  width: 5rem;
  height: 2px;
  margin: 0 auto 1.15rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-brand-rose), var(--color-brand-lilac));
}

.site-footer__legal {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.site-footer__credit {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.site-footer__heart {
  color: var(--color-accent-deep);
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.05em;
}

.site-footer__credit a {
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.06em;
}

.site-footer__credit a:hover {
  color: var(--color-text);
}

@media (max-width: 767px) {
  .site-footer__brand-block {
    text-align: center;
  }

  .footer-wordmark {
    text-align: center;
  }

  .site-footer__blossom img {
    margin-inline: auto;
  }

  .site-footer__tagline {
    margin-inline: auto;
  }

  .site-footer__links,
  .site-footer__cta-block,
  .site-footer__contact-block {
    text-align: center;
  }

  .footer-contact,
  .footer-social {
    align-items: center;
    justify-content: center;
  }

  .footer-nav--stack {
    align-items: center;
  }

  .btn--footer {
    margin-inline: auto;
  }
}

/* Iets meer lucht vóór de footer */
main > .section:last-of-type {
  padding-bottom: clamp(3.25rem, 7vw, 5rem);
}

/* Decoratieve merkstreep (o.a. Over-pagina) */
.section-rule {
  width: 3.5rem;
  height: 3px;
  margin: -0.25rem auto 1rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-brand-rose), var(--color-brand-lilac));
}

/* ---------- Page header ---------- */
.page-header {
  padding: clamp(2.5rem, 6vw, 4rem) 0 1rem;
  text-align: center;
}

.page-header p {
  max-width: 32rem;
  margin-inline: auto;
}

/* ---------- Utilities ---------- */
.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Main flex for sticky footer */
.layout {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout main,
.layout .site-footer {
  position: relative;
  z-index: 1;
}

.layout main {
  flex: 1;
}

/* Kersenbloesemtak: absolute t.o.v. .layout → scrollt mee; boven main (z-index 1), onder sticky header (100) */
.layout__flourish {
  display: none;
  position: absolute;
  top: 4.25rem;
  width: clamp(158px, 19vw, 310px);
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 6px 22px rgba(140, 95, 120, 0.22));
}

.layout__flourish img {
  width: 100%;
  height: auto;
  display: block;
}

.layout__flourish--right img {
  transform: scaleX(-1);
}

@media (min-width: 640px) {
  .layout__flourish {
    display: block;
  }

  .layout__flourish--left {
    left: 0;
    right: auto;
    transform: translateX(-14%);
  }

  .layout__flourish--right {
    right: 0;
    left: auto;
    transform: translateX(14%);
  }
}

@media (min-width: 1100px) {
  .layout__flourish {
    top: 4.5rem;
    width: clamp(175px, 17vw, 340px);
  }

  .layout__flourish--left {
    left: max(0rem, calc(50% - min(560px, 46vw) - clamp(64px, 7.5vw, 118px)));
    right: auto;
    transform: translateX(-48%);
  }

  .layout__flourish--right {
    right: max(0rem, calc(50% - min(560px, 46vw) - clamp(64px, 7.5vw, 118px)));
    left: auto;
    transform: translateX(48%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout__flourish {
    filter: none;
  }
}

/* Scroll reveal (optional enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Toevoegingen: kalender, formulierfeedback,
   contactgegevens en toegankelijkheidsvangnetten
   ============================================ */

/* Het hidden-attribuut moet altijd winnen, ook van display:grid/flex. */
[hidden] {
  display: none !important;
}

/* ---------- Kleine layout-hulpjes ---------- */
.stack-top {
  margin-top: 1.25rem;
}

.muted-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.section--flush-top {
  padding-top: 0;
}

/* ---------- Hero met twee knoppen ---------- */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- Galerij met echte foto's ---------- */
.gallery-item {
  margin: 0;
  background: var(--color-pastel);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Het glanslaagje hoort bij de lege placeholders (div), niet over
   een echte foto heen (figure). */
figure.gallery-item::after {
  content: none;
}

/* ---------- Boekingsstappen ---------- */
.booking-step h2 {
  font-size: 1.35rem;
}

/* ---------- Kalender ---------- */
.cal {
  margin-top: 0.5rem;
}

.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.cal__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  text-transform: capitalize;
  text-align: center;
  flex: 1;
}

.cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border-rose);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.cal__nav:hover:not(:disabled) {
  border-color: var(--color-link);
  color: var(--color-link);
}

.cal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.cal__weekdays {
  margin-bottom: 0.35rem;
}

.cal__weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cal__grid.is-loading {
  opacity: 0.5;
}

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  aspect-ratio: 1;
  min-height: 44px;
  padding: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

/* Dagen zonder vrije momenten: zichtbaar maar niet aanklikbaar. */
.cal__day.is-off {
  color: var(--color-stone);
}

.cal__day--filler {
  border: none;
}

/* Wél te boeken: een echte knop, dus ook met het toetsenbord bereikbaar. */
.cal__day--open {
  background: var(--color-white);
  border-color: var(--color-border-rose);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.cal__day--open:hover {
  background: var(--color-pastel);
  border-color: var(--color-link);
}

.cal__day--open.is-selected {
  background: var(--gradient-btn);
  border-color: transparent;
  color: var(--color-white);
}

.cal__num {
  line-height: 1.1;
}

.cal__free {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.cal__day--open.is-selected .cal__free {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.cal__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cal__legend-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 5px;
  background: var(--color-white);
  border: 1px solid var(--color-border-rose);
}

/* ---------- Formulierfeedback ---------- */
.req {
  color: var(--color-accent-deep);
}

.optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #8c2f38;
}

/* Uitroepteken vóór de melding, zodat een fout niet alleen aan
   kleur te herkennen is. */
.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.45em;
  vertical-align: -0.2em;
  border-radius: 50%;
  background: #8c2f38;
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1;
}

.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
  border-color: #b04a53;
  box-shadow: 0 0 0 3px rgba(176, 74, 83, 0.14);
}

.form-error {
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  background: rgba(248, 215, 218, 0.6);
  border: 1px solid rgba(176, 74, 83, 0.4);
  color: #5c2a30;
  font-size: 0.95rem;
}

/* ---------- Contactpagina ---------- */
.contact-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.contact-aside h3 {
  margin-top: 1.5rem;
  font-size: 1.05rem;
}

.contact-details {
  font-style: normal;
  margin: 0 0 1rem;
}

.contact-details__line {
  margin: 0 0 0.35rem;
}

/* ---------- Openingstijden ---------- */
.hours-list,
.footer-hours {
  margin: 0;
  font-size: 0.9rem;
}

.hours-list__row,
.footer-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
}

.hours-list__row:last-child,
.footer-hours__row:last-child {
  border-bottom: none;
}

.hours-list dt,
.footer-hours dt {
  color: var(--color-text);
  font-weight: 500;
}

.hours-list dd,
.footer-hours dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---------- Footer: contact en sociale links ---------- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-style: normal;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}

.footer-contact__line {
  color: var(--color-text-muted);
}

a.footer-contact__line:hover {
  color: var(--color-link);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.9rem;
}

.site-footer__heading--spaced {
  margin-top: 1.5rem;
}

/* ---------- Vangnetten ---------- */

/* Windows-contrastmodus: een gekozen dag of tijdstip moet herkenbaar
   blijven, anders zie je niet meer wat je geselecteerd hebt. */
@media (forced-colors: active) {
  .cal__day--open.is-selected,
  .slot-btn.is-selected {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .skip-link {
    border-color: CanvasText;
  }
}