/* ==========================================================================
   Life Care Foundation - Holistic Wellness & Mental Health Center
   Custom Styles & Modern Header Animations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,500..900;1,500..900&family=Inter:wght@300..800&display=swap');

:root {
  --primary-navy: #0B1E36;
  --secondary-slate: #1A365D;
  --accent-teal: #0D9488;
  --accent-emerald: #059669;
  --accent-amber: #D97706;
  --bg-cream: #F8FAFC;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  background-color: #F8FAFC;
}

.font-serif-luxury {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Nav Link Hover Micro-interaction */
.nav-link-custom {
  position: relative;
  transition: color 0.25s ease;
}

.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #0D9488, #059669);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

.nav-link-custom:hover::after {
  width: 100%;
}

/* Call Badge Glowing Effect */
.call-badge-glow {
  box-shadow: 0 4px 20px -2px rgba(220, 38, 38, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.call-badge-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px -2px rgba(220, 38, 38, 0.45);
}

/* Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.glass-panel-dark {
  background: rgba(11, 30, 54, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(11, 30, 54, 0.12);
  border-color: rgba(13, 148, 136, 0.4);
}

/* Ambient Glow Orbs */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.glow-navy {
  background: radial-gradient(circle, #1E40AF 0%, rgba(30, 64, 175, 0) 70%);
}

.glow-teal {
  background: radial-gradient(circle, #14B8A6 0%, rgba(20, 184, 166, 0) 70%);
}

.glow-amber {
  background: radial-gradient(circle, #F59E0B 0%, rgba(245, 158, 11, 0) 70%);
}

/* Floating Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseEmergency {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

@keyframes pulseWhatsApp {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-emergency-pulse {
  animation: pulseEmergency 2.5s infinite;
}

.animate-whatsapp-pulse {
  animation: pulseWhatsApp 2s infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #0D9488;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0B1E36;
}

/* Quiz Option Selection Styles */
.quiz-option input[type="radio"]:checked + div,
.quiz-option input[type="checkbox"]:checked + div {
  border-color: #0D9488;
  background-color: rgba(13, 148, 136, 0.08);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.15);
}

.quiz-option input[type="radio"]:checked + div .radio-indicator,
.quiz-option input[type="checkbox"]:checked + div .radio-indicator {
  border-color: #0D9488;
  background-color: #0D9488;
  color: white;
}

/* Modal Transitions */
.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-box {
  transform: scale(0.95) translateY(15px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.modal-backdrop.active .modal-content-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}