/* ============================================================
   Site 2v4 shared stylesheet — dual-brand chrome + primitives
   Brands: body[data-brand="wt"]    Wai Tapu (navy / teal)
           body[data-brand="kalia"] Kalia Theatre (rust / cream)
   Source design: "Site 2v5" XD specs (Aug 26) + E17xKalia_Website_2v5.pdf.
   Palette and type ramp are exact from the specs panel: WT is a strict
   three-color system (#002144 / #30B2C7 / #FFF, plus menu-card tints);
   Kalia matches v1 (#72382C / #DDB99A, plus #EAD1BF). ALL type is Ricardo
   (11–70px at 1920 design width) — Inter is fallback only. --navy-deep and
   --brown-dark are derived shades for footer contrast, not spec values.
   ============================================================ */

/* ---------- Brand font ---------- */
@font-face {
  font-family: 'Ricardo';
  font-weight: 300;
  font-style: normal;
  src: url('/Website%20Files/Assets/Ricardo/Ricardo-Light.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Ricardo';
  font-weight: 400;
  font-style: normal;
  src: url('/Website%20Files/Assets/Ricardo/Ricardo-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Ricardo';
  font-weight: 400;
  font-style: italic;
  src: url('/Website%20Files/Assets/Ricardo/Ricardo-RegularIt.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Ricardo';
  font-weight: 700;
  font-style: normal;
  src: url('/Website%20Files/Assets/Ricardo/Ricardo-Bold.otf') format('opentype');
  font-display: swap;
}

/* ---------- Palette + brand tokens ---------- */
:root {
  /* Kalia palette (carried over from the v1 prototype) */
  --brown: #72382c;
  --brown-dark: #5a2c23;
  --cream: #ddb99a;
  --cream-soft: #ead1bf;
  --cream-light: #f0dcc5;
  /* Wai Tapu palette (Site 2v5 specs) */
  --navy: #002144;
  --navy-deep: #001a36;
  --teal: #30b2c7;
  --teal-deep: #2b9fb2;
  --ice: #edfdff;
  --ice-blue: #ebf4fd;
  /* Shared */
  --tracking-label: 0.18em;
  --tracking-label-lg: 0.22em;
  --hex-clip: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  --pewa-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40' preserveAspectRatio='none'><g fill='none' stroke='%23000' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'><path d='M0 20 L6 2 L12 20 L18 2 L24 20 L30 2 L36 20 L42 2 L48 20 L54 2 L60 20 L66 2 L72 20'/><path d='M0 20 L6 38 L12 20 L18 38 L24 20 L30 38 L36 20 L42 38 L48 20 L54 38 L60 20 L66 38 L72 20'/><path d='M3 20 L6 8 L9 20 L15 20 L18 8 L21 20 L27 20 L30 8 L33 20 L39 20 L42 8 L45 20 L51 20 L54 8 L57 20 L63 20 L66 8 L69 20' opacity='0.55'/><path d='M3 20 L6 32 L9 20 L15 20 L18 32 L21 20 L27 20 L30 32 L33 20 L39 20 L42 32 L45 20 L51 20 L54 32 L57 20 L63 20 L66 32 L69 20' opacity='0.55'/></g></svg>");
}

/* Brand-resolved roles. Every component below styles itself off these. */
body[data-brand="wt"] {
  --page-bg: var(--navy);
  --page-ink: #ffffff;
  --accent: var(--teal);
  --accent-soft: var(--teal);
  --panel-bg: var(--teal);
  --panel-ink: var(--navy);
  --card-bg: var(--ice);
  --card-ink: var(--navy);
  --nl-bg: var(--teal);
  --nl-ink: var(--navy);
  --footer-bg: var(--navy-deep);
  --footer-ink: #cfe2ea;
  --btn-ink: var(--navy);
}
body[data-brand="kalia"] {
  --page-bg: var(--brown);
  --page-ink: var(--cream-light);
  --accent: var(--cream);
  --accent-soft: var(--cream-soft);
  --panel-bg: var(--cream-soft);
  --panel-ink: var(--brown-dark);
  --card-bg: var(--cream-light);
  --card-ink: var(--brown-dark);
  --nl-bg: var(--cream);
  --nl-ink: var(--brown-dark);
  --footer-bg: var(--brown-dark);
  --footer-ink: var(--cream-soft);
  --btn-ink: var(--brown-dark);
}

/* ---------- Reset + base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Ricardo', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--page-bg);
  color: var(--page-ink);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Type utilities ---------- */
.font-display {
  font-family: 'Ricardo', 'Inter', serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.s2-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-label-lg);
  text-transform: uppercase;
}
.s2-heading {
  font-family: 'Ricardo', 'Inter', serif;
  font-weight: 300;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.1;
  color: var(--accent);
  margin: 0 0 24px;
  text-wrap: balance;
}

/* ---------- Buttons (hex-clipped, from v1) ---------- */
.s2-btn {
  display: inline-block;
  clip-path: var(--hex-clip);
  background: var(--accent);
  color: var(--btn-ink);
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 14px 34px;
  text-align: center;
  transition: filter .2s ease;
}
.s2-btn:hover { filter: brightness(1.08); }
.s2-btn.outline {
  background: transparent;
  color: var(--page-ink);
  /* clip-path swallows borders; draw the outline with an inset shadow-safe trick */
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ---------- Nav ---------- */
.s2-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 40px;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.s2-nav.scrolled {
  background: var(--page-bg);
  box-shadow: 0 2px 18px rgba(0,0,0,.25);
  padding: 10px 40px;
}
.s2-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.s2-nav-logo { display: inline-block; height: 48px; flex: 0 0 auto; }
.s2-nav-logo img { height: 100%; width: auto; }
.s2-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  margin-left: auto;
}
.s2-nav-link {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--page-ink);
  opacity: .92;
  transition: opacity .2s ease, color .2s ease;
  white-space: nowrap;
}
.s2-nav-link:hover, .s2-nav-link.active { opacity: 1; color: var(--accent); }
body[data-brand="kalia"] .s2-nav-link:hover,
body[data-brand="kalia"] .s2-nav-link.active { color: var(--cream); }
.s2-nav-cta { flex: 0 0 auto; }

/* Mobile nav */
.s2-burger {
  display: none;
  background: none;
  border: none;
  color: var(--page-ink);
  width: 40px; height: 40px;
  margin-left: auto;
}
.s2-burger svg { width: 100%; height: 100%; }
.s2-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--page-bg);
  padding: 110px 32px 40px;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
body.menu-open .s2-mobile-menu { display: flex; }
body.menu-open { overflow: hidden; }
.s2-mobile-menu .s2-nav-link { font-size: 14px; }

/* ---------- Hero shell ---------- */
.s2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.s2-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}
.s2-hero > * { position: relative; z-index: 1; }
.s2-hero-title {
  font-family: 'Ricardo', 'Inter', serif;
  font-weight: 300;
  font-size: clamp(38px, 5vw, 64px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
  margin: 0;
}

/* ---------- Section shells ---------- */
.s2-section { padding: 90px 40px; }
.s2-container { max-width: 1160px; margin: 0 auto; }
.s2-section.panel { background: var(--panel-bg); color: var(--panel-ink); }
.s2-section.panel .s2-heading { color: var(--panel-ink); }

/* Build-time placeholder for sections not yet built (Phase 2 removes these) */
.s2-todo {
  border: 1px dashed color-mix(in srgb, var(--page-ink) 40%, transparent);
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  opacity: .55;
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Newsletter bar ---------- */
.s2-newsletter {
  background: var(--nl-bg);
  color: var(--nl-ink);
  padding: 26px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 28px;
}
.s2-newsletter > p { margin: 0; font-size: 16px; font-weight: 500; }
.s2-newsletter .newsletter-right { display: flex; flex-direction: column; gap: 4px; }
.s2-newsletter .newsletter-form { display: flex; }
.s2-newsletter input[type="email"] {
  border: none;
  padding: 12px 16px;
  min-width: 240px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #222;
}
.s2-newsletter input[type="email"].is-invalid { outline: 2px solid #b3372c; }
.s2-newsletter button[type="submit"] {
  border: none;
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 12px 22px;
}
.s2-newsletter .nl-hp { position: absolute; left: -9999px; }
.s2-newsletter .nl-status { font-size: 12.5px; min-height: 1em; margin: 0; }
.s2-newsletter .nl-consent { font-size: 11px; opacity: .7; margin: 0; }

/* ---------- Footer ---------- */
.s2-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: 56px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: start;
}
.s2-footer .footer-logo { max-width: 120px; }
.s2-footer .footer-nav { display: flex; gap: 64px; font-size: 13.5px; }
.s2-footer .footer-nav > div { display: flex; flex-direction: column; gap: 10px; }
.s2-footer .footer-nav a:hover { color: var(--accent); }
.s2-footer .footer-right { font-size: 13px; text-align: right; line-height: 1.7; }
.s2-footer .footer-legal { font-size: 11px; opacity: .75; margin-top: 10px; text-transform: uppercase; letter-spacing: .08em; }
.s2-footer .footer-legal-links { font-size: 11px; opacity: .75; display: flex; gap: 16px; justify-content: flex-end; margin-top: 4px; }
.s2-footer .footer-legal-links a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .s2-nav-links { display: none; }
  .s2-nav .s2-nav-cta { display: none; }
  .s2-burger { display: block; }
}
@media (max-width: 720px) {
  .s2-nav { padding: 14px 20px; }
  .s2-nav.scrolled { padding: 10px 20px; }
  .s2-section { padding: 64px 24px; }
  .s2-newsletter { padding: 24px 20px; flex-direction: column; text-align: center; }
  .s2-newsletter .newsletter-form { width: 100%; }
  .s2-newsletter input[type="email"] { min-width: 0; flex: 1; }
  .s2-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 32px;
    padding: 44px 24px;
  }
  .s2-footer .footer-right { text-align: center; }
  .s2-footer .footer-legal-links { justify-content: center; }
}

/* ---------- Experience-tier cards (/home + /tickets, rendered by assets/tiers.js) ----------
   One block for both pages so the carousels stay identical (client feedback round 3). */
.tier-carousel {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 70px;
}
.tier-viewport { overflow: visible; }
.tier-track {
  display: flex;
  gap: 46px;
  justify-content: center;
  align-items: stretch;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.tier-card {
  flex: 0 0 380px;
  background: #2a7d95;
  color: var(--navy);
  text-align: center;
  padding: 46px 34px 44px; /* room for the 22px watermark band below the button */
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background .4s ease, transform .4s ease;
}
.tier-card.focus { background: var(--teal); transform: scale(1.045); z-index: 1; }
.tier-card h3 {
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.tier-map { margin: 18px 0 22px; }
.tier-map-frame { position: relative; }  /* the pin's % coordinates are relative to the map image only, not the caption */
.tier-map img { width: 100%; height: auto; display: block; border-radius: 4px; }
.tier-map-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,33,68,.25);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}
.tier-map figcaption {
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.7;
  margin-top: 10px;
}
.tier-card .desc { font-size: 14px; line-height: 1.7; margin: 0 0 6px; }
.tier-card .features {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.7;
}
.tier-card .features li { margin: 0 0 6px; }
.tier-card .card-btn {
  margin: 0 auto 0;
  margin-top: auto;
  background: var(--navy);
  color: var(--teal);
}
.tier-card .pewa-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background-color: var(--navy);
  -webkit-mask-image: url('/Website%20Files/Assets/Updated%20Assets/pewa-pattern-light.svg');
  mask-image: url('/Website%20Files/Assets/Updated%20Assets/pewa-pattern-light.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 22px;
  mask-size: auto 22px;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  opacity: .14;
  pointer-events: none;
}
.tier-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--teal);
  font-size: 46px;
  line-height: 1;
  opacity: .8;
  z-index: 2;
  padding: 10px 16px;
  cursor: pointer;
}
.tier-arr:hover { opacity: 1; }
.tier-arr:disabled { opacity: .3; cursor: default; }
.tier-arr.left { left: 8px; }
.tier-arr.right { right: 8px; }
@media (min-width: 1080px) {
  .tier-viewport { overflow: hidden; }
  .tier-track {
    gap: 24px; /* tiers.js GAP_PX */
    justify-content: flex-start;
    transition: transform .4s ease;
  }
  .tier-card {
    flex: 0 0 calc((100% - 72px) / 4);
    background: var(--teal);
    transform: none;
    z-index: 1;
  }
}
@media (max-width: 1079px) {
  .tier-track { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .tier-card { flex: 0 0 300px; }
  .tier-carousel { padding: 0 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-track { transition: none; }
}

/* The seating map on a card is a button when the tier has a `rendering`: it opens the space's
   3D rendering in the lightbox below (ported from the 2026-09-04 staging deploy, both pages). */
.tier-map-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.tier-map-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- Space-rendering lightbox (built by tiers.js on first open) ---------- */
.s2-lightbox[hidden] { display: none; }
.s2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0,33,68,.92);
}
.s2-lightbox-dialog {
  position: relative;
  width: 100%;
  max-width: min(1200px, 92vw);
  max-height: calc(100vh - 8vw);   /* short/landscape viewports: never push the close button off-screen */
  overflow: auto;
}
.s2-lightbox-dialog img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 8vw - 64px); display: block; margin: 0 auto; }
.s2-lightbox-caption {
  margin: 16px 0 0;
  color: var(--teal);
  font-family: 'Ricardo', serif;
  font-size: 22px;
  text-align: center;
}
.s2-lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--navy);
  color: var(--teal);
  font: inherit;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.s2-lightbox-close:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .s2-lightbox:not([hidden]) { animation: s2-lightbox-fade-in .2s ease; }
}
@keyframes s2-lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Footer cultural note (client feedback round 3, all pages) ---------- */
.s2-footer .footer-note {
  grid-column: 1 / -1;
  max-width: 980px;
  margin: 8px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1.75;
  opacity: .78;
}
@media (max-width: 720px) {
  .s2-footer .footer-note { text-align: center; }
}

/* Shared rows across the tier cards (client feedback round 3): the track is a grid whose five
   rows — title · map · description · features · button — are shared by every card through
   subgrid, so each element sits on the same horizontal axis on every card whatever its line
   count. The flex layout above stays as the fallback for browsers without subgrid. */
@supports (grid-template-rows: subgrid) {
  .tier-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 380px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0 46px;
    align-items: stretch;
  }
  .tier-card {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
  .tier-card h3 { grid-row: 1; align-self: start; }
  .tier-card .tier-map { grid-row: 2; align-self: start; }
  .tier-card .desc { grid-row: 3; align-self: start; }
  .tier-card .features { grid-row: 4; align-self: start; }
  .tier-card .card-btn { grid-row: 5; align-self: end; justify-self: center; margin-top: 0; }
  @media (min-width: 1080px) {
    .tier-track { grid-auto-columns: calc((100% - 72px) / 4); gap: 0 24px; } /* 24px = tiers.js GAP_PX */
  }
  @media (max-width: 720px) {
    .tier-track { grid-auto-columns: 300px; }
  }
}