/*
 * Restyles Blocksy's own submenu markup (rendered with
 * blocksy_mega_menu => true by inc/panel-builder/header/menu/view.php,
 * which already adds "animated-submenu-block" to any top-level menu item
 * that has children) into a richer panel, instead of building a
 * competing custom menu walker. Only visual: Blocksy's own JS already
 * handles the hover/click open/close interaction and ARIA state.
 */

@media (min-width: 64rem) {
  #header .menu-container .menu > .menu-item.animated-submenu-block {
    position: relative;
  }

  #header .menu-container .menu > .menu-item.animated-submenu-block > .sub-menu {
    min-width: 16rem;
    padding: var(--hs-space-16);
    background: var(--hs-color-surface);
    border: 1px solid var(--hs-color-border);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-mega-menu);

    /* Auto-balances into as many columns as fit - a short list stays a
       single column, a long one spreads out, no JS/item-counting needed. */
    column-width: 12rem;
    column-gap: var(--hs-space-24);
  }

  #header .menu-container .menu > .menu-item.animated-submenu-block > .sub-menu .menu-item {
    break-inside: avoid;
  }

  #header .menu-container .menu > .menu-item.animated-submenu-block > .sub-menu a.ct-menu-link {
    display: block;
    padding: var(--hs-space-8) var(--hs-space-12);
    border-radius: var(--hs-radius-md);
    font-size: var(--hs-font-size-body-sm);
    transition: background-color var(--hs-transition-fast) var(--hs-ease),
      color var(--hs-transition-fast) var(--hs-ease);
  }

  #header .menu-container .menu > .menu-item.animated-submenu-block > .sub-menu a.ct-menu-link:hover {
    background: var(--hs-color-surface-sunken);
    color: var(--hs-color-primary-600);
  }
}