/* ==========================================================================
   TopJump Adventure Park — global stylesheet
   Plain CSS, no build step. Design tokens live in :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour — sampled from the TopJump Adventure Park wordmark */
  --tj-orange:        #E2681C;
  --tj-orange-bright: #F5821F;
  --tj-orange-deep:   #B84F10;
  --tj-blue:          #2F6FD0;
  --tj-blue-deep:     #1B4593;
  --tj-navy:          #14224A;
  --tj-sky:           #8FC4E8;
  --tj-sky-pale:      #E5F1FA;
  --tj-yellow:        #FDB913;
  /* Waiver call to action. Kept off the orange so it never reads as a second
     "Book" button. White text on it is 4.98:1, and it holds 3.1:1 against navy. */
  --tj-red:           #D62839;
  --tj-red-bright:    #EA3348;

  /* Neutrals */
  --tj-ink:           #1A2338;
  --tj-ink-soft:      #4A5570;
  --tj-line:          #DFE5EF;
  --tj-cloud:         #F5F8FC;
  --tj-white:         #FFFFFF;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 1rem;
  --sp-4: 1.5rem;   --sp-5: 2.5rem;   --sp-6: 4rem;
  --sp-7: 6rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(20, 34, 74, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 34, 74, 0.10);
  --shadow-lg: 0 18px 48px rgba(20, 34, 74, 0.16);

  /* Type */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stop sticky header covering anchor targets */
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tj-ink);
  background: var(--tj-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--sp-3);
  color: var(--tj-navy);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--tj-blue-deep); }

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

/* Visible, on-brand focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--tj-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 200;
  padding: var(--sp-2) var(--sp-3);
  background: var(--tj-navy);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--sp-3); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--cloud { background: var(--tj-cloud); }
.section--sky   { background: var(--tj-sky-pale); }

.section-head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.section-head p {
  font-size: 1.125rem;
  color: var(--tj-ink-soft);
}

/* Small orange label above a heading */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tj-orange-deep);
  margin-bottom: var(--sp-2);
}

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8em 1.6em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Orange only ever carries white text at button sizes — passes AA there,
   which is why orange is never used for body copy. */
.btn--book {
  background: var(--tj-orange);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--book:hover { background: var(--tj-orange-bright); box-shadow: var(--shadow-lg); }

.btn--ghost {
  background: transparent;
  color: var(--tj-navy);
  border-color: var(--tj-navy);
}
.btn--ghost:hover { background: var(--tj-navy); color: #fff; }

.btn--on-dark {
  background: #fff;
  color: var(--tj-navy);
}
.btn--on-dark:hover { background: var(--tj-sky-pale); }

.btn--lg { font-size: 1.1875rem; padding: 0.95em 2em; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tj-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  /* Wrapping lets the open mobile panel drop onto its own rows instead of
     being squeezed into the bar and pushing the page sideways. */
  flex-wrap: wrap;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

.brand { flex-shrink: 0; line-height: 0; }
.brand img {
  /* Round badge mark, so height and width track together. It carries more
     internal padding than the old wide banner did, hence the larger box. */
  height: 64px;
  width: 64px;
  border-radius: 50%;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5em 0.9em;
  font-family: var(--font-display);
  font-size: 1rem;
  background: var(--tj-cloud);
  color: var(--tj-navy);
  border: 1px solid var(--tj-line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-nav { display: none; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-nav__list a {
  display: block;
  padding: 0.7em 0.9em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--tj-navy);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.site-nav__list a:hover { background: var(--tj-cloud); color: var(--tj-blue-deep); }

/* Current page marker */
.site-nav__list a[aria-current="page"] {
  color: var(--tj-orange-deep);
  background: rgba(226, 104, 28, 0.10);
}

.header-cta { display: none; }

/* Mobile: panel drops below the bar when open. Each open item claims a full
   row so nothing is forced to share the bar. */
.site-header.is-open .site-nav {
  display: block;
  flex: 0 0 100%;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--tj-line);
}
.site-header.is-open .header-cta {
  display: block;
  flex: 0 0 100%;
  padding-bottom: var(--sp-3);
}
.site-header.is-open .header-cta .btn { width: 100%; }

@media (min-width: 76rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--sp-1); }
  .header-cta { display: block; }
  .site-header.is-open .site-nav,
  .site-header.is-open .header-cta { border-top: 0; padding: 0; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(28rem, 76vh, 44rem);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--tj-navy);
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop towards the top of the photo so the painted TOP JUMP
     mural stays fully in frame on short, wide windows. The bottom of the
     shot is just inflatable floor, so it is the safe thing to lose. */
  object-position: 50% 0%;
}

/* The hero photo is a 2.16:1 panorama, so a portrait viewport crops it hard
   to the centre and loses the TOP JUMP mural on the back wall. Pulling the
   focal point left keeps the mural and the climbing cone in frame on phones. */
@media (max-width: 48rem) {
  /* A portrait viewport crops horizontally instead, so here the left/right
     focal point is what keeps the mural visible. */
  .hero__media img { object-position: 28% 0%; }
}
/* Dark scrim so white headline copy stays readable over a busy photo */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 34, 74, 0.92) 0%,
    rgba(20, 34, 74, 0.70) 38%,
    rgba(20, 34, 74, 0.25) 70%,
    rgba(20, 34, 74, 0.35) 100%
  );
}

/* Soft edges top and bottom, so the photo melts into the light sections
   either side instead of starting and stopping on a hard line.

   Top: fades out of the venue band's edge colour. Kept short and light so the
   painted TOP JUMP mural at the top of the photo stays clearly visible.

   Bottom: fades into the white section below. Its height (2rem to 3.5rem) is
   always smaller than the hero copy's bottom padding (2.5rem to 5rem, see
   .hero__inner), so it only ever touches empty photo, never the white text,
   buttons or pills. Keep those two in step if either changes.

   Both sit above the photo and scrim, below the copy. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.hero::before {
  top: 0;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(
    to bottom,
    #EAF2FC 0%,
    rgba(234, 242, 252, 0.55) 35%,
    rgba(234, 242, 252, 0) 100%
  );
}
.hero::after {
  bottom: 0;
  height: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(
    to top,
    #FFFFFF 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  max-width: 44rem;
}

.hero h1 { color: #fff; margin-bottom: var(--sp-3); }
.hero h1 em {
  font-style: normal;
  color: var(--tj-yellow);
}

.hero__lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.7); }
.hero .btn--ghost:hover { background: #fff; color: var(--tj-navy); }

/* Location pills under the hero copy */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
}
/* Direct children only — the venue name is a nested span, and a descendant
   selector would give it a second pill inside the first. */
.hero__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.35em 0.9em;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--tj-cloud);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card__body h3 { margin-bottom: var(--sp-2); }
.card__body p { color: var(--tj-ink-soft); }

.card__link {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tj-blue-deep);
  text-decoration: none;
}
.card__link:hover { text-decoration: underline; }
.card__link::after { content: " →"; }

/* Feature row: icon-led benefit list */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  text-align: center;
}
.features li { padding: var(--sp-3); }
.features .features__icon {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.features h3 { font-size: 1.125rem; margin-bottom: var(--sp-1); }
.features p { font-size: 0.9375rem; color: var(--tj-ink-soft); }

/* --------------------------------------------------------------------------
   8. Split panel (image beside copy)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 55rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}

.split__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* For portrait photos, which the 4/3 crop above would cut the top and bottom
   off. Keeps the whole picture, centred in the column. */
.split__media--portrait img {
  aspect-ratio: 3 / 4;
  width: auto;
  max-height: 32rem;
  margin-inline: auto;
}

.split__body ul {
  margin: 0 0 var(--sp-4);
  padding-left: 1.25em;
  color: var(--tj-ink-soft);
}
.split__body li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   9. Session list
   -------------------------------------------------------------------------- */
.session {
  background: #fff;
  border: 1px solid var(--tj-line);
  border-left: 6px solid var(--tj-orange);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.session--sen { border-left-color: var(--tj-blue); }
.session--tots { border-left-color: var(--tj-yellow); }

.session h3 { margin-bottom: var(--sp-2); }
.session p { color: var(--tj-ink-soft); font-size: 0.9688rem; }

.tag {
  display: inline-block;
  padding: 0.25em 0.75em;
  margin-bottom: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--tj-sky-pale);
  color: var(--tj-blue-deep);
}

/* --------------------------------------------------------------------------
   10. Call-to-action band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--tj-blue-deep), var(--tj-blue));
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p {
  color: rgba(255,255,255,0.9);
  max-width: 40rem;
  margin-inline: auto;
  font-size: 1.125rem;
}
.cta-band .btn { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   11. Gallery preview strip
   -------------------------------------------------------------------------- */
.gallery-strip {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 45rem) {
  .gallery-strip { grid-template-columns: repeat(4, 1fr); }
}
.gallery-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform 0.2s ease;
}
.gallery-strip a:hover img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--tj-navy);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--sp-6) var(--sp-4);
  font-size: 0.9375rem;
}
.site-footer h3 {
  color: #fff;
  font-size: 1.0625rem;
  margin-bottom: var(--sp-3);
}
.site-footer a { color: rgba(255,255,255,0.78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* The credit sits inside a sentence rather than a list, so it carries its own
   underline to read as a link. */
.site-footer__credit a { text-decoration: underline; text-underline-offset: 0.18em; }

.site-footer__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }

.site-footer__brand img {
  height: 72px;
  width: 72px;
  border-radius: 50%;
  margin-bottom: var(--sp-3);
}

.site-footer__bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   13. Sticky mobile book bar
   -------------------------------------------------------------------------- */
.sticky-book {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--sp-2) var(--sp-3);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--tj-line);
}
.sticky-book .btn { width: 100%; }

@media (min-width: 76rem) { .sticky-book { display: none; } }
/* Keep the bar from covering the last of the footer on mobile */
@media (max-width: 75.99rem) { body { padding-bottom: 4.5rem; } }

/* --------------------------------------------------------------------------
   14. Inner-page header
   -------------------------------------------------------------------------- */
.page-head {
  background: linear-gradient(160deg, var(--tj-navy), var(--tj-blue-deep));
  color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-head h1 { color: #fff; }
.page-head .eyebrow { color: var(--tj-yellow); }
.page-head__lede {
  max-width: 42rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--sp-3);
}
.page-head__lede a { color: #fff; }

/* --------------------------------------------------------------------------
   15. Notice panel (used for "times live on Roller")
   -------------------------------------------------------------------------- */
.notice {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--tj-sky-pale);
  border: 1px solid var(--tj-sky);
  border-radius: var(--r-lg);
}
.notice h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
.notice p { color: var(--tj-ink-soft); }
.notice .btn { margin-top: var(--sp-3); }

.fineprint {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--tj-ink-soft);
}

/* --------------------------------------------------------------------------
   16. Gallery grid + filters
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.filter {
  padding: 0.5em 1.1em;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tj-navy);
  background: var(--tj-cloud);
  border: 1px solid var(--tj-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter:hover { background: var(--tj-sky-pale); }
.filter.is-active {
  background: var(--tj-navy);
  border-color: var(--tj-navy);
  color: #fff;
}

.gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Each tile is a <button> so it's keyboard-reachable without extra ARIA */
.gallery__item {
  padding: 0;
  border: 0;
  background: var(--tj-cloud);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item[hidden] { display: none; }

.gallery__empty {
  text-align: center;
  color: var(--tj-ink-soft);
  padding-block: var(--sp-5);
}

/* --------------------------------------------------------------------------
   17. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(10, 18, 40, 0.94);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(100%, 72rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lightbox__caption {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: 1.5rem;
}

/* On narrow screens the arrows sit over the image rather than beside it */
@media (max-width: 48rem) {
  .lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   18. Map embeds
   -------------------------------------------------------------------------- */
.map-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--tj-cloud);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   19. Contact form
   -------------------------------------------------------------------------- */
.contact-form {
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--tj-navy);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font: inherit;
  color: var(--tj-ink);
  background: var(--tj-cloud);
  border: 1px solid var(--tj-line);
  border-radius: var(--r-sm);
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--tj-blue);
}

/* --------------------------------------------------------------------------
   20. FAQ accordion
   Native <details>/<summary> — works with no JS at all.
   -------------------------------------------------------------------------- */
.faq { max-width: 48rem; margin-inline: auto; }

.faq h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--tj-orange);
}
.faq h2:first-child { margin-top: 0; }

.faq__item {
  border: 1px solid var(--tj-line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  background: #fff;
  overflow: hidden;
}
.faq__item[open] { box-shadow: var(--shadow-sm); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--tj-navy);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Custom chevron, rotated when the item is open */
.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-right: 2.5px solid var(--tj-orange);
  border-bottom: 2.5px solid var(--tj-orange);
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after {
  transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.faq__item summary:hover { background: var(--tj-cloud); }

.faq__body {
  padding: 0 var(--sp-3) var(--sp-3);
  color: var(--tj-ink-soft);
}
.faq__body ul { padding-left: 1.25em; }
.faq__body li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   21. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   22. Screen-reader-only utility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   23. Venue band — the "which park am I booking?" banner
   The first thing anyone sees, so it's the most playful part of the site:
   warm colour glows, glossy "inflatable" balls bobbing at the edges, and a
   navy name plaque that bounces in on arrival.

   Sizing: the plaque, the address and the bar all scale off clamp() curves,
   so the banner keeps its proportions from 320px up to the 1200px wrap.
   Motion: every animation lives inside prefers-reduced-motion: no-preference
   at the end of 23b, so anyone who has asked for less motion gets a still,
   fully visible banner.
   -------------------------------------------------------------------------- */
.venue-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
  /* First layer settles the bottom edge to one flat colour (--band-edge), so
     the hero photo below can fade up into it with no visible seam. */
  --band-edge: #EAF2FC;
  background:
    linear-gradient(to bottom, rgba(234, 242, 252, 0) 72%, var(--band-edge) 100%),
    radial-gradient(38rem 24rem at 0% 0%,    rgba(245, 130, 31, 0.20), transparent 62%),
    radial-gradient(34rem 22rem at 100% 100%, rgba(47, 111, 208, 0.18), transparent 62%),
    radial-gradient(22rem 16rem at 88% 8%,   rgba(253, 185, 19, 0.20), transparent 60%),
    radial-gradient(20rem 14rem at 8% 100%,  rgba(143, 196, 232, 0.28), transparent 60%),
    linear-gradient(165deg, #FFFBF6 0%, #F4F8FE 50%, #EAF2FC 100%);
  text-align: center;
}

.venue-band__inner { position: relative; z-index: 1; }

/* Glossy balls. Each one sets its own colour, size, position and float timing
   through custom properties; the white radial on top is the shine that makes
   them read as inflatables rather than flat dots. */
.venue-band__ball {
  --ball: var(--tj-orange);
  --ball-deep: var(--tj-orange-deep);
  position: absolute;
  z-index: 2;
  width: var(--size, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 40% 38%, var(--ball) 0%, var(--ball-deep) 100%);
  box-shadow: 0 10px 22px rgba(20, 34, 74, 0.16);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.venue-band__ball::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.venue-band__ball.is-pop { animation: tj-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
.venue-band__ball--orange { --ball: #F79A45; --ball-deep: #D9580F; }
.venue-band__ball--blue   { --ball: #5B93E6; --ball-deep: #1B4593; }
.venue-band__ball--yellow { --ball: #FFD452; --ball-deep: #E9A400; }
.venue-band__ball--sky    { --ball: #BFE0F6; --ball-deep: #6FAEDC; }

/* Positions hug the edges so a ball never sits behind the text. */
.venue-band__ball--1 { --size: clamp(34px, 5vw, 66px);  top: 12%;  left: clamp(4%, 7vw, 8%); }
.venue-band__ball--2 { --size: clamp(22px, 3.2vw, 40px); bottom: 14%; left: clamp(10%, 14vw, 16%); }
.venue-band__ball--3 { --size: clamp(18px, 2.4vw, 30px); top: 20%;  right: 17%; }
.venue-band__ball--4 { --size: clamp(56px, 8vw, 104px); bottom: 12%; right: clamp(3%, 4vw, 5%); }
.venue-band__ball--5 { --size: clamp(12px, 1.4vw, 18px); top: 58%;  right: 11%; }
.venue-band__ball--6 { --size: clamp(14px, 1.6vw, 20px); top: 9%;   left: 27%; }
/* top stays at least 1rem so the 14px float never lifts it out of view. */
.venue-band__ball--7 { --size: clamp(22px, 2.8vw, 38px); top: clamp(1rem, 3vw, 1.75rem); right: clamp(24%, 26vw, 28%); }


/* Tablets: the action bar is at its widest relative to the screen, so the
   small lower-left ball moves out to the edge to stay clear of it. */
@media (min-width: 45rem) and (max-width: 64rem) {
  .venue-band__ball--2 { left: 3%; bottom: 10%; }
}

/* Phones: the text column is nearly full width, so only the corner balls stay. */
@media (max-width: 44.99rem) {
  .venue-band__ball--3,
  .venue-band__ball--5,
  .venue-band__ball--6,
  .venue-band__ball--7 { display: none; }
  .venue-band__ball--1 { top: 6%; left: 4%; }
  .venue-band__ball--2 { top: 7%; right: 7%; bottom: auto; left: auto; }
  /* No room below the full-width action bar on a phone, so the big ball
     sits this one out rather than being clipped. */
  .venue-band__ball--4 { display: none; }
}

/* Eyebrow as a small white chip, so it reads as a label, not a stray line. */
/* Block-level but only as wide as its text, so it always sits on its own
   line above the plaque rather than beside it. */
.venue-band__eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto clamp(1rem, 2.4vw, 1.5rem);
  padding: 0.45em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.4vw, 0.875rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tj-orange-deep);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 104, 28, 0.18);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(226, 104, 28, 0.10);
}

/* The navy plaque, set at a slight playful tilt. inline-flex keeps it only
   as wide as the name, and max-width stops a long name pushing past the wrap. */
.venue-band__name {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.5rem);
  max-width: 100%;
  margin: 0;
  padding: clamp(0.65rem, 2.2vw, 1.5rem) clamp(1.1rem, 3.5vw, 2.75rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(135deg, #1D3170 0%, var(--tj-navy) 60%);
  border-radius: clamp(16px, 2.4vw, 30px);
  box-shadow:
    0 16px 36px rgba(20, 34, 74, 0.26),
    0 3px 0 rgba(255, 255, 255, 0.06) inset;
  transform: rotate(-1.5deg);
}

.venue-band__name-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 7vw, 4.25rem);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}

/* Amber ticks either side of the name, with a soft glow. */
.venue-band__tick {
  flex: 0 0 auto;
  width: clamp(6px, 0.85vw, 11px);
  height: clamp(1.4rem, 5vw, 3.1rem);
  border-radius: var(--r-pill);
  background: var(--tj-yellow);
  box-shadow: 0 0 14px rgba(253, 185, 19, 0.55);
}

/* Plain text flow with the pin inline, so when the address wraps on a small
   phone the pin stays attached to the first word instead of floating off. */
.venue-band__sub {
  margin: clamp(1.1rem, 2.6vw, 1.75rem) 0 0;
  font-size: clamp(0.9375rem, 1.7vw, 1.1875rem);
  color: var(--tj-ink-soft);
  text-wrap: balance;
}
.venue-band__pin {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.1em; /* plus the space from the markup */
  vertical-align: -0.22em;
  fill: var(--tj-orange);
}

/* --------------------------------------------------------------------------
   23b. Venue band action bar
   Desktop: one white pill, switcher left, booking button flush right.
   Mobile: the same pill relaxed into a stack, booking button full width.
   -------------------------------------------------------------------------- */
.venue-band__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  width: min(100%, 34rem);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  padding: var(--sp-3);
  background: var(--tj-white);
  border-radius: clamp(20px, 3vw, 44px);
  box-shadow: 0 10px 30px rgba(20, 34, 74, 0.10);
}

.venue-band__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

.venue-band__switch-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.6875rem, 1.3vw, 0.8125rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8892A4;
  padding-inline: clamp(0.35rem, 1.4vw, 1rem);
}

.venue-band__switch-btn {
  /* 44px keeps the tap target at the recommended minimum on touch. */
  min-height: 44px;
  padding: 0.6em 1.1em;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.7vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.2;
  color: #6B7689;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.venue-band__switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.venue-band__switch-btn:hover { background: var(--tj-cloud); color: var(--tj-navy); }

/* Toggled by js/venues.js alongside aria-pressed. */
.venue-band__switch-btn.is-active {
  background: var(--tj-sky-pale);
  color: var(--tj-navy);
}

.venue-band__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A flex container drops the whitespace between "Book" and the venue name,
     so the word gap has to be an explicit gap. */
  gap: 0.3em;
  padding: 0.85em 1.5em;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, var(--tj-orange-bright) 0%, var(--tj-orange) 100%);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 16px rgba(226, 104, 28, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.venue-band__book:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(226, 104, 28, 0.40);
}
.venue-band__book:active { transform: translateY(0); }

/* Very narrow phones: the label takes its own row and the two parks share
   the next one, so "Sheffield" never gets stranded on a line by itself. */
@media (max-width: 26rem) {
  .venue-band__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
  }
  .venue-band__switch-label {
    grid-column: 1 / -1;
    padding-inline: 0;
  }
  .venue-band__switch-btn { padding-inline: 0.5em; }
}

/* From 45rem the bar has room for the single-row layout in the design. */
@media (min-width: 45rem) {
  .venue-band__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    max-width: 100%;
    gap: var(--sp-3);
    /* Tighter on the right so the orange pill sits flush inside the white one. */
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    /* Centres the bar without stretching it to the full wrap width. */
    margin-inline: auto;
    width: fit-content;
  }

  .venue-band__switch { flex-wrap: nowrap; }
  .venue-band__book { padding: 0.9em 1.75em; }
}

/* The notice only appears for a placeholder venue, so it needs its own top
   gap rather than a bottom margin on the bar. */
.venue-band .placeholder-flag {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 0;
  text-align: left;
}

/* Book button shine. The sweep sits behind the label (z-index -1 inside the
   button's own stacking context) so it never washes out the text. */
.venue-band__book {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.venue-band__book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   23c. Venue band motion
   Arrival: the label and address rise in, the plaque drops and bounces, the
   action bar follows. Afterwards only the balls keep moving, slowly, and the
   Book button catches a shine every few seconds. Transform and opacity only,
   so it stays smooth on phones.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .venue-band__eyebrow { animation: tj-rise 0.55s ease-out 0.05s both; }
  .venue-band__name    { animation: tj-drop 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
  .venue-band__sub     { animation: tj-rise 0.55s ease-out 0.55s both; }
  .venue-band__bar     { animation: tj-rise 0.6s ease-out 0.7s both; }

  .venue-band__ball {
    animation: tj-bob var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
  }
  .venue-band__ball--1 { --dur: 4.6s; --delay: -1.2s; }
  .venue-band__ball--2 { --dur: 3.8s; --delay: -0.4s; }
  .venue-band__ball--3 { --dur: 4.2s; --delay: -2.1s; }
  .venue-band__ball--4 { --dur: 5.4s; --delay: -0.9s; }
  .venue-band__ball--5 { --dur: 3.4s; --delay: -1.6s; }
  .venue-band__ball--6 { --dur: 4.9s; --delay: -2.8s; }
  .venue-band__ball--7 { --dur: 6s;   --delay: -3s; }

  .venue-band__book::after { animation: tj-shine 5s ease-in-out 1.8s infinite; }
}

@keyframes tj-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Keeps the plaque's -1.5deg tilt through every frame. */
@keyframes tj-drop {
  0%   { opacity: 0; transform: translateY(-28px) scale(0.94) rotate(-1.5deg); }
  55%  { opacity: 1; transform: translateY(6px)   scale(1.02) rotate(-1.5deg); }
  78%  {             transform: translateY(-3px)  scale(0.995) rotate(-1.5deg); }
  100% { opacity: 1; transform: translateY(0)     scale(1)    rotate(-1.5deg); }
}

@keyframes tj-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

@keyframes tj-shine {
  0%        { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}

@keyframes tj-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .venue-band__book:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   24. Venue switch control
   -------------------------------------------------------------------------- */
.venue-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--tj-cloud);
  border: 1px solid var(--tj-line);
  border-radius: var(--r-pill);
}

.venue-switch__label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tj-ink-soft);
  padding-inline: 0.75em 0.35em;
}

.venue-switch__btn {
  padding: 0.55em 1.15em;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tj-navy);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* The switcher holds a <span> for the current park and an <a> out to the
   other park's site, so both need the button box model. */
.venue-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.venue-switch__btn:hover { background: var(--tj-sky-pale); }

.venue-switch__btn.is-active {
  background: var(--tj-navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Header variant — sits beside the Book button on desktop, and inside the
   drop-down panel on mobile. */
.venue-switch--header { padding: 3px; }
.venue-switch--header .venue-switch__btn {
  padding: 0.45em 0.85em;
  font-size: 0.875rem;
}

.header-venue { display: none; }
.site-header.is-open .header-venue {
  display: block;
  flex: 0 0 100%;
  padding-bottom: var(--sp-3);
}
.site-header.is-open .header-venue .venue-switch {
  width: 100%;
  justify-content: center;
}

@media (min-width: 76rem) {
  .header-venue { display: block; margin-left: 0; }
  .site-nav { margin-left: auto; }
  /* Back to sharing one row on desktop */
  .site-header.is-open .site-nav,
  .site-header.is-open .header-venue,
  .site-header.is-open .header-cta { flex: 0 1 auto; }
  .site-header.is-open .header-venue { padding: 0; }
}

/* Nine nav items, a venue switch and a Book button all have to fit inside the
   1200px wrap, so the desktop row runs tighter than the old six-item nav did.
   nowrap stops "Find Us" and "Book Now" breaking over two lines when flex
   starts shrinking them. */
@media (min-width: 76rem) {
  .site-nav__list a { padding: 0.7em 0.5em; font-size: 0.9375rem; white-space: nowrap; }
  .venue-switch--header .venue-switch__btn { padding: 0.45em 0.6em; font-size: 0.8125rem; }
  .header-cta .btn { padding: 0.7em 1.05em; font-size: 0.9375rem; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   25. Callouts, book-ahead notice and placeholder flags
   -------------------------------------------------------------------------- */
.callout {
  padding: var(--sp-3);
  background: var(--tj-sky-pale);
  border-left: 5px solid var(--tj-blue);
  border-radius: var(--r-sm);
  color: var(--tj-ink);
}
.callout--tight { font-size: 0.9688rem; }

/* Friendly "please book ahead" panel */
.book-ahead {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  max-width: 54rem;
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  background: #FFF7EE;
  border: 1px solid #F2D4B0;
  border-left: 6px solid var(--tj-orange);
  border-radius: var(--r-md);
  text-align: left;
}
.book-ahead__icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}
.book-ahead h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-1);
}
.book-ahead p {
  font-size: 0.9375rem;
  color: var(--tj-ink-soft);
  margin-bottom: var(--sp-2);
}
.book-ahead p:last-child { margin-bottom: 0; }

/* Loud amber flag marking content that is still placeholder */
.placeholder-flag {
  max-width: 54rem;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-3);
  background: #FFF4D6;
  border: 2px dashed #E0A500;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: #6B4E00;
  text-align: left;
}
.placeholder-flag strong { color: #5A4100; }
.placeholder-flag[hidden] { display: none; }

/* --------------------------------------------------------------------------
   26. News list
   -------------------------------------------------------------------------- */
.news-list {
  display: grid;
  gap: var(--sp-4);
  max-width: 52rem;
  margin-inline: auto;
}

.news-item {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 45rem) {
  .news-item--has-image { grid-template-columns: 24rem 1fr; }
}

/* No forced crop here: posters and menu boards carry text that a 4/3 cover
   would slice the bottom off, so each image keeps its own shape. */
.news-item__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.news-item__date {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tj-orange-deep);
  margin-bottom: var(--sp-1);
}

.news-item__title {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  margin-bottom: var(--sp-2);
}

.news-item__body { color: var(--tj-ink-soft); }

.news-item__tag {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 0.25em 0.75em;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--tj-sky-pale);
  color: var(--tj-blue-deep);
}

.news-empty {
  text-align: center;
  color: var(--tj-ink-soft);
  padding-block: var(--sp-5);
}

/* --------------------------------------------------------------------------
   27. Café menu
   -------------------------------------------------------------------------- */
/* Jump links to the three sections */
.menu-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 auto var(--sp-5);
}
.menu-jump__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.5em 1.25em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tj-navy);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease;
}
.menu-jump__link:hover { background: var(--tj-sky-pale); }

.menu-section { max-width: 75rem; margin-inline: auto; }
.menu-section + .menu-section { margin-top: var(--sp-6); }
.menu-section__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Cards flow down the columns like a printed menu, so short and long groups
   pack together instead of leaving grid-row gaps. */
.menu-groups { column-gap: var(--sp-4); }
@media (min-width: 46rem) { .menu-groups { column-count: 2; } }
@media (min-width: 72rem) { .menu-groups { column-count: 3; } }

.menu-group {
  break-inside: avoid;
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Meal deal: the one thing on the menu that saves money, so it stands out */
.menu-group--deal {
  background: #FFF6EC;
  border: 2px solid var(--tj-orange);
}
.menu-group--deal .menu-group__title { border-bottom-color: var(--tj-yellow); }
.menu-group--deal .menu-group__note { color: var(--tj-ink); font-weight: 600; }

.menu-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.25rem;
  margin-bottom: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--tj-orange);
}

.menu-group__note {
  font-size: 0.875rem;
  color: var(--tj-ink-soft);
  margin: var(--sp-2) 0 var(--sp-2);
}

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

.menu-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: 0.6rem;
  border-bottom: 1px dashed var(--tj-line);
}
.menu-item:last-child { border-bottom: 0; }

.menu-item__name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--tj-navy);
}
.menu-item__desc {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--tj-ink-soft);
}

/* Dotted leader between the item and its price */
.menu-item__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--tj-line);
  transform: translateY(-0.2em);
}

.menu-item__price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tj-orange-deep);
  white-space: nowrap;
}

.menu-diet {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.5em;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  background: #E8F5E9;
  color: #1B5E20;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   28. Socks notice
   Same shape as .book-ahead but blue, so the two notices read as different
   kinds of information rather than one long amber wall.
   -------------------------------------------------------------------------- */
.book-ahead--socks {
  background: var(--tj-sky-pale);
  border-color: var(--tj-sky);
  border-left-color: var(--tj-blue);
}

/* --------------------------------------------------------------------------
   29. Party packages
   -------------------------------------------------------------------------- */
.party-peak-note {
  max-width: 56rem;
  margin: 0 auto var(--sp-4);
  padding: 0.7em 1.1em;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--tj-ink-soft);
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-pill);
}

.party-group { max-width: 56rem; margin: 0 auto var(--sp-5); }
.party-group:last-of-type { margin-bottom: 0; }

.party-group__title {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--tj-orange);
}

.party-group__intro {
  font-size: 0.9688rem;
  color: var(--tj-ink-soft);
  margin-bottom: var(--sp-4);
}

/* The TopTots block is visually separated from the main three: its own
   tinted panel, blue rule, so the age and day restrictions read as a
   different set of rules rather than more of the same. */
.party-group--toptots {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--tj-sky-pale);
  border: 1px solid var(--tj-sky);
  border-radius: var(--r-lg);
}
.party-group--toptots .party-group__title { border-bottom-color: var(--tj-blue); }
.party-group--toptots .party-group__intro {
  font-weight: 600;
  color: var(--tj-blue-deep);
}

.party-cards { display: grid; gap: var(--sp-3); }

.party-card {
  background: #fff;
  border: 1px solid var(--tj-line);
  border-left: 6px solid var(--tj-orange);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.party-card[open] { box-shadow: var(--shadow-md); }
.party-group--toptots .party-card { border-left-color: var(--tj-blue); }

.party-card__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.party-card__summary::-webkit-details-marker { display: none; }
.party-card__summary:hover { background: var(--tj-cloud); }

.party-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--tj-navy);
}

.party-card__price {
  font-size: 0.9688rem;
  color: var(--tj-ink-soft);
  margin-left: auto;
  text-align: right;
}
.party-card__price strong {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  color: var(--tj-orange-deep);
}
.party-card__price-off {
  display: block;
  font-size: 0.875rem;
}

/* Chevron, rotated when the card is open. Matches the FAQ accordion. */
.party-card__cue {
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  margin-left: var(--sp-2);
  border-right: 2.5px solid var(--tj-orange);
  border-bottom: 2.5px solid var(--tj-orange);
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.2s ease;
}
.party-card[open] .party-card__cue {
  transform: rotate(-135deg) translate(-0.15em, -0.15em);
}
.party-group--toptots .party-card__cue {
  border-right-color: var(--tj-blue);
  border-bottom-color: var(--tj-blue);
}

.party-card__body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--tj-line);
  padding-top: var(--sp-3);
}

.party-card__availability {
  padding: 0.5em 0.9em;
  margin-bottom: var(--sp-3);
  font-size: 0.875rem;
  font-weight: 700;
  color: #6B4E00;
  background: #FFF4D6;
  border-radius: var(--r-sm);
}

.party-card__list {
  margin: 0 0 var(--sp-3);
  padding-left: 1.25em;
  color: var(--tj-ink-soft);
}
.party-card__list li { margin-bottom: var(--sp-2); }

.party-card__ages {
  font-size: 0.9375rem;
  color: var(--tj-blue-deep);
  margin-bottom: var(--sp-3);
}

/* "Can't find what you're looking for?" line */
.party-callout {
  max-width: 56rem;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-md);
}
.party-callout span { display: inline-block; margin-inline: 0.35em; }
.party-callout a { font-weight: 700; }

/* --------------------------------------------------------------------------
   30. Footer social links
   -------------------------------------------------------------------------- */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}
.site-footer__social li { margin: 0; }

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r-pill);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.site-footer__social a:hover {
  background: var(--tj-orange);
  border-color: var(--tj-orange);
  color: #fff;
  transform: translateY(-2px);
}
.site-footer__social svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  display: block;
}

/* --------------------------------------------------------------------------
   Waiver bar
   A slim strip above the sticky header on every page. It sits outside the
   header on purpose: the header's own button area is hidden on phones until
   the menu is opened, and most people sign their waiver on a phone.
   -------------------------------------------------------------------------- */
.waiver-bar {
  background: var(--tj-navy);
  color: #fff;
}
.waiver-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
}
.waiver-bar__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: center;
}
.waiver-bar__text strong { color: var(--tj-yellow); }
.waiver-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 40px;
  padding: 0.5em 1.2em;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  background: var(--tj-red);
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(214, 40, 57, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.waiver-bar__btn:hover { background: var(--tj-red-bright); transform: translateY(-1px); }
.waiver-bar__btn:focus-visible { outline: 3px solid var(--tj-yellow); outline-offset: 2px; }
.waiver-bar__btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

/* Phones: drop the sentence to its short form so the bar stays one tidy row. */
.waiver-bar__long { display: none; }
@media (min-width: 40rem) {
  .waiver-bar__long { display: inline; }
}

/* --------------------------------------------------------------------------
   Google review prompts
   Blue, so the three calls to action never blur together:
   orange = book, red = waiver, blue = review.
   White on --tj-blue is 4.9:1.
   -------------------------------------------------------------------------- */
.btn--review {
  background: var(--tj-blue);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--review:hover { background: var(--tj-blue-deep); box-shadow: var(--shadow-lg); }
.btn--review__g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.65em;
  height: 1.65em;
  background: #fff;
  border-radius: 50%;
}
.btn--review__g svg { width: 1.05em; height: 1.05em; display: block; }

.review-card {
  background: #fff;
  border: 1px solid var(--tj-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.review-card__stars {
  color: var(--tj-yellow);
  font-size: 1.75rem;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.review-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tj-navy);
  margin: 0 0 var(--sp-1);
}
.review-card p { color: var(--tj-ink-soft); }
/* The title is a <p> too, so it needs the extra class to beat the rule above. */
.review-card .review-card__title { color: var(--tj-navy); }


/* Compact, side by side: homepage, parties, gallery, find us */
.review-card--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  max-width: 58rem;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-4);
  border-left: 6px solid var(--tj-yellow);
}
.review-card--inline .review-card__body { flex: 1 1 18rem; }
.review-card--inline .review-card__stars { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.review-card--inline p { margin-bottom: 0; }