/**
 * BEE Menu Responsive – Stili frontend
 * Versione 1.2.0
 *
 * Le variabili CSS --bee-* vengono iniettate come style inline sul wrapper
 * dal render_callback PHP in base alle opzioni configurate nel builder Divi.
 */

/* ── Bottone toggle ──────────────────────────────────────────────────────── */

.bee-menu-wrapper .bee-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --bee-btn-size, 48px );
	height: var( --bee-btn-size, 48px );
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: var( --bee-btn-bg, #222222 );
	cursor: pointer;
	position: relative;
	z-index: 9990;
	transition: opacity 0.2s ease;
}

.bee-menu-wrapper .bee-menu-toggle:hover {
	opacity: 0.85;
}

/* Focus accessibile visibile solo da tastiera */
.bee-menu-wrapper .bee-menu-toggle:focus-visible {
	outline: 2px solid var( --bee-btn-bg, #222222 );
	outline-offset: 3px;
}

/* ── Icone SVG nel bottone ───────────────────────────────────────────────── */

.bee-menu-wrapper .bee-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52%;
	height: 52%;
	color: var( --bee-icon-color, #ffffff );
}

.bee-menu-wrapper .bee-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Default: hamburger visibile, X nascosta */
.bee-menu-wrapper .bee-icon-open {
	display: none;
}

/* Con menu aperto: hamburgher nascosta, X visibile */
.bee-menu-wrapper.is-open .bee-icon-closed {
	display: none;
}

.bee-menu-wrapper.is-open .bee-icon-open {
	display: flex;
}

/* ── Overlay scuro con blur ──────────────────────────────────────────────── */

.bee-menu-wrapper .bee-overlay {
	position: fixed;
	inset: 0; /* top/right/bottom/left: 0 */
	background-color: rgba( 0, 0, 0, 0.8 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	z-index: 9991;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var( --bee-speed, 300ms ) ease,
		visibility var( --bee-speed, 300ms ) ease;
}

.bee-menu-wrapper.is-open .bee-overlay {
	opacity: 1;
	visibility: visible;
}

/* ── Drawer – pannello menu laterale ─────────────────────────────────────── */

.bee-menu-wrapper .bee-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 80vw;
	max-width: 80vw;
	height: 100%;
	height: 100dvh; /* supporto viewport dinamico su mobile */
	background-color: var( --bee-menu-bg, #ffffff );
	z-index: 9992;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX( -100% );
	transition: transform var( --bee-speed, 300ms ) ease;
}

.bee-menu-wrapper.is-open .bee-drawer {
	transform: translateX( 0 );
}

/* Contenuto interno del drawer – il padding viene sovrascritto dal PHP */
.bee-menu-wrapper .bee-drawer-inner {
	padding: 40px 30px;
}

/* ── Logo nel drawer (sopra le voci di menu) ────────────────────────────── */

.bee-menu-wrapper .bee-drawer-logo {
	margin-bottom: 28px;
}

/* Link alla homepage attorno al logo: nessuno spazio extra sotto l'immagine */
.bee-menu-wrapper .bee-drawer-logo a {
	display: inline-block;
	line-height: 0;
}

.bee-menu-wrapper .bee-drawer-logo img {
	display: block;
	width: var( --bee-logo-width, 140px );
	max-width: 100%;
	height: auto;
}

/* ── Testo informativo (sotto le voci di menu) ──────────────────────────── */

.bee-menu-wrapper .bee-drawer-info {
	margin-top: 28px;
	font-size: 0.875rem;
	line-height: 1.6;
	opacity: 0.85;
}

.bee-menu-wrapper .bee-drawer-info p {
	margin: 0 0 8px;
}

.bee-menu-wrapper .bee-drawer-info p:last-child {
	margin-bottom: 0;
}

/* ── Icone social ───────────────────────────────────────────────────────── */

.bee-menu-wrapper .bee-social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.bee-menu-wrapper .bee-social a {
	display: inline-flex;
	color: var( --bee-social-color, #333333 );
	transition: opacity 0.15s ease;
}

.bee-menu-wrapper .bee-social a:hover {
	opacity: 0.65;
}

.bee-menu-wrapper .bee-social svg {
	width: var( --bee-social-size, 24px );
	height: var( --bee-social-size, 24px );
	fill: currentColor;
}

/* ── Menu di navigazione WordPress ──────────────────────────────────────── */

.bee-menu-wrapper .bee-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bee-menu-wrapper .bee-nav-menu li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.bee-menu-wrapper .bee-nav-menu li:last-child {
	border-bottom: none;
}

.bee-menu-wrapper .bee-nav-menu a {
	display: block;
	padding: 12px 0;
	text-decoration: none;
	color: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: opacity 0.15s ease;
}

.bee-menu-wrapper .bee-nav-menu a:hover {
	opacity: 0.65;
}

/* ── Sottomenu ad accordion ──────────────────────────────────────────────── */

.bee-menu-wrapper .bee-nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 8px 16px;
}

/* Con accordion attivo (JS): sottomenu chiusi di default */
.bee-menu-wrapper .bee-nav-menu li.bee-has-children > .sub-menu {
	display: none;
}

.bee-menu-wrapper .bee-nav-menu li.bee-has-children.bee-submenu-open > .sub-menu {
	display: block;
}

/* Voce con figli: link e freccia affiancati */
.bee-menu-wrapper .bee-nav-menu li.bee-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.bee-menu-wrapper .bee-nav-menu li.bee-has-children > a {
	flex: 1;
}

.bee-menu-wrapper .bee-nav-menu li.bee-has-children > .sub-menu {
	flex-basis: 100%;
}

/* Bottone freccia del sottomenu */
.bee-menu-wrapper .bee-submenu-toggle {
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}

/* Freccia disegnata in CSS, ruota quando il sottomenu è aperto */
.bee-menu-wrapper .bee-submenu-toggle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate( -50%, -65% ) rotate( 45deg );
	transition: transform 0.2s ease;
}

.bee-menu-wrapper li.bee-submenu-open > .bee-submenu-toggle::before {
	transform: translate( -50%, -35% ) rotate( 225deg );
}

.bee-menu-wrapper .bee-nav-menu .sub-menu li {
	border-bottom: none;
}

.bee-menu-wrapper .bee-nav-menu .sub-menu a {
	font-size: 0.9rem;
	padding: 8px 0;
	opacity: 0.75;
}

/* ── Blocca scroll del body quando il drawer è aperto ───────────────────── */

body.bee-menu-open {
	overflow: hidden;
}

/* ── Messaggio placeholder (visibile nel builder senza menu selezionato) ── */

.bee-menu-notice {
	padding: 14px 18px;
	background: #f0f0f1;
	border-left: 4px solid #c3c4c7;
	color: #50575e;
	font-size: 0.875rem;
	margin: 0;
}