.hd-desktop-menu {
  display: none;
}

@media only screen and (min-width: 1025px) {
  .hd-desktop-menu {
    display: block;
  }

  .hd-desktop-menu__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hd-desktop-menu__list > .menu-item {
    position: relative;
  }

  .hd-desktop-menu__list > .menu-item > a,
  .hd-desktop-menu__list > .menu-item > span.no-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .hd-desktop-menu__list > .menu-item > a:hover,
  .hd-desktop-menu__list > .menu-item > span.no-link:hover,
  .hd-desktop-menu__list > .menu-item.is-open > span.no-link {
    color: #ffd400;
  }

  .hd-desktop-menu__list > .menu-item > a:focus-visible,
  .hd-desktop-menu__list > .menu-item > span.no-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Dropdown / flyout panels (shared by every nesting level) */
  .hd-desktop-menu__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .hd-desktop-menu__list > .menu-item.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .hd-desktop-menu__list .sub-menu .menu-item {
    position: relative;
  }

  .hd-desktop-menu__list .sub-menu .menu-item > a,
  .hd-desktop-menu__list .sub-menu .menu-item > span.no-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #16215c;
    text-decoration: none;
    white-space: nowrap;
  }

  .hd-desktop-menu__list .sub-menu .menu-item > a:hover,
  .hd-desktop-menu__list .sub-menu .menu-item > span.no-link:hover,
  .hd-desktop-menu__list .sub-menu .menu-item.is-open > span.no-link {
    background-color: #ffd400;
    color: #16215c;
  }

  .hd-desktop-menu__list .sub-menu .menu-item > a:focus-visible,
  .hd-desktop-menu__list .sub-menu .menu-item > span.no-link:focus-visible {
    outline: 2px solid #16215c;
    outline-offset: -2px;
  }

  /* Nested flyout: opens to the right of its parent row instead of below */
  .hd-desktop-menu__list .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    z-index: 101;
    transform: translateX(-6px);
  }

  .hd-desktop-menu__list .sub-menu .menu-item.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Top-level caret points down; any arrow at a deeper level (flyout
     indicator) points right instead */
  .hd-desktop-menu__list .sub-arrow {
    display: inline-flex;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
  }

  .hd-desktop-menu__list .sub-arrow svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .hd-desktop-menu__list .sub-menu .sub-arrow {
    transform: rotate(-90deg);
  }
}

/* Elementor's sticky-header effect periodically clones the whole header
   (jQuery .clone(), no event listeners carried over) into a hidden
   ".elementor-sticky__spacer" placeholder that reserves layout height for
   the fixed header. If that clone is taken at the instant a dropdown is
   open here, the clone's markup freezes with ".is-open"/"visibility:
   visible" baked in — and since it has no listeners, nothing ever closes
   it again. The spacer itself only hides via "visibility: hidden" (it has
   to stay in-flow to hold space), which a descendant's explicit
   "visibility: visible" can override, so the frozen-open clone bleeds
   through on top of whatever's genuinely open on the real header. Force
   it back down regardless of whatever stale class the clone is carrying,
   and drop pointer-events on the whole spacer as a second layer since it
   should never be interactive in the first place. */
.elementor-sticky__spacer .hd-desktop-menu .sub-menu,
.elementor-sticky__spacer .hd-mobile-menu.is-open .hd-mobile-menu__panel,
.elementor-sticky__spacer .hd-mobile-menu.is-open .hd-mobile-menu__overlay {
  visibility: hidden !important;
  opacity: 0 !important;
}

.elementor-sticky__spacer,
.elementor-sticky__spacer * {
  pointer-events: none !important;
}