/* Front-End Dynamic Theme Overrides */
:root {
  --fe-accent: #14b8a6;
  --fe-accent-hover: #0d9488;
  --fe-accent-rgb: 20, 184, 166;
  --fe-secondary: #2dd4bf;
  --fe-secondary-rgb: 45, 212, 191;
  --fe-cream: #f0fdfa;
  --fe-ink: #134e4a;
  --fe-ink-dark: #042f2e;
  --fe-card-bg: #ffffff;
  --fe-border: #99f6e4;
}

body {
  background-color: var(--fe-cream) !important;
  color: var(--fe-ink) !important;
}

/* Background utilities */
.bg-cream { background-color: var(--fe-cream) !important; }
.bg-ink { background-color: var(--fe-ink-dark) !important; }
.bg-accent { background-color: var(--fe-accent) !important; }
.bg-secondary { background-color: var(--fe-secondary) !important; }

/* Text utilities */
.text-ink { color: var(--fe-ink) !important; }
.text-accent { color: var(--fe-accent) !important; }
.text-secondary { color: var(--fe-secondary) !important; }
.text-cream { color: #ffffff !important; }

/* Eyebrow & Numbering */
.eyebrow {
  color: var(--fe-accent) !important;
  font-weight: 600 !important;
}
.eyebrow::before {
  background-color: var(--fe-accent) !important;
}
.num {
  color: var(--fe-accent) !important;
}

/* General Headings on light background */
h1:not(.text-white):not([class*="text-white"]),
h2:not(.text-white):not([class*="text-white"]),
h3:not(.text-white):not([class*="text-white"]),
h4:not(.text-white):not([class*="text-white"]),
h5:not(.text-white):not([class*="text-white"]),
h6:not(.text-white):not([class*="text-white"]),
.display:not(.text-white),
.display-xl:not(.text-white),
.display-lg:not(.text-white),
.display-md:not(.text-white) {
  color: var(--fe-ink) !important;
}

/* Buttons */
.pill-accent {
  background-color: var(--fe-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(var(--fe-accent-rgb), 0.35) !important;
}
.pill-accent:hover {
  background-color: var(--fe-accent-hover) !important;
  box-shadow: 0 6px 20px rgba(var(--fe-accent-rgb), 0.45) !important;
}
.pill-secondary {
  background-color: var(--fe-secondary) !important;
  color: #ffffff !important;
}
.pill-secondary:hover {
  background-color: var(--fe-accent-hover) !important;
}
.pill-dark {
  background-color: var(--fe-ink-dark) !important;
  color: #ffffff !important;
}
.pill-ghost {
  border-color: var(--fe-accent) !important;
  color: var(--fe-ink) !important;
}
.pill-ghost:hover {
  background-color: var(--fe-accent) !important;
  color: #ffffff !important;
}
.pill-light {
  background-color: var(--fe-cream) !important;
  color: var(--fe-ink) !important;
}

/* =========================================================
   HEADER & TOP BAR (THEME COLORS)
========================================================= */
div.bg-primary {
  background-color: var(--fe-ink-dark) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
div.bg-primary a:hover {
  color: var(--fe-accent) !important;
}
div.bg-primary i.text-accent,
div.bg-primary i.fa-phone,
div.bg-primary i.fa-envelope,
div.bg-primary i.fa-clock {
  color: var(--fe-accent) !important;
}

header:not(#mainHeader):not(.header-transparent) {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--fe-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

#mainHeader {
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.75) 0%, rgba(10, 15, 30, 0.35) 60%, rgba(10, 15, 30, 0) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

#mainHeader.is-scrolled {
  background: rgba(10, 20, 40, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.nav-a-hero {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-a-hero:hover {
  color: var(--fe-accent) !important;
}
.nav-a-hero.nav-a-active {
  color: var(--fe-accent) !important;
  font-weight: 600 !important;
}
#mobile-menu {
  background-color: #ffffff !important;
  border-color: var(--fe-border) !important;
}
.nav-a {
  color: var(--fe-ink) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav-a:hover {
  color: var(--fe-accent) !important;
}
.nav-a-active {
  color: var(--fe-accent) !important;
  font-weight: 600 !important;
}
.nav-a-active::after {
  background-color: var(--fe-accent) !important;
}

/* =========================================================
   HERO SLIDER & DARK SECTIONS FIXES
   Ultra-crisp white text on dark backgrounds + vibrant theme accents
========================================================= */
#heroSlider,
.hero-slide,
section.bg-ink,
section.bg-primary,
section[class*="bg-ink"],
section[class*="bg-primary"],
footer.bg-primary,
footer.bg-ink,
footer {
  color: #ffffff !important;
}

/* Hero Headings MUST BE WHITE, NEVER DARK */
#heroSlider h1,
#heroSlider h2,
#heroSlider h3,
.hero-slide h1,
.hero-slide h2,
.hero-slide h3,
section.bg-ink h1,
section.bg-ink h2,
section.bg-ink h3,
section.bg-ink h4,
section.bg-primary h1,
section.bg-primary h2,
section.bg-primary h3,
section.bg-primary h4,
footer h1,
footer h2,
footer h3,
footer h4 {
  color: #ffffff !important;
}

/* Hero Highlight / Focus words get vibrant theme accent */
#heroSlider h1 .text-accent,
#heroSlider h1 span.text-accent,
#heroSlider h2 .text-accent,
#heroSlider h2 span.text-accent,
#heroSlider .text-accent,
.hero-slide .text-accent,
section.bg-ink .text-accent,
section.bg-primary .text-accent,
footer .text-accent {
  color: var(--fe-accent) !important;
}

#heroSlider h1 .text-secondary,
#heroSlider h1 span.text-secondary,
#heroSlider h2 .text-secondary,
#heroSlider h2 span.text-secondary,
#heroSlider .text-secondary,
.hero-slide .text-secondary {
  color: var(--fe-secondary) !important;
}

/* Hero & Dark banner description paragraphs */
#heroSlider p,
.hero-slide p,
section.bg-ink p.text-white\/80,
section.bg-primary p.text-white\/80 {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Hero badge pills */
#heroSlider span.rounded-full,
.hero-slide span.rounded-full {
  background-color: rgba(var(--fe-accent-rgb), 0.22) !important;
  color: var(--fe-accent) !important;
  border-color: rgba(var(--fe-accent-rgb), 0.45) !important;
}
#heroSlider span.rounded-full span.bg-accent,
.hero-slide span.rounded-full span.bg-accent {
  background-color: var(--fe-accent) !important;
}

/* Hero Bottom Thumbs Bar */
.hero-thumb {
  background-color: transparent !important;
  color: #ffffff !important;
}
.hero-thumb span {
  color: #ffffff !important;
}
.hero-thumb span.text-white\/50 {
  color: rgba(255, 255, 255, 0.65) !important;
}
.hero-thumb:hover,
.hero-thumb.border-accent,
.hero-thumb.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.hero-thumb.border-accent {
  border-top-color: var(--fe-accent) !important;
}
.hero-thumb.border-secondary {
  border-top-color: var(--fe-secondary) !important;
}
.hero-thumb:hover span.font-semibold,
.hero-thumb.border-accent span.font-semibold {
  color: var(--fe-accent) !important;
}
.hero-thumb div[class*="bg-accent"] {
  background-color: rgba(var(--fe-accent-rgb), 0.25) !important;
  color: var(--fe-accent) !important;
}
.hero-thumb div[class*="bg-secondary"] {
  background-color: rgba(var(--fe-secondary-rgb), 0.25) !important;
  color: var(--fe-secondary) !important;
}

/* Section Cards & Lists */
.bg-cream { background-color: var(--fe-cream) !important; }
.bg-white { background-color: var(--fe-card-bg) !important; }

/* Form Fields */
.field:focus, input:focus {
  border-color: var(--fe-accent) !important;
}

/* Video Pulse Effect */
.video-pulse {
  background-color: rgba(var(--fe-accent-rgb), 0.35) !important;
}
.video-pulse::before {
  background: var(--fe-accent) !important;
  opacity: 0.5;
}

/* Scroll Top Button */
#scrollTopBtn {
  background-color: var(--fe-accent) !important;
}
#scrollTopBtn:hover {
  background-color: var(--fe-accent-hover) !important;
}