html { scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar { display: none; }

/* Voorkom per ongeluk inzoomen bij dubbeltik op mobiel (pinch-zoom blijft werken) */
* { touch-action: manipulation; }

body {
  background:
    radial-gradient(ellipse 1000px 600px at 82% 4%, rgba(226,87,80,0.18), transparent 60%),
    radial-gradient(ellipse 800px 500px at 10% 12%, rgba(246,189,185,0.30), transparent 60%),
    radial-gradient(ellipse 1100px 600px at 50% 99%, rgba(226,87,80,0.09), transparent 70%),
    linear-gradient(180deg, #fbe3e0 0%, #FAF7F2 18%, #FAF7F2 66%, #fbeae7 100%);
}

/* Hero gebruikt de doorlopende body-achtergrond (geen eigen laag → geen naad) */
.hero-warm { background: transparent; }

.why-warm {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(135deg, #b21f1c 0%, #d12d27 50%, #e25750 100%);
}

.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }

/* Swipe-hint pijltjes (subtiel heen en weer) */
@keyframes fz-swipe-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.fz-swipe { animation: fz-swipe-nudge 1.4s ease-in-out infinite; }
.fz-swipe:first-child { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .fz-swipe { animation: none; } }

/* Footer in dezelfde lichte tint als de rest van de site (vloeiend, geen donker blok) */
footer { background: transparent !important; }
footer .text-white, footer .font-display, footer h4 { color: #2a2725 !important; }
footer p { color: #57534e !important; }
footer ul a, footer .text-stone-400, footer .text-stone-500 { color: #6b6660 !important; }
footer ul a:hover { color: #d12d27 !important; }
footer a[aria-label="Facebook"], footer a[aria-label="Instagram"] {
  background: #ffffff !important; border: 1px solid rgba(120,113,108,0.22);
}
footer a[aria-label="Facebook"] svg, footer a[aria-label="Instagram"] svg { color: #57534e; }
footer img[data-foto="logo"] { background: transparent !important; padding: 0 !important; }
footer .border-stone-800 { border-color: rgba(120,113,108,0.18) !important; }

.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(120,60,40,0.12); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #d12d27; outline-offset: 3px; border-radius: 4px;
}

.form-input {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem;
  border: 1.5px solid rgba(231,229,228,0.8); background: rgba(255,255,255,0.85);
  font-family: 'Nunito', sans-serif; font-size: 0.9rem; color: #2a2725;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  backdrop-filter: blur(8px);
}
.form-input:focus {
  outline: none; border-color: #d12d27; background: #fff;
  box-shadow: 0 0 0 3px rgba(209,45,39,0.15);
}
/* Date/time-velden: WebKit geeft die een eigen min-breedte + appearance →
   normaliseren zodat ze even breed en links uitgelijnd zijn als de rest. */
.form-input[type="date"],
.form-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}
.form-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.form-input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.form-label { display:block; font-size:0.8rem; font-weight:800; color:#4f4a47; margin-bottom:0.35rem; }

@keyframes wa-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.wa-pulse { animation: wa-pulse 2.4s ease-in-out infinite; }

/* Carousels: scrollbar verbergen */
.overflow-x-auto { scrollbar-width: none; -ms-overflow-style: none; }
.overflow-x-auto::-webkit-scrollbar { display: none; }

/* Sfeergalerij & reviews — auto-scrollende oneindige band (pure CSS, GPU-versneld) */
@keyframes fz-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes fz-marquee-rev {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.gallery-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.gallery-track,
.gallery-track-rev,
.reviews-track {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.gallery-track     { animation-name: fz-marquee;     animation-duration: 60s; }
.gallery-track-rev { animation-name: fz-marquee-rev; animation-duration: 60s; }
.reviews-track     { animation-name: fz-marquee;     animation-duration: 80s; }

.gallery-marquee:hover .gallery-track,
.gallery-marquee:hover .gallery-track-rev,
.gallery-marquee:hover .reviews-track { animation-play-state: paused; }

.gallery-item { transition: transform 0.3s ease; }
.gallery-item:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .gallery-track, .gallery-track-rev, .reviews-track { animation: none; }
}