/*
Theme Name: Astra Child – EH Dropdown Fix
Theme URI: https://emergencyhousing.ca/
Description: Minimal Astra child theme that only fixes desktop/mobile dropdown menus (hover gap, z-index, click-through to parent, and disappearing sub-menus). Does not alter layout, colors, or other site features.
Author: EH Site Patch
Template: astra
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: astra-child-eh
*/

/* ------------------------------------------------------------------
   Desktop dropdown reliability (Astra 4.x)
   - Solid hover bridge (no gap that closes the menu)
   - High z-index so sub-menus stay above page content
   - Readable white panel + dark text (matches existing intent)
   - Does NOT disable pointer-events on the header (avoids the
     conflicting rules that were causing click-through to parent only)
------------------------------------------------------------------- */

@media (min-width: 922px) {

  /* Keep header and menus above page content */
  #masthead,
  .ast-main-header-wrap,
  #ast-desktop-header,
  .main-header-bar,
  .ast-primary-header-bar {
    position: relative;
    z-index: 99990;
  }

  /* Parent items need relative positioning for absolute sub-menus */
  #ast-desktop-header .main-header-menu > .menu-item-has-children,
  #ast-desktop-header .main-header-menu .menu-item-has-children {
    position: relative !important;
  }

  /* Invisible hover bridge so the mouse never loses focus between
     parent and sub-menu (classic cause of “disappearing” dropdowns) */
  #ast-desktop-header .main-header-menu > .menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 24px;
    display: block;
    pointer-events: auto;
    z-index: 99991;
  }

  /* Sub-menu placement – flush under parent, high stack order */
  #ast-desktop-header .main-header-menu .sub-menu,
  #ast-desktop-header .ast-nav-menu .sub-menu,
  .main-header-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    z-index: 999999 !important;
    min-width: 220px;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Default Astra often uses display:none; we rely on its hover
     classes but force the open state when parent is hovered/focused */
  #ast-desktop-header .main-header-menu .menu-item-has-children:hover > .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:focus-within > .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;
  }

  /* Sub-menu links – readable and fully clickable */
  #ast-desktop-header .main-header-menu .sub-menu a,
  #ast-desktop-header .main-header-menu .sub-menu .menu-link {
    color: #0f172a !important;
    background-color: #ffffff !important;
    pointer-events: auto !important;
    display: block !important;
    white-space: nowrap;
  }

  #ast-desktop-header .main-header-menu .sub-menu a:hover,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > a,
  #ast-desktop-header .main-header-menu .sub-menu .menu-item.focus > a {
    color: #ffffff !important;
    background-color: #14532d !important;
  }

  /* Nested sub-menus (if any) */
  #ast-desktop-header .main-header-menu .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
  }
}

/* ------------------------------------------------------------------
   Mobile / tablet – keep Astra’s built-in toggle behaviour;
   only ensure sub-menus are visible when expanded
------------------------------------------------------------------- */
@media (max-width: 921.99px) {
  .ast-header-break-point .main-header-menu .menu-item-has-children.ast-submenu-expanded > .sub-menu,
  .ast-header-break-point .main-header-menu .menu-item-has-children .sub-menu.toggled-on {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    box-shadow: none !important;
  }
}