/* Advanced Mega Menu — the block ships its own styles (no theme CSS needed).
   Uses CSS custom properties so a theme can retint without editing this file. */
.amm {
	position: relative;
	--amm-badge-bg: #f2c94c;
	--amm-badge-text: #5a4300;
	--amm-featured: #d32c2c;
	--amm-panel-bg: #ffffff;
	--amm-panel-max: 1180px;
	--amm-left-gap: 0px;
	--amm-right-gap: 0px;
}
.amm__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}
.amm__item.has-mega { position: static; }
.amm__item.has-sub { position: relative; }
.amm__link {
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.amm__badge {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--amm-badge-bg);
	color: var(--amm-badge-text);
	white-space: nowrap;
}
.amm__item.is-featured > .amm__link { color: var(--amm-featured); }

.amm__toggle {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 4px 4px 4px 2px;
	display: inline-flex;
	align-items: center;
	color: inherit;
	vertical-align: middle;
}
.amm__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform .15s ease;
	margin-top: -3px;
}
.amm__item.is-open .amm__chevron { transform: rotate( -135deg ); margin-top: 2px; }

.amm__panel { z-index: 60; }
.amm__panel[hidden] { display: none; }

/* Full-bleed mega panel: positioned from the nav's real viewport gaps (measured
   in JS with clientWidth, so it excludes the scrollbar and works in RTL). */
.amm__panel--mega {
	position: absolute;
	top: 100%;
	left: calc( -1 * var(--amm-left-gap) );
	right: calc( -1 * var(--amm-right-gap) );
	width: auto;
	background: var(--amm-panel-bg);
	border-top: 1px solid #ececec;
	box-shadow: 0 22px 44px rgba( 0, 0, 0, .09 );
}
.amm__panel-inner {
	max-width: var(--amm-panel-max);
	margin: 0 auto;
	padding: 26px 24px;
}

/* Plain submenu: a dropdown under its item (toggled by JS, not :hover). */
.amm__panel--sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--amm-panel-bg);
	border: 1px solid #ececec;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba( 0, 0, 0, .1 );
	padding: 8px 0;
}
.amm__sub { list-style: none; margin: 0; padding: 0; }
.amm__sub a {
	display: block;
	padding: 8px 18px;
	text-decoration: none;
	color: inherit;
}
.amm__sub a:hover { background: #f6f6f6; }

.amm .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* Mobile: panels flow in-line (accordion), no full-bleed overlay. */
@media ( max-width: 782px ) {
	.amm__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.amm__panel--mega,
	.amm__panel--sub {
		position: static;
		left: auto;
		right: auto;
		width: auto;
		min-width: 0;
		box-shadow: none;
		border: 0;
	}
	.amm__panel-inner { padding: 12px 0; }
}