/* ==========================================================
   WEB MENU ENHANCED — ECOLEMEDIA CORPORATE 2025
   Orange #ff9800 · Dark #1c1c28 · White #fff
   ========================================================== */

/* ── NAV BAR ────────────────────────────────────────────────── */

.main-menu {
  box-shadow: 0 3px 0 rgba(0,0,0,0.18) !important;
}

/* ── NAV LINKS ─────────────────────────────────────────────── */

#fixed-navbar-toggle .nav > li > a {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  transition: background 0.22s ease, color 0.22s ease !important;
}

/* white underline strip expanding from center on hover / active */
#fixed-navbar-toggle .nav > li > a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background: rgba(255,255,255,0.80);
  transition: left 0.28s cubic-bezier(0.4,0,0.2,1),
              right 0.28s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

#fixed-navbar-toggle .nav > li > a:hover::before,
#fixed-navbar-toggle .nav > li > a.active::before,
#fixed-navbar-toggle .nav > li.open > a::before {
  left: 0;
  right: 0;
}

/* ── DROPDOWN CHEVRON SPIN ─────────────────────────────────── */

#fixed-navbar-toggle .dropdown-toggle:after {
  display: inline-block !important;
  transition: transform 0.25s ease !important;
}

#fixed-navbar-toggle .dropdown:hover .dropdown-toggle:after,
#fixed-navbar-toggle .open .dropdown-toggle:after {
  transform: rotate(180deg);
}

/* ── DROPDOWN SHOW/HIDE ANIMATION ──────────────────────────── */

/* Replace Bootstrap display:none with GPU opacity+transform */
#fixed-navbar-toggle .dropdown-menu {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.22s ease,
              transform 0.22s ease,
              visibility 0s linear 0.22s;
}

#fixed-navbar-toggle .dropdown:hover .dropdown-menu,
#fixed-navbar-toggle .open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ── DROPDOWN MENU DESIGN ──────────────────────────────────── */

#fixed-navbar-toggle .dropdown-menu {
  background: #1e2133 !important;
  border: none !important;
  border-top: 3px solid #ff9800 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42) !important;
  min-width: 215px !important;
  padding: 4px 0 8px !important;
  margin-top: 0 !important;
}

/* orange glow strip under the top border */
#fixed-navbar-toggle .dropdown-menu::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,152,0,0.28), transparent);
  margin-bottom: 4px;
}

/* item separator */
#fixed-navbar-toggle .dropdown-menu > li {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
#fixed-navbar-toggle .dropdown-menu > li:last-child {
  border-bottom: none !important;
}

/* item links */
#fixed-navbar-toggle .dropdown-menu > li > a {
  color: rgba(255,255,255,0.68) !important;
  background: transparent !important;
  padding: 11px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  border-left: 3px solid transparent !important;
  transition: color 0.18s, background 0.18s, border-color 0.18s, padding-left 0.18s !important;
  line-height: 1.4 !important;
}

#fixed-navbar-toggle .dropdown-menu > li > a:hover,
#fixed-navbar-toggle .dropdown-menu > li > a:focus {
  color: #fff !important;
  background: rgba(255,152,0,0.11) !important;
  border-left-color: #ff9800 !important;
  padding-left: 26px !important;
}

/* ── MEGA DROPDOWN ─────────────────────────────────────────── */

#fixed-navbar-toggle .mega-dropdown-menu {
  background: #1e2133 !important;
  border: none !important;
  border-top: 3px solid #ff9800 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42) !important;
  padding: 20px 24px !important;
}

#fixed-navbar-toggle .mega-dropdown-menu .title {
  color: #ff9800 !important;
  border-bottom: 1px solid rgba(255,152,0,0.22) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  display: block !important;
}

/* ── SECOND BAR (date / time strip) ────────────────────────── */

#nav-below-main {
  background: rgba(255,255,255,0.96) !important;
}