/* Le Mustache — Tiensestraat 129, Leuven */

@font-face {
  font-family: "Young Serif";
  src: url("../assets/fonts/YoungSerif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../assets/fonts/WorkSans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Handschrift uit het logo: Learning Curve Bold (Blue Vinyl Fonts), vrij voor commercieel gebruik.
   Licentie: assets/fonts/LearningCurve-LICENSE.txt (versie 4.000, gedownload op 22 oktober 2026).
   Zoals in het logo 1,3 keer breder gezet met 0,02 em extra letterafstand, ingebakken in het
   lettertype zelf ("Learning Curve Breed"). Zo ziet elk stukje handschrift eruit als het logo. */
@font-face {
  font-family: "Learning Curve Breed";
  src: url("../assets/fonts/LearningCurveBreed-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1b1815;
  --ink-soft: #3a342e;
  --paper: #f4efe6;
  --paper-rgb: 244 239 230;
  --paper-deep: #e9e1d3;
  --wood: #9c5426;
  --wood-dark: #7f4320;
  --wood-light: #c7834f;
  --muted: #6d645b;
  --line: rgba(27, 24, 21, 0.16);
  --line-light: rgba(244, 239, 230, 0.18);
  --ok: #3e6330;
  --error: #a33a1f;
  --band: #9c5426;
  --band-icon: #1b1815;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Learning Curve Breed", "Segoe Script", cursive;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --header: 72px;

  /* Snor uit het logo als masker voor kleine iconen */
  --snor-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1164 341'%3E%3Cpath d='M212.4 340.5c-53.7-4.5 -118.4-28 -152-55.4c-34.2-27.8 -56.3-75.4 -60-129c-3-44.7 17.1-95.9 46.1-117.5c23.5-17.5 51.8-21.2 78.8-10.3c14.5 5.8 25.1 15 23.5 20.2c-.6 1.8 -2.4 1.7 -6.8-.5c-25.3-12.7 -51.5-6.7 -64.3 14.8c-13.7 23.1 -17 50.8 -9.4 79c9.8 36.5 47.3 39.3 100 7.6c11.3-6.8 38.3-24.4 81.7-53.2c55.1-36.4 68.5-45.2 81.9-53.6c44.1-27.4 72.7-38.3 108.6-41.7c25.8-2.4 63.1 4.6 83.5 15.7c11.3 6.2 31.5 19.2 42.3 27.2c12.5 9.3 11.2 9.3 23.2-.4c30.7-24.7 61.8-38.1 96.3-41.7c4.4-.4 8.7-1 9.7-1.3c1.9-.5 32.9-.3 36.3 .3c1 .2 4.9 .7 8.4 1.1c31.7 3.9 63.2 15.8 91.4 34.8c7.7 5.1 44.9 32.4 85.7 62.8c49.9 37.1 57.2 42.2 76.6 52.6c40.2 21.7 69.6 20.5 94.3-3.9c14.7-14.6 14.3-56.7 -.8-82.3c-18.8-31.8 -45.8-38.9 -68.1-17.8c-12.6 11.8 -16.9 9 -8.2-5.3c18.4-30.6 57.5-41.2 86.4-23.7c36 21.9 60.3 60.3 65 102.8c.3 3 .8 6.1 1.1 6.9c.5 1.9 .5 28.9 -.1 31.2c-.2 1 -.7 4 -1 6.6c-2.4 20 -9.4 42.2 -19.3 61.3c-24.9 48.1 -63.1 76.3 -132.4 98.1c-18 5.6 -28.5 7.2 -58.3 8.6c-34.4 1.6 -51.3 1.3 -87.7-1.7c-72.4-6 -173-40.5 -224.1-76.9c-11.8-8.4 -37.3-29.3 -47.2-38.6c-14.9-14.1 -13.4-14.3 -32.1 3.5c-14.2 13.5 -20.6 19.3 -27.9 25c-38.6 30.3 -120.7 64.9 -189 79.7c-55 11.9 -103.1 17.4 -132.1 15z'/%3E%3C/svg%3E");
  /* Open schaar, schuin naar rechtsboven gericht */
  --schaar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.5 -10 71 52'%3E%3Cmask id='m'%3E%3Crect x='-4' y='-10' width='72' height='52' fill='white'/%3E%3Ccircle cx='29.5' cy='16' r='1.2'/%3E%3C/mask%3E%3Cg mask='url(%23m)' transform='rotate(-20 32 16)'%3E%3Cg fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='5.6'/%3E%3Ccircle cx='9' cy='24' r='5.6'/%3E%3Cpath d='M14 10.6Q22 12.6 30 16M14 21.4Q22 19.4 30 16'/%3E%3C/g%3E%3Cpath d='M27.5 13.7Q47 8.2 63.5 12.4L31 17.3Z'/%3E%3Cpath d='M27.5 18.3Q47 23.8 63.5 19.6L31 14.7Z'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
/* <picture> kiest enkel het bestand; de img erin gedraagt zich alsof ze rechtstreeks in het kader staat */
picture { display: contents; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

::selection { background: var(--wood); color: var(--paper); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero .wrap > *,
.about .wrap > *,
.brunch .wrap > *,
.hair .wrap > *,
.visit .wrap > *,
.menu-cols > * { min-width: 0; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px; top: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
}

:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 3px;
}

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 18px;
}

.hand {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--wood);
  line-height: 1;
}

.snor-icon {
  display: inline-block;
  width: 1em;
  height: 0.3em;
  background: currentColor;
  -webkit-mask: var(--snor-mask) center / contain no-repeat;
  mask: var(--snor-mask) center / contain no-repeat;
}

/* Begintoestand voor animaties; alleen actief als motion.js geladen is */
.js-motion [data-hero],
.js-motion [data-fade] { visibility: hidden; }

/* ---------- Knoppen ---------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wood);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.45s var(--ease-out);
}
.btn--line { background: transparent; color: var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn .arrow { transition: transform 0.45s var(--ease-out); }

/* Hover-effecten enkel op toestellen met een muis, anders blijven ze hangen na een tik */
@media (hover: hover) {
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover { border-color: var(--wood); }
  .btn--line:hover { color: var(--paper); border-color: var(--ink); }
  .btn--light:hover { color: var(--paper); }
  .btn:hover .arrow { transform: translateX(4px); }
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn:disabled::before { display: none; }

.link {
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.45s var(--ease-out), color 0.2s;
}
.link:hover {
  color: var(--wood);
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgb(var(--paper-rgb) / 0);
  transition: transform 0.5s var(--ease-out), background 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  background: rgb(var(--paper-rgb) / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}
.brand svg { display: block; flex: none; }
/* Verhoudingen volgen de viewBox van het logo (snor 1164 × 341, woordmerk 1167 × 144) */
.brand-snor {
  width: 52px;
  height: 15px;
  transform-origin: 50% 40%;
}
.brand-woord {
  width: 203px;
  height: 25px;
}
.brand:hover .brand-snor { animation: twirl 0.9s var(--ease-out); }
@media (max-width: 380px) {
  .brand { gap: 10px; }
  .brand-snor { width: 41px; height: 12px; }
  .brand-woord { width: 170px; height: 21px; }
}

@keyframes twirl {
  0% { transform: rotate(0); }
  25% { transform: rotate(-10deg) scale(1.08); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}
.nav a,
.nav .btn { white-space: nowrap; }
.nav a:not(.btn) {
  text-decoration: none;
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}
.nav a:not(.btn):hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.nav .btn { padding: 10px 18px; font-size: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin-right: -8px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}

/* ---------- Hero ---------- */

.hero {
  padding: calc(var(--header) + clamp(40px, 7vw, 88px)) 0 clamp(64px, 9vw, 112px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero h1 { font-size: clamp(46px, 6.6vw, 88px); }
.hero h1 .accent { color: var(--wood); }

.hero-since {
  font-size: 38px;
  margin-bottom: 14px;
  display: inline-block;
  transform: rotate(-3deg);
}

.hero-text {
  max-width: 30em;
  margin: 28px 0 36px;
  color: var(--ink-soft);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a39a90;
  flex: none;
}
.status.is-open .status-dot { background: #4f7a3a; }
.status.is-open .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4f7a3a;
  animation: pulse 2.2s ease-out infinite;
}
.status.is-open strong { color: var(--ok); }

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

.hero-photo { position: relative; }
.hero-photo .frame {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}
/* Onderaan, onder het logo op het schoteltje; krimpt mee op kleine laptops, zodat het logo vrij blijft */
.hero-photo figcaption {
  position: absolute;
  right: -22px;
  bottom: -14px;
  background: var(--paper);
  padding: 12px 18px 10px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  transform: rotate(4deg);
  box-shadow: 0 10px 30px -12px rgba(27, 24, 21, 0.35);
}

/* Draaiende badge */
.badge {
  position: absolute;
  top: -54px;
  left: -54px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  z-index: 2;
  overflow: hidden;
}
.badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.badge-ring text {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: currentColor;
}
.badge-snor {
  width: 58px;
  height: 18px;
  color: var(--wood-light);
}

/* ---------- Info-balk ---------- */

.infobar {
  background: var(--ink);
  color: var(--paper);
}
.infobar .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.infobar .wrap > div {
  padding: 26px 0;
  font-size: 15px;
}
.infobar .wrap > div + div {
  border-left: 1px solid var(--line-light);
  padding-left: 32px;
}
.infobar b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wood-light);
  margin-bottom: 4px;
}
.infobar a { text-decoration: none; }
.infobar a:hover { color: var(--wood-light); }

/* ---------- Over ons ---------- */

.about {
  padding: clamp(80px, 11vw, 140px) 0;
}
.about .wrap {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.about h2 {
  font-size: clamp(34px, 3.8vw, 50px);
  margin-bottom: 28px;
}
.about p { color: var(--ink-soft); max-width: 32em; }
.about-note {
  margin-top: 28px;
  font-size: 38px;
  display: inline-block;
  transform: rotate(-2deg);
}

.about-photos { position: relative; }
.about-photos .main {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.about-photos .main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-photos .inset {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 34%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 8px solid var(--paper);
  box-shadow: 0 20px 40px -20px rgba(27, 24, 21, 0.45);
}
.about-photos .inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Tekstband ---------- */

.band {
  background: var(--band);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px) 0;
  white-space: nowrap;
}
.band-track {
  display: inline-flex;
  will-change: transform;
}
.band-set {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.band-set span {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  padding: 0 0.32em;
}
.band-set .hand {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(52px, 7.6vw, 108px);
  color: var(--paper);
}
.band-set .snor-icon {
  width: clamp(54px, 7vw, 96px);
  height: clamp(17px, 2.2vw, 30px);
  padding: 0;
  margin: 0 0.3em;
  color: var(--band-icon);
}

/* ---------- Menu ---------- */

.menu {
  background: var(--paper-deep);
  padding: clamp(80px, 11vw, 140px) 0;
}
.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  padding-bottom: 32px;
  position: relative;
}
.menu-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.js-motion .menu-head::after { transform: scaleX(var(--line-progress, 0)); }

.menu-head h2 { font-size: clamp(40px, 5vw, 64px); }
.menu-head p {
  max-width: 24em;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.menu-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: 48px;
}

.menu-col h3 {
  font-size: 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.menu-col h3 small {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 28px;
  color: var(--wood);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list li {
  position: relative;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.menu-list li > * {
  transition: transform 0.5s var(--ease-out);
}
.menu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 22px;
  height: 7px;
  background: var(--wood);
  -webkit-mask: var(--snor-mask) center / contain no-repeat;
  mask: var(--snor-mask) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-8px) rotate(-12deg);
  transition: opacity 0.3s, transform 0.5s var(--ease-out);
}
.menu-list li:hover > * { transform: translateX(32px); }
.menu-list li:hover::before { opacity: 1; transform: none; }

.menu-list strong {
  display: block;
  font-weight: 500;
  font-size: 16px;
}
.menu-list span {
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}
.menu-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.menu-price {
  font-style: normal;
  font-family: var(--serif);
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-photo {
  margin-top: 28px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.menu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-foot {
  margin-top: 48px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Brunch ---------- */

.brunch {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 11vw, 140px) 0;
  overflow: hidden;
}
.brunch .wrap {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 7vw, 104px);
  align-items: center;
}
.brunch-photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.brunch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brunch .eyebrow { color: var(--wood-light); }
.brunch h2 {
  font-size: clamp(40px, 5vw, 64px);
  margin-bottom: 28px;
}
.brunch p { color: rgba(244, 239, 230, 0.78); max-width: 30em; }
.brunch-call {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}
.brunch-call a {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  color: var(--paper);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, background-size 0.45s var(--ease-out);
}
.brunch-call a:hover {
  color: var(--wood-light);
  background-size: 0 1px;
  background-position: 100% 100%;
}

.brunch-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 36px 0 40px;
  padding: 24px 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.brunch-facts div {
  font-size: 14px;
  color: rgba(244, 239, 230, 0.7);
}
.brunch-facts strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  color: var(--paper);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kapsalon ---------- */

.hair {
  padding: clamp(80px, 11vw, 140px) 0;
  overflow: hidden;
}
.hair .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}
.hair h2 {
  font-size: clamp(38px, 4.6vw, 60px);
  margin-bottom: 26px;
}
.hair-intro p { color: var(--ink-soft); max-width: 30em; }
.hair-intro .btn { margin-top: 16px; }

.hair-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: stretch;
}

/* Kapperspaal */
.pole {
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pole-cap {
  width: 30px;
  height: 18px;
  background: var(--ink);
  border-radius: 15px 15px 3px 3px;
}
.pole-cap:last-child { border-radius: 3px 3px 15px 15px; }
.pole-body {
  flex: 1;
  width: 22px;
  min-height: 240px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: repeating-linear-gradient(
    -45deg,
    var(--wood) 0 12px,
    var(--paper) 12px 24px,
    var(--ink) 24px 36px,
    var(--paper) 36px 48px
  );
  background-size: 100% 68px;
  animation: pole 2.4s linear infinite;
}
@keyframes pole {
  to { background-position: 0 68px; }
}

.services-title {
  font-family: var(--serif);
  font-size: 26px;
  margin-bottom: 16px;
}
.services {
  list-style: none;
  margin: 0;
  padding: 0;
}
.services li { border-top: 1px solid var(--line); }
.services li:last-child { border-bottom: 1px solid var(--line); }
.services button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.services strong {
  font-weight: 500;
  font-size: 17px;
  transition: transform 0.5s var(--ease-out), color 0.2s;
}
.services em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 20px;
}
.services .go {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood);
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.services button:hover strong,
.services button:focus-visible strong { color: var(--wood); transform: translateX(6px); }
.services button:hover .go,
.services button:focus-visible .go { opacity: 1; transform: none; }

/* Twee scharen vullen de lege ruimte boven en onder de intro naast een lange lijst behandelingen.
   Enkel op brede schermen en vanaf zes behandelingen: met minder is de kaart niet hoger dan de intro. */
.hair-scissors { display: none; }
@media (min-width: 961px) {
  .hair .wrap:has(#services-list li:nth-child(6)) .hair-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hair .wrap:has(#services-list li:nth-child(6)) .hair-scissors {
    display: block;
    position: relative;
    flex: 1 1 0;
    align-self: stretch;
    min-height: 0;
  }
  .hair-scissors::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wood);
    -webkit-mask: var(--schaar-mask) 18% 50% / auto min(124px, 72%) no-repeat;
    mask: var(--schaar-mask) 18% 50% / auto min(124px, 72%) no-repeat;
  }
  /* De onderste wijst de andere kant op */
  .hair-scissors:last-child::before { transform: rotate(180deg); }
}

/* Eén doorlopende lijn: de hele dag op één adres */
.hair-day { grid-column: 1 / -1; }
.day-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.day-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.js-motion .day-line::before { transform: scaleX(var(--line-progress, 0)); }
.day-line li {
  position: relative;
  padding-top: 40px;
}
.day-line li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
}
.day-line li:last-child::before { background: var(--wood); }
.day-line time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--wood);
  margin-bottom: 10px;
}
.day-line strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  margin-bottom: 8px;
}
.day-line span {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 22em;
}
.day-note {
  width: fit-content;
  margin: 44px 0 0 auto;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--wood);
  transform: rotate(-3deg);
}

/* ---------- Bezoek ---------- */

.visit {
  background: var(--paper-deep);
  padding: clamp(80px, 11vw, 130px) 0;
}
.visit .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 104px);
}
.visit h2 {
  font-size: clamp(40px, 5vw, 64px);
  margin-bottom: 28px;
}
.visit address {
  font-style: normal;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 28px;
}
.visit-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 36px;
}

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.hours caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 26px;
  padding-bottom: 16px;
}
.hours th,
.hours td {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th,
.hours tr.is-today td { font-weight: 600; }
.hours tr.is-today th::after {
  content: "vandaag";
  font-family: var(--hand);
  font-weight: 700;
  font-size: 25px;
  color: var(--wood);
  margin-left: 10px;
}
.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 1px solid var(--line); }
.hours-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}

.hours-special { margin-top: 32px; }
.hours-special[hidden] { display: none; }
.hours-special h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.hours-special ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hours-special li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.hours-special li:last-child { border-bottom: 1px solid var(--line); }
.hours-special li span:last-of-type { font-variant-numeric: tabular-nums; }
.hours-special small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(244, 239, 230, 0.72);
  padding: clamp(64px, 9vw, 104px) 0 40px;
  font-size: 14px;
  overflow: hidden;
}
.footer-big {
  font-family: var(--serif);
  color: var(--paper);
  font-size: clamp(56px, 12vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  /* Voor de animatie staat elke letter apart, en dan valt de kerning weg. Zonder kerning is de tekst
     daarna exact even breed; anders verspringt hij na de animatie (soms zelfs naar één regel). */
  font-kerning: none;
  font-variant-ligatures: none;
}
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px clamp(32px, 6vw, 80px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-light);
}
.footer-top p { margin: 0; line-height: 1.7; }
/* Volledig logo; onder ~240px wordt de slogan te dun om te lezen */
.footer-logo {
  display: block;
  width: clamp(240px, 24vw, 300px);
  height: auto;
  color: var(--paper);
}
.footer-social {
  display: flex;
  gap: 28px;
}
.footer-social a { text-decoration: none; color: var(--paper); }
.footer-social a:hover { color: var(--wood-light); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 28px;
  font-size: 13px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-legal nav { display: flex; gap: 24px; }
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--paper); }

/* ---------- Boekingspaneel ---------- */

.booking {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.4);
}
.booking[open] {
  display: flex;
  flex-direction: column;
}
.booking::backdrop {
  background: rgba(27, 24, 21, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 0.4s ease;
}
.booking.is-closing::backdrop { opacity: 0; transition: opacity 0.35s; }

@keyframes fade-in { from { opacity: 0; } }

.booking-head {
  padding: 22px 28px 0;
}
.booking-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.booking-top h2 { font-size: 26px; }
.booking-close {
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  flex: none;
}
.booking-close::before,
.booking-close::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out);
}
.booking-close::before { transform: rotate(45deg); }
.booking-close::after { transform: rotate(-45deg); }
.booking-close:hover::before { transform: rotate(135deg); }
.booking-close:hover::after { transform: rotate(45deg); }

.booking-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.booking-steps li {
  font-size: 12px;
  color: var(--muted);
  padding-top: 10px;
  position: relative;
}
.booking-steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
}
.booking-steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wood);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
}
.booking-steps li.is-done::after,
.booking-steps li.is-active::after { transform: scaleX(1); }
.booking-steps li.is-active { color: var(--ink); font-weight: 500; }

.booking-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
}
.booking-step[hidden] { display: none; }
.booking-step h3 {
  font-size: 22px;
  margin-bottom: 18px;
}
.booking-step h3 + .help {
  margin-top: -10px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--muted);
}

/* Stap 1: dienst */
.choice-list {
  display: grid;
  gap: 10px;
}
.choice {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.choice:hover { border-color: var(--ink); }
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice .radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.choice .radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  transition: transform 0.3s var(--ease-out);
}
.choice strong { display: block; font-weight: 500; }
.choice em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 19px;
}
.choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.choice:has(input:checked) .radio { border-color: var(--paper); background: var(--wood); }
.choice:has(input:checked) .radio::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--wood); outline-offset: 3px; }

/* Stap 2: dag en uur */
.month-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  margin: 0 -2px 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.date {
  flex: none;
  width: 62px;
  padding: 10px 0 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.date span { display: block; font-size: 12px; color: var(--muted); text-transform: lowercase; }
.date strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.date:hover:not(:disabled) { border-color: var(--ink); }
.date.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.date.is-selected span { color: rgba(244, 239, 230, 0.65); }
.date:disabled { opacity: 0.35; cursor: not-allowed; }

.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.slot {
  padding: 11px 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.slot:hover:not(:disabled) { border-color: var(--ink); }
.slot.is-selected { background: var(--wood); border-color: var(--wood); color: var(--paper); }
.slot:disabled {
  color: var(--muted);
  text-decoration: line-through;
  opacity: 0.5;
  cursor: not-allowed;
}
.slots-empty {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--muted);
  padding: 8px 0;
}

/* Stap 3: gegevens */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.field label span { color: var(--muted); font-weight: 400; }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}
.field input:user-invalid { border-color: var(--error); }
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--wood);
}
.privacy-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
}
.privacy-note + .privacy-note { margin-top: 8px; }

.booking-error {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--error);
  background: rgba(163, 58, 31, 0.08);
  color: var(--error);
  font-size: 14px;
}
.booking-error[hidden] { display: none; }

/* Lokaasveld voor spambots, onzichtbaar voor bezoekers */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* De reCAPTCHA-badge zou over de knoppen vallen; de verplichte vermelding staat in het formulier */
.grecaptcha-badge { visibility: hidden; }

/* Stap 4: bevestiging */
.done {
  text-align: center;
  padding-top: 12px;
}
.done-snor {
  width: 120px;
  height: 38px;
  margin: 8px auto 22px;
  color: var(--ink);
  display: block;
}
.done h3 { font-size: 30px; margin-bottom: 8px; }
.done > p { color: var(--ink-soft); }
.done .ref {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 24px;
}
.summary {
  text-align: left;
  border-top: 1px solid var(--line);
  margin: 0 0 24px;
}
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; font-weight: 500; }

.booking-foot {
  border-top: 1px solid var(--line);
  padding: 16px 28px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--paper);
}
.booking-summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  min-width: 0;
}
.booking-summary strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-summary[hidden] { display: none; }
.booking-actions { display: flex; gap: 8px; flex: none; margin-left: auto; }
.booking-actions .btn { padding: 12px 18px; }
.booking-back[hidden] { display: none; }

/* ---------- Tekstpagina's ---------- */

.legal {
  padding: calc(var(--header) + clamp(40px, 7vw, 80px)) 0 clamp(56px, 8vw, 96px);
}
.legal .wrap { max-width: 760px; }
.legal h1 {
  /* "Privacyverklaring" is één lang woord: moet ook op een gsm van 320 px passen */
  font-size: clamp(30px, 5vw + 14px, 56px);
  margin-bottom: 12px;
}
.legal h2 {
  font-size: 24px;
  margin: 44px 0 12px;
}
.legal p,
.legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 40px; }
.legal-page .site-header { background: rgb(var(--paper-rgb) / 0.92); box-shadow: 0 1px 0 var(--line); }
.legal-page .site-header .wrap { gap: 16px; }
.legal-page .site-header .link { white-space: nowrap; }
/* Op een gsm past enkel "Terug" naast het logo */
@media (max-width: 600px) {
  .legal-page .link-extra { display: none; }
}

/* Pagina niet gevonden (404.html) */
.legal--404 {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 120px);
  min-height: calc(100svh - 120px);
}
.legal .legal-404-note {
  display: block;
  color: var(--wood);
  font-size: 46px;
  margin-bottom: 10px;
  transform: rotate(-4deg);
  transform-origin: 0 100%;
}
.legal-404-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* ---------- Thema's ----------
   Gekozen in het beheerportaal en gezet als data-theme op <html>. Zonder data-theme geldt de
   standaardstijl hierboven. De regels gelden voor elk element met data-theme, zodat het portaal
   een voorproef kan tonen. --wood blijft overal leesbaar als kleine tekst op --paper (min. 4,5:1). */

[data-theme="herfst"] {
  --paper: #f3ebdf;
  --paper-rgb: 243 235 223;
  --paper-deep: #e8dac4;
  --wood: #a4481f;
  --wood-dark: #833817;
  --wood-light: #d68b45;
  --band: #a4481f;
  --band-icon: #1b1815;
  --ornament-color: #c0662c;
  --art-scene: url("/assets/img/thema/herfst-egel.svg");
  --art-scene-ratio: 200 / 140;
  --art-scene-w: 224px;
  --art-pin: url("/assets/img/thema/herfst-blad.svg");
  --art-garland: url("/assets/img/thema/herfst-slinger.svg");
  --art-garland-h: 46px;
  --art-fall-1: url("/assets/img/thema/herfst-vallen.svg");
  --art-fall-1-size: 360px;
  --art-fall-2: none;
  --art-fall-2-size: 360px;
  /* Esdoornblad */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 13.6 5.6 19 4.4 16.7 9.2 22 11.2 16.6 13.7 18 17.6 12.7 15.7V22.5H11.3V15.7L6 17.6 7.4 13.7 2 11.2 7.3 9.2 5 4.4 10.4 5.6Z'/%3E%3C/svg%3E");
}

[data-theme="winter"] {
  --paper: #f0efeb;
  --paper-rgb: 240 239 235;
  --paper-deep: #e1e3e0;
  --wood: #3f5c6e;
  --wood-dark: #2f4756;
  --wood-light: #a9c3d1;
  --band: #2f4756;
  --band-icon: #a9c3d1;
  --ornament-color: #6f8fa3;
  --art-scene: url("/assets/img/thema/winter-sneeuwman.svg");
  --art-scene-ratio: 170 / 210;
  --art-hat: url("/assets/img/thema/winter-muts.svg");
  --art-hat-ratio: 120 / 92;
  --art-garland: url("/assets/img/thema/winter-slinger.svg");
  --art-garland-h: 32px;
  --art-fall-1: url("/assets/img/thema/sneeuw-klein.svg");
  --art-fall-1-size: 220px;
  --art-fall-2: url("/assets/img/thema/sneeuw-groot.svg");
  --art-fall-2-size: 380px;
  /* Sneeuwvlok */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='a'%3E%3Cpath d='M12 2v20M9.3 4.3 12 7l2.7-2.7M9.3 19.7 12 17l2.7 2.7'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60 12 12)'/%3E%3Cuse href='%23a' transform='rotate(120 12 12)'/%3E%3C/svg%3E");
}

[data-theme="kerst"] {
  --paper: #f5eee3;
  --paper-rgb: 245 238 227;
  --paper-deep: #ebdfcc;
  --wood: #9b2b26;
  --wood-dark: #7c211d;
  --wood-light: #d9a84e;
  --band: #24433a;
  --band-icon: #d9a84e;
  --ornament-color: #c79a3e;
  --art-scene: url("/assets/img/thema/kerst-boom.svg");
  --art-scene-ratio: 170 / 210;
  --art-hat: url("/assets/img/thema/kerst-muts.svg");
  --art-hat-ratio: 124 / 88;
  --art-garland: url("/assets/img/thema/kerst-slinger.svg");
  --art-garland-h: 44px;
  --art-fall-1: url("/assets/img/thema/sneeuw-klein.svg");
  --art-fall-1-size: 220px;
  --art-fall-2: url("/assets/img/thema/sneeuw-groot.svg");
  --art-fall-2-size: 380px;
  --art-footer: url("/assets/img/thema/kerst-slee.svg");
  /* Ster */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 13 9.6 16.6 7.4 14.4 11 23 12 14.4 13 16.6 16.6 13 14.4 12 23 11 14.4 7.4 16.6 9.6 13 1 12 9.6 11 7.4 7.4 11 9.6Z'/%3E%3C/svg%3E");
}

[data-theme="pasen"] {
  --paper: #f6f1e5;
  --paper-rgb: 246 241 229;
  --paper-deep: #ece3cb;
  --wood: #6a5583;
  --wood-dark: #574570;
  --wood-light: #e6c35c;
  --band: #7d8f55;
  --band-icon: #1b1815;
  --ornament-color: #8f78ad;
  --art-scene: url("/assets/img/thema/pasen-haas.svg");
  --art-scene-ratio: 180 / 200;
  --art-scene-w: 192px;
  --art-garland: url("/assets/img/thema/pasen-slinger.svg");
  --art-garland-h: 44px;
  /* Paasei */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c-3.9 0-7 6-7 11 0 4.4 3.1 7.5 7 7.5s7-3.1 7-7.5c0-5-3.1-11-7-11Z'/%3E%3Cpath d='M5.4 11.8 7.6 13.6 9.8 11.8 12 13.6 14.2 11.8 16.4 13.6 18.6 11.8M5.5 15.6h13'/%3E%3C/svg%3E");
}

[data-theme="lente"] {
  --paper: #f4f2e9;
  --paper-rgb: 244 242 233;
  --paper-deep: #e6e8d6;
  --wood: #46703d;
  --wood-dark: #375a30;
  --wood-light: #e3a6a1;
  --band: #46703d;
  --band-icon: #e3a6a1;
  --ornament-color: #d98f8a;
  --art-scene: url("/assets/img/thema/lente-tulpen.svg");
  --art-scene-ratio: 160 / 214;
  --art-pin: url("/assets/img/thema/lente-bloem.svg");
  --art-garland: url("/assets/img/thema/lente-slinger.svg");
  --art-garland-h: 40px;
  --art-fall-1: url("/assets/img/thema/lente-vallen.svg");
  --art-fall-1-size: 360px;
  --art-fall-2: none;
  --art-fall-2-size: 360px;
  /* Bloesem */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='6.4' rx='2.9' ry='4'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(72 12 12)'/%3E%3Cuse href='%23p' transform='rotate(144 12 12)'/%3E%3Cuse href='%23p' transform='rotate(216 12 12)'/%3E%3Cuse href='%23p' transform='rotate(288 12 12)'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='black' stroke='none'/%3E%3C/svg%3E");
}

[data-theme="zomer"] {
  --paper: #f7efe0;
  --paper-rgb: 247 239 224;
  --paper-deep: #efdfc2;
  --wood: #1f6a78;
  --wood-dark: #17525d;
  --wood-light: #f0b54a;
  --band: #1f6a78;
  --band-icon: #f0b54a;
  --ornament-color: #e39a2d;
  --art-scene: url("/assets/img/thema/zomer-ijskoffie.svg");
  --art-scene-ratio: 150 / 220;
  --art-scene-w: 150px;
  --art-glasses: url("/assets/img/thema/zomer-bril.svg");
  --art-garland: url("/assets/img/thema/zomer-slinger.svg");
  --art-garland-h: 40px;
  /* Zon */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 1.8v3.2M12 19v3.2M1.8 12H5M19 12h3.2M4.8 4.8l2.3 2.3M16.9 16.9l2.3 2.3M4.8 19.2l2.3-2.3M16.9 7.1l2.3-2.3'/%3E%3C/svg%3E");
}

/* Versieringen: enkel bij een gekozen thema */
html[data-theme] .eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: -0.3em 0.6em 0 0;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
}

/* Een handvol versieringen naast de grote foto */
html[data-theme] .hero-photo::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -46px;
  right: -38px;
  width: 132px;
  height: 120px;
  background: var(--ornament-color);
  -webkit-mask:
    var(--ornament) 58px 0 / 70px 70px no-repeat,
    var(--ornament) 6px 50px / 38px 38px no-repeat,
    var(--ornament) 100px 86px / 24px 24px no-repeat;
  mask:
    var(--ornament) 58px 0 / 70px 70px no-repeat,
    var(--ornament) 6px 50px / 38px 38px no-repeat,
    var(--ornament) 100px 86px / 24px 24px no-repeat;
  transform: rotate(-8deg);
  pointer-events: none;
  animation: ornament-in 1.2s var(--ease-out) 1s both;
}

html[data-theme] .about-photos::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -26px;
  bottom: -30px;
  width: 64px;
  height: 64px;
  background: var(--ornament-color);
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
  transform: rotate(14deg);
  pointer-events: none;
}

html[data-theme] .footer-big::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.14em;
  vertical-align: 0.42em;
  background: var(--wood-light);
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
}

@keyframes ornament-in {
  from { opacity: 0; transform: rotate(-30deg) scale(0.6); }
}

/* Illustraties: elk figuurtje draagt de snor uit het logo */
.theme-art { display: none; }
html[data-theme] .theme-art {
  display: block;
  position: absolute;
  z-index: 4;
  background: center / contain no-repeat;
  pointer-events: none;
}

/* Figuurtje dat bij de grote foto staat */
html[data-theme] .theme-art--scene {
  left: -52px;
  bottom: -30px;
  width: var(--art-scene-w, 178px);
  aspect-ratio: var(--art-scene-ratio);
  background-image: var(--art-scene);
  transform-origin: 50% 100%;
  animation: art-in 0.9s var(--ease-out) 1.4s both;
}

/* Iets op de draaiende badge: een muts, een blaadje of bloempje, of een zonnebril.
   De badge staat 54px links en boven de foto en is 148px groot (midden op 20px, 20px). */
html:is([data-theme="winter"], [data-theme="kerst"]) .theme-art--hat {
  left: 20px;
  top: -24px;
  width: 118px;
  aspect-ratio: var(--art-hat-ratio);
  background-image: var(--art-hat);
  translate: -50% -100%;
  rotate: -12deg;
  transform-origin: 50% 100%;
  animation: art-in 0.8s var(--ease-out) 2s both;
}
html:is([data-theme="herfst"], [data-theme="lente"]) .theme-art--hat {
  left: 72px;
  top: -32px;
  width: 48px;
  aspect-ratio: 1;
  background-image: var(--art-pin);
  translate: -50% -50%;
  rotate: 14deg;
  animation: art-in 0.8s var(--ease-out) 2s both;
}
html[data-theme="zomer"] .theme-art--hat {
  left: 20px;
  top: -6px;
  width: 86px;
  aspect-ratio: 120 / 46;
  background-image: var(--art-glasses);
  translate: -50% -50%;
  rotate: -4deg;
  animation: art-in 0.8s var(--ease-out) 2s both;
}

/* De kerstman in zijn slee, rechtsboven in de footer */
html[data-theme] .site-footer { position: relative; }
html[data-theme] .theme-art--footer {
  top: clamp(18px, 3vw, 40px);
  right: var(--gutter);
  width: clamp(170px, 26vw, 330px);
  aspect-ratio: 320 / 132;
  background-image: var(--art-footer);
}

/* Slinger die onder de infobalk hangt */
html[data-theme] .infobar { position: relative; z-index: 4; }
html[data-theme] .infobar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--art-garland-h, 40px);
  background: var(--art-garland) 0 0 / auto 100% repeat-x;
  pointer-events: none;
}

/* In de tekstband wisselt de snor af met de versiering van het thema */
html[data-theme] .band-set .snor-icon:nth-of-type(2n) {
  width: clamp(34px, 4.4vw, 60px);
  height: clamp(34px, 4.4vw, 60px);
  -webkit-mask-image: var(--ornament);
  mask-image: var(--ornament);
}

/* Vallende sneeuw, blaadjes of bloesems achter de inhoud bovenaan. Twee lagen met een andere
   snelheid; enkel transform, zodat de browser niets opnieuw hoeft te tekenen. */
html:is([data-theme="winter"], [data-theme="kerst"], [data-theme="herfst"], [data-theme="lente"]) .hero {
  position: relative;
  overflow: hidden;
}
html:is([data-theme="winter"], [data-theme="kerst"], [data-theme="herfst"], [data-theme="lente"]) .hero > .wrap {
  position: relative;
  z-index: 1;
}
html:is([data-theme="winter"], [data-theme="kerst"], [data-theme="herfst"], [data-theme="lente"]) .hero::before,
html:is([data-theme="winter"], [data-theme="kerst"], [data-theme="herfst"], [data-theme="lente"]) .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -480px;
  bottom: 0;
  background: var(--art-fall-1) 0 0 / var(--art-fall-1-size) repeat;
  pointer-events: none;
  animation: fall-1 16s linear infinite;
}
html:is([data-theme="winter"], [data-theme="kerst"], [data-theme="herfst"], [data-theme="lente"]) .hero::after {
  background: var(--art-fall-2, var(--art-fall-1)) 90px 40px / var(--art-fall-2-size) repeat;
  animation-name: fall-2;
  animation-duration: 30s;
}

@keyframes art-in {
  from { opacity: 0; scale: 0.5; }
}
@keyframes fall-1 {
  to { transform: translateY(var(--art-fall-1-size)); }
}
@keyframes fall-2 {
  to { transform: translateY(var(--art-fall-2-size)); }
}

/* Eén bui over de hele pagina bij het openen (assets/js/theme-fall.js), boven de header */
.theme-fall {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}
.theme-fall-drop {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.theme-fall-sway {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.theme-fall svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Responsive ---------- */

/* Iets krappere navigatie, zodat logo en menu niet tegen elkaar komen */
@media (max-width: 1080px) {
  .nav { gap: 22px; }
}

@media (max-width: 960px) {
  .menu-cols { grid-template-columns: 1fr 1fr; }
  .menu-col:last-child { grid-column: 1 / -1; }
  .menu-col:last-child .menu-photo { max-width: 420px; }
  .hair .wrap { grid-template-columns: 1fr; }

  /* Menu klapt hier al in: daaronder passen logo en zes menu-items niet meer naast elkaar */
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 12px; padding: 14px; }
  .nav .btn + .btn { margin-top: 8px; }
  .site-header:has(.nav.is-open) { background: var(--paper); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 860px) {
  .hero .wrap,
  .about .wrap,
  .brunch .wrap,
  .visit .wrap { grid-template-columns: 1fr; }

  .hero-photo { max-width: 520px; margin-top: 16px; }
  .badge { width: 116px; height: 116px; top: -44px; left: auto; right: -10px; }
  /* De badge staat hier rechtsboven: de versieringen gaan naar links */
  html[data-theme] .hero-photo::after { top: -40px; right: auto; left: -12px; transform: rotate(8deg) scaleX(-1); }
  html[data-theme] .about-photos::after { left: auto; right: -8px; bottom: -26px; width: 52px; height: 52px; }

  /* Badge: 116px, 10px rechts naast de foto en 44px erboven (midden op 100% - 48px, 14px) */
  html[data-theme] .theme-art--scene { left: -6px; bottom: -22px; width: calc(var(--art-scene-w, 178px) * 0.7); }
  /* De muts steekt boven de badge uit: wat meer ruimte tussen de uurregel en de foto */
  html:is([data-theme="winter"], [data-theme="kerst"]) .hero-photo { margin-top: 72px; }
  html:is([data-theme="winter"], [data-theme="kerst"]) .theme-art--hat { left: calc(100% - 48px); top: -20px; width: 92px; rotate: 12deg; }
  html:is([data-theme="herfst"], [data-theme="lente"]) .theme-art--hat { left: calc(100% - 8px); top: -27px; width: 38px; }
  html[data-theme="zomer"] .theme-art--hat { left: calc(100% - 48px); top: -2px; width: 66px; }
  /* Plaats voor de slee boven "Tot straks" */
  html[data-theme="kerst"] .site-footer { padding-top: calc(clamp(64px, 9vw, 104px) + 64px); }
  .badge-snor { width: 46px; height: 14px; }
  .hero-photo figcaption { right: 12px; bottom: -18px; }

  .about-photos { order: -1; }

  .brunch-photo { max-width: 460px; }

  .infobar .wrap { grid-template-columns: 1fr; }
  .infobar .wrap > div { padding: 18px 0; }
  .infobar .wrap > div + div { border-left: 0; border-top: 1px solid var(--line-light); padding-left: 0; }

  .menu-head { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .footer-big { font-size: 14.5vw; }
  .menu-cols { grid-template-columns: 1fr; }
  .menu-col + .menu-col { margin-top: 40px; }
  .brunch-facts { gap: 20px 32px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .day-line { grid-template-columns: 1fr; gap: 36px; }
  .day-line::before {
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
    transform-origin: 50% 0;
  }
  .js-motion .day-line::before { transform: scaleY(var(--line-progress, 0)); }
  .day-line li { padding: 0 0 0 36px; }
  .day-line li::before { top: 6px; }
  .day-note { margin: 36px 0 0 36px; font-size: clamp(22px, 6.8vw, 30px); }
  /* Het handschrift is zo breed als in het logo: bijschrift en thema-tekening iets kleiner,
     zodat ze vanaf 360 px niet over elkaar vallen */
  .hero-photo figcaption { font-size: clamp(22px, 6.6vw, 30px); right: -10px; }
  html[data-theme] .theme-art--scene { width: calc(var(--art-scene-w, 178px) * 0.56); }
  .hair-card { grid-template-columns: 1fr; }
  .pole { flex-direction: row; width: 100%; height: 26px; }
  .pole-cap { width: 16px; height: 26px; border-radius: 13px 3px 3px 13px; }
  .pole-cap:last-child { border-radius: 3px 13px 13px 3px; }
  .pole-body {
    min-height: 0;
    height: 20px;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background-size: 68px 100%;
    animation-name: pole-x;
  }
  .services button { align-items: center; }
  .services .go { display: none; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .booking-head { padding: 18px 20px 0; }
  .booking-body { padding: 24px 20px; }
  .booking-foot { padding-left: 20px; padding-right: 20px; flex-wrap: wrap; gap: 12px; }
  .booking-summary { flex: 1 1 100%; }
  .booking-actions { flex: 1 1 100%; }
  .booking-actions .btn { flex: 1; }
  .booking-back { flex: 0 0 auto !important; }
  .booking-steps li { font-size: 0; }
}

@keyframes pole-x {
  to { background-position: 68px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}