/**
 * AeCI — Menu "Altro" (priority+ navigation)
 * Le voci del menu restano SEMPRE su una riga sola: quelle che non entrano
 * finiscono nel sottomenu "Altro" che si apre al passaggio del mouse.
 * Sotto i 768px non fa nulla: comanda il menu mobile off-canvas.
 *
 * OverPress Media — 05/08/2026
 */

@media (min-width: 768px) {
	/* La nav deve poter stringersi sotto la larghezza del suo contenuto,
	   altrimenti sfonda la riga invece di lasciarsi misurare. */
	.ovp-navflex,
	.ovp-navflex .bricks-nav-menu-wrapper {
		min-width: 0;
		max-width: 100%;
	}

	.ovp-navflex ul.bricks-nav-menu {
		flex-wrap: nowrap;
		/* clip (non hidden) sull'asse X: i sottomenu nativi restano visibili */
		overflow-x: clip;
		overflow-y: visible;
	}

	/* Niente restringimento delle voci: è quello che manda il testo a capo */
	.ovp-navflex ul.bricks-nav-menu > li {
		flex: 0 0 auto;
	}

	.ovp-navflex ul.bricks-nav-menu > li > a,
	.ovp-navflex ul.bricks-nav-menu > li > .brx-submenu-toggle > a {
		white-space: nowrap;
	}
}

/* --- Voce "Altro" ------------------------------------------------------- */

.ovp-more-item {
	position: relative;
}

.ovp-more-item[hidden] {
	display: none !important;
}

.ovp-more-item > a {
	display: flex;
	align-items: center;
	gap: 0.45em;
	cursor: pointer;
}

/* freccina */
.ovp-more-item > a::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.ovp-more-item.is-open > a::after {
	transform: translateY(0.05em) rotate(225deg);
}

/* --- Pannello a tendina -------------------------------------------------- */

/* position: fixed perché la sezione header ha overflow:hidden e taglierebbe
   un pannello in absolute. Le coordinate le calcola il JS. */
.ovp-more-menu {
	position: fixed;
	top: 0;
	left: auto;
	right: 0;
	z-index: 999;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	min-width: 200px;
	max-width: min(360px, 92vw);
	background-color: var(--ovp-more-bg, #1d3856);
	color: var(--ovp-more-color, #fff);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ovp-more-item.is-open > .ovp-more-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ovp-more-menu li {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0;
	border: 0;
}

.ovp-more-menu li > a {
	display: block;
	padding: 10px 20px;
	color: inherit;
	text-decoration: none;
	line-height: 1.35;
	white-space: normal;
	font-family: var(--ovp-more-font-family, inherit);
	font-size: var(--ovp-more-font-size, inherit);
	font-weight: var(--ovp-more-font-weight, inherit);
	letter-spacing: var(--ovp-more-letter-spacing, inherit);
	text-transform: var(--ovp-more-text-transform, none);
	transition: background-color 0.15s ease;
}

.ovp-more-menu li > a:hover,
.ovp-more-menu li > a:focus-visible {
	background-color: var(--ovp-more-hover, rgba(127, 127, 127, 0.18));
}

/* i sottomenu nativi di Bricks eventualmente annidati restano in colonna */
.ovp-more-menu .sub-menu {
	position: static !important;
	display: block;
	opacity: 1;
	visibility: visible;
	background: none;
	box-shadow: none;
}

/* Il pulsante "Area myAeCI" accanto al menu non deve andare a capo */
@media (min-width: 768px) {
	.brxe-nav-menu + .brxe-button,
	.brxe-nav-menu ~ .bricks-button {
		white-space: nowrap;
	}
}