/* ============================================================
   COURSE PAGE — RESPONSIVE NAV FIX
   Add this to course-page.css — fixes mobile dropdown toggle
   ============================================================ */

/* Desktop: Courses dropdown on hover works via style.css already */
/* Mobile fix: dropdown toggle via JS class .mobile-open */

/* Make dropdown scrollable on mobile if items are many */
@media (max-width: 768px) {
  .main-nav.open {
    overflow-y: auto;
    max-height: calc(100vh - 72px);
  }

  /* Mobile dropdown items styling */
  .dropdown-menu {
    border-radius: 0 !important;
    padding: 0 0 0 12px !important;
  }
  .dropdown-menu li a {
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid #eef2ff;
  }

  /* Courses nav item — show chevron indicator */
  .main-nav > ul > li.has-dropdown > a::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.3s ease;
    color: #5a6a8a;
  }
  .main-nav > ul > li.has-dropdown.mobile-expanded > a::after {
    transform: rotate(180deg);
    color: #2a569f;
  }
}