/* ==========================================================================
   The West Bar & Restaurant — shared stylesheet
   Palette pulled from front.jpg (building facade) + logo.jpg
   ========================================================================== */

:root {
  --navy: #061943;          /* exact logo background */
  --navy-soft: #0d2a5c;
  --teal: #145064;          /* building wall blue */
  --teal-deep: #0d3c4c;
  --gold: #d6a339;          /* window frames / logo lettering */
  --gold-light: #ecc873;
  --cream: #f8f3e8;
  --cream-dim: #efe6d3;
  --charcoal: #201c16;
  --white: #ffffff;

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --shadow-lg: 0 20px 60px rgba(6, 25, 67, 0.35);
  --shadow-sm: 0 6px 18px rgba(6, 25, 67, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--navy);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------------------------------- */
/* Background video                    */
/* ---------------------------------- */

.bg-video-wrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: -2;
  overflow: hidden;
  background: var(--navy) center/cover no-repeat;
}

.bg-video-wrap video,
.bg-video-wrap .poster-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

/* z-index:1 here (above the video's 0) so this actually paints on top of
   the video for legibility — a plain z-index:-1 auto-stacks *below* an
   absolutely-positioned video with no explicit z-index of its own. */
.bg-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,15,35,.72) 0%, rgba(6,15,35,.28) 22%, rgba(6,15,35,.28) 72%, rgba(6,15,35,.78) 100%);
  z-index: 1;
}

/* ---------------------------------- */
/* Page stack: header + card + footer  */
/* centered together as one block      */
/* ---------------------------------- */

.page-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px clamp(16px, 5vw, 56px);
}

.page-stack {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* ---------------------------------- */
/* Header                              */
/* ---------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(4px, 1vw, 12px);
  background: none;
}

.brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.brand img {
  height: 52px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

.main-nav a {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: .04em;
  color: var(--cream);
  position: relative;
  padding: 6px 2px;
  transition: color .2s ease;
  text-shadow: 0 1px 6px rgba(6,15,35,.85), 0 1px 2px rgba(6,15,35,.9);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right .25s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--gold-light);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  right: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(214, 163, 57, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  background: rgba(6, 25, 67, .35);
  box-shadow: 0 2px 10px rgba(6,15,35,.5);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.social-icons a:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

.social-icons svg { width: 16px; height: 16px; fill: currentColor; }

/* TikTok link waits, hidden, until the owner has an account to point it at.
   `.social-icons a` sets its own display:flex (specificity beats the UA
   stylesheet's [hidden] rule on its own), so this needs to be explicit
   rather than relying on the bare hidden attribute. Delete the `hidden`
   attribute in the markup (all 15 pages + the WP theme's header.php) to
   bring it back — don't remove this rule, still useful for next time. */
.social-icons a[hidden] { display: none; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(214,163,57,.55);
  border-radius: 8px;
  background: rgba(6, 25, 67, .35);
  box-shadow: 0 2px 10px rgba(6,15,35,.5);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gold-light);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------------------------------- */
/* Content card                        */
/* ---------------------------------- */

.content-card {
  position: relative;
  width: 100%;
  background: rgba(248, 243, 232, 0.85);
  border: 1px solid rgba(214, 163, 57, .5);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.content-text .eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 10px;
}

.content-text h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--navy);
}

.content-text p.lede {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #2c2a24;
  margin: 0 0 22px;
}

.content-media {
  position: relative;
}

.content-media > img {
  width: 100%;
  height: clamp(260px, 34vw, 420px);
  object-fit: cover;
  border-radius: 14px;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------- */
/* Feature row — three supporting      */
/* blocks under the hero card          */
/* (Bar: history / drinks / what's on; */
/*  Restaurant: sourcing / booking)    */
/* ---------------------------------- */

.feature-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(20px, 3vw, 32px);
}
.feature-row.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* Supplementary photo grid (bar interior / signature dishes). Currently
   reuses whatever's in the page's existing carousel folder as a
   placeholder — swap for dedicated photos once the owner sends more; see
   CLAUDE.md. */
.photo-grid-head {
  margin-top: clamp(20px, 3vw, 32px);
  text-align: center;
}
.photo-grid-head .eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  color: var(--teal);
  font-weight: 600;
  margin: 0;
}
.photo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin-top: 14px;
}
.photo-grid img {
  width: 100%;
  height: clamp(160px, 18vw, 220px);
  object-fit: cover;
  border-radius: 14px;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-sm);
}

.feature-card {
  background: rgba(248, 243, 232, 0.85);
  border: 1px solid rgba(214, 163, 57, .4);
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 28px);
}

.feature-card .eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 8px;
}

.feature-card h2 {
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 8px;
}

.feature-card p:not(.eyebrow) {
  font-size: .88rem;
  line-height: 1.6;
  color: #2c2a24;
  margin: 0;
}
.feature-card a {
  color: var(--teal);
  border-bottom: 1px solid rgba(20, 80, 100, .35);
}

/* Photo carousel: slides transition right-to-left on an interval (see main.js) */

.carousel {
  position: relative;
  overflow: hidden;
  height: clamp(260px, 34vw, 420px);
  border-radius: 14px;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-sm);
}

.carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-media .media-caption {
  margin-top: 10px;
  /* Cancels this element's own contribution (margin-top + line height, ~28px
     at this font-size) to .content-media's auto height, so .content-card's
     align-items:center centers the carousel/photo itself against the text
     column, not the carousel+caption block together — the caption still
     renders in the same visual spot below the photo, it just doesn't shift
     that centering down by its own height. Re-measure if the caption ever
     wraps to two lines or the font-size changes. */
  margin-bottom: -28px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
}

/* Review badge carousel: badges slide bottom-to-top on an interval (see main.js) */

.review-carousel {
  position: relative;
  overflow: hidden;
}

.review-track {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review-badge {
  flex: 0 0 auto;
  background: var(--navy);
  color: var(--cream);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(214,163,57,.55);
  box-shadow: var(--shadow-sm);
}

.review-badge .stars {
  display: flex;
  gap: 3px;
}

.review-badge .stars svg {
  width: 16px;
  height: 16px;
  fill: var(--gold);
}

.review-badge blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
}

.review-badge cite {
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--gold-light);
}


/* ---------------------------------- */
/* Footer                              */
/* ---------------------------------- */

.site-footer {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px clamp(16px, 4vw, 48px) 0;
  background: none;
}

.site-footer .site-hours {
  font-size: .82rem;
  letter-spacing: .01em;
  opacity: .85;
}

.site-footer p {
  margin: 0;
  color: var(--cream);
  font-size: 1.1rem;
  letter-spacing: .02em;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(6,15,35,.85), 0 1px 2px rgba(6,15,35,.9);
}

.site-footer a {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(236,200,115,.4);
}

.site-footer .dot-sep {
  margin: 0 10px;
  color: var(--gold);
}

/* ---------------------------------- */
/* Buttons                             */
/* ---------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

/* ---------------------------------- */
/* Functions page: hero CTA row        */
/* ---------------------------------- */

/* The Functions review carousel reuses .review-carousel / .review-badge, so
   the badges look the same as on bar/restaurant. It just needs a little
   breathing room in the text column. */
.fn-intro .review-carousel { margin: 4px 0 20px; }

.enquire-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Menu has no review carousel to sit under, so this lives inside .menu-head
   instead (its own centred, narrow intro block) — centre the row to match
   rather than leaving it flush left under centred text. */
.menu-head .enquire-actions {
  justify-content: center;
  margin-top: clamp(14px, 2vw, 20px);
}

/* ---------------------------------- */
/* Functions page: one card, two views */
/* (intro  ⇄  enquiry form)            */
/* ---------------------------------- */

.fn-card { display: block; }              /* undo .content-card's own grid */

.fn-intro,
.fn-form {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
/* .fn-intro centers its media column against the text column (a fixed-height
   photo/carousel next to text that's usually taller — see .content-card's own
   align-items for the matching reasoning). .fn-form stays start-aligned: its
   left column is a short intro blurb that should sit level with the form's
   first field, not float centred against the whole form's height. */
.fn-intro {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
}
.fn-form  {
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  margin-top: clamp(22px, 3.5vw, 36px);   /* space from the intro when both show (no-JS) */
  scroll-margin-top: 24px;
}

/* With JS, "Send an enquiry" swaps the intro view for the form view (main.js
   toggles `.show-form`). Narrow-screen behaviour: swap them with `display`, so
   the card is only ever as tall as the visible view. The page scrolls from the
   top here, so the height change causes no visible shift. */
.has-js .fn-card > .fn-form { display: none; margin-top: 0; }
.has-js .fn-card.show-form > .fn-intro { display: none; }
.has-js .fn-card.show-form > .fn-form { display: grid; }

/* Wide-screen behaviour: the card is vertically centred in the viewport, so
   resizing it on toggle would shift it up or down. Sit both views in the same
   grid cell instead — the card always takes the taller view's height, and
   toggling then moves and resizes nothing. The inactive view keeps its space
   but leaves the tab / a11y order (visibility, not display). */
@media (min-width: 901px) {
  .has-js .fn-card {
    display: grid;
    grid-template-columns: 1fr;   /* one column; each view runs its own inner grid */
  }
  .has-js .fn-card > .fn-intro,
  .has-js .fn-card > .fn-form,
  .has-js .fn-card.show-form > .fn-intro {
    display: grid;
    grid-area: 1 / 1;             /* every view occupies the same cell */
  }
  .has-js .fn-card > .fn-form,
  .has-js .fn-card.show-form > .fn-intro { visibility: hidden; }
  .has-js .fn-card.show-form > .fn-form { visibility: visible; }
}

.fn-back {
  grid-column: 1 / -1;
  justify-self: start;
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  background: none;
  border: 0;
  cursor: pointer;
}
.fn-back:hover { color: var(--gold); }
.has-js .fn-back { display: inline-flex; }

.enquire-intro .eyebrow,
.menu-head .eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 10px;
}

.enquire-intro h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 12px;
}

.enquire-intro p {
  font-size: .96rem;
  line-height: 1.65;
  color: #2c2a24;
  margin: 0;
}

.enquire-intro a {
  color: var(--teal);
  border-bottom: 1px solid rgba(20, 80, 100, .35);
}

.enquire-form { display: flex; flex-direction: column; gap: 14px; }

.field-row { display: flex; flex-direction: column; }
.field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.enquire-form label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}

.enquire-form .opt {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: .82em;
  color: #8a8578;
}

.enquire-form input,
.enquire-form select,
.enquire-form textarea {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--charcoal);
  padding: 11px 13px;
  border: 1px solid rgba(6, 25, 67, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .75);
  width: 100%;
}

.enquire-form textarea { resize: vertical; min-height: 92px; }

.enquire-form input:focus,
.enquire-form select:focus,
.enquire-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.enquire-form .btn { align-self: flex-start; margin-top: 2px; }

.form-fineprint { margin: 0; font-size: .78rem; color: #8a8578; }

.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.45;
}
.form-status.is-ok {
  background: rgba(20, 80, 100, .12);
  color: var(--teal-deep);
  border: 1px solid rgba(20, 80, 100, .3);
}
.form-status.is-err {
  background: rgba(150, 45, 30, .1);
  color: #8a2a1e;
  border: 1px solid rgba(150, 45, 30, .3);
}

.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------- */
/* Menu page                           */
/* ---------------------------------- */

.menu-card {
  position: relative;
  width: 100%;
  background: rgba(248, 243, 232, 0.86);
  border: 1px solid rgba(214, 163, 57, .5);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 3.6vw, 46px);
  display: flex;
  flex-direction: column;
}

/* small "Download PDF" link, pinned top-right of the card */
.menu-pdf {
  position: absolute;
  top: clamp(14px, 2.4vw, 22px);
  right: clamp(14px, 2.4vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1px solid rgba(20, 80, 100, .35);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.menu-pdf svg { width: 14px; height: 14px; }
.menu-pdf:hover { color: var(--gold); border-color: var(--gold); }

.print-only { display: none; }

.menu-head {
  flex: none;
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(14px, 2.2vw, 22px);
}

.menu-head .eyebrow { margin-bottom: 6px; }

.menu-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.06;
  color: var(--navy);
  margin: 0 0 8px;
}

.menu-head .lede {
  font-size: .92rem;
  line-height: 1.5;
  color: #2c2a24;
  margin: 0;
}

.menu-sections {
  display: grid;
  gap: clamp(24px, 3vw, 40px) clamp(36px, 5vw, 64px);
  padding-top: 4px;
}

.menu-group { margin: 0; }

.menu-group h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  letter-spacing: .02em;
}

.menu-note {
  margin: 0 0 4px;
  font-size: .86rem;
  font-style: italic;
  color: var(--teal);
}

.menu-group ul { list-style: none; margin: 0; padding: 0; }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(6, 25, 67, .12);
}
.menu-item:last-child { border-bottom: 0; }

.mi-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy);
}

.mi-price {
  font-weight: 500;
  font-size: .92rem;
  color: var(--teal);
  white-space: nowrap;
  text-align: right;
}

.mi-desc {
  grid-column: 1 / -1;
  font-size: .88rem;
  line-height: 1.5;
  color: #4a4740;
  margin-top: 3px;
}

.menu-fineprint {
  flex: none;
  max-width: 620px;
  margin: clamp(18px, 2.6vw, 28px) auto 0;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid rgba(6, 25, 67, .12);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--teal);
  text-align: center;
}

/* ---------------------------------- */
/* Functions / Menu page behaviour     */
/* ---------------------------------- */

/* Menu runs taller than one screen sometimes (whenever the list is long —
   it no longer forces itself into the viewport with an inner scrollbar,
   see .menu-sections above). `safe center` keeps the stack vertically
   centred like the shorter pages when it fits, but falls back to
   top-aligned when it doesn't, so a tall page scrolls from its top edge
   instead of being clipped above the fold. Below 761px the page already
   top-aligns (see the mobile block), so this only needs to apply above it. */
@media (min-width: 761px) {
  body[data-page="menu"] .page-main { align-items: safe center; }
}
body.fn-form-open { overflow-y: auto; }

/* Functions is always top-aligned, not "safe centred" like Menu above —
   unlike a long menu, which is genuinely fine centred whenever it's short
   enough to fit, Functions is about to get the same feature-row/photo-grid
   content Bar and Restaurant already have (23 Sept 2026), so it should
   already read as "a page that scrolls," matching where those two ended up,
   rather than flipping from centred to top-aligned the moment that content
   lands. */
@media (min-width: 761px) {
  body[data-page="functions"] .page-main { align-items: flex-start; }
}

/* Bar and Restaurant are about to get more content and won't reliably fit one
   screen either — pre-applying the same `safe center` here now is a no-op
   today (nothing overflows yet) but means the new content in a follow-up
   change doesn't also need a layout fix landed with it. */
@media (min-width: 761px) {
  body[data-page="bar"] .page-main,
  body[data-page="restaurant"] .page-main { align-items: safe center; }
}


/* ---------------------------------- */
/* Responsive                          */
/* ---------------------------------- */

@media (min-width: 780px) {
  .menu-sections { grid-template-columns: 1fr 1fr; align-items: start; }
  .menu-group.wide { grid-column: 1 / -1; }
  .menu-group.wide ul { columns: 2; column-gap: clamp(36px, 5vw, 64px); }
  .menu-group.wide .menu-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
}

@media (max-width: 900px) {
  .content-card {
    grid-template-columns: 1fr;
  }
  .content-media { order: -1; }
  /* only a bare <img> in the media column, not the carousel's slides —
     `.content-media img` (no `>`) was also shrinking `.carousel-slide img`
     below the frame height, leaving a gap under the photo. */
  .content-media > img { height: 240px; }
  /* The negative margin-bottom on .media-caption (desktop-only trick: keeps
     the caption from shifting .content-card's align-items:center centering
     point) is meaningless here since .content-card is single-column and
     nothing centers against it — worse, it pulls .content-text up into
     overlapping the caption text. Reset it so the stack keeps normal gaps. */
  .content-media .media-caption { margin-bottom: 0; }

  .fn-intro,
  .fn-form { grid-template-columns: 1fr; gap: 22px; }

  .feature-row,
  .feature-row.cols-2 { grid-template-columns: 1fr; }

  .photo-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { overflow-y: auto; }

  /* Skip the video on phones — the wrapper's own background-image (the
     poster photo, set inline per page) shows through instead. Paired with
     the check in main.js, which never calls play() under this width, so the
     8.5MB file is never fetched at all. For now; a short looping clip for
     mobile is a possible follow-up. */
  .bg-video-wrap video { display: none; }

  .page-main { align-items: flex-start; padding-top: 20px; padding-bottom: 20px; }

  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(6, 25, 67, .97);
    border-radius: 10px;
    padding: 8px clamp(16px, 6vw, 32px) 18px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(214,163,57,.18);
  }
  .nav-toggle { display: inline-flex; }
  .header-right { gap: 12px; }
  .brand img { height: 40px; }
  .site-footer p { font-size: .85rem; }
  .site-footer .dot-sep { display: block; height: 6px; margin: 4px 0 0; color: transparent; }

  .menu-head h1 { font-size: 2rem; }
  .enquire-intro h2 { font-size: 1.6rem; }
}

@media (max-width: 620px) {
  /* on a phone the PDF link would clash with the centred title — drop it
     into a normal right-aligned row above the heading */
  .menu-pdf {
    position: static;
    align-self: flex-end;
    margin: 0 0 12px;
  }
}

@media (max-width: 560px) {
  .field-row.two,
  .field-row.three { grid-template-columns: 1fr; }
  .enquire-actions { flex-direction: column; align-items: stretch; }
  .enquire-actions .btn { width: 100%; }
  .menu-item { grid-template-columns: 1fr; }
  .mi-price { text-align: left; margin-top: 2px; }
}

@media (max-width: 420px) {
  .content-card { padding: 22px 18px; }
  .content-text h1 { font-size: 1.7rem; }
  .menu-card { padding: 22px 18px; }
}

/* ---------------------------------- */
/* Print — used to generate menu.pdf   */
/* ---------------------------------- */

@media print {
  @page { size: A4; margin: 15mm 16mm; }

  .bg-video-wrap,
  .site-header,
  .site-footer,
  .menu-pdf { display: none !important; }

  html, body { background: #fff; color: #000; }
  .page-main { display: block; min-height: 0; padding: 0; }
  .page-stack { max-width: none; gap: 0; }

  .menu-card {
    display: block;
    max-height: none;
    overflow: visible;
    width: 100%;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .print-only {
    display: block;
    text-align: center;
    font-size: 8.5pt;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 10pt;
  }

  .menu-head { margin: 0 auto 14pt; max-width: 150mm; }
  .menu-head .eyebrow { color: #666; margin-bottom: 4pt; }
  .menu-head h1 { color: #000; font-size: 24pt; margin-bottom: 6pt; }
  .menu-head .lede { color: #333; font-size: 9.5pt; line-height: 1.45; }

  .menu-sections {
    display: block;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding: 0;
  }

  .menu-group {
    break-inside: auto;
    margin-bottom: 12pt;
  }
  .menu-group.wide ul { columns: 1; }
  .menu-group h2 {
    color: #000;
    border-bottom-color: #000;
    font-size: 13pt;
    padding-bottom: 4pt;
    margin-bottom: 3pt;
    break-after: avoid;
  }
  .menu-note { color: #444; font-size: 8.5pt; margin-bottom: 2pt; }

  .menu-item {
    break-inside: avoid;
    border-bottom-color: #ddd;
    padding: 5pt 0;
  }
  .mi-name { color: #000; font-size: 10.5pt; }
  .mi-price { color: #444; font-size: 9pt; }
  .mi-desc { color: #333; font-size: 8.5pt; line-height: 1.4; margin-top: 1pt; }

  .menu-fineprint {
    color: #555;
    font-size: 8pt;
    border-top-color: #999;
    margin-top: 12pt;
    padding-top: 8pt;
  }
}