/* ============================================================
   RUSHMOOR FIREWORKS SPECTACULAR — visual re-skin (final)
   Night-sky event identity: ember-tinted neutrals, a committed
   signature red for solid fills, and a spark-gold accent for
   highlights, focus and hover states.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root{
  /* ---- signature palette ---- */
  --brand:            #e2402f;  /* vivid accent — text/icons/borders on dark grounds only */
  --brand-bright:     #ff6a52;  /* hover state for brand TEXT (never used as a fill) */
  --brand-deep:       #a82a1d;  /* AA-safe solid fill — buttons, badges, primary bg */
  --brand-deep-hover: #8a2016;  /* darker press/hover fill — keeps contrast, adds depth */
  --spark:            #f2a63f;  /* gold accent — eyebrows, focus ring, hover glow */
  --spark-deep:       #c07f1f;  /* gold text on hover — AA-safe darker gold */

  /* ---- tinted neutrals (never pure #000/#fff) ---- */
  --ink:              #140b09;
  --surface:          #170f0c;   /* page ground */
  --surface-alt:      #241511;   /* card / raised surface */
  --surface-raised:   #2d1a14;
  --line:             rgba(242,166,63,.16);
  --line-strong:      rgba(226,64,47,.35);
  --paper:            #f6ece4;   /* body text on dark grounds */
  --paper-bright:     #fff7f2;   /* near-white — button text, display headline */
  --muted:            #c8ada2;   /* secondary text — dark neutral grounds only */

  --radius-s: .5rem;
  --radius-m: .9rem;
  --radius-l: 1.5rem;
  --ease: cubic-bezier(.22,1,.36,1);

  /* neutral depth at rest, warm glow on hover — one shadow language */
  --shadow-sm: 0 10px 22px -14px rgba(12,7,5,.6);
  --shadow-md: 0 18px 36px -18px rgba(12,7,5,.65);
  --shadow-lg: 0 30px 58px -24px rgba(12,7,5,.7);
  --glow-brand: 0 0 0 1px rgba(226,64,47,.3), 0 18px 34px -14px rgba(226,64,47,.4);
  --glow-spark: 0 0 0 1px rgba(242,166,63,.35), 0 20px 38px -16px rgba(242,166,63,.32);

  /* remap the site's own tokens so every component inherits the identity */
  --background: var(--surface);
  --text: var(--paper);
  --text-color-primary: var(--brand);
  --text-color-secondary: var(--muted);
  --background-color-secondary: var(--surface-alt);
  --section-light: var(--surface-alt);
  --section-dark: var(--ink);
  --button-bg: var(--brand-deep);
  --button-text: var(--paper-bright);
  --background-color-primary: var(--brand-deep);
  --background-color-alternate: var(--ink);
  --text-color-alternate: var(--paper-bright);
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-display: 'Anton', var(--font-heading);
}

*{ -webkit-font-smoothing:antialiased; }

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

body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(226,64,47,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(242,166,63,.09), transparent 55%),
    var(--surface);
  color:var(--text);
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }

::selection{ background:var(--brand-deep); color:var(--paper-bright); }

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

/* ============================================================
   TYPOGRAPHY — deliberate scale, ≥1.25× between steps
   ============================================================ */
h1,h2,h3,h4,h5,h6,.heading-style-h1,.heading-style-h2,.heading-style-h3,
.heading-style-h4,.heading-style-h5,.heading-style-h6{
  font-family:var(--font-heading);
  color:var(--paper);
  letter-spacing:-.01em;
}

.heading-style-h1{ font-size:clamp(2.75rem,6vw,4.5rem); letter-spacing:-.02em; }
.heading-style-h2{ font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.015em; }
.heading-style-h3{ font-size:clamp(1.875rem,3.4vw,2.25rem); }

/* the hero title (h1.heading-style-h4 in the markup) becomes the display line */
h1.heading-style-h4{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.08;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--paper-bright);
  text-shadow:0 3px 14px rgba(12,7,5,.5);
  max-width:38rem;
  margin-inline:auto;
}

/* the two supporting lines share the class but are h2 — quieter voice */
h2.heading-style-h4{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.3rem);
  line-height:1.55;
  color:var(--muted);
  max-width:36rem;
  margin-inline:auto;
}

p{ color:var(--text); }
p.text-align-center{ color:var(--muted); }

.text-color-primary{ color:var(--brand) !important; }
.text-color-secondary{ color:var(--muted) !important; }
.text-color-alternate{ color:var(--paper-bright) !important; }

/* defensive contrast: never let brand/secondary text sit on the brand fill */
.background-color-primary .text-color-primary,
.background-color-primary .text-color-secondary,
.background-color-primary h1,.background-color-primary h2,
.background-color-primary h3,.background-color-primary h4,
.background-color-primary h5,.background-color-primary h6{
  color:var(--paper-bright) !important;
}

.text-size-large{ font-size:1.625rem; }
.text-size-medium{ font-size:1.25rem; }

.text-size-large.text-weight-semibold{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.1rem;
  color:var(--spark);
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line-strong);
}

/* ============================================================
   SECTION STYLES & RHYTHM
   ============================================================ */
.padding-global{ padding-left:clamp(1.25rem,4vw,2.75rem); padding-right:clamp(1.25rem,4vw,2.75rem); }
.padding-section-small{ padding-top:clamp(1.5rem,3vw,2.25rem); padding-bottom:clamp(1.5rem,3vw,2.25rem); }
.padding-section-medium{ padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.padding-section-large{ padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:clamp(3.5rem,7vw,6rem); }

.section-style-dark{
  background:var(--ink) !important;
  color:var(--paper) !important;
}
.section-style-light{
  background:var(--surface-alt) !important;
  color:var(--paper) !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-style-dark .text-color-secondary,
.section-style-light .text-color-secondary{ color:var(--muted) !important; }

.background-color-primary{ background-color:var(--brand-deep) !important; color:var(--paper-bright) !important; }
.background-color-secondary{ background-color:var(--surface-alt) !important; }
.background-color-alternate{ background-color:var(--ink) !important; }

/* skip-link strip at very top — a single ember rail, not a rainbow gradient */
.section_skip-link{
  background:var(--brand-deep);
  border-bottom:1px solid var(--spark);
}
.section_skip-link,
.section_skip-link a{ color:var(--paper-bright); }
.section_skip-link .padding-section-small{ padding-top:.5rem; padding-bottom:.5rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav_list{
  gap:.75rem;
  padding:.6rem;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
}
.nav_item,
.nav_list > p{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.25rem;
  border-radius:var(--radius-s);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.85rem;
  color:var(--paper);
  background:transparent;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav_item:hover,
.nav_list > p:hover{
  background:var(--brand-deep);
  color:var(--paper-bright);
  transform:translateY(-1px);
}
.nav_item:active,
.nav_list > p:active{
  background:var(--brand-deep-hover);
  transform:translateY(0);
}
.nav_item p{ margin:0; }

/* catch-all: any nav link markup not covered above must stay legible */
nav a,
.navbar a,
.nav_component a,
header a{
  color:var(--paper);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
nav a:hover,
.navbar a:hover,
.nav_component a:hover,
header a:hover{
  color:var(--spark);
}

/* ============================================================
   HERO IMAGE
   ============================================================ */
/* neutralise any default white card wrapping the hero artwork so the
   image sits directly on the dark ground instead of floating in a
   mismatched light box */
*:has(> img.max-width-large):not(body):not(html){
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

img.max-width-large{
  border-radius:var(--radius-l);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
img.max-width-large:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:var(--shadow-lg), var(--glow-spark);
}

/* ============================================================
   INFO LIST (times / venue details)
   ============================================================ */
.info_list{ gap:1rem; }
.info_list > p{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.1rem 1.25rem;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  color:var(--paper);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.info_list > p:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), var(--glow-brand);
}

/* ============================================================
   ATTRACTIONS GRID
   ============================================================ */
.attractions_list{ gap:1.1rem; }
.attractions_list img.aspect-ratio-square{
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  object-fit:cover;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.attractions_list img.aspect-ratio-square:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:var(--spark);
  box-shadow:var(--shadow-md), var(--glow-spark);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button{
  background:var(--button-bg);
  color:var(--button-text);
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.95rem;
  padding:.9rem 2rem;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.button:hover{
  background:var(--brand-deep-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), var(--glow-brand);
}
.button:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.button.is-secondary{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--paper);
  box-shadow:none;
}
.button.is-secondary:hover{
  border-color:var(--brand);
  color:var(--brand-bright);
  background:rgba(226,64,47,.08);
}
.button.is-text{
  color:var(--spark);
  box-shadow:none;
  background:none;
}
.button.is-text:hover{ color:var(--spark-deep); text-decoration:underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.section_sitefootercomponent{
  background:var(--ink);
  color:var(--muted);
  border-top:1px solid var(--line);
}
.section_sitefootercomponent img.icon-height-medium{
  filter:drop-shadow(0 6px 16px rgba(226,64,47,.3));
}
.section_sitefootercomponent p{ color:var(--muted); }

.footer_nav-list{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
}
.footer_nav-list > p{
  margin:0;
  position:relative;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--paper);
  cursor:pointer;
  transition:color .2s var(--ease);
}
.footer_nav-list > p:hover{ color:var(--spark); }
.footer_nav-list > p:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-.85rem;
  top:50%;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--line-strong);
  transform:translateY(-50%);
}

/* ============================================================
   FORMS (defensive — interior pages / ticket forms)
   ============================================================ */
label{
  display:block;
  color:var(--paper);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  margin-bottom:.4rem;
}
input,textarea,select{
  width:100%;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  color:var(--paper);
  padding:.75rem 1rem;
  font-family:var(--font-body);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:.85; }
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(226,64,47,.25);
}

/* ============================================================
   EMPTY / PLACEHOLDER STATES
   ============================================================ */
.w-dyn-empty{
  background:var(--surface-alt) !important;
  border:1px dashed var(--line-strong) !important;
  border-radius:var(--radius-m);
  color:var(--muted) !important;
  padding:2rem !important;
  text-align:center;
  font-size:.9rem;
}

img[src=""]{
  background:repeating-linear-gradient(45deg,var(--surface-alt),var(--surface-alt) 8px,var(--surface-raised) 8px,var(--surface-raised) 16px);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-s);
  color:var(--muted);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS (values only — structure untouched)
   ============================================================ */
@media screen and (max-width:991px){
  h1.heading-style-h4{ font-size:clamp(1.7rem,6vw,2.6rem); }
}
@media screen and (max-width:767px){
  .footer_nav-list{ gap:1rem; }
}