/* =============================================================================
   CINESTAR EVENTS — Design System
   theme/cinestar-child/assets/css/main.css
   Version: 1.1.0
   Sections:
     0. Font Face (self-hosted Montserrat + Inter)
     A. CSS Custom Properties (Design Tokens)
     B. Base / Reset  (includes H1–H6 responsive scale)
     C. Layout Utilities
     D. Buttons
     E. Event Card
     F. Stats Bar
     G. Astra Header Overrides  (scroll-aware: transparent → solid)
     H. Astra Footer Overrides  (4-column layout)
   ============================================================================= */


/* =============================================================================
   0. FONT FACE — Self-Hosted (assets/fonts/)
   ============================================================================= */

/* Montserrat — headings */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Inter — body copy */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   A. CSS CUSTOM PROPERTIES — Design Tokens
   ============================================================================= */

:root {

  /* --- Colours: Backgrounds --- */
  --ce-bg:          #0A0A0A;              /* deep black — page background        */
  --ce-bg-raised:   #141414;              /* slightly lighter for alternating sections */
  --ce-bg-card:     #1A1A1A;              /* event card / panel backgrounds      */
  --ce-bg-overlay:  rgba(10, 10, 10, 0.85); /* hero gradient overlay             */

  /* --- Colours: Accents --- */
  --ce-gold:        #FFD700;              /* primary accent — CTAs, highlights   */
  --ce-gold-hover:  #FFE033;              /* gold hover state (lighter)          */
  --ce-magenta:     #FF1493;             /* secondary accent — badges, hot spots */
  --ce-purple:      #7B2FBE;              /* tertiary — gradients, dividers      */

  /* --- Colours: Text --- */
  --ce-text:        #FFFFFF;
  --ce-text-muted:  #CCCCCC;             /* secondary text                       */
  --ce-text-faint:  #888888;             /* captions, labels, metadata           */

  /* --- Colours: Borders --- */
  --ce-border:      rgba(255, 255, 255, 0.08);
  --ce-border-gold: rgba(255, 215, 0, 0.3);

  /* --- Glows (box-shadow values) --- */
  --ce-glow-gold:    0 0 24px rgba(255, 215, 0, 0.35);
  --ce-glow-magenta: 0 0 24px rgba(255, 20, 147, 0.35);
  --ce-glow-purple:  0 0 24px rgba(123, 47, 190, 0.35);

  /* --- Typography: Families --- */
  --ce-font-heading: 'Montserrat', sans-serif;
  --ce-font-body:    'Inter', sans-serif;

  /* --- Typography: Scale (rem) --- */
  --ce-text-xs:      0.75rem;   /* 12px */
  --ce-text-sm:      0.875rem;  /* 14px */
  --ce-text-base:    1rem;      /* 16px */
  --ce-text-lg:      1.125rem;  /* 18px */
  --ce-text-xl:      1.25rem;   /* 20px */
  --ce-text-2xl:     1.5rem;    /* 24px */
  --ce-text-3xl:     2rem;      /* 32px */
  --ce-text-4xl:     2.5rem;    /* 40px */
  --ce-text-5xl:     3.5rem;    /* 56px */
  --ce-text-display: clamp(2.5rem, 6vw, 5rem); /* fluid hero headline */

  /* --- Spacing (section padding-block) --- */
  --ce-space-sm:  1rem;
  --ce-space-md:  2rem;
  --ce-space-lg:  4rem;
  --ce-space-xl:  6rem;
  --ce-space-2xl: 8rem;

  /* --- Misc --- */
  --ce-radius-sm: 4px;
  --ce-radius:    8px;
  --ce-radius-lg: 16px;
  --ce-transition: 0.25s ease;
  --ce-z-header:  1000;
  --ce-header-h:  80px;   /* sticky header height — used for padding-top on hero sections */

  /* --- Astra global colour overrides ---
     Astra 4.x generates --ast-global-color-0 (#046bd2, blue) as its primary colour,
     used by buttons, links, selection highlight, input focus, pagination, entry meta, etc.
     Overriding here (child theme CSS loads after parent) remaps every consumer to brand gold.
     --ast-global-color-1 is the hover/secondary shade. */
  --ast-global-color-0: #FFD700;  /* → brand gold  (replaces Astra default #046bd2) */
  --ast-global-color-1: #FFE033;  /* → gold hover  (replaces Astra default #045cb4) */
}


/* =============================================================================
   B. BASE / RESET
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--ce-bg) !important;
  color: var(--ce-text);
  scroll-behavior: smooth;
}

body {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-base);
  line-height: 1.6;
  background-color: var(--ce-bg) !important;
  color: var(--ce-text);
}

/* Astra applies background via class selectors (.ast-plain-container etc.)
   which have higher specificity than 'body {}'. Override them explicitly. */
.ast-plain-container,
.ast-page-builder-template,
body.ast-plain-container {
  background-color: var(--ce-bg) !important;
}

/* ── SYSTEMIC FULL-WIDTH FIX ──────────────────────────────────────────────
   Astra wraps all page content in .ast-container (max-width 1280 px).
   Our custom page templates own content containment via .ce-container
   inside each section — so we can safely expand Astra's outer wrapper to
   100 % and let section backgrounds span the full viewport edge-to-edge. */
#content > .ast-container {
  max-width: 100%;
  padding-inline: 0;
  width: 100%;
}

/* Suppress Astra's built-in scroll-to-top button (all known class/ID variants).
   PHP hook is also removed via cinestar_remove_astra_scroll_to_top() in functions.php.
   CSS here acts as belt-and-suspenders in case Astra injects markup via JS. */
.ast-scroll-to-top,
#ast-scroll-to-top,
#ast-scroll-to-top-btn,
[class*="ast-scroll-to-top"],
[id*="ast-scroll-to-top"] {
  display: none !important;
}

/* Headings — family, colour, leading */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ce-font-heading);
  color: var(--ce-text);
  line-height: 1.2;
  margin-block-start: 0;
  margin-block-end: 0.5em;
}

/* H1–H6 responsive scale (mobile-first, fluid via clamp)
   Mobile baseline → scales with viewport → caps at desktop max */
h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem); /* 36px → 72px */
  font-weight: 800;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);   /* 28px → 48px */
  font-weight: 800;
}

h3 {
  font-size: clamp(1.375rem, 3vw, 2.25rem); /* 22px → 36px */
  font-weight: 700;
}

h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.75rem); /* 18px → 28px */
  font-weight: 700;
}

h5 {
  font-size: clamp(1rem, 2vw, 1.375rem); /* 16px → 22px */
  font-weight: 700;
}

h6 {
  font-size: var(--ce-text-base); /* 16px — fixed */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Links */
a {
  color: var(--ce-gold);
  text-decoration: none;
  transition: color var(--ce-transition);
}

a:hover,
a:focus-visible {
  color: var(--ce-gold-hover);
}

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

/* Remove default margin from lazy-loaded images */
img[loading="lazy"] {
  margin: 0;
}

/* Skip-to-content link (WCAG 2.1 AA)
   Visually hidden by default; visible only on keyboard focus.
   Must NOT be removed from HTML — screen readers and keyboard users depend on it. */
.ce-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ce-skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--ce-bg);
  color: var(--ce-gold);
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--ce-radius) 0;
  border-bottom: 2px solid var(--ce-gold);
  border-right: 2px solid var(--ce-gold);
  z-index: 99999;
  outline: none;
}


/* =============================================================================
   C. LAYOUT UTILITIES
   ============================================================================= */

/* Constrained content wrapper */
.ce-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .ce-container {
    padding-inline: 2rem;
  }
}

@media (min-width: 1440px) {
  .ce-container {
    padding-inline: 3rem;
  }
}

/* Full-width section with vertical breathing room */
.ce-section {
  padding-block: var(--ce-space-xl);
  width: 100%;
}

.ce-section--dark {
  background-color: var(--ce-bg);
}

.ce-section--raised {
  background-color: var(--ce-bg-raised);
}

.ce-section--card-bg {
  background-color: var(--ce-bg-card);
}

/* Auto-fill responsive grid */
.ce-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Flex centering helper */
.ce-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text alignment helper */
.ce-text-center {
  text-align: center;
}


/* =============================================================================
   D. BUTTONS
   ============================================================================= */

.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px; /* WCAG 2.5.5 tap target */
  padding: 0.75rem 1.75rem;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid transparent;
  border-radius: var(--ce-radius);
  cursor: pointer;
  transition:
    background-color var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition),
    color var(--ce-transition),
    border-color var(--ce-transition);

  /* Default: gold filled */
  background-color: var(--ce-gold);
  color: #0A0A0A;
  border-color: var(--ce-gold);
}

.ce-btn:hover,
.ce-btn:focus-visible {
  background-color: var(--ce-gold-hover);
  border-color: var(--ce-gold-hover);
  color: #0A0A0A;
  box-shadow: var(--ce-glow-gold);
  transform: translateY(-2px);
  text-decoration: none;
}

.ce-btn:active {
  transform: translateY(0);
}

/* Outline variant */
.ce-btn--outline {
  background-color: transparent;
  color: var(--ce-gold);
  border-color: var(--ce-gold);
}

.ce-btn--outline:hover,
.ce-btn--outline:focus-visible {
  background-color: var(--ce-gold);
  color: #0A0A0A;
}

/* Magenta variant */
.ce-btn--magenta {
  background-color: var(--ce-magenta);
  color: #FFFFFF;
  border-color: var(--ce-magenta);
}

.ce-btn--magenta:hover,
.ce-btn--magenta:focus-visible {
  background-color: var(--ce-magenta);
  color: #FFFFFF;
  box-shadow: var(--ce-glow-magenta);
}

/* Size: Large */
.ce-btn--lg {
  padding: 1.125rem 2.5rem;
  font-size: var(--ce-text-lg);
}

/* Size: Small */
.ce-btn--sm {
  min-height: 44px; /* WCAG 2.5.5 tap target */
  padding: 0.625rem 1.25rem;
  font-size: var(--ce-text-sm);
}


/* =============================================================================
   E. EVENT CARD
   ============================================================================= */

.ce-card {
  background-color: var(--ce-bg-card);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--ce-transition),
    box-shadow var(--ce-transition),
    border-color var(--ce-transition);
}

/* Only apply card lift on devices that support true hover (not touch) */
@media (hover: hover) {
  .ce-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ce-glow-gold);
    border-color: var(--ce-border-gold);
  }
}

/* Portrait poster image */
.ce-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Card content area */
.ce-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Artist name */
.ce-card__artist {
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-xl);
  font-weight: 700;
  color: var(--ce-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Date + venue meta line */
.ce-card__meta {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  color: var(--ce-text-muted);
  margin: 0;
}

/* Status badge */
.ce-card__badge {
  display: inline-block;
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ce-radius-sm);
  width: fit-content;
}

.ce-card__badge--on-sale {
  background-color: rgba(255, 215, 0, 0.15);
  color: var(--ce-gold);
  border: 1px solid var(--ce-border-gold);
}

.ce-card__badge--coming-soon {
  background-color: rgba(123, 47, 190, 0.2);
  color: #C084FC;
  border: 1px solid rgba(123, 47, 190, 0.4);
}

.ce-card__badge--sold-out {
  background-color: rgba(136, 136, 136, 0.15);
  color: #9A9A9A; /* was --ce-text-faint (#888) — lightened for WCAG AA contrast */
  border: 1px solid rgba(136, 136, 136, 0.2);
}

/* CTA button — pushed to bottom on desktop, full-width on mobile */
.ce-card__cta {
  margin-top: auto;
  padding-top: 0.75rem;
}

@media (max-width: 767px) {
  .ce-card__cta .ce-btn {
    width: 100%;
  }
}


/* =============================================================================
   F. STATS BAR
   ============================================================================= */

.ce-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
}

.ce-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.ce-stat__number {
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-4xl);
  font-weight: 900;
  color: var(--ce-gold);
  line-height: 1;
}

.ce-stat__label {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  color: var(--ce-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* =============================================================================
   G. ASTRA HEADER OVERRIDES
   Scroll-aware: transparent over hero sections → solid dark on scroll.
   JS adds/removes .ce-header--scrolled on #masthead.
   ============================================================================= */

/* Main header wrapper — always dark, never transparent.
   position: sticky !important overrides any Astra-generated position: absolute/fixed
   that transparent-header mode or HFB config may inject.
   z-index: 1000 ensures it floats above all page sections. */
#masthead {
  background-color: rgba(10, 10, 10, 0.95) !important;
  border-bottom: 1px solid var(--ce-border);
  position: sticky !important;
  top: 0;
  z-index: var(--ce-z-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* On scroll: fully opaque + shadow for depth */
#masthead.ce-header--scrolled {
  background-color: rgba(10, 10, 10, 0.98) !important;
  border-bottom-color: var(--ce-border-gold) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* When WP admin bar is visible, offset the sticky header below it */
body.admin-bar #masthead { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar #masthead { top: 46px; }
}

/* Mobile: fixed header flush at top, fully opaque */
@media (max-width: 921px) {
  #masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #0A0A0A !important;
    z-index: 9999 !important;
  }

  /* Offset page content below the fixed header */
  #page {
    padding-top: var(--ce-header-h) !important;
  }

  /* Admin bar: push header below WP admin bar */
  body.admin-bar #masthead {
    top: 46px !important;
  }
}

/* Inner header bar — Astra uses .ast-primary-header-bar for background.
   padding-block: 0 prevents the bar from exceeding var(--ce-header-h).
   With padding-block: 1rem + min-height: 80px it would grow to 112px. */
.main-header-bar,
.ast-primary-header-bar {
  background-color: transparent !important;
  padding-block: 0 !important;
  min-height: var(--ce-header-h);
  display: flex;
  align-items: center;
}

/* Astra HFB desktop expanded content — stays transparent */
.ast-desktop-header-content {
  background-color: transparent !important;
}

/* Astra HFB mobile popup — dark solid.
   Targets EVERY selector Astra uses in its generated inline CSS,
   plus generic fallbacks for future Astra versions. */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-content,
#ast-mobile-popup,
#ast-mobile-popup .ast-mobile-popup-inner,
.ast-mobile-header-content,
.ast-desktop-header-content {
  background-color: #0A0A0A !important;
  color: #FFFFFF !important;
}

.ast-mobile-header-wrap .ast-mobile-header-content {
  border-top: 2px solid var(--ce-border-gold) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Astra inline CSS targets these exact selectors for menu background.
   --ast-global-color-4 is now #0A0A0A but we double-lock with !important. */
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
  background-color: #0A0A0A !important;
}

/* Mobile menu link text: light on dark */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .ast-menu-toggle,
#ast-mobile-popup a,
#ast-mobile-popup .menu-link,
.ast-mobile-popup-drawer a,
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-popup-content a,
.ast-mobile-popup-content .menu-link,
.ast-mobile-header-content .menu-link {
  color: #E0E0E0 !important;
}

/* Mobile hover: gold text, dark bg */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item:hover > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item:hover > .ast-menu-toggle {
  color: var(--ce-gold) !important;
  background: #1A1A1A !important;
}

/* Mobile current/active: gold text, dark bg */
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .ast-menu-toggle,
#ast-mobile-popup .current-menu-item .menu-link,
.ast-mobile-popup-drawer .current-menu-item .menu-link,
.ast-mobile-popup-content .current-menu-item .menu-link,
.ast-mobile-header-content .current-menu-item .menu-link {
  color: var(--ce-gold) !important;
  background: #1A1A1A !important;
}

/* Mobile popup overlay background — dark */
#ast-mobile-popup-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Close button in popup — white */
#ast-mobile-popup .menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer.active .menu-toggle-close {
  color: #FFFFFF !important;
}

/* Logo image */
.site-logo img,
.custom-logo {
  max-height: 45px !important;
  width: auto !important;
  height: auto;
}

/* Mobile: slightly smaller logo */
@media (max-width: 767px) {
  .site-logo img,
  .custom-logo {
    max-height: 35px !important;
  }
}

/* Site title — hidden when logo image is active */
.site-title {
  display: none !important;
}

/* Tagline — hidden */
.site-description {
  display: none !important;
}

/* Desktop navigation links */
.main-header-menu .menu-item > a,
.main-header-bar .main-navigation .menu-item > a {
  font-family: var(--ce-font-heading) !important;
  font-size: 0.8125rem !important;    /* 13px — tighter than 14px to prevent wrap at 1024px */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;  /* tighter tracking saves horizontal space */
  color: var(--ce-text-muted) !important;
  white-space: nowrap !important;     /* never wrap onto two lines */
  transition: color var(--ce-transition) !important;
  text-decoration: none;
  /* WCAG 2.5.5: 44px minimum tap target — met by parent min-height: 80px */
  min-height: 44px !important;
  padding-block: 0 !important;        /* parent handles vertical centering */
  display: inline-flex !important;
  align-items: center !important;
}

.main-header-menu .menu-item > a:hover,
.main-header-bar .main-navigation .menu-item > a:hover,
.main-header-menu .menu-item > a:focus-visible,
.main-header-bar .main-navigation .menu-item > a:focus-visible {
  color: var(--ce-gold) !important;
}

/* Active / current page nav item */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a,
.main-header-bar .main-navigation .current-menu-item > a {
  color: var(--ce-gold) !important;
}

/* Mobile hamburger button — Astra HFB renders .ast-mobile-menu-trigger-minimal
   SVG icons use fill:currentColor so setting color propagates to the SVG fill */
.ast-mobile-menu-trigger-minimal {
  color: var(--ce-text) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
}

/* Override Astra's fill:var(--ast-global-color-0) on the SVG directly */
.ast-mobile-menu-trigger-minimal .ast-mobile-svg {
  fill: var(--ce-text) !important;
  width: 24px !important;
  height: 24px !important;
}

/* Mobile nav menu links — Astra HFB adds class="menu-link" on <a>, not bare > a */
.ast-mobile-header-content .menu-link {
  color: var(--ce-text-muted) !important;
  font-family: var(--ce-font-heading) !important;
  font-size: var(--ce-text-sm) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-block: 1rem !important; /* 1rem×2 + ~21px text ≥ 44px tap target */
  padding-inline: 1.5rem !important;
  display: block !important;
  border-bottom: 1px solid var(--ce-border) !important;
  transition: color var(--ce-transition) !important;
}

.ast-mobile-header-content .menu-link:hover,
.ast-mobile-header-content .menu-link:focus-visible {
  color: var(--ce-gold) !important;
}

/* Current page highlight in mobile nav */
.ast-mobile-header-content .current-menu-item .menu-link,
.ast-mobile-header-content .current-menu-ancestor .menu-link {
  color: var(--ce-gold) !important;
}

/* Header CTA — "Get Tickets" button (Astra Header Builder button widget)
   Astra 4.x renders: <a class="ast-custom-button-link"> > <div class="ast-custom-button">
   The old .ast-builder-button-link selector no longer exists in Astra 4.x — dead code removed.
   Background and border colour are handled by --ast-global-color-0 override in :root above.
   Only text colour needs explicit targeting (Astra hardcodes color:#ffffff on .ast-custom-button). */

.ast-custom-button-link {
  white-space: nowrap !important; /* prevent "Get Tickets" splitting to two lines */
}

.ast-custom-button {
  color: #0A0A0A !important;      /* dark text on gold background — Astra default is #fff */
  font-family: var(--ce-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Hover and focus */
.ast-custom-button-link:hover .ast-custom-button,
.ast-custom-button-link:focus-visible .ast-custom-button,
.ast-custom-button:hover {
  color: #0A0A0A !important;
  box-shadow: var(--ce-glow-gold) !important;
}

/* Hide "Get Tickets" button on mobile (available in hamburger menu instead) */
@media (max-width: 767px) {
  .ast-header-button,
  .header-button-1 {
    display: none !important;
  }
}


/* =============================================================================
   H. FOOTER — Custom 4-Column Layout (footer.php child theme template)
   Targets .ce-footer__* classes defined in footer.php.
   ============================================================================= */

/* Footer wrapper */
.ce-footer {
  background-color: var(--ce-bg-raised);
  border-top: 1px solid var(--ce-border-gold);
}

/* Widget grid — mobile-first: 1 col → 2 col → 4 col */
.ce-footer__widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: var(--ce-space-lg); /* 4rem — comfortable on mobile */
}

@media (min-width: 640px) {
  .ce-footer__widgets {
    grid-template-columns: 1fr 1fr;
    padding-block: var(--ce-space-xl); /* 6rem on tablet+ */
  }
}

@media (min-width: 1024px) {
  .ce-footer__widgets {
    /* About: wide | Links: narrow | Contact: medium | Social: narrow */
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
  }
}

/* Column headings */
/* Footer logo */
.ce-footer__logo-link {
  display: inline-block;
  margin-block-end: 1rem;
}

.ce-footer__logo {
  height: 35px;
  width: auto;
  display: block;
}

.ce-footer__heading {
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-sm);
  font-weight: 700;
  color: var(--ce-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block: 0 1rem;
  padding-block-end: 0.5rem;
  border-bottom: 1px solid var(--ce-border-gold);
}

/* Body text */
.ce-footer p {
  color: var(--ce-text-muted);
  font-size: var(--ce-text-sm);
  line-height: 1.7;
  margin-block-end: 0.75rem;
}

/* Inline stats (120+ shows | 20+ years) */
.ce-footer__stats {
  margin-block-start: 1rem;
}

.ce-footer__stats strong {
  color: var(--ce-text);
}

/* Generic link colour inside footer */
.ce-footer a {
  color: var(--ce-text-muted);
  text-decoration: none;
  transition: color var(--ce-transition);
}

.ce-footer a:hover,
.ce-footer a:focus-visible {
  color: var(--ce-gold);
}

/* Nav list */
.ce-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ce-footer__list li {
  padding-block: 0.3rem;
  color: var(--ce-text-muted);
  font-size: var(--ce-text-sm);
}

/* Social links — plain text style, no fixed-size circle */
.ce-footer__socials a {
  color: var(--ce-text-muted) !important;
  font-size: var(--ce-text-sm);
  transition: color var(--ce-transition);
}

.ce-footer__socials a:hover,
.ce-footer__socials a:focus-visible {
  color: var(--ce-gold) !important;
}

/* Copyright / bottom bar */
.ce-footer__bar {
  background-color: var(--ce-bg);
  border-top: 1px solid var(--ce-border);
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  text-align: center;
}

.ce-footer__copyright {
  font-size: var(--ce-text-sm);
  color: var(--ce-text-faint);
  margin: 0;
}

.ce-footer__bar a {
  color: var(--ce-text-faint);
  text-decoration: none;
  transition: color var(--ce-transition);
}

.ce-footer__bar a:hover,
.ce-footer__bar a:focus-visible {
  color: var(--ce-gold);
}


/* =============================================================================
   I. SCROLL-TO-TOP BUTTON
   Fixed, bottom-right, circular gold button. Appears after 500px scroll.
   JS in global.js adds/removes .is-visible.
   ============================================================================= */

.ce-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ce-gold);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  color: var(--ce-gold);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background-color var(--ce-transition),
    box-shadow var(--ce-transition);
}

.ce-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ce-scroll-top:hover,
.ce-scroll-top:focus-visible {
  background: var(--ce-gold);
  color: #0A0A0A;
  box-shadow: var(--ce-glow-gold);
  outline: none;
}

.ce-scroll-top svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Push button up above mobile browser toolbar */
@media (max-width: 767px) {
  .ce-scroll-top {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}


/* =============================================================================
   J. BREADCRUMBS
   Subtle single-line nav above hero headings on inner pages.
   PHP helper cinestar_breadcrumbs() outputs .ce-breadcrumb.
   ============================================================================= */

.ce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}

.ce-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--ce-transition);
}

.ce-breadcrumb a:hover,
.ce-breadcrumb a:focus {
  color: var(--ce-gold);
  outline: none;
}

.ce-breadcrumb a:focus-visible {
  outline: 2px solid var(--ce-gold);
  outline-offset: 2px;
}

.ce-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}

/* Current page — slightly brighter */
.ce-breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.75);
}


/* =============================================================================
   K. FADE-UP ANIMATION (global — also used by home.js on homepage)
   Elements start hidden; global.js adds .is-visible via IntersectionObserver.
   home.css also defines these for the homepage — same rules, no conflict.
   ============================================================================= */

.ce-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.ce-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays via data-delay attribute */
.ce-fade-up[data-delay="100"] { transition-delay: 100ms; }
.ce-fade-up[data-delay="200"] { transition-delay: 200ms; }
.ce-fade-up[data-delay="300"] { transition-delay: 300ms; }
.ce-fade-up[data-delay="400"] { transition-delay: 400ms; }
.ce-fade-up[data-delay="500"] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .ce-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =============================================================================
   L. FOOTER NEWSLETTER STRIP
   Full-width band above the footer widget grid.
   ============================================================================= */

.ce-footer__newsletter {
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(123, 47, 190, 0.05) 100%
  );
  border-bottom: 1px solid var(--ce-border-gold);
  padding-block: 2.25rem;
}

/* Centred stacked layout at all viewport sizes */
.ce-footer__newsletter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.ce-footer__newsletter-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Heading — Montserrat bold, white, matching section heading style */
.ce-footer__newsletter-heading {
  font-family: var(--ce-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ce-text);
  margin-block: 0;
  line-height: 1.2;
}

.ce-footer__newsletter-sub {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  color: var(--ce-text-muted);
  max-width: 42ch;
  margin: 0;
}

/* Single-row form — input + button — centred */
.ce-footer__newsletter-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
}

.ce-footer__newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 1rem;
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  color: var(--ce-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius);
  outline: none;
  transition: border-color var(--ce-transition);
}

.ce-footer__newsletter-input::placeholder {
  color: var(--ce-text-faint);
}

.ce-footer__newsletter-input:focus {
  border-color: var(--ce-gold);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

.ce-footer__newsletter-btn {
  padding: 0.6rem 1.25rem;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0A0A0A;
  background: var(--ce-gold);
  border: none;
  border-radius: var(--ce-radius);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--ce-transition),
    box-shadow var(--ce-transition);
}

.ce-footer__newsletter-btn:hover,
.ce-footer__newsletter-btn:focus-visible {
  background: var(--ce-gold-hover);
  box-shadow: var(--ce-glow-gold);
  outline: none;
}