/* ========================================================
   GENERAL NAVIGATION STYLES
======================================================== */
.nav-link {
  position: relative;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

/* Hide default Bootstrap caret */
.dropdown-toggle::after {
  display: none !important;
}

/* Underline Hover Animation */
.nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 3px;
  border-radius: 50px;
  transform: translateX(-50%);
  transition: width 0.35s ease, background-color 0.3s ease;
}

.nav-link.active::before,
.nav-link:hover::before {
  width: 100%;
}

/* Desktop Hover Mega Menu */
@media (min-width: 992px) {
  #stickyHeader .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

.navbar-nav .dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}

/* ========================================================
   STICKY HEADER CORE STYLES
======================================================== */
#stickyHeader {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  transition: transform 0.35s ease-in-out, top 0.25s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ----------------------------------------------------
   1. TRANSPARENT MODE
---------------------------------------------------- */
#stickyHeader.transparent-header {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#stickyHeader.transparent-header .navbar {
  background-color: transparent !important;
}

/* A. TRANSPARENT MODE - LIGHT BACKGROUND (Dark Text) */
#stickyHeader.transparent-header.theme-light {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

#stickyHeader.transparent-header.theme-light .nav-link,
#stickyHeader.transparent-header.theme-light .navbar-brand small,
#stickyHeader.transparent-header.theme-light box-icon,
#stickyHeader.transparent-header.theme-light .navbar-toggler {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

#stickyHeader.transparent-header.theme-light .nav-link::before {
  background: #1a1a1a !important;
}

/* B. TRANSPARENT MODE - DARK BACKGROUND (White Text) */
#stickyHeader.transparent-header.theme-dark {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#stickyHeader.transparent-header.theme-dark .nav-link,
#stickyHeader.transparent-header.theme-dark .navbar-brand small,
#stickyHeader.transparent-header.theme-dark box-icon,
#stickyHeader.transparent-header.theme-dark .navbar-toggler {
  color: #ffffff !important;
  fill: #ffffff !important;
}

#stickyHeader.transparent-header.theme-dark .nav-link::before {
  background: #ffffff !important;
}

/* ----------------------------------------------------
   2. SCROLLED MODE (Solid White Header)
---------------------------------------------------- */
#stickyHeader.scrolled {
  top: 0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid #eeeeee !important;
}

#stickyHeader.scrolled .navbar {
  background-color: #ffffff !important;
}

#stickyHeader.scrolled .nav-link,
#stickyHeader.scrolled .navbar-brand small,
#stickyHeader.scrolled box-icon,
#stickyHeader.scrolled .navbar-toggler {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

#stickyHeader.scrolled .nav-link:hover {
  color: #000000 !important;
}

#stickyHeader.scrolled .nav-link::before {
  background: #1a1a1a !important;
}

/* ----------------------------------------------------
   3. HIDE ON SCROLL DOWN
---------------------------------------------------- */
#stickyHeader.header-hidden {
  transform: translateY(-130%) !important;
}

/* ----------------------------------------------------
   4. MOBILE FIXES
---------------------------------------------------- */
@media (max-width: 991.98px) {
  #stickyHeader.transparent-header .navbar-collapse {
    background-color: #1a1e24;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  /* Mobile collapsed menu text should stay white */
  #stickyHeader.transparent-header .navbar-collapse .nav-link {
    color: #ffffff !important;
  }

  #stickyHeader.transparent-header .navbar-collapse .nav-link::before {
    background: #ffffff !important;
  }
}