/*
 * mega_dropdown_override.css
 * Final cascade override for the mega-dropdown on all pages.
 * Loaded last in every HTML page to guarantee correct rendering.
 */

/* ── Desktop (≥981px) ───────────────────────────────────────── */
@media (min-width: 981px) {

  #megaDropdown {
    display: none;
    position: fixed !important;
    top: 84px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
    border-top: 3px solid #833ab4 !important;
    z-index: 1000 !important;
    max-height: calc(100vh - 100px) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #megaDropdown.open { display: block !important; }

  #megaDropdown .mega-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 420px !important;
    max-height: calc(100vh - 100px) !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  /* Sidebar scrollable */
  #megaDropdown .mega-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(160deg, #833ab4, #e1306c) !important;
    padding: 8px 0 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 100px) !important;
  }
  #megaDropdown .mega-sidebar::-webkit-scrollbar { width: 5px !important; }
  #megaDropdown .mega-sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,.1) !important; }
  #megaDropdown .mega-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4) !important; border-radius: 4px !important; }

  /* Body scrollable */
  #megaDropdown .mega-body {
    flex: 1 1 auto !important;
    display: flex !important;
    min-width: 0 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 100px) !important;
  }

  #megaDropdown .page-content { display: none !important; flex: 1 !important; flex-direction: row !important; }
  #megaDropdown .page-content.active { display: flex !important; flex: 1 !important; }

  #megaDropdown .mega-content {
    flex: 1 !important; padding: 28px 32px !important;
    display: flex !important; gap: 28px !important; background: #ffffff !important;
  }
  #megaDropdown .mega-col { flex: 1 !important; min-width: 0 !important; }

  #megaDropdown .col-heading {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: .1em !important; color: #1565c0 !important;
    text-transform: uppercase !important; padding-bottom: 10px !important;
    border-bottom: 2px solid #e8edf5 !important; margin-bottom: 6px !important;
  }

  #megaDropdown .mega-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
  #megaDropdown .mega-col ul li a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px 0 !important; font-size: 14px !important; color: #333333 !important;
    text-decoration: none !important; font-weight: 500 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important; opacity: 1 !important; visibility: visible !important;
  }
  #megaDropdown .mega-col ul li:last-child a { border-bottom: none !important; }
  #megaDropdown .mega-col ul li a:hover { color: #1565c0 !important; padding-left: 5px !important; }

  .mega-mobile-header, #megaDropdown .mega-mobile-header { display: none !important; }
  .mobile-sub-panel { display: none !important; }
  body.services-open { overflow: auto !important; }
}

/* ── Mobile (≤980px) ────────────────────────────────────────── */
@media (max-width: 980px) {

  /* Full-screen overlay — fills entire viewport */
  #megaDropdown.mobile-open {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1200 !important;
    background: transparent !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Wrapper = full screen gradient */
  #megaDropdown.mobile-open .mega-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: linear-gradient(160deg, #833ab4, #e1306c) !important;
    overflow: hidden !important;
  }

  /* Sticky header bar inside dropdown */
  #megaDropdown.mobile-open .mega-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: rgba(0,0,0,.2) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  /* Sidebar scrollable, fills remaining height */
  #megaDropdown.mobile-open .mega-sidebar {
    width: 100% !important;
    min-width: unset !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    padding: 0 0 60px 0 !important;
    max-height: none !important;
  }

  #megaDropdown.mobile-open .mega-sidebar::-webkit-scrollbar { width: 4px !important; }
  #megaDropdown.mobile-open .mega-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35) !important; border-radius: 4px !important;
  }

  /* Sub-panel accordion */
  #megaDropdown.mobile-open .mobile-sub-panel {
    background: rgba(0,0,0,.15) !important;
  }

  /* Desktop body hidden on mobile */
  #megaDropdown .mega-body { display: none !important; }

  /* Lock body scroll when dropdown open */
  body.services-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}