/**
 * VAS Shooting Institute - High-Performance Design System
 * Primary Statements: "TRAIN. PERFORM. COMPETE." | "Precision today. Performance tomorrow."
 * Native Full LIGHT THEME by Default + Optional DARK THEME Switcher
 */

/* ==========================================================================
   CSS Custom Variables
   ========================================================================== */
:root {
  --color-bg-primary: #F8FAFC;
  --color-bg-secondary: #FFFFFF;
  --color-bg-surface: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-gold: #D97706;
  --color-gold-hover: #B45309;
  --color-gold-light: #F59E0B;
  --color-accent-blue: #2563EB;
  --color-accent-cyan: #0284C7;
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-muted: #64748B;
  --color-border: #E2E8F0;
  --color-border-hover: #CBD5E1;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 16px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(217, 119, 6, 0.15);
}

/* Dark Theme Variables (When .dark-theme is active) */
body.dark-theme {
  --color-bg-primary: #070B14;
  --color-bg-secondary: #0D1527;
  --color-bg-surface: #141F36;
  --color-bg-card: #182542;
  --color-gold: #E5A93C;
  --color-gold-hover: #F3BA52;
  --color-gold-light: #FBBF24;
  --color-accent-blue: #3A86FF;
  --color-accent-cyan: #00F5D4;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(229, 169, 60, 0.4);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 20px 35px -10px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(229, 169, 60, 0.2);
}

body.dark-theme header img[src*="logo.png"],
body.dark-theme footer img[src*="logo.png"],
body.dark-theme #mobile-drawer img[src*="logo.png"] {
  background-color: #FFFFFF;
  padding: 3px 6px;
  border-radius: 8px;
  mix-blend-mode: normal !important;
}

/* ==========================================================================
   Base Typography & Defaults
   ========================================================================== */
body {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

h1.uppercase, h2.uppercase, h3.uppercase, h4.uppercase,
.uppercase.font-heading, .font-heading.uppercase,
h1 .uppercase, h2 .uppercase {
  letter-spacing: 0.025em;
}

/* ==========================================================================
   DEFAULT LIGHT VERSION STYLING (Active whenever body has no .dark-theme)
   ========================================================================== */
body:not(.dark-theme) {
  /* Sections & Container Backgrounds */
  .bg-slate-950,
  .bg-\[\#070B14\],
  section.bg-slate-950 {
    background-color: #FFFFFF !important;
  }

  .bg-slate-900,
  .bg-slate-900\/30,
  .bg-slate-900\/40,
  .bg-slate-900\/60,
  .bg-slate-900\/80,
  .bg-slate-900\/90 {
    background-color: #F8FAFC !important;
  }

  .bg-slate-800,
  .bg-slate-800\/80,
  .bg-slate-800\/60,
  .bg-slate-800\/40 {
    background-color: #F1F5F9 !important;
  }

  /* Borders & Dividers */
  .border-white\/5,
  .border-white\/10,
  .border-white\/15,
  .border-white\/20,
  .divide-white\/5,
  .divide-white\/10 {
    border-color: #E2E8F0 !important;
  }

  /* Typography Contrast */
  .text-white {
    color: #0F172A !important;
  }

  .text-slate-100 {
    color: #1E293B !important;
  }

  .text-slate-200,
  .text-slate-300 {
    color: #334155 !important;
  }

  .text-slate-400 {
    color: #64748B !important;
  }

  .text-slate-500 {
    color: #64748B !important;
  }

  /* Top Announcement Bar */
  .top-announcement-bar {
    background-color: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    color: #475569 !important;
  }

  .top-announcement-bar a {
    color: #475569 !important;
  }

  .top-announcement-bar a:hover {
    color: #D97706 !important;
  }

  /* Main Sticky Header */
  header,
  .navbar-container {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  header .logo-title,
  header .text-white {
    color: #0F172A !important;
  }

  header .nav-link {
    color: #334155 !important;
  }

  header .nav-link:hover,
  header .nav-link.active {
    color: #D97706 !important;
    background-color: rgba(254, 243, 199, 0.5);
  }

  /* Navigation Dropdowns & Drawers */
  header .glass-panel,
  header .glass-card,
  #mobile-drawer,
  #cart-drawer {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
  }

  #mobile-drawer a {
    color: #334155 !important;
  }

  #mobile-drawer a:hover {
    background-color: #F1F5F9 !important;
    color: #D97706 !important;
  }

  /* Hero Sections Across All Pages */
  section.relative.min-h-\[90vh\],
  section.relative.py-24,
  section.relative.py-20,
  section.relative.py-32 {
    background-color: #F8FAFC !important;
  }

  /* Remove excessive empty top gap in page heroes */
  section.relative.py-24 {
    padding-top: 2.75rem !important;
    padding-bottom: 3.5rem !important;
  }

  section.relative.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }

  /* Keep hero photography crisp, vibrant, and visible */
  section.relative.min-h-\[90vh\] img,
  section.relative.py-24 img.filter,
  section.relative.py-20 img.filter,
  section.relative.py-32 img.filter,
  section.relative img.hero-img {
    opacity: 0.52 !important;
    filter: brightness(1.02) saturate(1.2) contrast(1.1) !important;
  }

  /* Light Theme Luminous Overlay Gradients (Only apply to background absolute layers) */
  section.relative > div.absolute .bg-gradient-to-t,
  section.relative > div.absolute > .bg-gradient-to-t {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(248, 250, 252, 0.82) 60%, #F8FAFC 100%) !important;
  }

  section.relative > div.absolute .bg-gradient-to-r,
  section.relative > div.absolute > .bg-gradient-to-r {
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.75) 50%, rgba(248, 250, 252, 0.3) 100%) !important;
  }

  .hero-overlay-gradient {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.60) 0%, rgba(248, 250, 252, 0.85) 55%, #F8FAFC 100%) !important;
  }

  /* Hero Typography & Badges in Light Mode */
  section.relative.min-h-\[90vh\] h1,
  section.relative.py-24 h1,
  section.relative.py-20 h1,
  section.relative.py-32 h1,
  section.hero-banner h1 {
    color: #0F172A !important;
    text-shadow: none !important;
  }

  /* High contrast highlight text in headings - rich bold amber without background-clip artifacts */
  h1 span.text-amber-600,
  h2 span.text-amber-600,
  h1 span.text-amber-500,
  h2 span.text-amber-500,
  h1 span.text-amber-400,
  h2 span.text-amber-400 {
    color: #D97706 !important;
    -webkit-text-fill-color: #D97706 !important;
    font-weight: 900 !important;
    display: inline-block;
  }

  /* Ensure text-amber-400 on light backgrounds has rich contrast */
  .text-amber-400 {
    color: #B45309 !important;
  }

  section.relative.min-h-\[90vh\] p,
  section.relative.py-24 p,
  section.relative.py-20 p,
  section.relative.py-32 p {
    color: #334155 !important;
    text-shadow: none !important;
  }

  /* Badges */
  .rounded-full.glass-panel,
  .rounded-full.border-amber-400\/30,
  .rounded-full.bg-amber-500\/20,
  .rounded-full.bg-cyan-500\/20,
  .rounded-full.bg-emerald-500\/20 {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
  }

  /* Stat highlight boxes on hero */
  section.relative.min-h-\[90vh\] .grid .glass-panel,
  section.relative.min-h-\[90vh\] .grid > div {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
  }

  section.relative.min-h-\[90vh\] .grid .text-amber-400 {
    color: #D97706 !important;
  }

  section.relative.min-h-\[90vh\] .grid .text-white {
    color: #0F172A !important;
  }

  section.relative.min-h-\[90vh\] .grid .text-slate-400 {
    color: #64748B !important;
  }

  /* Cards, Panels & Glass Elements */
  .glass-card,
  .glass-panel {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: var(--shadow-card) !important;
  }

  .glass-card:hover,
  .glass-panel:hover {
    border-color: #F59E0B !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-3px);
  }

  /* Inputs, Textareas & Selects */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #94A3B8 !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #D97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
    background-color: #FFFFFF !important;
  }

  /* Buttons & Action Controls */
  .btn-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.28) !important;
    border: none !important;
  }

  .btn-gold:hover {
    background: linear-gradient(135deg, #FBBF24 0%, #B45309 100%) !important;
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.38) !important;
  }

  .btn-outline-gold {
    border: 1.5px solid #D97706 !important;
    color: #B45309 !important;
    background-color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .btn-outline-gold:hover {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #B45309 !important;
  }

  /* Filters, Tabs & Category Buttons */
  .product-cat-filter:not(.active),
  .faq-cat-btn:not(.active) {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0 !important;
  }

  .product-cat-filter.active,
  .faq-cat-btn.active {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
    border-color: #D97706 !important;
  }

  /* Breadcrumbs */
  nav[aria-label="Breadcrumb"] {
    background-color: rgba(248, 250, 252, 0.95) !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  nav[aria-label="Breadcrumb"] span,
  nav[aria-label="Breadcrumb"] a {
    color: #64748B !important;
  }

  nav[aria-label="Breadcrumb"] a:hover {
    color: #D97706 !important;
  }

  /* Certificate Mockup Frame */
  .certificate-frame {
    background: #FFFEFA !important;
    color: #0F172A !important;
    border: 12px double #D97706 !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12) !important;
  }

  .certificate-frame .text-white {
    color: #0F172A !important;
  }

  .certificate-frame .text-slate-300,
  .certificate-frame .text-slate-400 {
    color: #475569 !important;
  }

  /* Olympic High-Performance Dark Footer */
  footer,
  .site-footer {
    background-color: #030712 !important;
    color: #94A3B8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  footer h3,
  footer h4,
  .site-footer h3,
  .site-footer h4 {
    color: #F8FAFC !important;
  }

  footer a:not(.btn-gold),
  .site-footer a:not(.btn-gold) {
    color: #CBD5E1 !important;
    transition: color 0.2s ease;
  }

  footer a:not(.btn-gold):hover,
  .site-footer a:not(.btn-gold):hover {
    color: #F59E0B !important;
  }

  /* Mobile Fixed Bottom Bar */
  .md\:hidden.fixed.bottom-0 {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
  }

  .md\:hidden.fixed.bottom-0 button,
  .md\:hidden.fixed.bottom-0 a.p-3 {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #E2E8F0 !important;
  }
}

/* ==========================================================================
   DARK THEME OVERRIDES (Triggered only when body has .dark-theme)
   ========================================================================== */
body.dark-theme {
  background-color: #070B14 !important;
  color: #F8FAFC !important;
}

body.dark-theme .top-announcement-bar {
  background-color: #070B14 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

body.dark-theme header,
body.dark-theme .navbar-container {
  background-color: rgba(7, 11, 20, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme header .logo-title,
body.dark-theme header .text-white {
  color: #FFFFFF !important;
}

body.dark-theme header .nav-link {
  color: #CBD5E1 !important;
}

body.dark-theme header .nav-link:hover,
body.dark-theme header .nav-link.active {
  color: #F59E0B !important;
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .glass-card,
body.dark-theme .glass-panel {
  background: rgba(24, 37, 66, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .text-white {
  color: #FFFFFF !important;
}

body.dark-theme .text-slate-300 {
  color: #CBD5E1 !important;
}

body.dark-theme .text-slate-400 {
  color: #94A3B8 !important;
}

body.dark-theme #mobile-drawer,
body.dark-theme #cart-drawer {
  background-color: #070B14 !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme #mobile-drawer a {
  color: #CBD5E1 !important;
}

body.dark-theme #mobile-drawer a:hover {
  background-color: #0F172A !important;
  color: #F59E0B !important;
}

body.dark-theme footer,
body.dark-theme .site-footer {
  background-color: #070B14 !important;
  color: #94A3B8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme footer a,
body.dark-theme .site-footer a {
  color: #CBD5E1 !important;
}

body.dark-theme footer a:hover,
body.dark-theme .site-footer a:hover {
  color: #F59E0B !important;
}

body.dark-theme input[type="text"],
body.dark-theme input[type="email"],
body.dark-theme input[type="tel"],
body.dark-theme input[type="number"],
body.dark-theme input[type="date"],
body.dark-theme select,
body.dark-theme textarea {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   Theme Switcher Button Styling
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.05);
}

/* Active navigation indicator dot */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background-color: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-gold);
}

/* Subtle animations */
@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.animate-subtle-float {
  animation: subtle-float 4s ease-in-out infinite;
}