/**
 * Boom Desktop Menu Accordion
 * ---------------------------
 * Scoped to `.boom-acc` (added by JS only to the one menu we control) and gated
 * to desktop (>1024px), so mobile / popup / header / unprocessed menus are never
 * affected.
 *
 * Elementor's existing `.sub-arrow` (SVG) is reused untouched — this file only
 * makes it a clickable / focusable target. `!important` is used on exactly two
 * submenu properties (display + overflow) because Elementor / SmartMenus can set
 * them inline and they are what makes the slide animation reliable (Problem 5).
 */

@media ( min-width: 1025px ) {

	/* -----------------------------------------------------------------
	 * Submenus become in-flow accordion panels instead of hover dropdowns.
	 * The compound selector (4 classes) out-specifies Elementor's default
	 * dropdown positioning; display/overflow are forced so no leftover inline
	 * style from SmartMenus can hide the panel or let it spill mid-slide.
	 * ----------------------------------------------------------------- */
	.boom-acc .elementor-nav-menu .sub-menu,
	.boom-acc .elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		min-width: 0;
		margin: 0;
		display: block !important;   /* beat any inline display:none (Problem 5) */
		height: 0;                   /* JS animates this; inline height wins over this base */
		overflow: hidden !important; /* clip during the slide so nothing spills (Problem 5) */
		visibility: visible;
		opacity: 1;
		box-shadow: none;
		transform: none;
		pointer-events: auto;
		transition: height 0.3s ease;
		will-change: height;
	}

	/* Sub-items sit full width in the accordion column. */
	.boom-acc .elementor-nav-menu .sub-menu .elementor-sub-item {
		width: 100%;
	}

	/* -----------------------------------------------------------------
	 * Elementor's EXISTING arrow becomes the toggle. We do not restyle the
	 * SVG itself — only make it a proper click / focus target.
	 * ----------------------------------------------------------------- */
	.boom-acc .elementor-item .sub-arrow {
		cursor: pointer;
		pointer-events: auto;
		position: relative;
		z-index: 1;
	}

	.boom-acc .elementor-item .sub-arrow:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
		border-radius: 2px;
	}

	/* -----------------------------------------------------------------
	 * OPTIONAL: rotate the existing arrow when its submenu is open. Delete
	 * this block to keep the SVG orientation exactly as Elementor renders it.
	 * ----------------------------------------------------------------- */
	/*
	.boom-acc .menu-item-has-children > .elementor-item .sub-arrow {
		transition: transform 0.25s ease;
	}
	.boom-acc .menu-item-has-children.boom-open > .elementor-item .sub-arrow {
		transform: rotate( 180deg );
	}
	*/

	/* Respect reduced-motion preferences. */
	@media ( prefers-reduced-motion: reduce ) {
		.boom-acc .elementor-nav-menu .sub-menu,
		.boom-acc .elementor-nav-menu .sub-menu.elementor-nav-menu--dropdown {
			transition: none;
		}
	}
}