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

/* ── HIDE / SHOW ─────────────────────────────────────────── */

/* desktop: hide everything mobile */
#mobile-nav,
#mobile-nav .mobile-topbar,
#mobile-nav .sidenav {
  display: none !important;
}

@media (max-width: 1100px) {
  #mobile-nav {
    display: block !important;
    position: relative;
    z-index: 500;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* restore children hidden by the global rule above */
  #mobile-nav .mobile-topbar {
    display: flex !important;
  }

  #mobile-nav .sidenav {
    display: flex !important;
  }

  /* let header size to content instead of fixed 110px */
  #header {
    height: auto !important;
  }
}

/* ── TOP BAR ─────────────────────────────────────────────── */

/* override responsive.css: .navbar-header { float:none; padding: 0 12px 4px } */
.navbar-header.mobile-topbar {
  padding: 0 !important;
}

.mobile-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 16px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  border-bottom: 3px solid #ff9800;
  float: none !important;
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: inherit !important;
}

.mobile-brand img {
  height: 34px;
  width: auto;
  display: block;
}

.mobile-brand-text {
  line-height: 1.2;
}

.mobile-brand-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #1c1c28;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mobile-brand-text small {
  font-size: 8.5px;
  font-weight: 500;
  color: #ff9800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── HAMBURGER BUTTON ────────────────────────────────────── */

.mobile-hamburger {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: transparent !important;
  border: 2px solid rgba(26,26,36,0.14) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.mobile-hamburger:hover,
.mobile-hamburger:focus {
  border-color: #ff9800 !important;
  background: rgba(255,152,0,0.06) !important;
  outline: none;
}

.mobile-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #1c1c28;
  border-radius: 2px;
  transition: background 0.2s;
}

.mobile-hamburger:hover span {
  background: #ff9800;
}

/* ── SIDENAV PANEL ───────────────────────────────────────── */

.sidenav {
  /* override: use transform instead of left for GPU compositing */
  left: 0 !important;
  transform: translateX(-100%);
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 300px !important;
  max-width: 88vw !important;
  background: #1c1c28 !important;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}

.sidenav.show {
  transform: translateX(0) !important;
}

/* orange accent strip at top */
.sidenav::before {
  content: '';
  display: block;
  height: 4px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #ff9800, #ffb74d 50%, #ff9800);
}

/* ── PANEL HEADER ────────────────────────────────────────── */

.sidenav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ff9800 0%, #fb8c00 100%);
  flex-shrink: 0;
  gap: 10px;
}

.sidenav-panel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  flex: 1;
  min-width: 0;
}

.sidenav-panel-brand img {
  height: 42px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.sidenav-panel-brand-text strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidenav-panel-brand-text small {
  display: block;
  color: rgba(255,255,255,0.72);
  font-size: 8.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* close button ✕ */
.sidenav-close {
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 50% !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.25s;
}

.sidenav-close:hover {
  background: rgba(255,255,255,0.35) !important;
  transform: rotate(90deg);
}

.sidenav-close i {
  font-size: 15px;
  line-height: 1;
  display: block;
}

/* hide old sidenav-brand & old navbar-toggle inside panel */
.sidenav .sidenav-brand,
.sidenav .navbar-toggle:not(.sidenav-close) {
  display: none !important;
}

/* ── MENU LIST ───────────────────────────────────────────── */

.sidenav-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* custom scrollbar */
.sidenav-menu::-webkit-scrollbar { width: 3px; }
.sidenav-menu::-webkit-scrollbar-track { background: transparent; }
.sidenav-menu::-webkit-scrollbar-thumb { background: rgba(255,152,0,0.35); border-radius: 2px; }

.sidenav-menu > li {
  display: block !important;
  position: relative !important;
  text-transform: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.sidenav-menu > li:last-child {
  border-bottom: none !important;
}

/* main links */
.sidenav-menu > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  color: rgba(255,255,255,0.80) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border-left: 3px solid transparent !important;
  transition: background 0.18s, color 0.18s, border-color 0.18s !important;
  overflow: visible !important;
  gap: 0;
}

.sidenav-menu > li > a .smenu-label {
  flex: 1;
}

.sidenav-menu > li > a:hover {
  background: rgba(255,152,0,0.10) !important;
  color: #fff !important;
  border-left-color: #ff9800 !important;
}

.sidenav-menu > li > a.active,
.sidenav-menu > li.current > a {
  background: rgba(255,152,0,0.13) !important;
  color: #ff9800 !important;
  border-left-color: #ff9800 !important;
}

/* ── CHEVRON ICONS ───────────────────────────────────────── */

.sidenav-menu > li > a .sidenav-dropdown-icon {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
  width: auto !important;
  text-align: center !important;
  display: none !important;
  margin-left: 6px;
  flex-shrink: 0;
  align-items: center;
  border-left: none !important;
}

.sidenav-menu > li > a .sidenav-dropdown-icon.show {
  display: flex !important;
}

.sidenav-menu > li > a .sidenav-dropdown-icon i {
  font-size: 13px;
  color: rgba(255,255,255,0.30);
  line-height: 1;
  display: block;
  transition: color 0.2s;
}

.sidenav-menu > li > a:hover .sidenav-dropdown-icon i,
.sidenav-menu > li > a.active .sidenav-dropdown-icon i {
  color: #ff9800;
}

/* pseudo-element overrides from style.css */
.sidenav-menu > li > a .sidenav-dropdown-icon::after,
.sidenav-menu > li > a .sidenav-dropdown-icon.show::after,
.sidenav-menu > li > a .sidenav-dropdown-icon.up-icon::after {
  content: none !important;
  display: none !important;
}

/* ── DROPDOWN SUB-MENU ───────────────────────────────────── */

.sidenav-dropdown {
  display: none;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  background: rgba(0,0,0,0.22) !important;
  border-left: 3px solid #ff9800 !important;
}

.sidenav-dropdown > li {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.sidenav-dropdown > li:last-child {
  border-bottom: none !important;
}

.sidenav-dropdown > li > a,
.sidenav-dropdown a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 18px 11px 24px !important;
  color: rgba(255,255,255,0.52) !important;
  background: transparent !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
  line-height: 1.3 !important;
  gap: 10px;
}

.sidenav-dropdown > li > a i.sub-dot,
.sidenav-dropdown a i.sub-dot {
  font-size: 5px;
  color: #ff9800;
  flex-shrink: 0;
}

.sidenav-dropdown > li > a:hover,
.sidenav-dropdown a:hover {
  color: #fff !important;
  background: rgba(255,152,0,0.09) !important;
}

/* ── FOOTER BAR ──────────────────────────────────────────── */

.sidenav-panel-footer {
  flex-shrink: 0;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidenav-social-links {
  display: flex;
  gap: 8px;
}

.sidenav-social-links a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
}

.sidenav-social-links a:hover {
  background: #ff9800;
  color: #fff !important;
  border-color: #ff9800;
}

.sidenav-copy {
  font-size: 10px;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.3px;
  margin-left: auto;
}

/* ── OVERLAY ─────────────────────────────────────────────── */

.sidenav-overlay {
  background: rgba(0,0,0,0.60) !important;
}

/* ── DESKTOP SAFETY NET ──────────────────────────────────── */
/* position:fixed children can escape display:none on some browsers */
@media (min-width: 1101px) {
  #mobile-nav,
  .mobile-topbar,
  #mobile-nav .sidenav {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 380px) {
  .mobile-brand-text strong { font-size: 11.5px; letter-spacing: 1px; }
  .mobile-brand-text small { display: none; }
  .sidenav { width: 92vw !important; }
}

@media (max-width: 280px) {
  .mobile-brand-text { display: none; }
}