/* ═══════════════════════════════════════════════════════════
   SEENN — Christmas House (22 oktober 2026)
   Gebouwd door Smeulders Digital.

   Twee dingen in dit bestand:
     1. De knop "Christmas House" in het menu bovenaan, zo gemaakt dat hij
        opvalt tussen de gewone menulinks: een gouden rand, een lichte
        vulling en een stipje dat zachtjes licht geeft. Wie minder beweging
        gevraagd heeft, krijgt dat licht niet.
     2. De pagina christmas-house.php zelf.

   Alles gebruikt de kleuren en lettertypes van de rest van de site
   (bruinzwart, goud, Prata en Montserrat), geen nieuwe kleur.
   Het seizoen voorbij? Haal de regel 'christmas' weg in delen/basis.php;
   de knop is dan meteen uit het menu.
   ═══════════════════════════════════════════════════════════ */


/* ── De knop in het menu ───────────────────────────────── */

.menu__lijn--kerst {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.05rem .6rem .95rem;
  border: 1px solid rgba(192, 163, 96, .85);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(192, 163, 96, .22), rgba(192, 163, 96, .08));
  color: var(--goud-licht);
  letter-spacing: .16em;
  white-space: nowrap;
  box-shadow: 0 0 1.6rem rgba(192, 163, 96, .18);
  transition: background-color .3s var(--veer), box-shadow .3s var(--veer), color .3s var(--veer);
}
.menu__lijn--kerst::after { display: none; }          /* geen onderstreping: de rand is het teken */
.menu__lijn--kerst::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--goud);
  box-shadow: 0 0 0 0 rgba(192, 163, 96, .6);
  flex: none;
}
.menu__lijn--kerst:hover, .menu__lijn--kerst:focus-visible,
.menu__lijn--kerst.is-hier {
  background: var(--goud);
  color: var(--nacht);
  box-shadow: 0 0 2.4rem rgba(192, 163, 96, .4);
}
.menu__lijn--kerst:hover::before, .menu__lijn--kerst:focus-visible::before,
.menu__lijn--kerst.is-hier::before { background: var(--nacht); }

@media (prefers-reduced-motion: no-preference) {
  .menu__lijn--kerst::before { animation: kerst-stip 2.6s ease-out infinite; }
  .menu__lijn--kerst { animation: kerst-gloed 5.2s ease-in-out infinite; }
}
@keyframes kerst-stip {
  0%   { box-shadow: 0 0 0 0 rgba(192, 163, 96, .65); }
  70%  { box-shadow: 0 0 0 .55rem rgba(192, 163, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 163, 96, 0); }
}
@keyframes kerst-gloed {
  0%, 100% { box-shadow: 0 0 1.2rem rgba(192, 163, 96, .14); }
  50%      { box-shadow: 0 0 2.2rem rgba(192, 163, 96, .34); }
}

/* Op een gsm staat het menu onder elkaar: de knop krijgt dan de volle breedte
   en eigen lucht, zodat hij tussen de lijnen niet verdwijnt. */
@media (max-width: 59.999rem) {
  .menu__lijst li:has(.menu__lijn--kerst) { border-bottom: 0; padding: 1rem 0 .5rem; }
  .menu__lijn--kerst {
    display: flex;
    justify-content: center;
    padding: 1.05rem 1.25rem;
    font-size: .875rem;
  }
}


/* ── De pagina ─────────────────────────────────────────── */

.kerst-held {
  position: relative;
  padding: 0;
  min-height: min(94vh, 54rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.kerst-held__foto { position: absolute; inset: 0; }
.kerst-held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.kerst-held__foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(22, 17, 13, 1) 0%, rgba(22, 17, 13, .93) 38%, rgba(22, 17, 13, .62) 56%, rgba(22, 17, 13, .12) 76%, rgba(22, 17, 13, .45) 100%);
}
.kerst-held__binnen { position: relative; z-index: 1; width: 100%; padding-block: 7rem 3.5rem; }
.kerst-held .titel { max-width: 22ch; text-wrap: balance; font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.25rem); margin-bottom: 1.25rem; }
.kerst-held__lead {
  font-family: var(--titel);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
  color: var(--wit);
  max-width: 28ch;
  margin-bottom: .75rem;
}
.kerst-held__bij { color: var(--room-zacht); max-width: 40ch; margin-bottom: 0; }

.kerst-kop { margin-bottom: 2.25rem; }
.kerst-kop .titel { margin-bottom: .75rem; }
.kerst-kop p { color: var(--room-zacht); max-width: 46ch; }

/* De drie dagen */
.kerst-dagen { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.kerst-dag {
  border: 1px solid rgba(192, 163, 96, .35);
  background: rgba(34, 26, 20, .55);
  padding: 1.75rem 1.5rem 1.6rem;
}
.kerst-dag__dag { font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--goud); margin-bottom: .75rem; }
.kerst-dag__uur { font-family: var(--titel); font-size: 1.75rem; line-height: 1.15; color: var(--wit); margin-bottom: .75rem; }
.kerst-dag p { color: var(--room-zacht); font-size: .9375rem; }
.kerst-dag--vr { border-color: var(--goud); box-shadow: 0 0 3rem rgba(192, 163, 96, .12); }
@media (min-width: 52rem) { .kerst-dagen { grid-template-columns: repeat(3, 1fr); } }

/* Wat je kan verwachten */
.kerst-raster { display: grid; gap: 2.25rem 1.75rem; grid-template-columns: 1fr; }
.kerst-blok figure { margin: 0 0 1.25rem; overflow: hidden; background: #111; }
.kerst-blok img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kerst-blok h3 { font-family: var(--titel); font-size: 1.5rem; line-height: 1.2; margin-bottom: .5rem; }
.kerst-blok p { color: var(--room-zacht); font-size: .9375rem; }
.kerst-blok--dj {
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(192, 163, 96, .35);
  padding: 1.75rem 1.5rem;
  min-height: 14rem;
}
@media (min-width: 36rem) and (max-width: 51.999rem) { .kerst-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .kerst-raster { grid-template-columns: repeat(3, 1fr); } }

/* De foto's van binnen en van de opbouw */
.kerst-rij { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.kerst-rij figure { margin: 0; overflow: hidden; background: #111; }
.kerst-rij img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kerst-rij figcaption { font-size: .8125rem; color: var(--room-stil); padding-top: .6rem; }
@media (min-width: 40rem) { .kerst-rij--drie { grid-template-columns: repeat(3, 1fr); } .kerst-rij--twee { grid-template-columns: repeat(2, 1fr); } }
.kerst-rij--twee img { aspect-ratio: 4 / 5; }

/* Oudejaarsavond */
.kerst-oud {
  border: 1px solid var(--goud);
  background: linear-gradient(135deg, rgba(192, 163, 96, .14), rgba(34, 26, 20, .6));
  padding: clamp(1.75rem, 5vw, 3.5rem);
  display: grid; gap: 2rem;
}
.kerst-oud .titel { margin-bottom: .5rem; }
.kerst-oud__lijst { list-style: none; margin: 0; padding: 0; }
.kerst-oud__lijst li {
  font-family: var(--titel); font-size: 1.25rem; line-height: 1.3;
  padding: .7rem 0; border-bottom: 1px solid rgba(192, 163, 96, .28); color: var(--wit);
}
.kerst-oud__lijst li small { display: block; font-family: var(--letter); font-size: .8125rem; color: var(--room-zacht); }
.kerst-oud__prijs { font-family: var(--titel); font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--goud-licht); margin-top: 1.5rem; }
.kerst-oud__prijs small { display: block; font-family: var(--letter); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--room-zacht); margin-top: .9rem; line-height: 1.7; }
@media (min-width: 52rem) { .kerst-oud { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* Eerder en in de krant */
.kerst-eerder { display: grid; gap: 2rem; align-items: center; }
.kerst-eerder figure { margin: 0; overflow: hidden; }
.kerst-eerder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 52rem) { .kerst-eerder { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.kerst-pers { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.kerst-pers li { padding: .9rem 0; border-top: 1px solid var(--lijn); }
.kerst-pers a { font-family: var(--titel); font-size: 1.125rem; line-height: 1.3; text-decoration: none; color: var(--wit); }
.kerst-pers a:hover, .kerst-pers a:focus-visible { color: var(--goud-licht); }
.kerst-pers small { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--room-stil); margin-top: .3rem; }

/* Veelgestelde vragen */
.kerst-vragen details { border-top: 1px solid var(--lijn); padding: 1.1rem 0; }
.kerst-vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.kerst-vragen summary {
  cursor: pointer; list-style: none; position: relative; padding-right: 2rem;
  font-family: var(--titel); font-size: 1.1875rem; line-height: 1.3; color: var(--wit);
}
.kerst-vragen summary::-webkit-details-marker { display: none; }
.kerst-vragen summary::after { content: "+"; position: absolute; right: 0; top: 0; font-family: var(--letter); color: var(--goud); font-size: 1.5rem; line-height: 1; }
.kerst-vragen details[open] summary::after { content: "\2212"; }
.kerst-vragen details p { margin: .8rem 0 0; color: var(--room-zacht); max-width: 56ch; }


/* ── Op een gsm: de deur, niet het dak ─────────────────── */
/* Op een smal scherm bleef van de gevel enkel het midden over, en dat is het
   dak met de tent; de ingang zat onder de tekst. Daarom staat de foto hier
   in het bovenste deel van het eerste scherm, ingezoomd op de boogdeur, en
   begint de tekst eronder. (22 okt 2026) */
@media (max-width: 51.999rem) {
  .kerst-held { min-height: 0; }
  .kerst-held__foto { inset: 0 0 auto 0; height: 26rem; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, #000 64%, transparent 100%); }
  .kerst-held__foto img { object-position: 34% 50%; transform: scale(1.55); transform-origin: 34% 66%; }
  .kerst-held__foto::after {
    background: linear-gradient(to bottom, rgba(22, 17, 13, .4) 0%, rgba(22, 17, 13, 0) 30%);
  }
  .kerst-held__binnen { padding-top: 24rem; padding-bottom: 3rem; }
}


/* ── Het verhaal van Christmas House op de startpagina (23 okt 2026) ── */
.kerstverhaal { padding-block: var(--lucht); }
.kerstverhaal .titel { max-width: 22ch; }
.kerstverhaal .inleiding { margin-bottom: 4rem; }
.kerstverhaal__stuk { display: grid; gap: 1.75rem; align-items: center; margin-bottom: clamp(3rem, 7vw, 6rem); }
.kerstverhaal__foto { margin: 0; overflow: hidden; background: #111; }
.kerstverhaal__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.kerstverhaal__kop { font-family: var(--titel); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; color: var(--wit); max-width: 18ch; }
.kerstverhaal__tekst p:not(.label) { color: var(--room-zacht); max-width: 42ch; }
@media (min-width: 52rem) {
  .kerstverhaal__stuk { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
  .kerstverhaal__stuk--rechts { grid-template-columns: 1fr 1.35fr; }
  .kerstverhaal__stuk--rechts .kerstverhaal__foto { order: 2; }
}
.kerstverhaal__slot { border-top: 1px solid var(--lijn); padding-top: 2.25rem; }
.kerstverhaal__open { font-family: var(--titel); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.35; color: var(--wit); max-width: 34ch; margin-bottom: 1.5rem; }

/* De titel van het eerste scherm is langer dan "Vakantiegevoel, dicht bij huis.": iets meer breedte (23 okt 2026). */
.p-home .held__titel { max-width: 18ch; }

/* Het eerste scherm is in de kerstvariant een stilstaande sfeerfoto van de zaak (de zithoek met de krans)
   in plaats van het filmpje van het proosten op een zomeravond. De foto zoomt heel traag in; wie minder
   beweging gevraagd heeft, ziet hem stil. (23 okt 2026) */
@media (prefers-reduced-motion: no-preference) {
  .p-home .held__achter img { animation: kerstZoom 45s ease-in-out infinite alternate; transform-origin: 35% 40%; }
}
@keyframes kerstZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (max-width: 51.999rem) {
  /* Op een gsm blijft van de brede foto een smalle strook over: de krans met de lichtjes, niet het midden. */
  .p-home .held__achter img { object-position: 42% 50%; transform-origin: 42% 50%; }
}

/* De kerstfoto's zijn de foto's zoals de fotograaf ze maakte, zonder gradatie en zonder het sepia-waas
   van warm.css (Brian, 25 okt 2026: "gebruik de gewone foto's"). */
.p-home .held__achter img,
.p-home .drieluik__foto img,
.p-home .sfeer__band img,
.p-christmas .kerst-held__foto img,
.p-christmas .kerst-rij img,
.p-christmas .kerst-blok img { filter: none; }

/* Het dagbeeld van de gevel is een felle, groene foto bij daglicht; die krijgt het warme sepia-waas van de
   rest van de site (Brian, 27 okt 2026), op dezelfde sterkte als de gevelfoto op de contactpagina. */
.kerstverhaal__foto img.is-sepia { aspect-ratio: 4 / 3; filter: sepia(.45) saturate(.85) contrast(1.04) brightness(.94); }

/* De titel van het eerste scherm was te groot voor de foto (Brian, 27 okt 2026): kleiner, en op een gsm ook. */
.p-home .held__titel { font-size: clamp(1.75rem, 1rem + 2.7vw, 3.1rem); line-height: 1.15; max-width: 26ch; }
@media (max-width: 51.999rem) { .p-home .held__titel { font-size: 1.75rem; max-width: 16ch; } }

/* Het regeltje onder de titel van het eerste scherm (27 okt 2026). */
.p-home .held__kerst { margin: .9rem 0 1.1rem; font-size: 1.0625rem; line-height: 1.5; max-width: 36ch; }
@media (max-width: 51.999rem) { .p-home .held__kerst { font-size: .9375rem; margin: .6rem 0 .9rem; } }

/* "Sfeerfoto's →" leek een link waar je op kon tikken. Nu een swipe-teken: het woord Swipe (op een pc: Schuif) en een
   spoor waarop een gouden stipje naar rechts glijdt. Het is geen link en hoort er ook niet uit te zien als een link:
   stiller van kleur, geen pijlpunt, en het beweegt. (Brian, 27 okt 2026) */
.sfeer__hint--swipe { gap: 1rem; color: var(--room-stil); cursor: default; pointer-events: none; user-select: none; }
.sfeer__swipe-tekst--muis { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sfeer__swipe-tekst--vinger { display: none; }
  .sfeer__swipe-tekst--muis { display: inline; }
}
.sfeer__swipe-spoor { position: relative; display: inline-block; width: 4.5rem; height: 1px; background: rgba(192, 163, 96, .35); }
.sfeer__swipe-spoor i { position: absolute; top: 50%; left: 0; width: .55rem; height: .55rem; margin-top: -.275rem; border-radius: 50%; background: var(--goud); }
@media (prefers-reduced-motion: no-preference) {
  .sfeer__swipe-spoor i { animation: sfeerSwipe 2.4s var(--veer) infinite; }
}
@keyframes sfeerSwipe {
  0%   { left: 0; opacity: 0; transform: scale(.6); }
  15%  { opacity: 1; transform: scale(1); }
  70%  { left: calc(100% - .55rem); opacity: 1; }
  100% { left: calc(100% - .55rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sfeer__swipe-spoor i { left: calc(100% - .55rem); } }

/* Het label in het drieluik: "tot januari" mag nooit alleen op een regel eindigen (Brian, 27 okt 2026). Op een smal scherm
   staat het op twee gelijke regels: "Christmas House by Seenn" en daaronder "tot januari". */
.kerst-drieluik__tot { white-space: nowrap; }
@media (max-width: 47.999rem) {
  .kerst-drieluik__label span { display: block; }
  .kerst-drieluik__sep { display: none !important; }
}

/* "Swipe voor meer sfeerfoto's": op een smal scherm kleiner gespatieerd, zodat het op één regel past naast het spoor. */
@media (max-width: 47.999rem) {
  .sfeer__hint--swipe { gap: .7rem; letter-spacing: .12em; font-size: .6875rem; white-space: nowrap; }
  .sfeer__swipe-spoor { width: 2.25rem; }
}

/* Twee sfeerfoto's van de winkel onder de producten (4 nov 2026). */
.winkelsfeer { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.winkelsfeer figure { margin: 0; }
.winkelsfeer img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: none; background: #111; }
.winkelsfeer figcaption { padding: .7rem 0 0; font-size: .8125rem; letter-spacing: .02em; color: var(--room-stil); background: transparent; }
@media (min-width: 52rem) { .winkelsfeer { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

/* Conceptstore op de gsm: de artikelen in twee kolommen in plaats van een foto per scherm (4 nov 2026). */
@media (max-width: 39.99rem) {
  .stukken { grid-template-columns: repeat(2, 1fr); gap: 1.75rem .875rem; }
  .stuk__naam { font-size: .9375rem; line-height: 1.3; margin: .75rem 0 0; }
}