/* ============================================================
   mmx-cms-mega-menu v1.1.0 | 2026-11-05
   Light DOM (render() is a <slot>) - the menu row, link colors, flyout size and the 235 / 190px link
   width live in corsetmaking.css. This file only adds what the component owns:
   - Flyout Style (Advanced): Default / Rounded Corners / Bordered / Rounded + Bordered (class on the flyout)
   - the two subcategory columns (no fixed width - 1.0.x set 153px, which corsetmaking.css overrode)
   - keyboard access: a flyout also opens while a link in its item has focus; focus ring on menu links
   Tokens: --border-light, --space-sm, --space-xl, --focus-ring
   ============================================================ */

/* -- Flyout Style ------------------------------------------- */
ul.mega-menu-parent-categories li div.mega-menu-flyout.mmx-cms-mega-menu__flyout--rounded,
ul.mega-menu-parent-categories li div.mega-menu-flyout.mmx-cms-mega-menu__flyout--rounded-bordered {
	border-radius: 0 0 var(--space-sm) var(--space-sm);
	overflow: hidden;
}

ul.mega-menu-parent-categories li div.mega-menu-flyout.mmx-cms-mega-menu__flyout--bordered,
ul.mega-menu-parent-categories li div.mega-menu-flyout.mmx-cms-mega-menu__flyout--rounded-bordered {
	border: 1px solid var(--border-light);
	border-top: none;
}

/* -- Subcategory columns -------------------------------------
   .mega-menu-container has text-align:center (corsetmaking.css), so the columns float left
   inside the flyout. Width comes from the links (corsetmaking.css: 235px, 190px at 768-991). */
div.mega-menu-flyout.mmx-cms-mega-menu__flyout ul.mega-menu-subcategories {
	float: left;
	margin: 0;
}

div.mega-menu-flyout.mmx-cms-mega-menu__flyout ul.mega-menu-subcategories:nth-of-type(2) {
	margin-left: var(--space-xl);
}

/* -- Keyboard access ----------------------------------------- */
@media (min-width: 768px) {
	ul.mega-menu-parent-categories > li:focus-within > div.mega-menu-flyout.mmx-cms-mega-menu__flyout {
		display: block;
	}
}

.mega-menu-container a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}