/* =========================================================
   Maas en Vrienden - Winterthema
   Zet je dit bestand (en js/winter.js) uit de HTML, dan is de
   site weer in de gewone kleding. Het winterlogo staat los in
   images/logo-winter.png.
   ========================================================= */

:root {
  --color-bg: #F5F4EE;
  --color-bg-soft: #EAEEEA;
  --color-bg-deep: #DDE5E1;
  --color-line: rgba(30, 64, 60, 0.14);
  --winter-ice: #D9ECEC;
  --winter-frost: rgba(255, 255, 255, 0.82);
  --winter-red: #B3261E;
  --winter-bulb: #FFC86B;
}

body { background-color: var(--color-bg); }

/* Golfranden volgen de nieuwe, koelere achtergrond */
.wave-divider path,
.hero-wave path { fill: var(--color-bg); }

/* ---------- Header: berijpt glas + lichtjesslinger ---------- */
.site-header {
  background: rgba(245, 244, 238, 0.94);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 14px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 70%, var(--winter-bulb) 0 3px, rgba(255, 200, 107, 0.45) 4px, transparent 7px),
    radial-gradient(circle at 50% 70%, #E85D4A 0 3px, rgba(232, 93, 74, 0.4) 4px, transparent 7px),
    radial-gradient(circle at 50% 70%, #6FC3B2 0 3px, rgba(111, 195, 178, 0.4) 4px, transparent 7px);
  background-size: 96px 14px, 96px 14px, 96px 14px;
  background-position: 0 0, 32px 0, 64px 0;
  background-repeat: repeat-x;
  animation: winterTwinkle 2.4s ease-in-out infinite alternate;
}
.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  pointer-events: none;
  background: radial-gradient(ellipse 14px 7px at 50% 0, rgba(38, 55, 36, 0.45) 0 1px, transparent 2px) 0 0 / 32px 8px repeat-x;
  opacity: 0.6;
}
@keyframes winterTwinkle {
  0%   { filter: brightness(0.85) saturate(0.9); }
  50%  { filter: brightness(1.15); }
  100% { filter: brightness(0.95) hue-rotate(8deg); }
}

/* Het winterlogo is rond en heeft zijn eigen gloed */
.brand img,
.footer-brand img,
.brand-intro img {
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.brand img { filter: drop-shadow(0 4px 10px rgba(20, 40, 36, 0.25)); }
.brand-intro img { width: 220px; height: auto; filter: drop-shadow(0 14px 30px rgba(20, 40, 36, 0.3)); }

/* ---------- Hero: koude avondgloed met sneeuw onderaan ---------- */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30, 60, 80, 0.28) 0%, rgba(30, 60, 80, 0) 45%),
    radial-gradient(120% 60% at 50% 110%, rgba(255, 255, 255, 0.35), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ---------- Sneeuwkapjes op knoppen en kaarten ---------- */
.btn-primary { position: relative; }
.btn-primary::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: -5px;
  height: 9px;
  border-radius: 10px 10px 6px 6px;
  background:
    radial-gradient(circle at 20% 100%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 55% 100%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 85% 100%, #fff 0 3px, transparent 4px),
    linear-gradient(#fff, #F1F6F6);
  box-shadow: 0 2px 3px rgba(20, 40, 36, 0.15);
  pointer-events: none;
}

.card, .menu-item, .event-card, .review-card {
  border-top: 3px solid var(--winter-frost);
}

/* ---------- Footer: sneeuwlaag aan de bovenkant ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 18px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30px 14px at 50% 0, var(--color-bg) 98%, transparent 100%) 0 0 / 60px 18px repeat-x,
    radial-gradient(ellipse 22px 10px at 50% 0, var(--color-bg) 98%, transparent 100%) 30px 0 / 60px 14px repeat-x;
}

/* ---------- Sneeuwval ---------- */
.winter-snow {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after { animation: none; }
  .winter-snow { display: none; }
}