/*
 Theme Name:   Astra Child (Crane)
 Theme URI:    https://www.joincrane.co
 Description:  Child theme for Astra with See Inside dropdown fix
 Author:       Crane
 Author URI:   https://www.joincrane.co
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/**
 * Fix: See Inside dropdown menu cut off on screens below 1550px
 *
 * On narrower viewports, the last dropdown (See Inside) extends past the right
 * edge. This makes it open to the left instead, keeping it fully visible.
 */
@media (max-width: 1549px) and (min-width: 922px) {
  /* Ensure header allows dropdown overflow */
  .ast-hfb-header .site-header,
  .ast-hfb-header .main-header-bar-wrap,
  .ast-hfb-header .main-header-bar,
  #ast-desktop-header .ast-builder-layout-element.ast-builder-menu {
    overflow: visible;
  }

  /* Last menu item with submenu: open dropdown to the left (like ast-left-align-sub-menu) */
  #ast-desktop-header .main-header-menu > .menu-item.menu-item-has-children:last-child:hover > .sub-menu,
  #ast-desktop-header .main-header-menu > .menu-item.menu-item-has-children:last-child.focus > .sub-menu,
  #ast-desktop-header .main-header-menu > .menu-item.menu-item-has-children:last-child > .sub-menu.toggled-on {
    right: 0;
    left: auto;
  }
}

/**
 * Fix: Submenu text cutoff (e.g. "Peter and the Wolf Webinars" showing as "Peter and the Wo...")
 *
 * Astra's default submenu width (240px) truncates longer labels.
 * Widen the dropdown and allow text to wrap when needed.
 */
#ast-desktop-header .main-header-menu .sub-menu {
  min-width: 280px;
  width: max-content;
  max-width: min(320px, 90vw);
}

#ast-desktop-header .main-header-menu .sub-menu .menu-link {
  white-space: normal;
  word-wrap: break-word;
}

/**
 * Elementor header nav: wide gap after load (e.g. Follow Us! → Crane Partners)
 *
 * Elementor Pro horizontal menus set `flex-grow: 1` on `.elementor-item` links (often
 * applied when `elementor-frontend` initializes). That stretches anchors so one slot
 * absorbs extra row width — it reads as a growing gap between two labels.
 *
 * Scope all horizontal Nav Menu widgets (not a single element id) so templates keep
 * working after Elementor saves. `inc/crane-elementor-nav-spacing-pin.js` reinforces
 * this after Elementor mutates inline styles.
 */
@media (min-width: 922px) {
  /* Shrink-wrap the row so flex-grow on links cannot mimic huge gaps between labels */
  .elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    width: max-content;
    max-width: 100%;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li {
    flex-grow: 0 !important;
    flex-shrink: 0;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a.elementor-item {
    flex-grow: 0 !important;
    flex-shrink: 0;
    width: auto !important;
    max-width: max-content !important;
  }
}

/**
 * Hide submenu caret on desktop only; keep caret on mobile/tablet (burger layout).
 * Matches Elementor/Astra desktop breakpoint (922px).
 */
@media (min-width: 922px) {
  .elementor-widget-nav-menu .sub-arrow {
    display: none !important;
  }
}

/**
 * Tablet only (768px–921px): larger burger + upper-right in header.
 * Below 922px the Nav Menu uses the burger; phones stay unchanged (narrow screens).
 * Overrides Elementor post CSS e.g. `.elementor-menu-toggle { margin: 0 auto }`.
 */
@media (min-width: 768px) and (max-width: 921px) {
  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-widget-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle svg,
  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle .elementor-menu-toggle__icon--open svg,
  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle .elementor-menu-toggle__icon--close svg {
    width: 30px !important;
    height: 30px !important;
  }

  .elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle i[class*="eicon"] {
    font-size: 30px !important;
  }
}