/*
Theme Name: Astra Child EH Dropdown Fix
Theme URI: https://emergencyhousing.ca/
Description: Desktop + mobile menu fix. Tech panel GUI. Submenus open correctly on phone and desktop.
Author: EH Site Patch
Template: astra
Version: 1.2.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: astra-child-eh
*/

/* ============================================================
   DESKTOP (min-width: 922px)
   ============================================================ */
@media (min-width: 922px) {

  #masthead,
  .ast-main-header-wrap,
  #ast-desktop-header,
  .main-header-bar,
  .ast-primary-header-bar {
    position: relative;
    z-index: 99990;
  }

  #ast-desktop-header .main-header-menu .menu-item-has-children {
    position: relative !important;
  }

  #ast-desktop-header .main-header-menu > .menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 16px;
    z-index: 99991;
  }

  /* Only target DESKTOP menu sub-menus – never mobile menu */
  #ast-desktop-header .main-header-menu .sub-menu,
  #ast-desktop-header .ast-nav-menu .sub-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    z-index: 999999 !important;
    min-width: 248px;
    max-width: 320px;
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none !important;

    background: linear-gradient(165deg, #13251c 0%, #0c1812 100%) !important;
    border: 1px solid rgba(201, 162, 39, 0.28) !important;
    border-radius: 10px !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 12px 40px rgba(0, 0, 0, 0.45),
      0 0 24px rgba(201, 162, 39, 0.06) !important;

    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu::-webkit-scrollbar { width: 6px; }
  #ast-desktop-header .main-header-menu .sub-menu::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.35);
    border-radius: 4px;
  }

  #ast-desktop-header .main-header-menu .menu-item-has-children:hover > .sub-menu,
  #ast-desktop-header .main-header-menu .menu-item-has-children:focus-within > .sub-menu,
  #ast-desktop-header .main-header-menu .menu-item-has-children.focus > .sub-menu,
  #ast-desktop-header .main-header-menu .menu-item-has-children.ast-submenu-expanded > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu > .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu a,
  #ast-desktop-header .main-header-menu .sub-menu .menu-link {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border-left: 2px solid transparent !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    color: #e8efe9 !important;
    background: transparent !important;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu .menu-link > .ast-icon,
  #ast-desktop-header .main-header-menu .sub-menu .ast-arrow-svg,
  #ast-desktop-header .main-header-menu .sub-menu .dropdown-menu-toggle {
    display: none !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu a:hover,
  #ast-desktop-header .main-header-menu .sub-menu a:focus,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > a {
    color: #f5e6a8 !important;
    background: rgba(201, 162, 39, 0.12) !important;
    border-left-color: #C9A227 !important;
  }

  #ast-desktop-header .main-header-menu .sub-menu .sub-menu {
    top: 0 !important;
    left: calc(100% + 4px) !important;
  }
}

/* ============================================================
   MOBILE / TABLET (max-width: 921.99px)
   Fix hamburger panel + expandable submenus
   ============================================================ */
@media (max-width: 921.99px) {

  /* Hamburger must always be tappable */
  .menu-toggle,
  .main-header-menu-toggle,
  .ast-mobile-menu-trigger-minimal,
  button.menu-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Show mobile header chrome */
  .ast-header-break-point #ast-mobile-header {
    display: block !important;
  }

  /* Panel that slides open under the bar */
  .ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
    pointer-events: auto !important;
  }

  /* When nav is open, force the content box visible */
  .ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .ast-mobile-header-content,
  .ast-header-break-point.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content,
  body.ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  /* Mobile menu list – tech panel box */
  .ast-header-break-point #ast-hf-mobile-menu,
  .ast-header-break-point .ast-builder-menu-mobile .main-header-menu,
  .ast-header-break-point .ast-mobile-header-content .main-header-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px 16px !important;
    list-style: none !important;

    background: linear-gradient(165deg, #13251c 0%, #0c1812 100%) !important;
    border: 1px solid rgba(201, 162, 39, 0.28) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  }

  .ast-header-break-point .ast-mobile-header-content {
    padding: 8px 12px 20px !important;
    background: transparent !important;
  }

  /* Top-level mobile links */
  .ast-header-break-point #ast-hf-mobile-menu > .menu-item > .menu-link,
  .ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #e8efe9 !important;
    background: transparent !important;
    text-decoration: none !important;
    pointer-events: auto !important;
  }

  .ast-header-break-point #ast-hf-mobile-menu > .menu-item > .menu-link:hover,
  .ast-header-break-point #ast-hf-mobile-menu > .menu-item > .menu-link:active {
    color: #f5e6a8 !important;
    background: rgba(201, 162, 39, 0.12) !important;
  }

  /* Submenu toggle arrow – large touch target */
  .ast-header-break-point .ast-menu-toggle,
  .ast-header-break-point .dropdown-menu-toggle,
  .ast-header-break-point .menu-item-has-children > .ast-menu-toggle {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(201, 162, 39, 0.1) !important;
    color: #C9A227 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    position: relative !important;
  }

  .ast-header-break-point .ast-menu-toggle:active,
  .ast-header-break-point .ast-menu-toggle:focus {
    background: rgba(201, 162, 39, 0.25) !important;
  }

  /* Submenus: HIDDEN by default on mobile */
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu,
  .ast-header-break-point .ast-builder-menu-mobile .sub-menu,
  .ast-header-break-point .ast-mobile-header-content .main-header-menu .sub-menu {
    display: none !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 8px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* Submenus: SHOW when expanded (Astra classes + our class) */
  .ast-header-break-point #ast-hf-mobile-menu .menu-item-has-children.ast-submenu-expanded > .sub-menu,
  .ast-header-break-point #ast-hf-mobile-menu .menu-item-has-children.eh-open > .sub-menu,
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu.toggled-on,
  .ast-header-break-point .ast-builder-menu-mobile .menu-item-has-children.ast-submenu-expanded > .sub-menu,
  .ast-header-break-point .ast-builder-menu-mobile .menu-item-has-children.eh-open > .sub-menu,
  .ast-header-break-point .ast-mobile-header-content .menu-item-has-children.ast-submenu-expanded > .sub-menu,
  .ast-header-break-point .ast-mobile-header-content .menu-item-has-children.eh-open > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;
  }

  /* Submenu link styling */
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu a,
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link,
  .ast-header-break-point .ast-builder-menu-mobile .sub-menu a {
    display: block !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: #c5d4c8 !important;
    background: transparent !important;
    white-space: normal !important;
    pointer-events: auto !important;
  }

  .ast-header-break-point #ast-hf-mobile-menu .sub-menu a:hover,
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu a:active {
    color: #f5e6a8 !important;
    background: rgba(201, 162, 39, 0.12) !important;
  }

  /* Hide decorative arrows inside submenu text links */
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon,
  .ast-header-break-point #ast-hf-mobile-menu .sub-menu .ast-arrow-svg {
    display: none !important;
  }
}