/* ---- The display face ---------------------------------------------------
   Fraunces is the site's display face: a variable serif with an optical
   size axis, which is why the headings look right at 64px and at 18px
   from the same file.

   It is served from this origin rather than from a font CDN, for two
   reasons. The content-security policy allows no third-party font, so a
   CDN is not an option; and a visitor's address should not be handed to a
   font house to read a heading.

   The file is the latin subset of the variable font — 67KB, weights 100 to
   900, with the optical size axis applied by the browser. Its licence, the
   SIL Open Font License, sits beside it in public/assets/fonts/OFL.txt. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colours. */
  --park: #2f6b4f;        /* mid green — the band behind the green sections */
  --park-dark: #1d4633;   /* deep green — the top bar, the hero and the page hero */
  --honey: #f4b942;
  --tomato: #bb4023;      /* AA on white, cream, paper and the error tint */
  --toast: #7b4a2d;
  --sky: #4d8fa0;

  /* Surfaces, lightest to darkest. The page is warm paper and everything
     that sits on it is crisper than it, so a card reads as an object on the
     paper rather than as another shade of the same cream. */
  --page: #faf3f0;        /* the page: warm paper */
  --card: #fffdf8;        /* a card or a panel */
  --raised: #ffffff;      /* a step above a card: an input, a calendar cell */
  --white: #ffffff;       /* text on a saturated fill */
  --ink: #263238;         /* body text */
  --muted: #5c6a63;       /* secondary text */
  --footer-bg: #263238;   /* the footer band */
  --header-bg: rgba(250, 243, 240, 0.94);
  --line: rgba(38, 50, 56, 0.14);
  --shadow: 0 18px 45px rgba(38, 50, 56, 0.16);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);

  /* Colour used for text and hairlines that sit on the page. */
  --brand: #1d4633;       /* the green of a link, a price, a rule */
  --accent: #bb4023;      /* the tomato of a kicker or a price */
  --accent-line: rgba(217, 79, 48, 0.38);
  --danger-text: #a8321c;

  /* Colour used on a saturated fill. */
  --on-band: #fff7ea;     /* text and focus rings on the deep green bands.
                            A warmer white than the page, because it has to
                            hold its contrast against the deep green. */
  --on-honey: #263238;
  --on-sky: #0b1a20;
  --inverse-bg: #263238;  /* the skip link, which inverts against the page */
  --inverse-ink: #fff7ea;

  /* Washes. */
  --park-tint: rgba(47, 107, 79, 0.11);
  --park-line: rgba(47, 107, 79, 0.35);
  --sky-tint: rgba(120, 183, 197, 0.16);
  --sky-chip: rgba(120, 183, 197, 0.22);
  --ink-tint: rgba(38, 50, 56, 0.06);
  --stripe-1: #f3f3f3;
  --stripe-2: #ececec;
  --scrim: rgba(20, 30, 25, 0.55);

  --radius: 8px;
  --max: 1180px;
  /* Typefaces. The display face is Fraunces, self-hosted; the text face is
     the system sans, so nothing is downloaded to read a paragraph. */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --focus: #1d4633;
  --header-h: 117px;

  /* Type scale — the only sizes the site uses. */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-body: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;
  color-scheme: light;
}

/* ---- Dark mode -----------------------------------------------------------
   The same page in a warm near-black. A card is one step up from the page,
   an input is two steps up, and the green bands keep the brand colour they
   already had: they were dark to begin with, and the photography sits on
   them. Every value below is measured against its own background — text on
   the page clears 4.5:1, and text on a filled chip clears 4.5:1 too.

   This block is for screens only. Paper is paper: the menu PDF and a
   visitor's own print-out keep the light palette, whatever the visitor
   has on screen. */
@media screen {
  [data-theme="dark"] {
    --page: #171512;
    --card: #1e1b18;
    --raised: #272420;
    --ink: #e9e4db;
    --muted: #a8a49b;
    --footer-bg: #100e0c;
    --header-bg: rgba(20, 18, 16, 0.9);
    --line: rgba(255, 255, 255, 0.15);
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);

    --brand: #7ecfa4;
    --accent: #f0876a;
    --accent-line: rgba(240, 135, 106, 0.45);
    --danger-text: #ff8f7a;

    --inverse-bg: #f2ece1;
    --inverse-ink: #1a1613;

    --park-tint: rgba(126, 207, 164, 0.16);
    --park-line: rgba(126, 207, 164, 0.4);
    --sky-tint: rgba(120, 183, 197, 0.18);
    --sky-chip: rgba(120, 183, 197, 0.24);
    --ink-tint: rgba(255, 255, 255, 0.07);
    --stripe-1: #232019;
    --stripe-2: #1a1815;
    --scrim: rgba(0, 0, 0, 0.65);

    --focus: #7ecfa4;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.62;
}

p,
li {
  max-width: 72ch;
}

figure {
  margin: 0;
}

/* The header is sticky, so anything that anchors to a section needs to clear
   it — otherwise the target heading disappears underneath. */
h1,
h2,
h3,
[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the dark bands the dark focus ring would vanish, so invert it there. */
.hero :focus-visible,
.band :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible {
  outline-color: var(--on-band);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--inverse-bg);
  color: var(--inverse-ink);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
}

.topbar {
  border-bottom: 1px solid rgba(47, 107, 79, 0.18);
  background: var(--park-dark);
  color: white;
  font-size: var(--text-sm);
}

.topbar-inner,
.nav-inner,
.section-inner,
.footer-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.topbar-inner {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
}

.topbar a {
  text-decoration: none;
  font-weight: 700;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.85rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 210px;
}

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
}

.brand-text {
  display: block;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.brand-tag {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  min-width: 46px;
  min-height: 46px;
  font: inherit;
  font-weight: 800;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.primary-nav a {
  border-radius: var(--radius);
  padding: 0.72rem 0.82rem;
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  background: var(--park-tint);
  color: var(--brand);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* ---- Light and dark mode -----------------------------------------------
   The switch sits with the other header actions, and it is the one control
   that stays in the header on a phone: the Share button and the booking
   link move down to the bottom bar, but a visitor who wants the dark page
   should not have to hunt for the switch. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  /* No transition on the background. The button's text colour changes with
     the theme, and a background that faded while the text snapped would
     leave the icon unreadable for the length of the fade. It changes with
     the rest of the page instead, and the hover tint is instant — the same
     as the Share button beside it. */
}

.theme-toggle:hover {
  background: var(--park-tint);
}

.theme-toggle svg {
  display: block;
}

/* The icon shows the mode the button would switch to: a moon on the light
   page, a sun on the dark one. */
.theme-toggle__sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__sun {
  display: inline;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.78rem 1rem;
  background: var(--tomato);
  color: white;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(217, 79, 48, 0.22);
}

.button.secondary {
  background: var(--park);
}

.button.secondary:hover {
  box-shadow: 0 12px 24px rgba(47, 107, 79, 0.22);
}

.button.ghost {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

.button.ghost:hover {
  box-shadow: 0 10px 22px rgba(38, 50, 56, 0.1);
}

/* ---- The homepage hero ---------------------------------------------------
   One full-bleed photograph with the type centred over it, in the manner of
   the reference café site: the picture is the hero, not a card beside the
   text. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* A viewport-height hero would stretch to the height of a tall frame, so
     the height is capped: the band stays a band and the page still moves. */
  min-height: min(calc(100svh - var(--header-h)), 700px);
  padding: clamp(3.5rem, 9vh, 7rem) 1.5rem clamp(3rem, 7vh, 5rem);
  background: #0d1a12;
  color: #fff;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The wash over the photograph. The reference uses 40%; ours is heavier
   because our illustration is brighter and the type has to clear AA against
   the photograph itself, not against the colour behind it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 13, 0.62);
}

/* The caption sits above the wash, not under it: the wash is dark enough to
   take a small light text below 4.5:1, and this caption has to be read. */
.hero__caption {
  position: absolute;
  right: 1rem;
  /* Clear of the quick strip, which overlaps the bottom of the hero by
     2.25rem and would otherwise hide the caption behind its cards. */
  bottom: 3.4rem;
  z-index: 3;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1169px, 100%);
  margin: 0 auto;
}

.hero-text {
  max-width: 100%;
}

.hero__tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero__tagline-icon {
  display: inline-flex;
  flex: none;
}

.eyebrow {
  display: block;
  width: fit-content;
  margin: 0 0 0.9rem;
  color: var(--honey);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The accent only works on a light background. On the dark bands — the hero,
   the page hero and the green band — the label has to be light enough to read,
   so those get cream or honey instead. Tomato on park-dark was 2.59:1 and
   tomato on park was 1.53:1: both fail WCAG AA. */
.section .eyebrow,
.notice .eyebrow {
  color: var(--accent);
}

.page-hero .eyebrow {
  color: var(--honey);
}

.band .eyebrow,
.band .kicker {
  color: var(--on-band);
}

.hero h1 {
  max-width: 768px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.8vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-copy {
  max-width: 40rem;
  margin: 1.6rem auto 0;
  color: #fff;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  text-align: center;
}

.hero-actions,
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.55rem;
}

.hero-actions {
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.1rem;
}

/* The hero's buttons are the reference's: one solid, one outlined, both
   with a soft radius rather than the site's square one. */
.hero .button {
  min-height: 45px;
  padding: 12px 20px;
  border-radius: 16px;
  font-weight: 500;
}

.hero .button:not(.ghost) {
  background: #fff;
  color: #060807;
}

.hero .button.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.quick-strip {
  position: relative;
  z-index: 3;
  margin-top: -2.25rem;
}

.quick-grid {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.quick-card,
.feature-card,
.price-card,
.menu-item,
.notice,
.form-panel,
.info-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.quick-card {
  padding: 1rem;
  box-shadow: 0 14px 32px rgba(38, 50, 56, 0.13);
}

.quick-card span,
.kicker {
  display: block;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-body);
}

.section {
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
}

.section.alt {
  background: var(--card);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(260px, 0.5fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.section h2,
.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1.05;
  text-wrap: balance;
}

.section-lede {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: var(--text-body);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature-card {
  overflow: hidden;
}

.feature-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.feature-card .body,
.price-card,
.info-panel {
  padding: 1.25rem;
}

/* A card's only link is a call to action, not a word in a sentence, so it
   needs the 24px minimum target size (WCAG 2.2 SC 2.5.8) that prose links
   are exempt from. */
.feature-card p > a:only-child {
  display: inline-block;
  padding: 0.3rem 0;
  min-height: 24px;
}

.feature-card h3,
.price-card h3,
.menu-group h2,
.form-panel h2,
.info-panel h2,
.calendar-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.feature-card p,
.price-card p,
.menu-item p,
.info-panel p {
  margin: 0.65rem 0 0;
  color: var(--muted);
}

.band {
  background: var(--park);
  color: white;
}

.band .section-lede,
.band p {
  color: rgba(255, 255, 255, 0.86);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.7fr);
  gap: 2rem;
  align-items: center;
}

.image-stack {
  display: grid;
  gap: 1rem;
}

.image-stack img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The one portrait on the site. Every other picture is landscape or square,
   so this one anchors the section it stands in rather than sitting beside
   it. */
.image-stack img.portrait {
  aspect-ratio: 3 / 4;
}

.party-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.party-gallery figure {
  margin: 0;
}

.party-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(38, 50, 56, 0.13);
}

/* ---- the photographic band ------------------------------------------------
   One photograph, edge to edge, with the type reversed out of it. The wash is
   a panel the type sits inside, not a layer over the whole band, so the page
   checker can measure the type's contrast against the wash instead of against
   the page behind it. */
.photo-band {
  --band-ink: 20 52 36;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(460px, 66vh, 620px);
}

.photo-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.photo-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.photo-band__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  align-items: center;
  background-color: rgb(var(--band-ink) / 0.94);
  /* The wash is masked rather than painted with a gradient. A gradient over
     a colour keeps that colour underneath, and the colour is what the page
     checker reads when it measures the type; the mask fades the wash away
     where the picture should show and holds it where the type sits. */
  -webkit-mask-image: linear-gradient(95deg, #000 0%, #000 50%, transparent 66%);
  mask-image: linear-gradient(95deg, #000 0%, #000 50%, transparent 66%);
}

.photo-band__inner {
  color: var(--on-band);
}

.photo-band__inner .kicker {
  color: var(--honey);
}

.photo-band h2 {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.photo-band__lede {
  max-width: 44ch;
  margin: 1rem 0 0;
  color: rgba(255, 247, 234, 0.9);
  font-size: var(--text-body);
}

.photo-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.photo-band .button.ghost {
  background: rgba(255, 247, 234, 0.1);
  color: var(--on-band);
  border-color: rgba(255, 247, 234, 0.4);
}

@media (max-width: 680px) {
  .photo-band {
    min-height: 480px;
  }

  .photo-band__wash {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
  }

  .photo-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .photo-band__actions .button {
    width: 100%;
  }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.stat {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.stat strong {
  display: block;
  color: white;
  font-size: var(--text-xl);
}

.stat span {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 750;
}

.page-hero {
  background: var(--park-dark);
  color: white;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
}

.page-hero .section-lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 760px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.3rem;
}

.menu-tabs {
  margin-top: 1.25rem;
}

.tab-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  padding: 0.65rem 0.95rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.tab-button[aria-selected="true"] {
  background: var(--park);
  color: white;
}

.menu-panel[hidden] {
  display: none;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

/* Photo at the top of a menu panel — used only where a genuinely matching
   image exists (Breakfast, Drinks). Wide banner for landscape photos; the
   --square modifier keeps square photos contained and centred. */
.menu-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 1.5rem;
}

.menu-hero--square {
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin-inline: auto;
}

@media (max-width: 680px) {
  .menu-hero {
    aspect-ratio: 16 / 7;
  }
}

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 1rem;
}

.menu-item strong {
  font-size: var(--text-base);
}

.menu-item .price {
  color: var(--brand);
  font-weight: 950;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  background: var(--park-tint);
  color: var(--brand);
  font-size: var(--text-2xs);
  font-weight: 950;
  text-transform: uppercase;
}

.notice {
  padding: 1rem;
  border-left: 5px solid var(--honey);
}

.notice strong {
  display: block;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.price-card.featured {
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.price {
  color: var(--accent);
  font-size: var(--text-3xl);
  font-weight: 950;
}

.check-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.45rem;
  margin: 0.45rem 0;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--honey);
}

/* Soft play house-rules: larger, easy-to-read bullets balanced beside the heading */
.rules-list li {
  font-size: var(--text-lg);
  line-height: 1.55;
  margin: 0.95rem 0;
  padding-left: 1.7rem;
  color: var(--ink);
}

.rules-list li::before {
  width: 0.62rem;
  height: 0.62rem;
  top: 0.62em;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(300px, 0.7fr);
  gap: 1.2rem;
  align-items: start;
}

.form-panel {
  padding: 1.25rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

/* The spam honeypot: a field a visitor never sees and a bot fills in. It is
   moved off-screen rather than display:none, so that it still submits, and it
   carries aria-hidden so that assistive technology skips it. It is a class
   rather than an inline style because the site's policy does not allow inline
   styles. */
.honeypot {
  position: absolute;
  left: -5000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.72rem 0.78rem;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  /* The label is bold, so `font: inherit` would set the field's own text in
     bold too — the prefilled sample values were the loudest thing in the
     form. The field text is set at the normal weight instead. */
  font-weight: 400;
}

textarea {
  resize: vertical;
}

/* The status line is neutral until it knows what it is. It used to be green
   by default, which meant a server error was rendered in the success colour
   — the error and the confirmation were the same green. */
.form-status {
  min-height: 1.4rem;
  margin-top: 0.7rem;
  color: var(--ink);
  font-weight: 850;
}

.form-status.is-success {
  color: var(--brand);
}

.form-status.is-error {
  color: var(--danger-text);
}

.calculator-output {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--sky-tint);
}

.calculator-output strong {
  font-size: var(--text-2xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.55fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.booking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
}

.booking-slot {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.booking-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(38, 50, 56, 0.12);
}

.booking-slot strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.booking-slot span {
  color: var(--muted);
  font-weight: 750;
}

.booking-slot-label {
  color: var(--accent) !important;
  font-size: var(--text-2xs);
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.booking-slot[aria-pressed="true"] {
  border-color: var(--park);
  box-shadow: 0 0 0 2px var(--park);
  background: var(--raised);
}

.booking-note {
  margin: 0;
  color: var(--muted);
}

.booking-note a,
.booking-fallback a {
  color: var(--brand);
  font-weight: 750;
}

.booking-fallback {
  margin-top: 1.25rem;
  color: var(--muted);
}

.booking-form {
  margin-top: 1.25rem;
  max-width: 720px;
}

.booking-form h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.booking-success {
  margin-top: 1.25rem;
  max-width: 720px;
  padding: 1.25rem;
  border: 1px solid var(--park-line);
  border-radius: var(--radius);
  background: var(--park-tint);
}

.booking-success strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--brand);
}

.booking-success p {
  margin: 0.5rem 0 0;
}

.booking-success a {
  color: var(--brand);
  font-weight: 750;
}

.admin {
  max-width: 1100px;
}

.admin > h1,
.admin > .admin-view-title {
  margin: 0.3rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
}

.admin-login {
  max-width: 420px;
}

.admin-block {
  margin-top: 2.5rem;
}

.admin-block h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.admin-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: var(--text-md);
}

.admin-table th,
.admin-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

.admin-table th {
  color: var(--brand);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.button.admin-mini {
  min-height: 0;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.35rem 0.6rem;
  font-size: var(--text-xs);
}

.map-head {
  max-width: 760px;
  margin-bottom: 1.3rem;
}

.map-head .section-lede {
  margin-top: 0.6rem;
}

.map-frame {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(38, 50, 56, 0.1);
}

/* Click-to-load placeholder shown in place of the Google Maps embed until the visitor opts in. */
.map-embed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
}
.map-embed-inner {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  max-width: 34ch;
}
.map-embed-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
}

.mobile-actions {
  display: none;
}

.site-footer {
  background: var(--footer-bg);
  color: white;
  padding: 2.5rem 0 6rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(160px, 0.4fr));
  gap: 2rem;
}

.site-footer a {
  display: block;
  width: fit-content;
  margin: 0.35rem 0;
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
}

.site-footer a:hover {
  color: white;
  text-decoration: underline;
}

.site-footer h2,
.site-footer h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
}

.site-footer p {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 980px) {
  /* The top bar is hidden at this width, so the sticky header is shorter. */
  :root {
    --header-h: 80px;
  }

  .topbar-inner {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The navigation is a fixed panel from here down, so the header holds
       only the brand and the actions. The auto margin packs them against
       the right edge instead of leaving the switch in the middle of it. */
    margin-left: auto;
  }

  .primary-nav {
    position: fixed;
    inset: 82px 16px auto 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.8rem;
    background: var(--card);
    box-shadow: var(--shadow);
  }

  .primary-nav[data-open="true"] {
    display: flex;
  }

  .nav-actions .ghost {
    display: none;
  }

  .section-head,
  .two-col,
  .form-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .quick-grid,
  .feature-grid,
  .price-grid,
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --header-h: 76px;
  }

  body {
    padding-bottom: 72px;
  }

  .menu-page .page-hero,
  .menu-page .section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  /* The mode switch has to fit in the header as well, and a 390px phone
     has room for the logo and the name, or the logo and the tagline, but
     not for both. The name stays; the tagline goes, and the full brand is
     still in the footer. */
  .brand strong {
    font-size: var(--text-sm);
  }

  .brand-tag {
    display: none;
  }

  .nav-inner {
    gap: 0.75rem;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
  }

  /* On a phone the Share button and the booking link live in the bottom
     bar. The theme switch stays in the header: it is the one control here
     that has to be reachable at any width. */
  .nav-actions {
    display: flex;
  }

  .nav-actions .nav-share,
  .nav-actions .button {
    display: none;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.25rem, 8vw, 3.1rem);
  }

  .quick-grid,
  .feature-grid,
  .price-grid,
  .menu-grid,
  .stat-row,
  .footer-inner,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 2.25rem 0;
  }

  .menu-item {
    grid-template-columns: 1fr;
  }

  .mobile-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--line);
    background: var(--card);
  }

  .mobile-actions a,
  .mobile-actions button {
    display: grid;
    place-items: center;
    min-height: 64px;
    color: var(--ink);
    font-size: var(--text-2xs);
    font-weight: 950;
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
  }
}

.legal-content {
  max-width: 70ch;
}

.legal-content h2 {
  margin: 2.4rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0.65rem 0 0;
}

.legal-content a {
  color: var(--brand);
  font-weight: 750;
}

.cookie-table {
  width: 100%;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--card);
  font-size: var(--text-md);
}

.cookie-table th,
.cookie-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.cookie-table th {
  color: var(--brand);
  font-size: var(--text-2xs);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.link-button {
  border: none;
  padding: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  cursor: pointer;
}

.footer-legal {
  width: min(var(--max), calc(100% - 32px));
  margin: 2.25rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
}

.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.footer-legal a,
.footer-legal button {
  border: none;
  /* The legal row is a row of links, not running prose, so it has to clear
     the 24px minimum target size (WCAG 2.2 SC 2.5.8). */
  padding: 0.3rem 0;
  min-height: 24px;
  background: none;
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.footer-legal a:hover,
.footer-legal button:hover {
  color: white;
  text-decoration: underline;
}

.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  margin: 0 auto;
  max-width: 700px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.consent-banner[hidden],
.consent-options[hidden],
.consent-actions .button[hidden] {
  display: none;
}

.consent-text strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.consent-text p {
  margin: 0.35rem 0 0;
  font-size: var(--text-md);
}

.consent-text a {
  color: var(--brand);
  font-weight: 750;
}

.consent-options {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.consent-options label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-weight: 700;
}

.consent-options input {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--park);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.form-note {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.form-note a {
  color: var(--brand);
  font-weight: 750;
}

@media (max-width: 680px) {
  .consent-banner {
    bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---- Share button + share modal ---- */
.nav-share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0.62rem 0.85rem;
  cursor: pointer;
}
.nav-share:hover { background: var(--park-tint); }
.nav-share svg { display: block; }

.share-modal[hidden] { display: none; }
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.share-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.share-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--card);
  border-radius: 14px;
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-lg);
}
.share-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
}
.share-x:hover { background: var(--ink-tint); color: var(--ink); }
.share-dialog h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 1.6rem 0.3rem 0;
  color: var(--ink);
}
.share-url {
  color: var(--muted);
  font-size: var(--text-sm);
  word-break: break-all;
  margin: 0.3rem 0 1.1rem;
}
.share-actions { display: grid; gap: 0.6rem; }
.share-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: var(--text-body);
  padding: 0.85rem 1rem;
  cursor: pointer;
}
.share-opt[data-act="qr"] { background: var(--park-dark); color: var(--white); border-color: var(--park-dark); }
.share-opt:hover { filter: brightness(0.97); }
.share-links { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.share-links a {
  flex: 1 1 auto;
  text-align: center;
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: var(--text-md);
}
.share-links a:hover { background: var(--park-tint); }
.share-status { color: var(--muted); font-size: var(--text-sm); margin: 0.8rem 0 0; min-height: 1.1em; }
.share-back {
  border: none;
  background: none;
  color: var(--park-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.5rem;
}
.share-qr {
  width: min(260px, 72vw);
  aspect-ratio: 1 / 1;
  margin: 0.5rem auto 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  place-items: center;
}
.share-qr svg { width: 100%; height: 100%; display: block; }
body.share-open { overflow: hidden; }

/* ---- Admin availability calendar ---- */
.cal-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.75rem; }
.cal-head h3 { margin: 0; font-size: var(--text-body); }
.cal-head .cal-nav { margin-left: auto; display: flex; gap: 0.4rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: var(--text-2xs); font-weight: 700; color: var(--muted); text-align: center; padding: 0.25rem 0; }
.cal-cell { min-height: 84px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: var(--raised); text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:hover { border-color: var(--park); }
.cal-cell.is-empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.is-today { outline: 2px solid var(--honey); }
.cal-cell.is-past { opacity: 0.55; }
.cal-cell.is-closed { background: repeating-linear-gradient(45deg, var(--stripe-1), var(--stripe-1) 6px, var(--stripe-2) 6px, var(--stripe-2) 12px); }
.cal-date { font-size: var(--text-2xs); font-weight: 700; color: var(--ink); }
.cal-chip { font-size: var(--text-2xs); line-height: 1.2; padding: 2px 4px; border-radius: 4px; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.s-available { background: var(--park); }
.cal-chip.s-held { background: var(--honey); color: var(--on-honey); }
.cal-chip.s-booked { background: #b3403a; }
.cal-chip.s-closed { background: #6f7472; }
.cal-chip.e-event { background: var(--sky); color: var(--on-sky); }
.cal-chip.e-closure { background: #6b7280; }
.cal-warn { font-size: var(--text-2xs); color: var(--danger-text); font-weight: 700; }
.cal-day-panel { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--card); }
.cal-day-panel h3 { margin: 0 0 0.5rem; }
.cal-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: 0; }
.cal-forms { display: grid; gap: 1rem; margin-top: 0.75rem; }
@media (min-width: 720px) { .cal-forms { grid-template-columns: 1fr 1fr; } }
.cal-bulk { margin-top: 1rem; }
.cal-bulk .cal-dows { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0; }
.cal-bulk .cal-dows label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-sm); }
.cal-time-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; }
@media (max-width: 560px) { .cal-cell { min-height: 64px; } }

/* ---- Public calendar (calendar.html) ---- */
.pubcal-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.pubcal-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); }
.pubcal-head .pubcal-nav { margin-left: auto; display: flex; gap: 0.4rem; }
.pubcal-head .pubcal-nav .button { min-height: 40px; padding: 0.4rem 0.9rem; }
.pubcal-note { color: var(--muted); }
.pubcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pubcal-dow { text-align: center; font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 0; }
.pubcal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.pubcal-cell.is-empty { background: transparent; border-color: transparent; }
.pubcal-cell.is-today { outline: 2px solid var(--honey); }
.pubcal-cell.is-past { opacity: 0.5; }
.pubcal-cell.is-closed { background: repeating-linear-gradient(45deg, var(--stripe-1), var(--stripe-1) 7px, var(--stripe-2) 7px, var(--stripe-2) 14px); }
.pubcal-date { font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.pubcal-chip { font-size: var(--text-2xs); line-height: 1.25; padding: 2px 6px; border-radius: 999px; font-weight: 700; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pubcal-chip.is-event { background: var(--sky-chip); color: var(--brand); }
.pubcal-chip.is-closure { background: #6b7280; color: var(--white); }
.pubcal-chip.is-open { background: var(--park); color: var(--white); border: 0; cursor: pointer; font: inherit; font-size: var(--text-2xs); font-weight: 800; padding: 3px 8px; }
.pubcal-chip.is-open:hover { background: var(--park-dark); }
.pubcal-list { display: flex; flex-direction: column; gap: 0; }
.pubcal-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.pubcal-row:last-child { border-bottom: 0; }
.pubcal-row strong { min-width: 6.5rem; }
@media (max-width: 640px) { .pubcal-head h3 { font-size: var(--text-lg); } }

[data-tracking] textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }

.report-switch { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.report-switch .is-active { background: var(--park); color: var(--white); }
.report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.report-stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; background: var(--raised); text-align: center; }
.report-stat strong { display: block; font-size: var(--text-xl); color: var(--brand); }
.report-stat span { font-size: var(--text-xs); color: var(--muted); }
.report-funnel { font-weight: 700; color: var(--ink); }
.report-list { margin-top: 1rem; }
.report-list ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }

.contacts-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.contacts-bar input[type="search"] { flex: 1 1 220px; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.contacts-row { cursor: pointer; }
.contacts-row:hover { background: var(--park-tint); }
.contact-panel { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--card); display: flex; flex-direction: column; gap: 0.5rem; }
.contact-panel h3 { margin: 0; }
.contact-panel textarea { width: 100%; }
.contact-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.tag-chip { background: var(--sky-chip); color: var(--brand); border-radius: 999px; padding: 2px 8px; font-size: var(--text-2xs); font-weight: 700; cursor: pointer; }
.contact-timeline { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.contact-erase { color: var(--danger-text); border-color: var(--danger-text); align-self: flex-start; margin-top: 0.5rem; }
.footer-signup { border-bottom: 1px solid rgba(255,255,255,0.18); padding: 0 0 1.5rem; margin: 0 0 1.75rem; text-align: center; }
.footer-signup-inner { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.footer-signup-text { max-width: 30rem; }
.footer-signup strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.footer-signup p { margin: 0.35rem 0 0; color: rgba(255,255,255,0.82); font-size: var(--text-sm); }
.footer-signup a { text-decoration: underline; margin-left: auto; margin-right: auto; }
.footer-signup-form { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; max-width: 480px; }
.footer-signup-form input[type="email"] { flex: 1 1 220px; min-height: 46px; padding: 0.6rem 0.8rem; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); background: var(--raised); color: var(--ink); }
.footer-signup-status { min-height: 1.2em; text-align: center; }
.admin-whoami { font-size: var(--text-sm); color: var(--muted); margin: 0 0 1rem; }
.users-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.users-add input, .users-add select { padding: 0.45rem; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-table select { padding: 0.3rem; border: 1px solid var(--line); border-radius: var(--radius); }
.audit-bots { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-sm); white-space: nowrap; }
.audit-bot { opacity: 0.6; }
.audit-bot td:nth-child(3) { font-style: italic; }

/* ==========================================================================
   BytesFX Café & Bookings — demonstration components
   Added for the rebrand. Everything above is the original site stylesheet,
   reworked for contrast, type scale and the removal of decorative blobs.
   ========================================================================== */

/* ---- The demonstration badge --------------------------------------------
   A single mark in the upper right, under the menu bar, on every public
   page. It says what the site is without a notice across the top of every
   page.

   It hangs off the bottom of the sticky header, so it stays pinned below
   the menu bar however far the page is scrolled, and it does not need to
   know how tall the header is: the header grows a row when the navigation
   wraps, and the badge follows it.

   The shape is a stamp rather than a pill: a crisp rectangle with a
   hairline keyline inside the fill, and a small square mark set on its
   corner. The keyline and the mark are what a rubber stamp leaves. */

.demo-badge {
  position: absolute;
  top: 100%;
  right: max(1rem, calc((100% - var(--max)) / 2));
  z-index: 101;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 3px;
  background: var(--tomato);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  /* The keyline inside the fill, and a soft shadow under it. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(38, 50, 56, 0.3);
}

/* The mark: a small square set on its corner, the way a printer's mark
   sits on a block of type. */
.demo-badge::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--honey);
  transform: rotate(45deg);
}

/* A slow ring, so the eye finds the stamp on a long page. It is a ring and
   not a fade, because fading the stamp would dim its own text. It stops
   entirely for anyone who has asked for less movement. */
@keyframes demo-badge-pulse {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.85),
      0 0 0 0 rgba(244, 185, 66, 0.5),
      0 8px 22px rgba(38, 50, 56, 0.3);
  }
  70%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.85),
      0 0 0 10px rgba(244, 185, 66, 0),
      0 8px 22px rgba(38, 50, 56, 0.3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-badge {
    animation: demo-badge-pulse 3s ease-out infinite;
  }
}

/* The staff console has no site header, so its badge is pinned to the
   viewport instead — and below the console's own top bar once the signed-in
   shell is showing, so it does not sit on the account menu. */
.section-inner.admin .demo-badge {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 101;
}

body.admin-shell .section-inner.admin .demo-badge {
  top: calc(var(--admin-topbar-h) + 0.75rem);
}

/* A caption for an illustrative image, so a generated picture is never read
   as a photograph of a real premises. */
.demo-caption {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

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

/* Sticky category navigation, so a long menu can be scanned on a phone. It
   sits directly under the sticky header rather than under it. */
.menu-cat-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1.5rem;
  padding: 0.6rem 0;
  overflow-x: auto;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.menu-cat-nav a {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.menu-cat-nav a:hover {
  background: var(--park-tint);
  border-color: var(--park-line);
}

.menu-group + .menu-group {
  margin-top: 2.75rem;
}

.menu-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand);
}

.menu-group-head h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.menu-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* A menu row with a small photo beside it. */
.menu-item--photo {
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: start;
}

.menu-item--photo img {
  width: 180px;
  height: 180px;
  border-radius: var(--radius);
  object-fit: cover;
}

/* The caption belongs under the whole row, not squeezed into the photo column. */
.menu-item--photo .demo-caption {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  font-size: var(--text-2xs);
}

.menu-item .menu-desc {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.5;
}

.menu-item .price {
  font-size: var(--text-body);
}

.menu-item .menu-tags {
  margin-top: 0.4rem;
}

@media (max-width: 560px) {
  .menu-item--photo {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .menu-item--photo img {
    width: 120px;
    height: 120px;
  }

  .menu-item--photo .price {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---- Forms -------------------------------------------------------------- */

.form-status.is-error {
  color: var(--danger-text);
}

.form-status.is-success {
  color: var(--brand);
}

.form-status.is-pending {
  color: var(--muted);
}

/* A field that has been prefilled with sample data, so the visitor can see
   the flow without entering anything of their own. */
.field-sample input {
  background: var(--raised);
  border-style: dashed;
}

/* The admin shell runs full-bleed, so the notice needs its own inset. */
body.admin-shell .section-inner.admin > .notice {
  max-width: 62rem;
  margin: 1.25rem auto;
}

/* ---- Print --------------------------------------------------------------- */
/* Used by tools/build-menu-pdf.mjs to produce the downloadable sample menu. */

/* A line that exists only on paper — the printable menu still has to say the
   images are illustrations and the prices are samples. */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
    margin: 3mm 0 0;
    color: #444;
    font-size: 9pt;
  }

  @page {
    size: A4;
    margin: 14mm;
  }

  body {
    background: var(--white);
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .site-header,
  .site-footer,
  .mobile-actions,
  .menu-cat-nav,
  .consent-banner,
  .share-modal,
  .skip-link,
  .demo-badge,
  /* A printed menu should not offer to download itself. */
  .page-hero .cluster {
    display: none !important;
  }

  .page-hero {
    background: none;
    color: #000;
    padding: 0 0 8mm;
    border-bottom: 2px solid var(--park-dark);
  }

  .page-hero h1,
  .page-hero .section-lede {
    color: #000;
  }

  .page-hero h1 {
    font-size: 22pt;
  }

  .section {
    padding: 6mm 0 0;
    break-inside: avoid;
  }

  .menu-group {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .menu-group + .menu-group {
    margin-top: 5mm;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 1.5mm;
  }

  .menu-item {
    grid-template-columns: 1fr auto;
    padding: 1.5mm 0;
    border: none;
    border-bottom: 1px solid #ddd;
    background: none;
  }

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

  /* Drop the photo column entirely so the name, description and price line up
     with the rest of the menu. */
  .menu-item--photo > :first-child {
    display: none;
  }

  .menu-item .price {
    font-size: 10.5pt;
  }

  .menu-group-head h2 {
    font-size: 14pt;
  }
}

/* ---- Staff sign-in strip (injected at the foot of the footer) ---------- */

.footer-staff {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-staff-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem 2rem;
}

.footer-staff-text {
  flex: 1 1 15rem;
}

.footer-staff-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-body);
}

.footer-staff-text p {
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm);
  max-width: 34ch;
}

.footer-staff-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  flex: 1 1 24rem;
}

.footer-staff-form label {
  display: grid;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-staff-form input {
  width: auto;
  min-width: 12rem;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  font-size: var(--text-md);
}

.footer-staff-form .button {
  min-height: 42px;
  padding: 0.55rem 1.1rem;
  color: var(--white);
}

.footer-staff-status {
  flex: 1 1 100%;
  min-height: 1.2em;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}

.footer-staff-status a {
  color: var(--honey);
  text-decoration: underline;
}

@media (max-width: 680px) {
  .footer-staff-form {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-staff-form input {
    width: 100%;
    min-width: 0;
  }

  /* Three buttons of three different widths is three targets of three
     different sizes to aim at. Full width, they are one column of equal
     targets. */
  .hero-actions,
  .cluster {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button,
  .cluster .button {
    width: 100%;
  }
}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}