/* extras.css — additions from 27 Sep 2026 (loaded after style.css).
   Kept separate so it could be published without re-uploading style.css;
   safe to merge into style.css on a future deploy. */
/* ============================================================
   SEP 2026 — WhatsApp links, Christmas block, booking page
   ============================================================ */
/* generic chat-bubble icon beside "Message us on WhatsApp" links */
.ico-chat{width:1.05em;height:1.05em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.17em;margin-right:.45em}
.btn .ico-chat{margin-right:0}

/* ---------- Christmas block (home) — hidden after Boxing Day by an inline script in index.html ---------- */
.xmas[hidden]{display:none!important}
.xmas{padding:var(--space-l) 0 0;scroll-margin-top:90px}
.xmas .xmas-card,html.lg-refract .xmas .xmas-card{width:min(1200px,92vw);margin:0 auto;text-align:center;overflow:hidden;
  padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px);
  background:
    radial-gradient(60% 70% at 50% 0%,rgba(200,162,75,.2),transparent 70%),
    radial-gradient(45% 60% at 100% 100%,rgba(178,34,52,.28),transparent 72%),
    radial-gradient(40% 55% at 0% 100%,rgba(30,110,70,.18),transparent 70%),
    rgba(18,15,10,.94)}
.xmas-card>*:not(.xmas-sparkle){position:relative;z-index:1}
.xmas-card h2{font-size:clamp(28px,4.4vw,54px);margin:20px auto 18px;max-width:18ch}
.xmas-card p{color:#d8cfbd;max-width:54ch;margin:0 auto 14px;font-size:16px}
.xmas-card .xmas-private{color:var(--muted);font-size:15px}
.xmas-card .xmas-private b{color:var(--gold-bright)}
.xmas-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 24px}
.xmas-soon{display:inline-flex;align-items:center;gap:12px;font-family:var(--label-font);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.xmas-soon i{font-style:normal;color:#e05566;font-size:11px}
/* scattered gold "fairy lights" — static dots, a slow twinkle */
.xmas-sparkle{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(2px 2px at 7% 18%,#f6e7b4 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 16% 62%,#fff 50%,transparent 52%),
    radial-gradient(2px 2px at 27% 12%,#e8cd8a 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 38% 84%,#f6e7b4 50%,transparent 52%),
    radial-gradient(2.5px 2.5px at 61% 9%,#e8cd8a 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 72% 70%,#fff 50%,transparent 52%),
    radial-gradient(2px 2px at 84% 22%,#f6e7b4 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 93% 58%,#e8cd8a 50%,transparent 52%),
    radial-gradient(2px 2px at 50% 94%,#e05566 50%,transparent 52%),
    radial-gradient(2px 2px at 4% 88%,#e05566 50%,transparent 52%),
    radial-gradient(2px 2px at 97% 90%,#f6e7b4 50%,transparent 52%);
  animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.xmas-sparkle{animation:none}}

/* ---------- booking page — the frame fills the screen, no small inner box ---------- */
.book-page{padding:calc(104px + env(safe-area-inset-top,0px)) 0 48px}
.book-head{text-align:center;padding-bottom:18px}
.book-head h1{font-size:clamp(28px,5vw,50px);margin:0 0 10px}
.book-head p{color:var(--muted);font-size:15px;max-width:60ch;margin:0 auto}
.book-head a,.book-foot a{color:var(--gold-bright);border-bottom:1px solid var(--line);white-space:nowrap}
.book-frame{width:min(760px,94vw);margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0f1422;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
/* --ft = where the frame starts on the page (set by the script on book.html) */
.book-frame iframe{display:block;width:100%;border:0;height:max(620px,calc(100svh - var(--ft,230px) - 24px))}
.book-foot{text-align:center;color:var(--muted);font-size:14px;margin-top:22px;line-height:2}
@media (max-width:960px){
  body:has(.book-page){padding-bottom:0}
  .book-page{padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:28px}
  .book-head{padding-bottom:12px}
  .book-head p{font-size:14px}
  /* edge-to-edge on phones: the form gets the whole width */
  .book-frame{width:100%;border-radius:0;border-inline:0}
  .book-frame iframe{height:max(480px,calc(100svh - var(--ft,210px)))}
}

/* ---------- hero intro — the whole sequence lands in ~1s (was ~2s) ----------
   Same order, same easing and the same rise as before, just tighter:
   each piece rises over .7s, starting .06s after the one above it.
   Last piece (the chips) is in place at 1.0s. */
@media (prefers-reduced-motion:no-preference){
  .hero .motif{animation:rise .7s var(--ease) 0s forwards,motifGlow 5s ease-in-out .8s infinite}
  .kicker{animation:rise .7s var(--ease) .06s forwards}
  /* the brunch badge sits where the kicker does; its timing is inline on
     the page, so it needs !important to follow the new sequence */
  .hero .wrap>.badge{animation:rise .7s var(--ease) .06s forwards!important}
  .hero h1{animation:rise .7s var(--ease) .12s forwards}
  .hero p{animation:rise .7s var(--ease) .18s forwards}
  .hero-cta{animation:rise .7s var(--ease) .24s forwards}
  .hero-meta{animation:rise .7s var(--ease) .30s forwards}
  .scroll-cue{animation:rise .7s var(--ease) .30s forwards}
}
/* "Reduce motion" (iPhone / Android / Windows accessibility setting)
   switches every animation off — including the hero's fade-in, which
   left the hero heading, text and buttons stuck at opacity 0. Show them
   straight away instead. */
@media (prefers-reduced-motion:reduce){
  .hero .motif,.kicker,.hero h1,.hero p,.hero-cta,.hero-meta,.hero .wrap>.badge{opacity:1!important;transform:none!important}
  nav:not(.scrolled) ~ .hero .scroll-cue{opacity:1}
}