/* ═══════════════════════════════════════════════════════════ NAVIGATION STYLES */

/* Nav scroll effect */
.nav-scrolled {
  background: rgb(255,255,255) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 20px rgba(45,62,120,0.1);
}

/* Nav links states based on scrolled/transparent */
.nav-link {
  transition: all 0.22s ease-in-out;
}
/* Homepage default state (transparent navbar) */
#navbar:not(.nav-scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.85);
}
#navbar:not(.nav-scrolled) .nav-link:hover,
#navbar:not(.nav-scrolled) .nav-link:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
/* Scrolled state or inner pages */
#navbar.nav-scrolled .nav-link {
  color: #2d3e78 !important; /* primary theme color */
}
#navbar.nav-scrolled .nav-link:hover,
#navbar.nav-scrolled .nav-link:focus {
  background: rgba(45, 62, 120, 0.08) !important; /* primary/8% tint */
  color: #609acd !important; /* secondary theme color */
}
/* Active page styling rules */
#navbar.nav-scrolled .active-nav-link {
  background: rgba(45, 62, 120, 0.06) !important;
  color: #2d3e78 !important;
  font-weight: 600;
}
#navbar:not(.nav-scrolled) .active-nav-link {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Mega menu panel styling */
.mega-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  pointer-events: none;
}
.mega-group:hover .mega-panel,
.mega-group:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Standardize height for 2-column mega menus */
.mega-menu-grid-2col {
  min-height: 290px;
}

/* Mega menu link cards hover */
.mega-link-card {
  transition: all 0.2s ease-in-out;
}
.mega-link-card:hover {
  background: rgba(45, 62, 120, 0.04) !important; /* primary/4% tint */
  border-color: rgba(45, 62, 120, 0.12) !important; /* primary border */
  transform: translateY(-1px);
}

.mega-chevron {
  transition: transform 0.2s ease;
}
.mega-group:hover .mega-chevron,
.mega-group:focus-within .mega-chevron {
  transform: rotate(180deg);
}

/* Mobile nav menu animation */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 80vh;
  opacity: 1;
  overflow-y: auto;
  display: block !important; /* Force display when open class is toggled */
}
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-submenu.open {
  max-height: 520px;
  display: block !important;
}
.mobile-accordion-icon {
  transition: transform 0.25s ease;
}
.mobile-accordion-icon.open {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════ LIVE INDICATOR ANIMATION */
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@-webkit-keyframes ping {
  0% {
    -webkit-transform: scale(1);
    opacity: 0.85;
  }
  75%, 100% {
    -webkit-transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes live-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 181, 71, 0.6);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 10px 3px rgba(255, 181, 71, 0.45);
  }
}

@-webkit-keyframes live-glow {
  0%, 100% {
    -webkit-transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 181, 71, 0.6);
  }
  50% {
    -webkit-transform: scale(1.06);
    box-shadow: 0 0 10px 3px rgba(255, 181, 71, 0.45);
  }
}

.animate-ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
  -webkit-animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
  will-change: transform, opacity;
}

.live-dot-glow {
  animation: live-glow 2s ease-in-out infinite !important;
  -webkit-animation: live-glow 2s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}