/* World-Class Healthcare CSS with Custom Logo Colors Palette (80% Light / 20% Accent):
   1. #ffffff & #f8faf8 (Clean Light Canvas)
   2. #1c3619 (Deep Forest Green Accent)
   3. #8c946e (Sage / Olive Accent Green)
   4. #d5a647 (Warm Gold Accent)
   5. #466378 (Steel Blue Accent)
*/

@import "tailwindcss";

/* ==========================================================================
   STICKY HEADER & NAVIGATION CSS VARIABLES SYSTEM
   ========================================================================== */

:root {
  --header-bg: transparent;
  --header-backdrop: none;
  --header-border: transparent;
  --header-shadow: none;
  
  --nav-text: #1c3619;
  --nav-hover: #d5a647;
  --nav-active-bg: rgba(213, 166, 71, 0.18);
  --nav-active-text: #1c3619;
  --nav-active-border: rgba(213, 166, 71, 0.5);
  
  --logo-title: #1c3619;
  --logo-subtitle: #466378;
  --logo-box-bg: #ffffff;
  --logo-box-border: rgba(213, 166, 71, 0.6);
  --logo-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  --dropdown-bg: rgba(255, 255, 255, 0.98);
  --dropdown-text: #1c3619;
  --dropdown-subtext: #466378;
  --dropdown-border: rgba(28, 54, 25, 0.15);
  --dropdown-hover-bg: #f8faf8;
  --dropdown-hover-text: #d5a647;
  --dropdown-shadow: 0 20px 45px -10px rgba(28, 54, 25, 0.18);

  --cta-bg: #d5a647;
  --cta-hover-bg: #c29334;
  --cta-text: #1c3619;
  --cta-shadow: 0 4px 14px rgba(213, 166, 71, 0.35);

  --hamburger-icon: #1c3619;
  --hamburger-bg: rgba(28, 54, 25, 0.05);
  --hamburger-border: rgba(28, 54, 25, 0.15);
}

/* Header Element Layout Driven by CSS Variables */
#site-header, #main-header {
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--header-bg);
  backdrop-filter: var(--header-backdrop);
  -webkit-backdrop-filter: var(--header-backdrop);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}

/* 1. Header Transparent State (When at top of page) */
#site-header.header-transparent, #main-header.header-transparent {
  --header-bg: transparent;
  --header-backdrop: none;
  --header-border: transparent;
  --header-shadow: none;
  --nav-text: #1c3619;
  --nav-hover: #d5a647;
  --logo-title: #1c3619;
  --logo-subtitle: #466378;
  --logo-box-bg: #ffffff;
  --logo-box-border: rgba(213, 166, 71, 0.6);
  --hamburger-icon: #1c3619;
  --hamburger-bg: rgba(28, 54, 25, 0.05);
}

/* 2. Header Scrolled State (When user scrolls > 80px) */
#site-header.header-scrolled, #main-header.header-scrolled {
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-backdrop: blur(18px);
  --header-border: rgba(28, 54, 25, 0.12);
  --header-shadow: 0 4px 20px -2px rgba(28, 54, 25, 0.08);

  --nav-text: #1f2937;
  --nav-hover: #1c3619;
  --nav-active-bg: rgba(213, 166, 71, 0.22);
  --nav-active-text: #1c3619;

  --logo-title: #1c3619;
  --logo-subtitle: #466378;
  --logo-box-bg: #ffffff;
  --logo-box-border: rgba(213, 166, 71, 0.8);
  
  --dropdown-bg: rgba(255, 255, 255, 0.98);
  --dropdown-text: #1f2937;
  --dropdown-border: rgba(28, 54, 25, 0.15);

  --hamburger-icon: #1f2937;
  --hamburger-bg: rgba(28, 54, 25, 0.08);
  --hamburger-border: rgba(28, 54, 25, 0.2);
}

/* Reusable Navigation Utility Classes */
.site-nav-link {
  color: var(--nav-text) !important;
  transition: all 200ms ease;
}
.site-nav-link:hover {
  color: var(--nav-hover) !important;
  background-color: rgba(28, 54, 25, 0.05);
}
.site-nav-link.active-link {
  color: var(--nav-active-text) !important;
  background-color: var(--nav-active-bg) !important;
  border: 1px solid var(--nav-active-border) !important;
}

.site-logo-title {
  color: var(--logo-title) !important;
  transition: color 200ms ease;
}
.site-logo-subtitle {
  color: var(--logo-subtitle) !important;
  transition: color 200ms ease;
}
.site-logo-box {
  background-color: var(--logo-box-bg) !important;
  border-color: var(--logo-box-border) !important;
  box-shadow: var(--logo-box-shadow) !important;
  transition: all 200ms ease;
}

.site-dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border: 1px solid var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
  border-radius: 1rem !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-dropdown-item {
  color: var(--dropdown-text) !important;
  transition: all 150ms ease;
}
.site-dropdown-item:hover {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-hover-text) !important;
}

.site-cta-btn {
  background-color: var(--cta-bg) !important;
  color: var(--cta-text) !important;
  box-shadow: var(--cta-shadow) !important;
  transition: all 200ms ease;
}
.site-cta-btn:hover {
  background-color: var(--cta-hover-bg) !important;
}

.site-hamburger-btn {
  color: var(--hamburger-icon) !important;
  background-color: var(--hamburger-bg) !important;
  border: 1px solid var(--hamburger-border) !important;
  transition: all 200ms ease;
}

@layer utilities {
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(28, 54, 25, 0.1);
    box-shadow: 0 10px 30px -10px rgba(28, 54, 25, 0.08);
  }

  .glass-dark {
    background: #1c3619;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(213, 166, 71, 0.3);
    box-shadow: 0 20px 40px -10px rgba(28, 54, 25, 0.2);
  }

  .glass-card-glow {
    position: relative;
    background: #ffffff;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(213, 166, 71, 0.5);
    box-shadow: 0 12px 32px -8px rgba(213, 166, 71, 0.18);
  }

  .glass-card-glow:hover {
    border-color: rgba(213, 166, 71, 0.9);
    box-shadow: 0 20px 40px -10px rgba(213, 166, 71, 0.3);
  }

  .gradient-text-teal {
    background: linear-gradient(135deg, #1c3619 0%, #466378 50%, #d5a647 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-text-gold {
    background: linear-gradient(135deg, #d5a647 0%, #8c946e 50%, #1c3619 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-border-wrap {
    position: relative;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(213, 166, 71, 0.4), rgba(28, 54, 25, 0.2), rgba(70, 99, 120, 0.3));
    padding: 1px;
  }

  .gradient-border-inner {
    border-radius: 23px;
    background: #ffffff;
  }

  .mesh-bg-dark {
    background-color: #f8faf8;
    background-image: 
      radial-gradient(at 0% 0%, rgba(213, 166, 71, 0.08) 0px, transparent 50%),
      radial-gradient(at 100% 0%, rgba(70, 99, 120, 0.08) 0px, transparent 50%),
      radial-gradient(at 50% 100%, rgba(140, 148, 110, 0.08) 0px, transparent 50%);
  }

  .mesh-bg-light {
    background-color: #ffffff;
    background-image: 
      radial-gradient(at 10% 10%, rgba(140, 148, 110, 0.08) 0px, transparent 40%),
      radial-gradient(at 90% 20%, rgba(70, 99, 120, 0.06) 0px, transparent 40%),
      radial-gradient(at 50% 80%, rgba(213, 166, 71, 0.08) 0px, transparent 40%);
  }
}

/* Float & Glow Keyframes */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0.5deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-0.5deg); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

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

.animate-float-delayed {
  animation: floatReverse 7s ease-in-out 1s infinite;
}

.animate-glow-pulse {
  animation: glowPulse 5s ease-in-out infinite;
}

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.reveal-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Premium Hover Lift */
.hover-lift {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.01);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #132611;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d5a647, #c4c595);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d5a647;
}