/* Custom CSS for Vital Senior Center */

/* Custom animations */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes kenBurns {
  0%, 100% { transform: scale(1) translateX(0) translateY(0); }
  50% { transform: scale(1.1) translateX(-5%) translateY(-5%); }
}

/* Animation utility classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

.animate-slide-down {
  animation: slideDown 0.5s ease-out;
}

.animate-ken-burns {
  animation: kenBurns 30s ease-in-out infinite;
}

/* Custom color utilities */
.text-primary-50 { color: #f0f9ff; }
.text-primary-100 { color: #e0f2fe; }
.text-primary-200 { color: #bae6fd; }
.text-primary-300 { color: #7dd3fc; }
.text-primary-400 { color: #38bdf8; }
.text-primary-500 { color: #0ea5e9; }
.text-primary-600 { color: #0284c7; }
.text-primary-700 { color: #0369a1; }
.text-primary-800 { color: #075985; }
.text-primary-900 { color: #0c4a6e; }

.bg-primary-50 { background-color: #f0f9ff; }
.bg-primary-100 { background-color: #e0f2fe; }
.bg-primary-200 { background-color: #bae6fd; }
.bg-primary-300 { background-color: #7dd3fc; }
.bg-primary-400 { background-color: #38bdf8; }
.bg-primary-500 { background-color: #0ea5e9; }
.bg-primary-600 { background-color: #0284c7; }
.bg-primary-700 { background-color: #0369a1; }
.bg-primary-800 { background-color: #075985; }
.bg-primary-900 { background-color: #0c4a6e; }

.text-secondary-50 { color: #f8fafc; }
.text-secondary-100 { color: #f1f5f9; }
.text-secondary-200 { color: #e2e8f0; }
.text-secondary-300 { color: #cbd5e1; }
.text-secondary-400 { color: #94a3b8; }
.text-secondary-500 { color: #64748b; }
.text-secondary-600 { color: #475569; }
.text-secondary-700 { color: #334155; }
.text-secondary-800 { color: #1e293b; }
.text-secondary-900 { color: #0f172a; }

.bg-secondary-50 { background-color: #f8fafc; }
.bg-secondary-100 { background-color: #f1f5f9; }
.bg-secondary-200 { background-color: #e2e8f0; }
.bg-secondary-300 { background-color: #cbd5e1; }
.bg-secondary-400 { background-color: #94a3b8; }
.bg-secondary-500 { background-color: #64748b; }
.bg-secondary-600 { background-color: #475569; }
.bg-secondary-700 { background-color: #334155; }
.bg-secondary-800 { background-color: #1e293b; }
.bg-secondary-900 { background-color: #0f172a; }

.text-accent-50 { color: #fefce8; }
.text-accent-100 { color: #fef9c3; }
.text-accent-200 { color: #fef08a; }
.text-accent-300 { color: #fde047; }
.text-accent-400 { color: #facc15; }
.text-accent-500 { color: #eab308; }
.text-accent-600 { color: #ca8a04; }
.text-accent-700 { color: #a16207; }
.text-accent-800 { color: #854d0e; }
.text-accent-900 { color: #713f12; }

.bg-accent-50 { background-color: #fefce8; }
.bg-accent-100 { background-color: #fef9c3; }
.bg-accent-200 { background-color: #fef08a; }
.bg-accent-300 { background-color: #fde047; }
.bg-accent-400 { background-color: #facc15; }
.bg-accent-500 { background-color: #eab308; }
.bg-accent-600 { background-color: #ca8a04; }
.bg-accent-700 { background-color: #a16207; }
.bg-accent-800 { background-color: #854d0e; }
.bg-accent-900 { background-color: #713f12; }

.text-success { color: #52ad8b; }
.bg-success { background-color: #52ad8b; }

.text-warning { color: #ffb42e; }
.bg-warning { background-color: #ffb42e; }

.text-danger { color: #dc2626; }
.bg-danger { background-color: #dc2626; }

.text-info { color: #1b4068; }
.bg-info { background-color: #1b4068; }

/* Font family */
.font-sans {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* DaisyUI Primary Button Override - Using CSS custom properties for better integration */
:root {
  --p: 49.12% 0.3096 275.75; /* Primary color in OKLCH */
  --pc: 100% 0 0; /* Primary content color (white) */
  --fallback-p: #083d65; /* Fallback primary color */
  --fallback-pc: #ffffff; /* Fallback primary content color */
}

/* Override DaisyUI primary button with custom colors */
.btn-primary {
  background-color: #083d65;
  border-color: #083d65;
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #062a47;
  border-color: #062a47;
  color: #ffffff;
}

.btn-primary:active {
  background-color: #062a47;
  border-color: #062a47;
  color: #ffffff;
}

/* Custom page header styles */
.page-header-modern {
  min-height: 200px !important; /* Reduced from default height */
  padding: 40px 0 !important; /* Reduced padding */
}

.page-header-modern .overlay-color-primary {
  background-color: #083d65 !important;
  opacity: 1 !important;
}

/* Main page header styles (for services, aboutus, contact-us, home) */
.page-header-main {
  padding: 2.5rem 0 !important; /* py-10 equivalent */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.page-header-main .header-overlay {
  background-color: #083d65 !important;
  opacity: 1 !important;
}

/* Centralized page header title styling */
.page-header-title {
  font-size: 2.25rem !important; /* text-4xl */
  font-weight: 700 !important; /* font-bold */
  color: #ffffff !important; /* text-white */
  margin-bottom: 1rem !important; /* mb-4 */
}

@media (min-width: 768px) {
  .page-header-title {
    font-size: 2.25rem !important; /* text-4xl for desktop */
  }
}

/* Mobile menu button styling */
@media (max-width: 767px) {
  .mobile-menu-btn {
    padding: 0.75rem !important; /* Increased padding for larger touch target */
  }
  
  .mobile-menu-btn i {
    font-size: 1.5rem !important; /* Larger icon size for mobile */
  }
}

/* Fix mobile menu button visibility - override DaisyUI btn display */
@media (min-width: 768px) {
  .btn.md\:hidden {
    display: none !important;
  }
}

/* Ensure navigation is properly hidden on mobile and shown on desktop */
@media (max-width: 767px) {
  nav.hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  nav.md\:flex {
    display: flex !important;
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus styles for better accessibility */
*:focus {
  outline: 2px solid #0ea5e9 !important;
  outline-offset: 2px !important;
}


/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 2px solid #ffffff;
  }
  
  .text-gray-600 {
    color: #000000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-ken-burns {
    animation: none !important;
  }
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
  .btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Touch targets for links, but exclude mobile menu */
  a:not(#mobile-menu a) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Ensure mobile menu links are properly stacked */
  #mobile-menu a {
    display: block !important;
    min-height: 44px !important;
  }
}

/* Fix dropdown visibility - ensure dropdown content is hidden by default */
.dropdown-content {
  display: none !important;
}

.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block !important;
}

/* Fix dropdown positioning for footer language selector */
.dropdown.dropdown-top .dropdown-content {
  top: auto !important;
  bottom: 100% !important;
  margin-bottom: 0.5rem !important;
}

/* Navigation link styles */
.nav-link {
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #7dd3fc !important; /* Light blue hover color */
}

.nav-link:focus {
  outline: none !important; /* Remove border box on click/focus */
}

/* Override DaisyUI btn-outline btn-primary text color for Google Maps button */
.btn-outline.btn-primary.text-white {
  color: #ffffff !important;
}