/* portrait-menu-fix.css — force tall, multi-row dropdown in portrait only */
@media (max-width: 820px) and (orientation: portrait){
  /* Generic targets to catch variants */
  #df-mobile,
  nav.df-mobile,
  nav[role="menu"],
  nav[class*="mobile"],
  .mobile-menu,
  .menu-mobile {
    position: fixed !important;
    top: 96px !important;                  /* sits below top bar/header */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 520px !important;          /* ~8 items */
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(6,12,24,.96) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    z-index: 9999 !important;
    white-space: normal !important;
  }
  /* Ensure vertical list, no single-line clipping */
  #df-mobile .df-list,
  nav.df-mobile .df-list,
  nav[role="menu"] ul,
  nav[class*="mobile"] ul,
  .mobile-menu ul,
  .menu-mobile ul {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    margin: 0; padding: 0; list-style: none;
  }
  #df-mobile .df-list li,
  nav.df-mobile .df-list li,
  nav[role="menu"] ul li,
  nav[class*="mobile"] ul li,
  .mobile-menu ul li,
  .menu-mobile ul li {
    margin: 8px 0 !important;
  }
}


/* === PORTRAIT: collapse ghost/empty backdrop box behind mobile menu (global, all pages) === */
@media (max-width: 820px) and (orientation: portrait){
  /* Hide pseudo-element backdrops often used to create a big dark pill */
  #df-mobile::before, #df-mobile::after,
  nav.df-mobile::before, nav.df-mobile::after,
  nav[role="menu"]::before, nav[role="menu"]::after,
  .mobile-menu::before, .mobile-menu::after,
  .menu-mobile::before, .menu-mobile::after,
  .dropdown-content::before, .dropdown-content::after {
    content: none !important;
    display: none !important;
  }

  /* If there is a sibling/duplicate container without real links, collapse it */
  #df-mobile:not(:has(a[href])),
  nav.df-mobile:not(:has(a[href])),
  nav[role="menu"]:not(:has(a[href])),
  nav[class*="mobile"]:not(:has(a[href])),
  .mobile-menu:not(:has(a[href])),
  .menu-mobile:not(:has(a[href])),
  .dropdown-content:not(:has(a[href])),
  .dropdown-panel:not(:has(a[href])),
  .menu-overlay:not(:has(a[href])),
  .dropdown-backdrop:not(:has(a[href])),
  .mobile-menu-backdrop:not(:has(a[href])) {
    display: block !important;   /* keep DOM in place to avoid toggle conflicts */
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    inset: auto !important;
  }

  /* Ensure the real menu stays visible and sized naturally */
  #df-mobile:has(.df-list a[href]),
  nav.df-mobile:has(.df-list a[href]),
  nav[role="menu"]:has(.df-list a[href]),
  nav[class*="mobile"]:has(.df-list a[href]),
  .mobile-menu:has(.df-list a[href]),
  .menu-mobile:has(.df-list a[href]) {
    opacity: 1 !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
  }
}