/* ==========================================================================
   Waterside — Christmas 2026
   A deliberately distinct skin for this one page: ivory, warm gold and near-
   black, lifted directly from the client's own Christmas 2026 PDF (colours
   sampled from its artwork, same festive script + serif pairing). Loaded
   *after* styles.css — it overrides the shared design tokens so every
   existing component (header, footer, buttons, forms, accordion, reveal
   animation) re-skins itself automatically, plus a handful of components
   that are unique to this page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root{
  --font-xmas-script: 'Alex Brush', 'Brush Script MT', cursive;
  --font-xmas-serif: 'Playfair Display', 'Georgia', serif;

  /* Re-themed tokens — ivory / warm gold / near-black, sampled from the PDF */
  --color-bg:            #f7f3e9;
  --color-bg-alt:        #f0e9d8;
  --color-surface:       #ffffff;
  --color-surface-2:     #faf6ec;
  --color-purple-deep:   #f3e6c4;   /* reused by .cta-band's radial glow */
  --color-purple:        #ecd9a8;
  --color-purple-soft:   #e3c583;
  --color-gold:          #b8791a;
  --color-gold-light:    #d9941c;
  --color-gold-dim:      rgba(184,121,26,0.32);
  --color-cream:         #201a12;  /* the "on dark" text colour — now the ink colour */
  --color-cream-dim:     rgba(32,26,18,0.85);  /* body copy, dish descriptions, hints — darkened for legibility on cream (~10:1 contrast) */
  --color-muted:         #4a3e2a;               /* labels, captions — darkened from a light tan (~9.4:1 contrast) */
  --color-border:        rgba(184,121,26,0.3);
  --color-border-soft:   rgba(32,26,18,0.14);
  --color-overlay:       rgba(247,243,233,0.75);

  /* Headings switch to the new serif; the flowing script is applied selectively */
  --font-display: var(--font-xmas-serif);
}

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

/* Eyebrow labels become the flowing festive script instead of tracked uppercase */
.eyebrow{
  font-family:var(--font-xmas-script);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--color-gold);
}
.eyebrow::before{ content:none; }

main img{ filter:none; }

/* Header + mobile nav: hardcoded (non-token) colours in the base sheet need an explicit flip */
.site-header.is-scrolled{
  background:rgba(247,243,233,0.92);
  border-color:var(--color-border-soft);
}
.mobile-nav{
  background:linear-gradient(160deg, #fffdf7 0%, #f3ead3 100%);
}
.skip-link{ color:#2a1f10; }
/* Desktop "More" dropdown: its base panel is hardcoded dark, but this theme turns the link text dark ink,
   so without this the links are dark on dark and invisible. */
.nav-more-panel{
  background:linear-gradient(160deg, #fffdf7 0%, #f3ead3 100%);
  border-color:var(--color-border);
  box-shadow:0 20px 40px rgba(32,26,18,0.18);
}
.nav-more-panel a:hover, .nav-more-panel a[aria-current="page"]{ background:rgba(184,121,26,0.12); color:#8a5510; }

/* Buttons: dark-on-gold still reads fine; ghost/outline need a lighter hover wash */
.btn-ghost-gold:hover{ background:rgba(184,121,26,0.08); }
.menu-downloads a:hover{ border-color:var(--color-gold); }

/* ==========================================================================
   Decorative confetti rail (real artwork lifted from the client's PDF) —
   absolutely positioned against <body> (set position:relative above), stretched
   top:0 to bottom:0 so it runs the full height of the *document*, not just the
   viewport. It scrolls with the page like any other background, rather than
   staying pinned in place (position:fixed looked like a static, non-scrolling
   sidebar, especially on mobile). It sits at z-index:-1, a negative value,
   which the stacking spec paints *behind* ordinary in-flow content, so every
   section still reads cleanly on top; sections with their own solid
   background (the price cards, the form section) simply cover it in their
   own area, same as any background layer would.
   ========================================================================== */
.xmas-rail{
  /* background-repeat:repeat-y, not cover/no-repeat: this box is the full DOCUMENT height
     (thousands of px), not the viewport, so a single no-repeat image would only ever
     appear once near the physical top of the page and be gone for the rest of the scroll.
     Tiling the same artwork down the rail is what actually keeps it appearing throughout. */
  position:absolute; top:0; bottom:0; width:min(260px, 22vw);
  background-image:url('../images/xmas-artwork-rail.jpg');
  background-repeat:repeat-y;
  background-position:left top;
  background-size:260px auto;
  opacity:0.55; pointer-events:none; z-index:-1;
}
.xmas-rail.left{ left:0; }
.xmas-rail.right{ right:0; transform:scaleX(-1); }

/* On narrower screens the content column has much less spare margin, so the full-width
   rail (which would sit on top of body text) is swapped for a slim sliver instead of
   being hidden outright — a touch more side padding on the page makes room for it. */
@media (max-width:900px){
  .xmas-rail{
    width:34px;
    background-size:110px auto;
    background-position:left top;
    opacity:0.7;
  }
  .container, .container-wide{ padding-inline:2.5rem; }
}
@media (max-width:480px){
  .xmas-rail{ width:26px; background-size:85px auto; }
  .container, .container-wide{ padding-inline:2.1rem; }
}

/* A faint version of the same artwork behind two content boxes further down the
   page, so the motif keeps reappearing rather than being confined to the margins. */
.xmas-terms, .xmas-form-note{
  position:relative; isolation:isolate; overflow:hidden;
}
.xmas-terms::before, .xmas-form-note::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:url('../images/xmas-artwork-rail.jpg') right -40px top -60px/140% auto no-repeat;
  opacity:0.07; pointer-events:none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.xmas-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:10rem 0 5rem;
  background:radial-gradient(ellipse at 50% 0%, var(--color-surface-2) 0%, var(--color-bg) 65%);
  border-bottom:1px solid var(--color-border-soft);
  text-align:center;
}
.xmas-hero-layout{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2.2rem;
}
@media (min-width:900px){
  .xmas-hero-layout{ flex-direction:row; justify-content:center; gap:3.5rem; }
}
.xmas-hero-media{ flex-shrink:0; width:min(220px, 60vw); }
.xmas-hero-media img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-md);
  border:1px solid var(--color-border); box-shadow:0 24px 50px rgba(32,26,18,0.18);
}
.xmas-hero-inner{ position:relative; max-width:640px; margin-inline:auto; }
.xmas-live-music{ font-family:var(--font-xmas-serif); font-style:italic; color:var(--color-gold); font-size:1.05rem; margin-top:-1.2rem; margin-bottom:2rem; }
.xmas-hero .eyebrow{ font-size:1.15rem; display:block; margin-bottom:0.6rem; }
.xmas-hero h1{
  font-family:var(--font-xmas-script); font-weight:400;
  font-size:clamp(4rem, 3rem + 5vw, 7.5rem);
  color:var(--color-gold); line-height:1; margin-bottom:0.3rem;
}
.xmas-hero .xmas-year{
  display:flex; align-items:center; justify-content:center; gap:0.8rem;
  font-family:var(--font-xmas-serif); font-style:italic; font-size:1.1rem; letter-spacing:0.2em;
  color:var(--color-cream-dim); margin-bottom:1.6rem;
}
.xmas-hero .xmas-year::before, .xmas-hero .xmas-year::after{ content:''; width:38px; height:1px; background:var(--color-gold-dim); }
.xmas-hero p{ font-size:1.1rem; margin-bottom:2rem; }
.xmas-hero .btn-row{ justify-content:center; }

/* ==========================================================================
   Pricing callouts
   ========================================================================== */
.xmas-pricing{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:var(--space-lg); }
@media (min-width:760px){ .xmas-pricing{ grid-template-columns:1fr 1fr; } }
.xmas-price-card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:2rem; text-align:center;
}
.xmas-price-card h3{ margin-bottom:0.4rem; }
.xmas-price-card .price{ font-family:var(--font-xmas-serif); font-size:1.7rem; color:var(--color-gold); margin-bottom:0.5rem; }
.xmas-price-card p{ font-size:0.92rem; }

/* ==========================================================================
   Menu sections — reuse .dish-list / .dish, restyle the section head script
   ========================================================================== */
.xmas-menu-block{ margin-bottom:var(--space-2xl); }
.xmas-menu-block .menu-section-head{ display:block; text-align:center; border-bottom:none; }
.xmas-menu-block .menu-section-head h2{ font-family:var(--font-xmas-serif); font-style:italic; }
.xmas-menu-block .menu-section-head .eyebrow{ margin-bottom:0; }
.xmas-menu-block .dish-list{ max-width:760px; margin-inline:auto; }
.xmas-note{
  max-width:760px; margin:0 auto var(--space-lg); text-align:center;
  font-style:italic; color:var(--color-cream-dim); font-size:0.95rem;
}

/* ==========================================================================
   Booking-terms note (deposit / payment deadlines)
   ========================================================================== */
.xmas-terms{
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:2rem 2.2rem; max-width:820px; margin-inline:auto;
}
.xmas-terms h4{ margin-bottom:0.8rem; }
.xmas-terms ul{ display:flex; flex-direction:column; gap:0.6rem; }
.xmas-terms li{ position:relative; padding-left:1.2rem; font-size:0.94rem; color:var(--color-cream-dim); }
.xmas-terms li::before{ content:'✦'; position:absolute; left:0; color:var(--color-gold); font-size:0.75rem; top:0.25rem; }

/* ==========================================================================
   Booking form
   ========================================================================== */
.xmas-form-section{
  background:var(--color-surface-2); border-top:1px solid var(--color-border-soft);
}
.xmas-time-legend{
  font-size:0.85rem; color:var(--color-cream-dim); margin-bottom:1rem; line-height:1.6;
}
.xmas-time-grid{ display:grid; gap:0.8rem; grid-template-columns:repeat(2,1fr); margin-bottom:1.6rem; }
@media (min-width:560px){ .xmas-time-grid{ grid-template-columns:repeat(4,1fr); } }
.xmas-time-option{
  position:relative; display:block; cursor:pointer;
}
.xmas-time-option input{ position:absolute; opacity:0; width:1px; height:1px; }
.xmas-time-option span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:64px; padding:0.8rem 0.6rem; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface);
  font-family:var(--font-xmas-serif); font-size:0.98rem; color:var(--color-cream);
  transition:all var(--dur) var(--ease);
}
.xmas-time-option input:checked + span{
  background:var(--color-gold); border-color:var(--color-gold); color:#fff;
}
.xmas-time-option input:focus-visible + span{ outline:2px solid var(--color-gold); outline-offset:2px; }
.xmas-time-option:hover span{ border-color:var(--color-gold); }
.xmas-time-error{
  display:none; color:#a13a1f; font-size:0.85rem; margin:-0.8rem 0 1.4rem;
}
.xmas-time-error.is-visible{ display:block; }

.xmas-radio-row{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:1.6rem; }
.xmas-radio-option{ display:flex; align-items:center; gap:0.55rem; cursor:pointer; font-size:0.98rem; }
.xmas-radio-option input{ accent-color:var(--color-gold); width:18px; height:18px; }

.char-counter{ font-size:0.78rem; color:var(--color-muted); text-align:right; margin-top:-1rem; margin-bottom:1.2rem; }
.form-hint{ font-size:0.8rem; color:var(--color-muted); margin-top:0.4rem; }
.form-field.has-error input{ border-color:#a13a1f; }
.form-field-error{ display:none; color:#a13a1f; font-size:0.82rem; margin-top:0.4rem; }
.form-field.has-error .form-field-error{ display:block; }

.xmas-form-note{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:1.4rem 1.6rem; margin-bottom:2rem;
}
.xmas-form-note svg{ flex-shrink:0; color:var(--color-gold); margin-top:0.15rem; }
.xmas-form-note p{ font-size:0.92rem; margin:0; }