/*
 * Dropdown visual overrides for "选 A":
 * Keep WordPress default submenu markup (<ul class="sub-menu">)
 * and style it to resemble the static demo's <details> dropdown panels.
 */

/* Ensure the WP-generated <ul> works with the demo header flex layout. */
.langyvents-header__menu {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.langyvents-header__menu > li {
  position: relative;
  display: flex;
  align-items: center;
}

/* Submenu panel (desktop/tablet). */
.langyvents-header__menu .sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 10px;

  position: absolute;
  /* Avoid a "hover gap" where the submenu is not yet under the cursor.
   * With the previous 10px offset, moving the mouse down could leave the
   * hovered parent before reaching the submenu, hiding it prematurely. */
  top: 100%;
  left: 0;

  min-width: 240px;
  background: #00245c;
  border: none;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);

  /* mimic demo panel spacing */
  gap: 4px;
  z-index: 50;
}

.langyvents-header__menu .sub-menu li {
  display: block;
}

.langyvents-header__menu .sub-menu a {
  display: block;
  width: 100%;
  padding: 10px 12px;

  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: transparent;
  border: none;
  box-shadow: none;
}

.langyvents-header__menu .sub-menu a:hover {
  background: transparent;
  color: #ffffff;
}

/* Show dropdown on hover/focus-within (keyboard-friendly). */
.langyvents-header__menu .menu-item-has-children:hover > .sub-menu,
.langyvents-header__menu .menu-item-has-children:focus-within > .sub-menu {
  display: grid;
}

/* Add a caret on parent items (approximate demo's summary marker). */
.langyvents-header__menu .menu-item-has-children > a::after {
  content: "▾";
  font-size: 12px;
  color: currentColor;
  opacity: 0.9;
  margin-left: 8px;
}

/* Footer menu should not show bullet styling. */
.langyvents-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  /*
   * The demo CSS sets `.langyvents-header__nav.langyvents-is-open { display: flex; ... }`.
   * With WP menus we have a nested <ul>, so we prefer block on the <nav> itself
   * and control the inner <ul> layout.
   */
  .langyvents-header__nav.langyvents-is-open {
    display: block;
  }

  .langyvents-header__nav.langyvents-is-open > ul.langyvents-header__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Make dropdown panel flow in column on mobile (like the demo). */
  .langyvents-header__menu .sub-menu {
    position: static;
    top: auto;
    left: auto;
    min-width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Default: hide submenu on mobile until focused (hover is unreliable). */
  .langyvents-header__menu .menu-item-has-children:hover > .sub-menu {
    display: none;
  }

  .langyvents-header__menu .menu-item-has-children:focus-within > .sub-menu {
    display: grid;
    gap: 0;
  }
}