/* 
 * Dropdown Behavior CSS for Della Junior
 * Controls the visibility and interaction of the Programs dropdown menu
 * Includes header text color styling
 */

/* Header navigation text colors */
.tp-main-menu-content ul li a {
  color: #1a3a6b; /* Dark blue color for header text */
  transition: color 0.3s ease;
}

.tp-main-menu-content ul li a:hover,
.tp-main-menu-content ul li a:focus,
.tp-main-menu-content ul li.active > a {
  color: #4da9ff; /* Sky blue color for hover/active states */
}

/* Base dropdown styling */
.tp-main-menu-content ul li.has-dropdown {
  position: relative;
}

.tp-main-menu-content ul li.has-dropdown .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  z-index: 999;
  box-shadow: 0 13px 20px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  border-top: 3px solid #FFD97E;
  
  /* Hide dropdown by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

/* Show dropdown only on hover or focus */
.tp-main-menu-content ul li.has-dropdown:hover > .submenu,
.tp-main-menu-content ul li.has-dropdown:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Add a slight delay to prevent accidental triggering */
.tp-main-menu-content ul li.has-dropdown {
  transition: all 0.2s ease;
}

/* Style for dropdown items */
.tp-main-menu-content ul li.has-dropdown .submenu li {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f5f5f5;
}

.tp-main-menu-content ul li.has-dropdown .submenu li:last-child {
  border-bottom: none;
}

.tp-main-menu-content ul li.has-dropdown .submenu li a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: #1a3a6b; /* Dark blue to match header */
  transition: all 0.3s ease;
}

.tp-main-menu-content ul li.has-dropdown .submenu li a:hover {
  background-color: #f9f9f9;
  color: #4da9ff; /* Sky blue to match header hover state */
  padding-left: 25px;
}

/* Ensure the dropdown appears below the header */
.header-area.tp-header-3 {
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 99;
}

/* Ensure the sticky header maintains the same behavior */
.header-area.tp-header-3.sticky-header-active {
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}