/*
 * Navigation Overlay: Collapse Submenus by Default (Twenty Twenty-Five)
 *
 * WordPress shows ALL submenus expanded inside the navigation overlay,
 * regardless of block settings. This stylesheet collapses them by
 * default and reveals them only for user-opened items, tracked by the
 * companion JS snippet via the class .wp-submenu-open-by-user.
 *
 * Pairs with the JS snippet:
 * "Navigation Overlay: Toggleable Submenus (TT5)"
 */

/*
 * 1. Hide every submenu container while the overlay is open.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  display: none !important;
}

/*
 * 2. Show only submenus the user explicitly opened.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.wp-submenu-open-by-user
  > .wp-block-navigation__submenu-container {
  display: block !important;
}

/*
 * 3. Show the arrow icon in the overlay
 *    (core hides it there via display:none).
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-icon {
  display: inline-block !important;
}

/*
 * 4. Arrow direction reflects the state:
 *    down (default) = collapsed, up = opened by user.
 *    Keyed off our own class, NOT aria-expanded, because WP sets
 *    aria-expanded="true" on every toggle when the overlay opens.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.wp-submenu-open-by-user
  .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

/* Smooth arrow rotation. */
.wp-block-navigation__submenu-icon svg {
  transition: transform 0.15s ease;
}