/* ============================================================
   ✅ HEADER STYLING - Based on Original with Instructors Menu Added
============================================================ */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #E2E2E2; /* Clean white background */
  border-bottom: 3px solid #b8860b; /* Gold accent */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 15px 20px;
  position: relative;
  font-family: 'Montserrat', sans-serif; /* ✅ Modern & clean font */
  z-index: 1000; /* Ensure header is always on top */
}

/* ✅ Logo Styling */
.logo img {
  height: 60px;
  width: auto;
}

/* ============================================================
 ✅ NAVIGATION (DESKTOP)
============================================================ */
.navbar {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  transition: transform 0.3s ease-in-out;
}

/* ✅ Navbar Links */
.navbar a {
  color: #0C2340; /* Dark text for readability */
  text-decoration: none;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 500; /* Medium weight */
  text-transform: uppercase; /* Premium feel */
  transition: color 0.3s ease-in-out;
}

.navbar a:hover {
  color: #b8860b; /* Gold hover effect */
}

/* ✅ "All Programs" and "Instructors" Dropdown */
.program-menu-trigger,
.instructors-menu-trigger {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 500;
  gap: 5px;
  transition: all 0.3s ease;
  color: #0C2340;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
}

.program-menu-trigger a,
.instructors-menu-trigger a {
  color: inherit;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.program-menu-trigger i,
.instructors-menu-trigger i {
  font-size: 12px;
  transition: transform 0.3s ease;
  color: #b8860b;
}

.program-menu-trigger:hover,
.instructors-menu-trigger:hover {
  background-color: rgba(184, 134, 11, 0.1);
  color: #b8860b;
  border-radius: 8px;
  transform: none; /* Remove the scale effect */
}

.program-menu-trigger:hover i,
.instructors-menu-trigger:hover i {
  transform: rotate(180deg);
}

/* ✅ Enhanced Dropdown Styling */
.program-menu,
.instructors-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: #ffffff;
  padding: 15px 0;
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border: 2px solid #b8860b;
  z-index: 1000;
  font-family: 'Montserrat', sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.program-menu-trigger:hover .program-menu,
.program-menu:hover,
.instructors-menu-trigger:hover .instructors-menu,
.instructors-menu:hover {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.program-menu a,
.instructors-menu a {
  color: #0C2340 !important;
  padding: 12px 20px !important;
  text-decoration: none;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: block !important;
  transition: all 0.3s ease;
  text-transform: none !important;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.program-menu a:last-child,
.instructors-menu a:last-child {
  border-bottom: none;
}

.program-menu a:hover,
.instructors-menu a:hover {
  background: linear-gradient(135deg, #b8860b, #ffd700) !important;
  color: #ffffff !important;
  transform: translateX(5px);
  border-radius: 0 25px 25px 0;
}

.program-menu a:before,
.instructors-menu a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #b8860b;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.program-menu a:hover:before,
.instructors-menu a:hover:before {
  transform: scaleY(1);
}

/* ✅ Search Bar */
.search-bar {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.search-bar input {
  padding: 8px;
  font-size: 14px;
  border: 2px solid #b8860b;
  border-radius: 5px;
  width: 200px;
  transition: border-color 0.3s ease-in-out;
}

.search-bar input:focus {
  border-color: #ffd700;
  outline: none;
}

/* ✅ Profile Dropdown - UPDATED with smaller icon size */
.profile-dropdown {
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
}

.profile-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  font-size: 14px; /* ✅ SMALLER: 16px → 14px */
  padding: 6px; /* ✅ SMALLER: 8px → 6px */
  display: flex;
  align-items: center;
  gap: 4px; /* ✅ SMALLER: 6px → 4px */
  transition: color 0.3s ease-in-out;
}

/* Profile picture styling - KEPT original size */
.profile-picture {
  width: 32px; /* ✅ KEPT original 32px size */
  height: 32px; /* ✅ KEPT original 32px size */
  border-radius: 80%;
  object-fit: cover;
  border: 2px solid #b8860b;
}

/* Fallback icon styling (when no profile picture) - REDUCED to fit within profile picture container */
.profile-icon i {
  font-size: 28px; /* ✅ REDUCED from 32px to 28px to fit better within the 32px container */
  color: #b80b0b;
}

/* ✅ Dropdown Content - FIXED to match original pattern */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  min-width: 200px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-content a {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  padding: 12px 15px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background 0.3s ease;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* FIXED: Use exact same pattern as your original program-menu */
.profile-dropdown:hover .dropdown-content,
.dropdown-content:hover {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ✅ Login/Register Container - FIXED alignment */
.login-register {
  display: flex;
  align-items: center;
  margin-left: 10px; /* Align with search bar */
  margin-right: 0; /* Closer to page margin */
}

/* ✅ Login/Register Button Styling */
.login-register button {
  background: linear-gradient(135deg, #b8860b, #ffd700);
  color: #ffffff;
  border: none;
  padding: 8px 15px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
}

.login-register button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.5);
}

/* ============================================================
 ✅ MOBILE RESPONSIVE STYLING (Max-width 1024px)
============================================================ */
/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Helper class to show desktop-only elements on larger screens */
.desktop-only {
  display: block;
}

/* Helper class to hide mobile-only elements on larger screens */
.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  /* Hide desktop-only elements */
  .desktop-only {
      display: none;
  }

  /* Show mobile-only elements */
  .mobile-only {
      display: block;
  }

  /* ==================================
     Hamburger Menu Toggle
  ================================== */
  .mobile-menu-toggle {
      display: block;
      cursor: pointer;
      font-size: 24px;
      color: #0C2340;
      z-index: 1001; /* Ensure it's above the overlay */
  }

  /* ==================================
     Header Layout
  ================================== */
  header {
      padding: 10px 20px;
  }

  .header-right-section {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  /* ==================================
     Main Navigation (Mobile)
  ================================== */
  .navbar {
      position: fixed;
      top: 0;
      right: -100%;
      width: 80%;
      max-width: 350px;
      height: 100vh;
      background-color: #E2E2E2;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 80px 20px 20px;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
      z-index: 999;
      transition: right 0.4s ease-in-out;
      overflow-y: auto; /* Enable scrolling for long menus */
  }

  .navbar.active {
      right: 0;
  }

  .navbar a {
      width: 100%;
      padding: 15px 10px;
      font-size: 18px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .navbar a:hover {
      background-color: rgba(184, 134, 11, 0.1);
  }

  /* ==================================
     Mobile-specific Dropdown Styling
  ================================== */
  .program-menu-trigger,
  .instructors-menu-trigger {
      width: 100%;
      display: flex; /* Changed from block to flex for alignment */
      align-items: center;
      justify-content: space-between;
      padding: 15px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 0;
      gap: 10px;
  }

  .program-menu-trigger.active,
  .instructors-menu-trigger.active {
      background-color: rgba(184, 134, 11, 0.1);
      color: #b8860b;
  }
  
  .program-menu-trigger a,
  .instructors-menu-trigger a {
      display: inline;
      padding: 0;
      border: none;
  }

  .program-menu-trigger:hover,
  .instructors-menu-trigger:hover {
      background-color: transparent;
  }

  .program-menu-trigger.active .program-menu,
  .instructors-menu-trigger.active .instructors-menu {
      display: block;
      position: static;
      width: 100%;
      min-width: auto;
      border: none;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .program-menu a,
  .instructors-menu a {
      padding-left: 30px !important; /* Indent sub-menu items */
      border: none !important;
      font-size: 16px !important;
  }
  
  .program-menu a:hover,
  .instructors-menu a:hover {
      background: none !important;
      color: #b8860b !important;
      transform: none;
  }

  /* ==================================
     Other Mobile Elements
  ================================== */
  .search-bar.mobile-only {
      width: 100%;
      margin: 10px 0;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .search-bar.mobile-only input {
      width: 100%;
  }

  .login-register.mobile-only {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 10px 0;
  }

  .login-register.mobile-only button {
      width: 100%;
      padding: 12px 15px;
  }
}