/* ==========================================================================
   MoonWalk 2026 — Base tokens and shared utilities
   --------------------------------------------------------------------------
   Both source pages ship an identical :root block and the same handful of
   utility classes (.container, .section-title, .btn-primary, ...). They live
   here once instead of being copied into all fourteen widget stylesheets.

   The two deltas between index.html and locations.html were resolved in
   favour of the homepage values:
     section padding        4rem   (locations.html used 3.5rem)
     .section-subtitle      620px / 0 auto 2.8rem  (locations used 640px / 2.5rem)

   Resets are scoped to .moonwalk-widget so the plugin never restyles the
   host theme.
   ========================================================================== */

:root {
  /* Colors */
  --bg-dark: #050814;
  --bg-navy: #0a1128;
  --bg-card: rgba(15, 23, 52, 0.75);
  --bg-card-hover: rgba(22, 34, 74, 0.9);
  --border-color: rgba(255, 255, 255, 0.12);
  --border-glow: rgba(255, 111, 0, 0.35);

  /* Accent gradient stops */
  --moon-grad-top: #1a237e;
  --moon-grad-mid: #c2185b;
  --moon-grad-orange: #ff5722;
  --moon-grad-bottom: #ff8f00;

  --gradient-blood-moon: linear-gradient(180deg, #1d267d 0%, #8c1d68 45%, #e64a19 75%, #ff8f00 100%);
  --gradient-blood-moon-h: linear-gradient(135deg, #283593 0%, #c2185b 40%, #ff3d00 75%, #ffb300 100%);
  --gradient-text: linear-gradient(135deg, #ffffff 30%, #ffab91 70%, #ff8f00 100%);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Text colors */
  --text-main: #f0f4f8;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Shadows and glows */
  --glow-orange: 0 0 25px rgba(255, 87, 34, 0.4);
  --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5);

  /* Layout */
  --container-max: 1240px;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Page canvas
   -------------------------------------------------------------------------- */
html,
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: var(--bg-dark);
  background: radial-gradient(circle at 50% 0%, #111a3a 0%, var(--bg-dark) 70%);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Scoped reset — applies inside MoonWalk widgets only
   -------------------------------------------------------------------------- */
.moonwalk-widget,
.moonwalk-widget *,
.moonwalk-widget *::before,
.moonwalk-widget *::after {
  box-sizing: border-box;
}

.moonwalk-widget h1,
.moonwalk-widget h2,
.moonwalk-widget h3,
.moonwalk-widget h4,
.moonwalk-widget h5,
.moonwalk-widget h6,
.moonwalk-widget p,
.moonwalk-widget ul,
.moonwalk-widget figure {
  margin: 0;
  padding: 0;
}

.moonwalk-widget h1,
.moonwalk-widget h2,
.moonwalk-widget h3,
.moonwalk-widget h4,
.moonwalk-widget h5,
.moonwalk-widget h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
  word-wrap: break-word;
  color: inherit;
}

.moonwalk-widget img {
  max-width: 100%;
}

/* Elementor wraps every widget in a column; MoonWalk sections are full-bleed
   band elements and manage their own horizontal padding. The widget root is
   itself a <section> in most cases, hence both selectors. */
section.moonwalk-widget,
.moonwalk-widget section {
  padding: 4rem 0;
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Layout + typography utilities
   -------------------------------------------------------------------------- */
.moonwalk-widget .container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  position: relative;
  z-index: 1;
}

.moonwalk-widget .text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.moonwalk-widget .text-moon-gradient {
  background: var(--gradient-blood-moon-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.moonwalk-widget .section-title {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  text-align: center;
}

.moonwalk-widget .section-subtitle {
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.8rem auto;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  padding: 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Icon library rendering
   --------------------------------------------------------------------------
   Elementor's ICONS control has three render paths, and this plugin has to
   size all of them itself rather than trusting Elementor's own stylesheet:

     1. <i class="far fa-ticket">       font glyph; inherits font-size + color
     2. <svg class="e-font-icon-svg">   the "Inline Font Icons" rendering that
                                        Elementor enables by default from 3.18
     3. <svg> inlined from an uploaded custom SVG file

   Paths 2 and 3 are replaced elements. Given a viewBox but no width/height
   and no CSS sizing, they fall back to the CSS default 300x150 box with a
   black fill and ignore the parent's font-size and color -- which is exactly
   why the icons rendered huge, black and unstyled. These rules pin them to
   the surrounding text box and restore colour inheritance.

   The source pages needed none of this because they hardcoded <i> glyphs.
   -------------------------------------------------------------------------- */
.moonwalk-widget i[class*="fa-"] {
  display: inline-block;
  font-style: normal;
  line-height: 1;
}

.moonwalk-widget svg.e-font-icon-svg {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Safety net for a custom SVG that declares no intrinsic size. Only the
   runaway box is corrected -- the file's own fill/stroke are left alone. The
   two MoonWalk symbols are excluded so their own rules stay authoritative. */
.moonwalk-widget svg:not([width]):not(.icon-full-moon):not(.moonwalk-inline-svg) {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
}

/* --------------------------------------------------------------------------
   Inline SVG symbols — the hand-drawn shapes ported from the source.
   Declared after the icon rules above so they always win.
   -------------------------------------------------------------------------- */
.moonwalk-widget .icon-full-moon {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.moonwalk-widget .moonwalk-inline-svg {
  display: inline-block;
  vertical-align: -0.125em;
}

/* --------------------------------------------------------------------------
   Shared buttons
   -------------------------------------------------------------------------- */
.moonwalk-widget .btn-primary,
.moonwalk-widget .btn-secondary {
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.moonwalk-widget .btn-primary {
  background: var(--gradient-blood-moon-h);
  color: #fff;
  box-shadow: var(--glow-orange);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.moonwalk-widget .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--border-color);
}

.moonwalk-widget .btn-primary:hover,
.moonwalk-widget .btn-secondary:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .moonwalk-widget .container {
    padding: 0 1rem;
  }

  .moonwalk-widget .btn-primary,
  .moonwalk-widget .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }

  .moonwalk-widget * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}