/*
 * Floating Multisite Menu — varianti di stile visivo del pannello menu.
 *
 * Ogni blocco è isolato dietro la classe `.fmsm-style-{slug}` applicata al
 * contenitore `.fmsm-container` (vedi class-fmsm-frontend.php). Il layout di
 * base (posizionamento, apertura/chiusura, focus, ARIA) resta invariato:
 * qui si interviene solo sull'aspetto di `.fmsm-menu` e `.fmsm-menu-item`.
 *
 * "classico" non ha bisogno di regole proprie: è lo stile già definito
 * in frontend.css e resta il comportamento predefinito.
 */

/* ---------------------------------------------------------------------
 * 2. Pergamena — carta vintage color avorio, testo scuro, doppio bordo oro.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-pergamena .fmsm-menu {
	background-color: #f4ecd8;
	background-image:
		repeating-linear-gradient(0deg, rgba(59, 47, 28, 0.025) 0px, rgba(59, 47, 28, 0.025) 1px, transparent 1px, transparent 3px);
	border: 1px solid #b8933f;
	border-radius: 6px;
	box-shadow: inset 0 0 0 3px #f4ecd8, inset 0 0 0 4px #c9a24b, 0 16px 40px rgba(0, 0, 0, 0.3);
}
.fmsm-container.fmsm-style-pergamena .fmsm-menu-item {
	color: #3b2f1c;
}
.fmsm-container.fmsm-style-pergamena .fmsm-menu-item:hover,
.fmsm-container.fmsm-style-pergamena .fmsm-menu-item:focus-visible {
	background-color: rgba(201, 162, 75, 0.2);
	color: #6b4b12;
	box-shadow: inset 0 0 0 1px rgba(107, 75, 18, 0.4);
}
.fmsm-container.fmsm-style-pergamena .fmsm-current-badge {
	color: rgba(59, 47, 28, 0.65);
	border-color: rgba(184, 147, 63, 0.6);
}

/* ---------------------------------------------------------------------
 * 3. Nuvoletta — fumetto con codolo triangolare rivolto verso il pulsante.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-nuvoletta .fmsm-menu {
	border-radius: 20px;
}
.fmsm-container.fmsm-style-nuvoletta .fmsm-menu::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid transparent;
}
/* Apertura verso il basso (posizione verticale non "in basso"): codolo sul bordo superiore. */
.fmsm-container.fmsm-style-nuvoletta:not(.fmsm-v-bottom) .fmsm-menu::after {
	top: -9px;
	bottom: auto;
	border-top: none;
	border-bottom-color: var(--fmsm-color-primary, #1c1c1c);
}
/* Apertura verso l'alto (posizione verticale "in basso"): codolo sul bordo inferiore. */
.fmsm-container.fmsm-style-nuvoletta.fmsm-v-bottom .fmsm-menu::after {
	bottom: -9px;
	top: auto;
	border-bottom: none;
	border-top-color: var(--fmsm-color-primary, #1c1c1c);
}
/* Il codolo segue il lato su cui si trova il pulsante. */
.fmsm-container.fmsm-style-nuvoletta.fmsm-h-right .fmsm-menu::after {
	right: 22px;
	left: auto;
}
.fmsm-container.fmsm-style-nuvoletta.fmsm-h-left .fmsm-menu::after {
	left: 22px;
	right: auto;
}

/* ---------------------------------------------------------------------
 * 4. Targa Verticale — pannello stretto, etichette in verticale, voci in riga.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 2px;
	min-width: 0;
	padding: 18px 12px;
	border-radius: 2px;
	background: var(--fmsm-color-primary, #1c1c1c);
}
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu li {
	display: flex;
}
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu-item {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	flex-direction: column;
	height: auto;
	min-height: 130px;
	padding: 14px 10px;
	letter-spacing: 0.14em;
	border-right: 1px solid rgba(201, 162, 75, 0.25);
	white-space: nowrap;
}
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu li:last-child .fmsm-menu-item {
	border-right: none;
}
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu-item:hover,
.fmsm-container.fmsm-style-targa-verticale .fmsm-menu-item:focus-visible {
	padding-left: 10px;
	padding-top: 8px;
}

/* ---------------------------------------------------------------------
 * 5. Vetro Dorato — effetto glass con divisori oro tra le voci.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-vetro-dorato .fmsm-menu {
	background: rgba(28, 28, 28, 0.5);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: none;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.fmsm-container.fmsm-style-vetro-dorato .fmsm-menu-item {
	border-radius: 0;
	border-bottom: 1px solid rgba(201, 162, 75, 0.25);
}
.fmsm-container.fmsm-style-vetro-dorato .fmsm-menu li:last-child .fmsm-menu-item {
	border-bottom: none;
}

/* ---------------------------------------------------------------------
 * 6. Art Déco — doppio bordo e ornamenti geometrici d'angolo.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-art-deco .fmsm-menu {
	border: 2px solid var(--fmsm-color-accent, #c9a24b);
	outline: 1px solid var(--fmsm-color-accent, #c9a24b);
	outline-offset: -6px;
	border-radius: 4px;
	padding: 20px 16px;
}
.fmsm-container.fmsm-style-art-deco .fmsm-menu::before,
.fmsm-container.fmsm-style-art-deco .fmsm-menu::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
}
.fmsm-container.fmsm-style-art-deco .fmsm-menu::before {
	top: 3px;
	left: 3px;
	border-top: 2px solid var(--fmsm-color-accent, #c9a24b);
	border-left: 2px solid var(--fmsm-color-accent, #c9a24b);
}
.fmsm-container.fmsm-style-art-deco .fmsm-menu::after {
	bottom: 3px;
	right: 3px;
	border-bottom: 2px solid var(--fmsm-color-accent, #c9a24b);
	border-right: 2px solid var(--fmsm-color-accent, #c9a24b);
}

/* ---------------------------------------------------------------------
 * 7. Medaglione — voci disposte a ventaglio attorno al pulsante.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-medaglione .fmsm-menu {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	width: 0;
	height: 0;
	overflow: visible;
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu li {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(160deg, var(--fmsm-color-primary, #1c1c1c), #2c2a26);
	border: 1px solid rgba(201, 162, 75, 0.4);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	text-align: center;
}
/* Ventaglio a 5 voci: -40°/-20°/0°/20°/40°, testo mantenuto dritto tramite doppia rotazione. */
.fmsm-container.fmsm-style-medaglione .fmsm-menu li:nth-child(1) {
	transform: rotate(-40deg) translate(96px) rotate(40deg);
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu li:nth-child(2) {
	transform: rotate(-20deg) translate(104px) rotate(20deg);
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu li:nth-child(3) {
	transform: rotate(0deg) translate(112px) rotate(0deg);
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu li:nth-child(4) {
	transform: rotate(20deg) translate(104px) rotate(-20deg);
}
.fmsm-container.fmsm-style-medaglione .fmsm-menu li:nth-child(5) {
	transform: rotate(40deg) translate(96px) rotate(-40deg);
}
/* Se il pulsante è sul lato sinistro, il ventaglio si apre verso destra. */
.fmsm-container.fmsm-style-medaglione.fmsm-h-left .fmsm-menu li:nth-child(1) {
	transform: rotate(40deg) translate(96px) rotate(-40deg);
}
.fmsm-container.fmsm-style-medaglione.fmsm-h-left .fmsm-menu li:nth-child(2) {
	transform: rotate(20deg) translate(104px) rotate(-20deg);
}
.fmsm-container.fmsm-style-medaglione.fmsm-h-left .fmsm-menu li:nth-child(4) {
	transform: rotate(-20deg) translate(104px) rotate(20deg);
}
.fmsm-container.fmsm-style-medaglione.fmsm-h-left .fmsm-menu li:nth-child(5) {
	transform: rotate(-40deg) translate(96px) rotate(40deg);
}

/* ---------------------------------------------------------------------
 * 8. Cartiglio — nastro araldico con estremità a punta.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-cartiglio .fmsm-menu {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 6px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fmsm-container.fmsm-style-cartiglio .fmsm-menu-item {
	background: linear-gradient(135deg, #3a0f14, #1c1c1c);
	border-top: 1px solid var(--fmsm-color-accent, #c9a24b);
	border-bottom: 1px solid var(--fmsm-color-accent, #c9a24b);
	border-radius: 0;
	padding: 12px 26px;
	clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 14px 100%, 0 50%);
}
.fmsm-container.fmsm-style-cartiglio .fmsm-menu-item:hover,
.fmsm-container.fmsm-style-cartiglio .fmsm-menu-item:focus-visible {
	background: linear-gradient(135deg, #4a141b, #241c14);
	padding-left: 26px;
}

/* ---------------------------------------------------------------------
 * 9. Nastro Laterale — cassetto a tutta altezza, entra dal bordo dello schermo.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-nastro-laterale .fmsm-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 240px;
	max-width: 82vw;
	min-width: 0;
	max-height: none;
	border-radius: 0;
	padding: 88px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
}
.fmsm-container.fmsm-style-nastro-laterale.fmsm-h-right .fmsm-menu {
	right: 0;
	left: auto;
	border-left: 1px solid rgba(201, 162, 75, 0.35);
	transform: translateX(100%);
}
.fmsm-container.fmsm-style-nastro-laterale.fmsm-h-left .fmsm-menu {
	left: 0;
	right: auto;
	border-right: 1px solid rgba(201, 162, 75, 0.35);
	transform: translateX(-100%);
}
.fmsm-container.fmsm-style-nastro-laterale .fmsm-menu.is-open {
	transform: translateX(0);
}
.fmsm-container.fmsm-style-nastro-laterale .fmsm-menu-item {
	padding: 14px 12px;
	font-size: 16px;
}

/* ---------------------------------------------------------------------
 * 10. Libro Aperto — doppia pagina con costa dorata centrale.
 * ------------------------------------------------------------------- */
.fmsm-container.fmsm-style-libro-aperto .fmsm-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	min-width: 340px;
	padding: 16px;
	background: linear-gradient(90deg, #242220, #2c2a26 50%, #242220);
}
.fmsm-container.fmsm-style-libro-aperto .fmsm-menu::after {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, var(--fmsm-color-accent, #c9a24b), transparent);
	box-shadow: 0 0 8px rgba(201, 162, 75, 0.5);
}
.fmsm-container.fmsm-style-libro-aperto .fmsm-menu li:nth-child(odd) {
	grid-column: 1;
}
.fmsm-container.fmsm-style-libro-aperto .fmsm-menu li:nth-child(even) {
	grid-column: 2;
}
.fmsm-container.fmsm-style-libro-aperto .fmsm-menu-item {
	padding: 10px 14px;
}