/* ============================================================
   Magnum Fireworks — Supplementary Styles
   Tailwind (via CDN) handles the bulk of styling in the HTML.
   This file holds custom touches, fallbacks, and print rules.
   ============================================================ */

:root {
  --magnum-red: #C8102E;
  --magnum-gold: #F4B400;
  --magnum-navy: #0A1A2F;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Subtle starburst gradient backdrop behind the hero */
section:first-of-type {
  background:
    radial-gradient(circle at 20% 20%, rgba(244, 180, 0, 0.10), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(200, 16, 46, 0.18), transparent 45%);
}

/* Anchor offset so sticky header doesn't cover section titles */
section[id] {
  scroll-margin-top: 90px;
}

/* Style anything the SMS platform injects so it blends with the page */
#sms-form-embed-container input[type="tel"],
#sms-form-embed-container input[type="text"],
#sms-form-embed-container input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  margin-bottom: 0.75rem;
}

#sms-form-embed-container button,
#sms-form-embed-container input[type="submit"] {
  background: var(--magnum-red);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#sms-form-embed-container button:hover,
#sms-form-embed-container input[type="submit"]:hover {
  background: #a50d26;
}

/* Accessible focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--magnum-gold);
  outline-offset: 2px;
}

/* Print-friendly fallback */
@media print {
  body { background: #fff; color: #000; }
  header, footer { border: none; }
}

/* ------------------------------------------------------------------
   Safety fallback — keeps the page dark, readable, and on-brand even
   if the Tailwind CDN ever fails to load. These are element-level
   selectors (low specificity), so when Tailwind IS loaded its utility
   classes always win and the normal design is unchanged.
   ------------------------------------------------------------------ */
body {
  background-color: var(--magnum-navy);
  color: #f5f5f5;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
}

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------
   Dashboard / landing enhancements (used by index.html)
   ------------------------------------------------------------------ */

/* Ambient page backdrop: faint firework glows behind everything */
body {
  background-image:
    radial-gradient(60rem 40rem at 50% -10%, rgba(200, 16, 46, 0.18), transparent 60%),
    radial-gradient(50rem 35rem at 100% 10%, rgba(20, 80, 180, 0.16), transparent 55%),
    radial-gradient(40rem 30rem at 0% 30%, rgba(244, 180, 0, 0.08), transparent 55%);
  background-attachment: fixed;
}

/* Hover-lift used by all dashboard tiles/cards */
.lift {
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease;
}
.lift:hover { transform: translateY(-4px); }

/* Glow framing for the two banner images */
.hero-img {
  box-shadow: 0 30px 70px -25px rgba(200, 16, 46, .60),
              0 0 0 1px rgba(244, 180, 0, .20);
}
.showcase-img {
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .85),
              0 0 0 1px rgba(244, 180, 0, .16);
}

/* Gold icon chip used in tiles & category cards */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.9rem;
  background: rgba(244, 180, 0, .12);
  border: 1px solid rgba(244, 180, 0, .35);
  color: var(--magnum-gold);
  flex: 0 0 auto;
}