/* ==========================================================================
   DARK MODE V2 - Modern Dark Theme with Blue/Green Gradients
   Inspired by modern design tools with high readability
   ========================================================================== */

/* Dark Theme Color Palette - Professional Therapy */
:root {
  /* Dark backgrounds - Softer tones */
  --dark-bg-primary: #1e293b;
  --dark-bg-secondary: #334155;
  --dark-bg-tertiary: #475569;

  /* Professional Gradients - Muted */
  --gradient-blue-green: linear-gradient(135deg, #64748b 0%, #8dc63f 100%);
  --gradient-professional: linear-gradient(135deg, #475569 0%, #334155 100%);

  /* Text colors for dark mode */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  /* Accent colors - Calmer */
  --accent-blue: #60a5fa;
  --accent-green: #8dc63f;

  /* Glassmorphism dark - More subtle */
  --glass-dark-bg: rgba(51, 65, 85, 0.8);
  --glass-dark-border: rgba(100, 116, 139, 0.3);
  --glass-dark-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

/* Dark Mode Body */
body {
  background: var(--dark-bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Subtle Background Texture */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(141, 198, 63, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(100, 116, 139, 0.05) 0%, transparent 40%);
  z-index: -1;
}

/* Dark Header - Simple and Clean */
.site-header {
  background: rgba(30, 41, 59, 0.98) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
  padding: 0 !important;
}

.header-main {
  padding: 1rem 0 !important;
}

/* Hide the top contact bar for cleaner look */
.header-top {
  display: none !important;
}

/* Logo - Original Colors */
.logo img {
  filter: none;
  mix-blend-mode: normal;
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  max-height: 60px;
  transition: none;
}

.logo:hover img {
  opacity: 1;
}

.header-top {
  background: rgba(51, 65, 85, 0.5) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
  padding: 0.5rem 0 !important;
}

.header-top .contact-info,
.header-top .social-links a {
  color: var(--text-secondary) !important;
  font-size: 0.875rem;
}

.header-top .social-links a:hover {
  color: var(--accent-blue) !important;
  transform: translateY(-2px);
}

/* Dark Navigation */
.nav-item > a {
  color: var(--text-primary) !important;
}

.nav-item > a:hover {
  color: var(--accent-blue) !important;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Dark Cards - Simple and Clean */
.service-card,
.card {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: none;
}

.service-card:hover,
.card:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(141, 198, 63, 0.5) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: none;
}

/* Highly Readable Text in Cards - Simple */
.service-card h3,
.card h2,
.card h3,
.card h4 {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: none;
  background: none;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  display: block;
  margin-bottom: 1rem;
}

.service-card p,
.card p,
.card li {
  color: #e2e8f0 !important;
  line-height: 1.8;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Simple Text for Headings - No Gradients or Animations */
h1, h2, h3 {
  color: var(--text-primary) !important;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  animation: none;
  filter: none;
}

/* Page Headers - Simple */
.page-header {
  background: var(--dark-bg-secondary) !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(100, 116, 139, 0.3);
}

.page-header::before {
  display: none;
}

.page-header h1,
.page-header p {
  position: relative;
  z-index: 1;
  color: var(--text-primary) !important;
}

/* Modern Hero Section - Professional Therapy Style with Background Images */
.hero-slider {
  position: relative;
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg,
    #1e293b 0%,
    #334155 100%);
  padding: 5rem 2rem;
  text-align: center;
}

/* Hide old slider controls */
.slider-prev,
.slider-next,
.slider-controls,
.hero-slider .slide {
  display: none !important;
}

/* Background Image Carousel Layer */
.hero-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.hero-bg-image.active {
  opacity: 0.15;
}

/* Dark overlay to ensure text readability */
.hero-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(30, 41, 59, 0.85) 0%,
    rgba(51, 65, 85, 0.9) 100%);
  z-index: 1;
}

/* Subtle accent gradients on top */
.hero-slider::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(141, 198, 63, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 40%);
  z-index: 1;
}

/* Hero Content Container */
.hero-slider > .container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Hero Logo - Centered Above Heading */
.hero-logo {
  max-width: 320px;
  width: 100%;
  height: auto;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 220px;
    padding: 1rem;
  }
}

/* Main Hero Heading - Lighter and Less Blocky */
.hero-slider .hero-heading {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff !important;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: none;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
  filter: none !important;
}

/* Hero Subheading */
.hero-slider .hero-subheading {
  font-size: clamp(1.1rem, 2.5vw, 1.375rem);
  color: rgba(255, 255, 255, 0.75);
  max-width: 650px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* CTA Button in Hero */
.hero-slider .hero-cta {
  margin-top: 1.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--accent-green);
  color: #ffffff !important;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.hero-slider .hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(141, 198, 63, 0.4);
  background: #9dd954;
}

@media (max-width: 768px) {
  .hero-slider {
    min-height: 500px;
    padding: 4rem 1.5rem;
  }
}

/* Simple Icon Styling - No Effects */
.service-card i,
.fa-3x {
  color: var(--accent-green) !important;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  filter: none;
  transition: none;
}

.service-card:hover i {
  filter: none;
  transform: none;
}

/* Section Backgrounds */
.section {
  background: transparent !important;
  position: relative;
}

.section:nth-of-type(odd) {
  background:
    radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 50%) !important;
}

.section:nth-of-type(even) {
  background:
    radial-gradient(circle at 90% 80%, rgba(141, 198, 63, 0.05) 0%, transparent 50%) !important;
}

/* Buttons - Simple */
.btn {
  background: var(--accent-green) !important;
  border: none !important;
  color: white !important;
  box-shadow: none;
  transition: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  display: none;
}

.btn:hover {
  background: #9dd954 !important;
  box-shadow: none;
  transform: none;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid rgba(14, 165, 233, 0.5) !important;
  color: var(--accent-blue) !important;
}

.btn-outline:hover {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: var(--accent-blue) !important;
}

/* Footer Dark Mode */
.site-footer {
  background: var(--dark-bg-secondary) !important;
  border-top: 1px solid rgba(14, 165, 233, 0.2);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-blue-green);
  opacity: 0.5;
}

.site-footer,
.site-footer a,
.site-footer p {
  color: var(--text-secondary) !important;
}

.site-footer a:hover {
  color: var(--accent-blue) !important;
}

/* Particles - Subtle Green Theme */
.particle {
  background: rgba(141, 198, 63, 0.3) !important;
  opacity: 0.4;
  box-shadow: none;
}

/* Removed grid pattern for cleaner professional look */

/* Remove fancy border effects */
.card::before,
.service-card::before {
  display: none;
}

/* Breadcrumb */
.breadcrumb,
.breadcrumb a {
  color: var(--text-muted) !important;
}

.breadcrumb a:hover {
  color: var(--accent-blue) !important;
}

/* Lists */
.list-checkmark li {
  color: var(--text-secondary) !important;
}

.list-checkmark li::before {
  background: var(--gradient-blue-green) !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Links */
a {
  color: var(--accent-blue) !important;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--accent-cyan) !important;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Ensure all text is highly readable */
p, li, span, td, th {
  color: #e2e8f0 !important;
  font-size: 1rem;
  line-height: 1.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

strong, b {
  color: #f8fafc !important;
  font-weight: 600;
}

/* Main headings outside cards */
.section h2,
.section-title h2 {
  color: #ffffff !important;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Images with Glow */
img {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.card:hover img {
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.3);
}

/* Scrollbar Dark Theme */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-blue-green);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* Loading States */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.8);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Floating Animation for Hero Elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.hero-slider img {
  animation: float 6s ease-in-out infinite;
}

/* Text Selection */
::selection {
  background: rgba(14, 165, 233, 0.3);
  color: var(--text-primary);
}

/* Focus States for Accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Contrast for SEO and Accessibility */
/* Ensuring WCAG AAA compliance with high contrast ratios */
.service-card h3,
.card h2,
.card h3 {
  color: var(--text-primary) !important;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Contact Page Cards - Dark Mode */
.contact-card {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.contact-card i {
  color: var(--accent-green) !important;
}

.contact-card h3 {
  color: #ffffff !important;
  font-weight: 600;
}

.contact-card p {
  color: #e2e8f0 !important;
}

.contact-card a {
  color: var(--accent-blue) !important;
}

.contact-card a:hover {
  color: #93c5fd !important;
  text-decoration: underline;
}

/* Text color overrides for contact page */
.text-gray-600 {
  color: var(--text-secondary) !important;
}

/* Blog Posts - Dark Mode Readability */
.blog-post {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.blog-post:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(141, 198, 63, 0.5) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.blog-post-title {
  color: #ffffff !important;
  font-weight: 600;
}

.blog-post-date {
  color: var(--text-secondary) !important;
}

.blog-post-excerpt p {
  color: #e2e8f0 !important;
}

/* Resources List Items - Dark Mode */
.resource-item {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.resource-item:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(141, 198, 63, 0.5) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.resource-item a {
  color: var(--accent-blue) !important;
}

.resource-item a:hover {
  color: #93c5fd !important;
}

/* FAQ Items - Dark Mode with Enhanced Styling */
.faq-item {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  margin-bottom: 1.5rem !important;
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: rgba(141, 198, 63, 0.5) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.faq-item h3 {
  color: #ffffff !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.faq-item h3::before {
  content: '\f059';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  color: var(--accent-green);
  font-size: 1.25rem;
}

.faq-item p,
.faq-item li {
  color: #e2e8f0 !important;
  line-height: 1.8;
}

.faq-item ul,
.faq-item ol {
  color: #e2e8f0 !important;
}

/* Rates Table - Dark Mode */
.rates-table {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.rates-table tr {
  border-bottom: 1px solid rgba(100, 116, 139, 0.3) !important;
}

.rates-table td {
  color: #e2e8f0 !important;
}

.rates-table td:first-child {
  color: #ffffff !important;
  font-weight: 500;
}

.rates-table td:last-child {
  color: var(--accent-green) !important;
  font-weight: 600;
}

/* Page Header Backgrounds */
.page-header {
  background: var(--dark-bg-secondary) !important;
}

.bg-gray-100 {
  background: rgba(51, 65, 85, 0.2) !important;
}

/* Section Title Readability */
.section-title h1,
.section-title h2 {
  color: var(--text-primary) !important;
}

.section-subtitle {
  color: var(--text-secondary) !important;
}

/* List Styling in Dark Mode */
ul li,
ol li {
  color: #e2e8f0 !important;
}

/* Benefits/Expectations Sections with bg-gray-100 */
.bg-gray-100 h3,
.bg-gray-100 h4 {
  color: #ffffff !important;
  font-weight: 600;
}

.bg-gray-100 p {
  color: #e2e8f0 !important;
}

.bg-gray-100 .text-primary {
  color: #ffffff !important;
}

/* Icon colors in gray sections */
.bg-gray-100 i {
  color: var(--accent-green) !important;
}

/* Smooth Gradient for Workplace Wellness Section */
.wellness-gradient {
  background: linear-gradient(135deg, #2d3e2b 0%, #3d5a35 50%, #5a8c24 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.wellness-gradient h1,
.wellness-gradient h2,
.wellness-gradient h3,
.wellness-gradient h4 {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.wellness-gradient p {
  color: #e2e8f0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wellness-gradient i {
  color: #8dc63f !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.wellness-gradient .text-white {
  color: #8dc63f !important;
}

.wellness-gradient ul li {
  color: #e2e8f0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wellness-gradient .fas.fa-check-circle {
  color: #8dc63f !important;
  margin-right: 0.5rem;
}

/* Fix all dark text colors for readability */
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Override any dark text in sections */
.section p,
.section li,
.section span,
.section div {
  color: #e2e8f0 !important;
}

/* Ensure page header text is white */
.page-header h1,
.page-header p,
.page-header .text-white {
  color: #ffffff !important;
}

/* Fix blog post dates and meta */
.blog-post-meta,
.blog-post-date {
  color: var(--text-secondary) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .service-card,
  .card {
    backdrop-filter: blur(10px);
  }
}