/*
 * HM Mega Menu block: only what core block settings can't do.
 * Loaded on pages that contain the block, see register_custom_block_styles().
 *
 * The two !important flags override inline block styles; see the last rule.
 */
/* stylelint-disable declaration-no-important */

/* Inline icon images in panel link labels sit on the text baseline by default. */
.wp-block-hm-mega-menu__menu-container .wp-block-navigation-item__label img {
	vertical-align: middle;
}

/*
 * Core switches the Navigation overlay off at 600px, but the header menu only
 * fits on one row from 800px. Keep the overlay up to 799px, for the mega menu
 * navigation only. Mirrors core's two min-width: 600px rules.
 */
@media ( min-width: 600px ) and ( max-width: 799px ) {
	.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * In the mobile overlay, each mega menu becomes an accordion row that matches
 * Ollie's core submenus, instead of an absolutely positioned desktop panel.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 22px 10px 15px;
	font-size: var( --wp--preset--font-size--base );
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container {
	display: none;
	position: static;
	width: auto;
	max-width: none;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-hm-mega-menu__menu-container {
	display: block;
	box-shadow: none;
}

/*
 * The panel's card padding and shadow are inline block styles meant for the
 * desktop dropdown. In the overlay, indent the panel like Ollie's submenus.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container > .wp-block-group {
	padding: 5px 0 0 20px !important;
	box-shadow: none !important;
}

/*
 * Compact overlay. Ollie pads every overlay link to 54px tall; 44px rows keep
 * a comfortable tap target and fit the whole menu on a phone screen. Panel
 * links hold a 28px icon, so they get less padding to land on the same height.
 */
.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	padding-top: 10px;
	padding-bottom: 10px;
}

.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container .wp-block-navigation-item__content {
	padding-top: 8px;
	padding-bottom: 8px;
}

/*
 * Smaller panel icons with more room before the label. max-width wins over
 * the image block's inline width without needing !important.
 */
.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container .wp-block-navigation-item__label img {
	max-width: 28px;
	height: auto;
	margin-right: 12px;
}

/*
 * Top-level items lead the overlay, so they are a step larger than the panel
 * headings (base size, fixed by the block) and the links under them.
 */
.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.is-menu-open .wp-block-navigation__responsive-container-content > ul > li > :is(a, button) {
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.3;
}

/* Re-centre Ollie's submenu arrow on the shorter row. */
.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon {
	top: 4px;
	padding: 10px 0;
}

/*
 * Panel groups in the overlay: the Services and Industries headings line up
 * with the icon column below them, with clear space between groups and little
 * between a heading and its links.
 */
.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container .wp-block-columns {
	gap: var( --wp--preset--spacing--medium );
	padding-bottom: var( --wp--preset--spacing--small );
}

.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container .wp-block-heading {
	padding-left: 15px;
}

.wp-block-navigation:has(.wp-block-hm-blocks-hm-mega-menu-block)
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__menu-container .wp-block-heading + .wp-block-navigation {
	margin-top: 4px;
}

/*
 * Match the mega menu arrows to Ollie's submenu arrow in the overlay: same
 * size, pointing down when closed and up when open.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__toggle .wp-block-hm-mega-menu__toggle-icon {
	width: 16px;
	height: 16px;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__toggle .wp-block-hm-mega-menu__toggle-icon svg {
	width: 16px;
	height: 16px;
	margin: 0;
	transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-hm-mega-menu__toggle[aria-expanded="true"] .wp-block-hm-mega-menu__toggle-icon svg {
	transform: rotate( 180deg );
}