/* ===========================================
   NERF MAIN CSS — DARK TACTICAL DESIGN SYSTEM
   Brand: nenerfgunparties.co.uk
   Version: 1.0
   ALL selectors scoped under #nerf-root
   to prevent any legacy / NE Children's Parties
   CSS conflicts.
   =========================================== */

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

/* ===========================================
   1. BRAND TOKENS
   =========================================== */
:root {
  /* Core palette */
  --nerf-primary: #FF5500;          /* Neon Orange — primary CTA */
  --nerf-primary-hover: #ff7733;
  --nerf-secondary: #0D1B2A;        /* Midnight Navy — page bg */
  --nerf-accent: #C8F000;           /* Acid Yellow-Green — highlights */
  --nerf-accent-hover: #d6ff33;
  --nerf-surface: #1C2B3A;          /* Dark Slate — cards / sections */
  --nerf-surface-alt: #243749;      /* Lifted surface */
  --nerf-text: #F5F5F5;             /* Crisp White */
  --nerf-text-muted: #9BB0C5;       /* Cool grey for secondary copy */
  --nerf-text-dim: #6B8197;
  --nerf-border: #2A3B4D;
  --nerf-border-strong: #3B5067;

  /* Shadows (deep glow for tactical feel) */
  --nerf-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --nerf-shadow: 0 4px 12px rgba(0,0,0,0.5);
  --nerf-shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
  --nerf-glow-orange: 0 0 24px rgba(255,85,0,0.45);
  --nerf-glow-accent: 0 0 18px rgba(200,240,0,0.35);

  /* Spacing */
  --nerf-space-xs: 0.5rem;
  --nerf-space-sm: 1rem;
  --nerf-space-md: 1.5rem;
  --nerf-space-lg: 2rem;
  --nerf-space-xl: 3rem;
  --nerf-space-2xl: 4rem;
  --nerf-space-3xl: 6rem;

  /* Radius — sharper, tactical */
  --nerf-radius-sm: 2px;
  --nerf-radius: 4px;
  --nerf-radius-md: 6px;
  --nerf-radius-lg: 10px;
  --nerf-radius-full: 9999px;

  /* Transitions */
  --nerf-transition: 0.2s ease-in-out;
  --nerf-transition-slow: 0.3s ease-in-out;

  /* Type stacks */
  --nerf-font-display: 'Russo One', 'Inter', sans-serif;  /* tactical headings */
  --nerf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===========================================
   2. ISOLATION WRAPPER
   Mirrors the same #root wrapper pattern used
   in the NE Children's Parties build.
   =========================================== */
#nerf-root {
  font-family: var(--nerf-font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--nerf-text) !important;
  background-color: var(--nerf-secondary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#nerf-root *,
#nerf-root *::before,
#nerf-root *::after {
  box-sizing: border-box !important;
}

/* ===========================================
   3. CONTAINERS
   =========================================== */
#nerf-root .nerf-container {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 var(--nerf-space-md) !important;
}

#nerf-root .nerf-container.narrow { max-width: 800px !important; }
#nerf-root .nerf-container.wide   { max-width: 1440px !important; }

/* ===========================================
   4. TYPOGRAPHY
   =========================================== */
#nerf-root h1, #nerf-root h2, #nerf-root h3,
#nerf-root h4, #nerf-root h5, #nerf-root h6 {
  font-family: var(--nerf-font-display) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--nerf-text) !important;
  margin: 0 0 var(--nerf-space-sm) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

#nerf-root h1 {
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#nerf-root h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
}
#nerf-root h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important;
}
#nerf-root h4 {
  font-size: 1.125rem !important;
}

/* Acid-green accent underline for hero headings */
#nerf-root .nerf-heading-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4rem;
}
#nerf-root .nerf-heading-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--nerf-accent);
  box-shadow: var(--nerf-glow-accent);
}

#nerf-root p {
  margin: 0 0 var(--nerf-space-sm) !important;
  color: var(--nerf-text) !important;
  font-family: var(--nerf-font-body) !important;
}

#nerf-root a {
  color: var(--nerf-accent) !important;
  text-decoration: none !important;
  transition: color var(--nerf-transition) !important;
}
#nerf-root a:hover {
  color: var(--nerf-accent-hover) !important;
}

#nerf-root .nerf-text-muted { color: var(--nerf-text-muted) !important; }
#nerf-root .nerf-text-center { text-align: center !important; }
#nerf-root .nerf-accent      { color: var(--nerf-accent) !important; }
#nerf-root .nerf-orange      { color: var(--nerf-primary) !important; }

/* ===========================================
   5. BUTTONS
   =========================================== */
#nerf-root .nerf-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.85rem 1.75rem !important;
  font-family: var(--nerf-font-display) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  border-radius: var(--nerf-radius) !important;
  cursor: pointer !important;
  transition: all var(--nerf-transition) !important;
  white-space: nowrap !important;
}

#nerf-root .nerf-btn-primary {
  background-color: var(--nerf-primary) !important;
  color: var(--nerf-secondary) !important;
  border-color: var(--nerf-primary) !important;
}
#nerf-root .nerf-btn-primary:hover {
  background-color: var(--nerf-primary-hover) !important;
  color: var(--nerf-secondary) !important;
  box-shadow: var(--nerf-glow-orange) !important;
  transform: translateY(-2px) !important;
}

#nerf-root .nerf-btn-accent {
  background-color: var(--nerf-accent) !important;
  color: var(--nerf-secondary) !important;
  border-color: var(--nerf-accent) !important;
}
#nerf-root .nerf-btn-accent:hover {
  background-color: var(--nerf-accent-hover) !important;
  color: var(--nerf-secondary) !important;
  box-shadow: var(--nerf-glow-accent) !important;
  transform: translateY(-2px) !important;
}

#nerf-root .nerf-btn-outline {
  background: transparent !important;
  color: var(--nerf-text) !important;
  border-color: var(--nerf-border-strong) !important;
}
#nerf-root .nerf-btn-outline:hover {
  border-color: var(--nerf-accent) !important;
  color: var(--nerf-accent) !important;
  background: rgba(200,240,0,0.06) !important;
}

#nerf-root .nerf-btn-ghost {
  background: transparent !important;
  color: var(--nerf-text-muted) !important;
}
#nerf-root .nerf-btn-ghost:hover {
  color: var(--nerf-accent) !important;
}

#nerf-root .nerf-btn-lg { padding: 1.05rem 2.25rem !important; font-size: 1.0625rem !important; }
#nerf-root .nerf-btn-sm { padding: 0.55rem 1.1rem !important; font-size: 0.8125rem !important; }
#nerf-root .nerf-btn-block { width: 100% !important; }

/* ===========================================
   6. BADGES / CHIPS
   =========================================== */
#nerf-root .nerf-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.35rem 0.85rem !important;
  font-family: var(--nerf-font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  border-radius: var(--nerf-radius) !important;
  background-color: var(--nerf-surface-alt) !important;
  color: var(--nerf-text) !important;
  border: 1px solid var(--nerf-border) !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
#nerf-root .nerf-badge.price {
  background-color: var(--nerf-secondary) !important;
  color: var(--nerf-accent) !important;
  border-color: var(--nerf-accent) !important;
}
#nerf-root .nerf-badge.age {
  background-color: var(--nerf-accent) !important;
  color: var(--nerf-secondary) !important;
  border-color: var(--nerf-accent) !important;
}
#nerf-root .nerf-badge.duration {
  background-color: var(--nerf-surface-alt) !important;
  color: var(--nerf-accent) !important;
  border-color: var(--nerf-accent) !important;
}

/* ===========================================
   7. SECTIONS
   =========================================== */
#nerf-root section {
  padding: var(--nerf-space-2xl) 0 !important;
}
#nerf-root .nerf-section-surface { background-color: var(--nerf-surface) !important; }
#nerf-root .nerf-section-darker  { background-color: #07111c !important; }

/* ===========================================
   8. GRID & FLEX
   =========================================== */
#nerf-root .nerf-grid { display: grid !important; gap: var(--nerf-space-md) !important; }
#nerf-root .nerf-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
#nerf-root .nerf-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
#nerf-root .nerf-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 992px) {
  #nerf-root .nerf-grid-3,
  #nerf-root .nerf-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  #nerf-root .nerf-grid-2,
  #nerf-root .nerf-grid-3,
  #nerf-root .nerf-grid-4 { grid-template-columns: 1fr !important; }
}

#nerf-root .nerf-flex { display: flex !important; }
#nerf-root .nerf-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
#nerf-root .nerf-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
#nerf-root .nerf-flex-wrap { flex-wrap: wrap !important; }
#nerf-root .nerf-flex-col { flex-direction: column !important; }

#nerf-root .nerf-gap-sm { gap: var(--nerf-space-sm) !important; }
#nerf-root .nerf-gap-md { gap: var(--nerf-space-md) !important; }
#nerf-root .nerf-gap-lg { gap: var(--nerf-space-lg) !important; }

/* ===========================================
   9. IMAGES
   =========================================== */
#nerf-root .nerf-img-responsive { max-width: 100% !important; height: auto !important; display: block !important; }
#nerf-root .nerf-img-rounded { border-radius: var(--nerf-radius-lg) !important; }
#nerf-root .nerf-img-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ===========================================
   10. DIVIDERS & MISC
   =========================================== */
#nerf-root .nerf-divider {
  height: 1px !important;
  background-color: var(--nerf-border) !important;
  margin: var(--nerf-space-lg) 0 !important;
  border: 0 !important;
}

/* ===========================================
   11. RESPONSIVE VISIBILITY
   =========================================== */
@media (max-width: 768px) { #nerf-root .nerf-hide-mobile { display: none !important; } }
@media (min-width: 769px) { #nerf-root .nerf-hide-desktop { display: none !important; } }

/* ===========================================
   12. ANIMATIONS
   =========================================== */
@keyframes nerf-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#nerf-root .nerf-animate-in { animation: nerf-fade-in 0.4s ease-out !important; }