/* ============================================================
   MURRAY LAND RESORT — Design System
   Structure & component patterns follow the Thorpe Park spec.
   Palette re-themed to Murray Land's cosmic / Hyper Line identity
   (sourced from the existing Murray Land mobile app).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700;900&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* Brand Core (from Murray Land app) */
  --color-navy-primary:  #1a1550; /* header, footer, body anchor */
  --color-navy-2:        #221a63; /* secondary navy, gradients */
  --color-violet-action: #5b3ff5; /* primary CTA buttons, key banners */
  --color-violet-2:      #6f4dff; /* hero accents, thrill badges */
  --color-cream:         #f6efdd; /* warm light surface */
  --color-yellow:        #fff3b0; /* pill badges, standout tags */

  /* Neutrals & Surfaces */
  --color-surface-white: #ffffff;
  --color-surface-light: #f6efdd;
  --color-border-grey:   #d8d3c4;
  --color-text-mid:      #726d8c;
  --color-text-dark:     #443f78;

  /* Overlays & Shadows */
  --color-overlay-dark:  rgba(26, 21, 80, 0.85);
  --shadow-flat:         none;
  --shadow-card:         0 4px 16px rgba(26, 21, 80, 0.10);
  --shadow-pop:          0 8px 24px rgba(91, 63, 245, 0.28);

  /* Signature cosmic gradients (carried over from the Murray Land app) */
  --galaxy:         linear-gradient(150deg, #1c1046 0%, #120a30 38%, #0a061e 65%, #020108 100%);
  --galaxy-radial:  radial-gradient(circle at 25% 15%, rgba(130,90,255,.32) 0%, rgba(130,90,255,0) 45%), linear-gradient(150deg, #1c1046 0%, #120a30 38%, #0a061e 65%, #020108 100%);
  --galaxy-topbar:  linear-gradient(120deg, #181654 0%, #34207e 28%, #6430a0 58%, #9c3d97 82%, #c34a86 100%);
  --void: radial-gradient(circle at 20% 10%, rgba(120,80,255,.16) 0%, rgba(120,80,255,0) 40%), radial-gradient(circle at 85% 90%, rgba(90,50,200,.12) 0%, rgba(90,50,200,0) 45%), linear-gradient(160deg, #0b0720 0%, #050311 55%, #020103 100%);

  /* Type scale */
  --font-display: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --radius-sharp: 0px;
  --radius-pill: 30px;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; padding:0;
  font-family:var(--font-body);
  color:var(--color-text-dark);
  background:var(--color-surface-white);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh; /* footer sticks to the bottom of tall/short viewports */
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:1440px; margin:0 auto; padding:0 32px;}
/* Content containers (inside a <section>) get vertical breathing room so
   headings/text don't sit flush against the section's edge. The utility
   bar, main nav, and mobile drawer aren't <section> elements, so their
   fixed-height layouts are unaffected. */
section > .container{margin-top:24px; margin-bottom:24px;}

/* Starfield ambient texture, used sparingly on dark cosmic panels */
.starfield{position:relative; overflow:hidden;}
.starfield::before{
  content:''; position:absolute; inset:-60px; pointer-events:none; z-index:0;
  background-image: url("../images/starfield-tile.svg");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity:.5;
  will-change: transform;
  animation: starDriftTransform 90s linear infinite;
}
@keyframes starDrift{0%{background-position:0 0;} 100%{background-position:-60px 90px;}}
@keyframes starDriftTransform{
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-60px, 90px, 0); }
}
@media (prefers-reduced-motion: reduce){ .starfield::before{animation:none;} }
.starfield > *{position:relative; z-index:1;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--color-navy-primary); font-weight:900;}
.display-hero{font-size:60px; line-height:72px; text-transform:uppercase; font-style:italic; color:#fff;}
.h1-section{font-size:36px; line-height:44px; text-transform:uppercase;}
.h2-card{font-size:24px; line-height:28px; text-transform:uppercase;}
.h3-subhead{font-family:var(--font-body); font-weight:400; font-size:24px; line-height:36px; color:var(--color-navy-primary);}
.body-large{font-size:20px; line-height:28px;}
.body-default{font-size:16px; line-height:24px;}
.body-small{font-size:14px; line-height:20px; color:var(--color-text-mid);}
.eyebrow{font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--color-violet-action);}

@media (max-width:1023px){
  .display-hero{font-size:42px; line-height:50px;}
  .h1-section{font-size:28px; line-height:34px;}
}
@media (max-width:639px){
  .display-hero{font-size:32px; line-height:38px;}
}

/* ---------- Buttons & Pills ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; font-family:var(--font-body); font-weight:700; font-size:16px;
  text-transform:uppercase; letter-spacing:.5px; border:none; border-radius:var(--radius-sharp);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--color-violet-action); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-pop);}
.btn-secondary{background:transparent; color:#fff; border:2px solid var(--color-violet-2);}
.btn-secondary:hover{background:rgba(111,77,255,.15);}
.btn-navy{background:var(--color-navy-primary); color:#fff;}
.btn-navy:hover{transform:translateY(-2px); box-shadow:var(--shadow-card);}

.pill{
  display:inline-block; padding:8px 18px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase;
}
.pill-yellow{background:var(--color-yellow); color:var(--color-navy-primary);}
.pill-violet{background:var(--color-violet-2); color:#fff;}
.pill-outline{background:transparent; border:1.5px solid var(--color-border-grey); color:var(--color-navy-primary);}
.pill-outline.active{background:var(--color-navy-primary); border-color:var(--color-navy-primary); color:#fff;}
.pill-green{background:#dff5e6; color:#1a7a3d;}
.pill-grey{background:#e4e2ec; color:#5a5578;}

/* ---------- Header ---------- */
#site-header{ min-height: 116px; } /* utility bar (~36px) + main-nav (80px, already fixed via .main-nav) */
#site-footer{ min-height: 480px; margin-top:auto; } /* adjust min-height to match actual rendered footer height; margin-top:auto pins it to the bottom of short pages */
.utility-bar{background:var(--color-navy-primary); color:#fff; font-size:13px;}
.utility-bar .container{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px;}
.utility-bar a{opacity:.85; margin-left:18px;}
.utility-bar a:hover{opacity:1; text-decoration:underline;}
.utility-left span{margin-right:18px;}
.utility-left .status-open{color:var(--color-yellow); font-weight:700;}
.utility-left .status-closed{color:#ff9d9d; font-weight:700;}

.main-nav{background:#fff; height:80px; border-bottom:1px solid var(--color-border-grey);}
.main-nav .container{display:flex; align-items:center; justify-content:space-between; height:100%;}
.logo-mark{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:900; font-size:22px; color:var(--color-navy-primary); text-transform:uppercase;}
.logo-img{
  height:44px; width:auto; max-width:180px; object-fit:contain;
  /* The source logo file is white. In light mode the nav bar is white too, so
     this filter recolors it to the brand's dark purple (--color-navy-primary,
     #1a1550) to stay visible. In dark mode (nav bar is dark) it's left white. */
  filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(340%) hue-rotate(206deg) brightness(81%) contrast(128%);
}
html.dark .logo-img{ filter:none; }
.logo-text-fallback{display:none; align-items:center; gap:10px;}
.logo-mark .glyph{width:34px; height:34px; border-radius:50%; background:var(--galaxy-topbar);}
.nav-links{display:flex; gap:32px; list-style:none; margin:0; padding:0; height:100%;}
.nav-links li{margin:0; padding:0; display:flex; align-items:center;}
.nav-links a{font-weight:700; font-size:18px; color:var(--color-navy-primary);}
.nav-links a:hover{color:var(--color-violet-action);}
.nav-item-dropdown{position:relative; height:100%;}
.nav-caret{font-size:11px; opacity:.7;}
.nav-dropdown{
  position:absolute; top:100%; left:0; margin:0; padding:8px 0; list-style:none;
  background:#fff; border:1px solid var(--color-border-grey); min-width:170px;
  box-shadow:var(--shadow-card); display:none; z-index:20;
}
.nav-dropdown li{display:block;}
.nav-dropdown a{display:block; padding:10px 18px; font-size:15px; font-weight:600; color:var(--color-navy-primary); white-space:nowrap;}
.nav-dropdown a:hover{background:var(--color-surface-light); color:var(--color-violet-action);}
.nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown{display:block;}
.nav-actions{display:flex; align-items:center; gap:20px;}
.icon-btn{background:none; border:none; font-size:20px; color:var(--color-navy-primary); position:relative;}
.cart-badge{position:absolute; top:-6px; right:-8px; background:var(--color-violet-action); color:#fff; font-size:10px; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.nav-toggle{display:none; background:none; border:none; font-size:26px; color:var(--color-navy-primary);}

@media (max-width:1023px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .utility-left span:nth-child(2){display:none;}
  .utility-right{display:none;}
  .nav-actions > .theme-toggle-btn{display:none;}
}

/* ---------- Hero (cosmic) ---------- */
.hero{
  position:relative; min-height:650px; display:flex; align-items:center;
  background:var(--galaxy); color:#fff; overflow:hidden;
}
.hero .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero::after{content:''; position:absolute; inset:0; background:var(--color-overlay-dark); mix-blend-mode:multiply; opacity:.35; z-index:1;}
.hero .container{position:relative; z-index:2;}
.hero-text{max-width:600px;}
.hero-text .body-large{color:rgba(255,255,255,.85); margin-top:16px;}
.hero-cta-group{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}

.booking-engine{
  background:#fff; box-shadow:var(--shadow-card); border-radius:var(--radius-sharp);
  max-width:1100px; margin:-40px auto 0; position:relative; z-index:3;
  display:flex; padding:24px; gap:16px;
}
.booking-field{flex:1; display:flex; flex-direction:column; gap:6px;}
.booking-field label{font-size:12px; font-weight:700; text-transform:uppercase; color:var(--color-text-mid); letter-spacing:.5px;}
.booking-field select, .booking-field input{
  border:1px solid var(--color-border-grey); padding:10px 12px; font-family:inherit; font-size:15px; border-radius:var(--radius-sharp);
}
.booking-field.action{flex:0 0 auto; justify-content:flex-end;}
@media (max-width:1023px){ .booking-engine{flex-direction:column; width:90%;} }

/* ---------- Quantity stepper ----------
   Generic +/- control for small numeric counts (guests, theme park
   tickets, parking days): a .qty-stepper wrapping two .qty-btn
   buttons around a readonly .qty-value number input. */
.qty-stepper{
  display:inline-flex; align-items:stretch; height:36px; width:fit-content;
  border:1px solid var(--color-border-grey); border-radius:var(--radius-sharp); overflow:hidden;
}
.booking-field .qty-stepper{ align-self:center; }
.qty-btn{
  width:32px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0;
  border:none; background:var(--color-surface-light); color:var(--color-navy-primary);
  font-family:var(--font-display); font-size:18px; font-weight:900; line-height:1; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.qty-btn:hover:not(:disabled){ background:var(--color-violet-action); color:#fff; }
.qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
.qty-stepper .qty-value{
  width:40px; text-align:center; border:none; border-left:1px solid var(--color-border-grey); border-right:1px solid var(--color-border-grey);
  padding:0; margin:0; font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--color-navy-primary); background:#fff; -moz-appearance:textfield;
}
.qty-value::-webkit-inner-spin-button, .qty-value::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Sections ---------- */
.section{padding:var(--space-3xl) 0;}
.section-light{background:var(--color-surface-light);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:16px;}

/* Ride grid + cards */
.grid-3-col{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-4-col{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:1023px){ .grid-3-col, .grid-4-col{grid-template-columns:repeat(2,1fr);} }
@media (max-width:639px){ .grid-3-col, .grid-4-col{grid-template-columns:1fr;} }

/* Reserve space for CSV-driven grids so they don't pop to full height once populated */
#ridesGrid, #hotelsGrid, #annualPassesGrid, #vipToursGrid, #parkingGrid {
  min-height: 400px; /* roughly one row of .ride-card height — adjust per grid */
}

.ride-card{background:#fff; border:1px solid var(--color-border-grey); border-radius:var(--radius-sharp); display:flex; flex-direction:column;}
.ride-card .media{position:relative; height:260px; overflow:hidden; background:var(--galaxy-radial);}
.ride-card .media img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.ride-card:hover .media img{transform:scale(1.05);}
.ride-card .media .badge-float{position:absolute; top:14px; right:14px;}
.ride-card .media .queue-float{position:absolute; top:14px; left:14px;}
.ride-card .body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.ride-card .stats-row{color:var(--color-text-mid); font-size:14px;}
.ride-card .view-link{margin-top:auto; font-weight:700; color:var(--color-violet-action);}
.ride-card .view-link:hover{text-decoration:underline;}

/* Annual Passes: smaller, tilted, curved-edge photos over a starfield backdrop */
.annual-passes-grid .ride-card .media{height:auto; aspect-ratio:89/52; display:flex; align-items:center; justify-content:center;}
.annual-passes-grid .ride-card .media::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.5px 1.5px at 46% 30%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.5px 1.5px at 80% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1px 1px at 91% 55%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(1.5px 1.5px at 35% 88%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
  background-repeat:repeat; opacity:.6;
  animation:starDrift 90s linear infinite;
}
.annual-passes-grid .ride-card .media img{
  position:relative; z-index:1; width:82%; height:82%; object-fit:cover;
  border-radius:20px; transform:rotate(3deg);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.annual-passes-grid .ride-card:hover .media img{transform:rotate(3deg) scale(1.05);}
@media (prefers-reduced-motion: reduce){ .annual-passes-grid .ride-card .media::before{animation:none;} }

/* Split 50/50 */
.split-50-50{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.split-50-50 .split-media{min-height:480px; background:var(--galaxy-radial);}
.split-50-50 .split-media img{width:100%; height:100%; object-fit:cover;}
.split-50-50 .split-copy{padding:48px; display:flex; flex-direction:column; justify-content:center; gap:16px;}
.split-50-50 .split-copy ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.split-50-50 .split-copy ul li::before{content:'✓ '; color:var(--color-violet-action); font-weight:700;}
@media (max-width:639px){ .split-50-50{grid-template-columns:1fr;} }

/* Explore feature cards */
.explore-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.explore-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border-grey); border-radius:var(--radius-sharp); overflow:hidden;}
.explore-card .media{height:420px; overflow:hidden; background:var(--galaxy-radial);}
.explore-card .media img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.explore-card:hover .media img{transform:scale(1.05);}
.explore-card .body{padding:32px; display:flex; flex-direction:column; gap:12px;}
@media (max-width:1023px){ .explore-grid{grid-template-columns:1fr;} .explore-card .media{height:320px;} }

/* Events dual banner */
.events-banner{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.event-card{padding:48px; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; position:relative; overflow:hidden;}
.event-card.dark{background:var(--color-navy-primary); color:#fff;}
.event-card.warm{background:linear-gradient(150deg, #6f4dff 0%, #5b3ff5 60%, #443f78 100%); color:#fff;}
@media (max-width:639px){ .events-banner{grid-template-columns:1fr;} }

/* ---------- Filter bar (rides directory) ---------- */
.filter-header{background:var(--color-surface-light); padding:32px 0;}
.filter-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px;}
.filter-bar select{padding:10px 14px; border:1px solid var(--color-border-grey); font-family:inherit; font-size:14px; border-radius:var(--radius-sharp); background:#fff;}
.filter-search{
  padding:10px 14px; border:1px solid var(--color-border-grey); font-family:inherit; font-size:14px;
  border-radius:var(--radius-sharp); background:#fff; flex:1 1 220px; min-width:200px; max-width:320px;
}
.filter-search:focus{outline:2px solid var(--color-violet-action); outline-offset:1px;}
.filter-pill-group{display:flex; gap:8px; flex-wrap:wrap;}
.filter-pill{background:#fff; border:1.5px solid var(--color-border-grey); color:var(--color-navy-primary); padding:8px 18px; border-radius:var(--radius-pill); font-weight:700; font-size:13px; text-transform:uppercase;}
.filter-pill.active{background:var(--color-navy-primary); border-color:var(--color-navy-primary); color:#fff;}

/* ---------- Ride detail page ---------- */
.ride-hero{position:relative; min-height:500px; display:flex; align-items:flex-end; background:var(--galaxy); color:#fff;}
.ride-hero::after{content:''; position:absolute; inset:0; background:var(--color-overlay-dark); opacity:.4;}
.ride-hero .container{position:relative; z-index:2; padding-bottom:48px;}
.stat-float-row{display:flex; gap:16px; margin-top:24px; flex-wrap:wrap;}
.stat-box{background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); padding:16px 24px; text-align:center; min-width:120px;}
.stat-box .num{font-family:var(--font-display); font-size:28px; font-weight:900;}
.stat-box .label{font-size:12px; text-transform:uppercase; letter-spacing:.5px; opacity:.8;}

.ride-layout{display:grid; grid-template-columns:70% 30%; gap:40px; align-items:flex-start;}
@media (max-width:1023px){ .ride-layout{grid-template-columns:1fr;} }
.ride-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0;}
.ride-gallery img{width:100%; height:220px; object-fit:cover; background:var(--galaxy-radial);}

.accordion-item{border-bottom:1px solid var(--color-border-grey);}
.accordion-trigger{width:100%; text-align:left; background:none; border:none; padding:16px 0; font-weight:700; color:var(--color-navy-primary); display:flex; justify-content:space-between; align-items:center;}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.accordion-panel.open{max-height:400px; padding-bottom:16px;}

.sidebar-sticky{position:sticky; top:24px; background:var(--color-surface-light); padding:24px;}
.queue-widget{text-align:center; padding-bottom:20px; border-bottom:1px solid var(--color-border-grey); margin-bottom:20px;}
.queue-widget .big-time{font-family:var(--font-display); font-size:32px; color:var(--color-navy-primary); font-weight:900;}
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#28c76f; margin-right:6px; animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
.fastrack-box{text-align:center;}
.fastrack-box .price{font-family:var(--font-display); font-size:24px; color:var(--color-violet-action); font-weight:900; margin:8px 0;}

/* ---------- Footer ---------- */
.footer{background:var(--color-navy-primary); color:#fff;}
.footer-newsletter{border-bottom:1px solid rgba(255,255,255,.2); padding-top:40px; padding-bottom:40px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.newsletter-form{display:flex; gap:0;}
.newsletter-form input{padding:12px 16px; border:1px solid var(--color-border-grey); font-family:inherit; min-width:260px;}
.newsletter-form button{border-radius:var(--radius-sharp);}

@media (max-width:639px){
  .footer-newsletter{flex-direction:column; align-items:stretch;}
  .newsletter-form{flex-direction:column; width:100%;}
  .newsletter-form input{min-width:0; width:100%;}
  .newsletter-form button{width:100%;}
}
.footer-columns{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-top:48px; padding-bottom:48px;}
.footer-columns h4{color:#fff; font-size:16px; text-transform:uppercase; margin-bottom:16px;}
.footer-columns ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer-columns a{opacity:.8; font-size:14px;}
.footer-columns a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2); padding-top:20px; padding-bottom:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; opacity:.75;}
.footer-social{display:flex; gap:16px;}
@media (max-width:639px){ .footer-columns{grid-template-columns:1fr 1fr;} }

/* ---------- Generic page hero (interior pages) ---------- */
.page-hero{background:var(--galaxy); color:#fff; padding:80px 0; }
.page-hero .eyebrow{color:var(--color-yellow);}

/* ---------- Error pages (400/401/403/404/500) ---------- */
.error-page{min-height:70vh; display:flex; align-items:center;}
.error-page .container{max-width:640px; margin:0 auto; text-align:center;}
.error-page .error-code{color:var(--color-yellow);}
.error-page .error-log{
  font-family:"Courier New", Courier, monospace; font-size:13px; color:rgba(255,255,255,.5);
  margin-top:28px; letter-spacing:.3px;
}

/* ============================================================
   Dark Mode — styled after the original Murray Land app
   Toggled by adding .dark to <html>. Persisted via localStorage.
   ============================================================ */
html.dark{
  --color-surface-white: #0d0930;
  --color-surface-light: #140c3c;
  --color-border-grey: #332a66;
  --color-text-mid: #b8b3d9;
  --color-text-dark: #eae7f7;
}
html.dark body{
  background:#020103;
  color:var(--color-text-dark);
}
html.dark body::before{
  content:'';
  position:fixed; inset:-60px; /* oversized so the translate below never shows an edge */
  z-index:-1; pointer-events:none; /* negative so it never paints over non-positioned content like the header/footer/video */
  background-image: url("../images/starfield-tile.svg");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity:.5;
  will-change: transform;
  animation: starDriftTransform 90s linear infinite;
}
@media (prefers-reduced-motion: reduce){ html.dark body::before{animation:none;} }

html.dark h1, html.dark h2, html.dark h3, html.dark h4{ color:#fff; }
html.dark .h3-subhead{ color:var(--color-text-dark); }
html.dark a{ color:inherit; }

html.dark .utility-bar{ background:#0a0724; }
html.dark .main-nav{ background:#0d0930; border-bottom-color:var(--color-border-grey); }
html.dark .main-nav .nav-links a, html.dark .logo-mark, html.dark .icon-btn{ color:#fff; }
html.dark .nav-dropdown{ background:#0d0930; border-color:var(--color-border-grey); }
html.dark .nav-dropdown a{ color:#fff; }
html.dark .nav-dropdown a:hover{ background:#140c3c; color:var(--color-violet-2); }
html.dark .nav-toggle{ color:#fff; }

html.dark .booking-engine{ background:#140c3c; box-shadow:0 4px 24px rgba(0,0,0,.5); }
html.dark .booking-field label{ color:var(--color-text-mid); }
html.dark .booking-field select, html.dark .booking-field input{
  background:#0d0930; color:#fff; border-color:var(--color-border-grey);
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); }
html.dark .qty-stepper{ border-color:var(--color-border-grey); }
html.dark .qty-btn{ background:#140c3c; color:#fff; }
html.dark .qty-stepper .qty-value{ background:#0d0930; color:#fff; border-left-color:var(--color-border-grey); border-right-color:var(--color-border-grey); }

html.dark .section-light{ background:#0a0724; }
html.dark .filter-header{ background:#0a0724; }
html.dark .filter-bar select{ background:#140c3c; color:#fff; border-color:var(--color-border-grey); }
html.dark .filter-search{ background:#140c3c; color:#fff; border-color:var(--color-border-grey); }
html.dark .filter-search::placeholder{ color:var(--color-text-mid); }
html.dark .filter-pill{ background:#140c3c; color:#fff; border-color:var(--color-border-grey); }
html.dark .filter-pill.active{ background:var(--color-violet-action); border-color:var(--color-violet-action); }
html.dark .pill-outline{ color:#fff; border-color:rgba(255,255,255,.45); }

html.dark .ride-card{ background:#140c3c; border-color:var(--color-border-grey); }
html.dark .ride-card .stats-row{ color:var(--color-text-mid); }
html.dark .ride-card .body p{ color:var(--color-text-dark); }

html.dark .explore-card{ background:#140c3c; border-color:var(--color-border-grey); }
html.dark .explore-card .body p{ color:var(--color-text-dark); }

html.dark .split-copy{ color:var(--color-text-dark); }
html.dark .split-copy p{ color:var(--color-text-dark); }

html.dark .sidebar-sticky{ background:#140c3c; color:#fff; }
html.dark .sidebar-sticky p{ color:var(--color-text-mid); }
html.dark .accordion-item{ border-color:var(--color-border-grey); }
html.dark .accordion-trigger{ color:#fff; }

html.dark .page-hero{ background:var(--void); }

/* Mobile nav drawer */
.mobile-drawer-backdrop{
  position:fixed; inset:0; background:rgba(2,1,3,.5); z-index:49;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.mobile-drawer-backdrop.open{opacity:1; pointer-events:auto;}

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 85vw);
  background:var(--color-navy-primary); z-index:50; display:flex; flex-direction:column;
  padding:24px; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s ease;
  box-shadow:-12px 0 32px rgba(0,0,0,.35);
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer a{color:#fff; font-size:20px; font-weight:700; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.15);}
.mobile-drawer a.mobile-drawer-sublink{padding-left:20px; font-size:16px; font-weight:600; opacity:.85;}
.mobile-drawer a.mobile-drawer-utility-link{font-size:16px; font-weight:600; opacity:.8; padding:12px 0;}
.mobile-drawer .close-btn{align-self:flex-end; background:none; border:none; color:#fff; font-size:28px;}
.mobile-drawer-divider{height:1px; background:rgba(255,255,255,.15); margin:8px 0; flex:0 0 auto;}
.mobile-theme-toggle{
  display:flex; align-items:center; gap:12px; background:none; border:none; color:#fff;
  font-size:18px; font-weight:700; font-family:inherit; padding:14px 0; cursor:pointer; text-align:left;
}
.theme-toggle-icon{display:inline-flex; align-items:center; justify-content:center;}