/* AthletiGo, the header submenu.
   ---------------------------------------------------------------------------
   Two headers render on this site: Astra's on the standalone templates, and
   the Elementor Theme Builder one on the shop, the products and the cart. Both
   are covered here, because the dropdown has to look the same wherever it
   opens.

   Everything is written in literal values rather than the design tokens. The
   token block lives in the page stylesheets, and those do not load on the shop
   or a product page, so a var() here would resolve to nothing exactly where
   the Elementor header runs.

   Class names are repeated to raise specificity over the theme's own dynamic
   CSS without reaching for !important on every line.
   --------------------------------------------------------------------------- */

/* ===== the panel ======================================================== */
.main-header-menu.main-header-menu .sub-menu.sub-menu,
.elementor-nav-menu.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown{
  background-color:rgba(11,11,13,.92);
  background-image:linear-gradient(180deg,rgba(16,17,22,.96),rgba(8,8,10,.94));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(251,243,234,.10);
  /* the line that ties the panel to the item that opened it */
  border-top:2px solid #FF6F20;
  border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  padding:6px 0;
  overflow:hidden;
}

/* the panel is only as wide as its longest item */
.main-header-menu.main-header-menu .sub-menu.sub-menu{
  width:auto;min-width:0;max-width:none;
  /* RTL: the panel's right edge sits on the parent item's right edge */
  right:0;left:auto;
}
.main-header-menu.main-header-menu .sub-menu.sub-menu .sub-menu{
  right:100%;left:auto;top:-6px;
}

/* ===== the items ======================================================== */
.main-header-menu.main-header-menu .sub-menu.sub-menu a,
.main-header-menu.main-header-menu .sub-menu.sub-menu .menu-link,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a{
  color:#FBF3EA !important;
  background:transparent;
  padding:10px 16px;
  line-height:1.35;
  white-space:nowrap;
  border:0;
  transition:color .2s ease,background-color .2s ease;
}

.main-header-menu.main-header-menu .sub-menu.sub-menu a:hover,
.main-header-menu.main-header-menu .sub-menu.sub-menu a:focus,
.main-header-menu.main-header-menu .sub-menu.sub-menu a:focus-visible,
.main-header-menu.main-header-menu .sub-menu.sub-menu .menu-link:hover,
.main-header-menu.main-header-menu .sub-menu.sub-menu .menu-link:focus,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a.highlighted{
  color:#FF6F20 !important;
  background-color:rgba(255,111,32,.08);
}

/* the page you are on */
.main-header-menu.main-header-menu .sub-menu.sub-menu .current-menu-item > a,
.main-header-menu.main-header-menu .sub-menu.sub-menu .current_page_item > a,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown .current-menu-item > a,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown li.current-menu-item > a.elementor-item-active,
.elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active{
  color:#FF6F20 !important;
}

/* Astra draws a divider between submenu items; keep it, in the site's line
   colour rather than the theme's grey */
.main-header-menu.main-header-menu .sub-menu.sub-menu li{
  border-color:rgba(251,243,234,.10);
}
.main-header-menu.main-header-menu .sub-menu.sub-menu > li:last-child{
  border-bottom:0;
}

/* the little arrow Astra puts on a parent item */
.main-header-menu.main-header-menu .sub-menu.sub-menu .ast-icon,
.main-header-menu.main-header-menu .sub-menu.sub-menu svg{fill:currentColor}

/* ===== inside the phone menu ============================================
   Below Astra's own breakpoint the submenu is not a floating panel any more,
   it opens inside the menu column. It keeps the colours and loses the panel
   chrome, and the two items step in under השיטה so the nesting is readable. */
@media (max-width:921px){
  .main-header-menu.main-header-menu .sub-menu.sub-menu,
  .elementor-nav-menu.elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown{
    background-color:rgba(8,8,10,.96);
    background-image:none;
    border:0;
    border-top:1px solid rgba(255,111,32,.35);
    border-radius:0;
    box-shadow:none;
    padding:2px 0;
    width:auto;
  }
  .main-header-menu.main-header-menu .sub-menu.sub-menu a,
  .main-header-menu.main-header-menu .sub-menu.sub-menu .menu-link,
  .elementor-nav-menu.elementor-nav-menu .elementor-nav-menu--dropdown a{
    padding-block:10px;
    padding-inline-start:38px;   /* RTL: 16px of item padding plus 22px of step */
    padding-inline-end:16px;
    white-space:normal;
  }
}

/* nothing here should ever paint white */
.main-header-menu.main-header-menu .sub-menu.sub-menu,
.main-header-menu.main-header-menu .sub-menu.sub-menu li,
.main-header-menu.main-header-menu .sub-menu.sub-menu a{
  --ast-global-color-5:#0b0b0d;
}


/* Elementor names its dropdown links .elementor-item; matching that as well
   puts this rule above the widget's own colour without an id selector. */
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-sub-item{
  color:#FBF3EA !important;
  padding:10px 16px;
}
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active{
  color:#FF6F20 !important;
  background-color:rgba(255,111,32,.08);
}

/* Astra's phone menu keeps its own item colour; the same reasoning applies */
.main-header-menu .sub-menu .menu-link,
.ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link,
.ast-mobile-header-wrap .main-header-menu .sub-menu a{
  color:#FBF3EA !important;
}
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus,
.ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link:hover,
.ast-mobile-header-wrap .main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu .current-menu-item > .menu-link,
.main-header-menu .sub-menu .current-menu-item > a{
  color:#FF6F20 !important;
}

/* the faint tint under a hovered item, which Astra also paints and wins */
.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu a:focus,
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus{
  background-color:rgba(255,111,32,.08) !important;
}

/* The step under השיטה inside the phone menu. Astra and Elementor both set
   their own padding on these links at a specificity this file cannot reach by
   class alone, so the one property that has to win is marked. */
@media (max-width:921px){
  .main-header-menu .sub-menu .menu-link,
  .main-header-menu .sub-menu a,
  .ast-mobile-header-wrap .main-header-menu .sub-menu .menu-link,
  .ast-mobile-header-wrap .main-header-menu .sub-menu a,
  .elementor-nav-menu--dropdown a.elementor-sub-item{
    padding-inline-start:44px !important;   /* 20px of Astra padding plus 24px of step */
    padding-inline-end:20px !important;
  }
}