/* =========================================================================
   BNK17 — Navbar mobile "Dynamic Island"
   Markup in parts/header.html (wp:html .bnk17-mnav), logica in
   assets/js/bnk17-mobile-nav.js. Attiva solo ≤781px: sostituisce l'header
   standard, che resta invariato su desktop.
   ========================================================================= */

:root {
	--navbar-bg: #101010;                     /* sfondo pieno (a riposo) */
	--navbar-bg-scrolled: rgba(16, 16, 16, 0.72); /* semi-trasparente + blur allo scroll */
	--navbar-fg: #f0ede6;                     /* icone/testo */
	--navbar-accent: #be1623;                 /* badge carrello */
	--navbar-h: 60px;
	--navbar-h-scrolled: 52px;
	--navbar-radius: 28px;
	--navbar-side: 14px;                      /* margine laterale dell'isola */
}

/* nascosta ovunque di default: esiste solo su mobile */
.bnk17-mnav,
.bnk17-mnav__panel { display: none; }

@media (max-width: 781px) {

	/* header standard fuori su mobile; spazio in alto per l'isola fissa */
	header.wp-block-template-part > .wp-block-group { display: none; }
	body { padding-top: calc(var(--navbar-h) + 24px + env(safe-area-inset-top, 0px)); }

	/* ---- Isola ---- */
	.bnk17-mnav {
		display: block;
		position: fixed;
		top: calc(10px + env(safe-area-inset-top, 0px));
		left: var(--navbar-side);
		right: var(--navbar-side);
		height: var(--navbar-h);
		background: var(--navbar-bg);
		border-radius: var(--navbar-radius);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		z-index: 1000;
		animation: bnk17-mnav-in 250ms ease-out both;
		transition: all 0.3s ease;
	}
	/* allo scroll: vetro + isola più compatta */
	.bnk17-mnav.is-scrolled {
		height: var(--navbar-h-scrolled);
		background: var(--navbar-bg-scrolled);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	/* indicatore triangolare sotto il bordo inferiore centrale (tooltip pointer) */
	.bnk17-mnav::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -4px;
		width: 8px;
		height: 8px;
		background: inherit;
		transform: translateX(-50%) rotate(45deg);
		z-index: -1;
	}

	/* ---- Layout interno ---- */
	.bnk17-mnav__inner {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		padding: 0 20px;
	}

	/* icone: outline 24px, tap target 40px, feedback tattile */
	.bnk17-mnav__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0 -8px; /* compensa il tap target extra rispetto al padding 20px */
		padding: 0;
		background: none;
		border: none;
		color: var(--navbar-fg);
		transition: transform 0.15s ease;
	}
	.bnk17-mnav__icon:active { transform: scale(0.95); }
	.bnk17-mnav__icon svg { display: block; }

	/* logo: centrato in assoluto, indipendente dai lati */
	.bnk17-mnav__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		transition: transform 0.15s ease;
	}
	.bnk17-mnav__logo:active { transform: translateX(-50%) scale(0.95); }
	.bnk17-mnav__logo img {
		height: 34px;
		width: auto;
		display: block;
		filter: drop-shadow(0 0 6px rgba(190, 22, 35, 0.45)); /* glow: stacca sul fondo scuro */
		transition: height 0.3s ease;
	}
	/* isola compatta allo scroll → logo proporzionato */
	.bnk17-mnav.is-scrolled .bnk17-mnav__logo img { height: 28px; }

	/* badge numerico del carrello */
	.bnk17-mnav__cart { position: relative; }
	.bnk17-mnav__badge {
		position: absolute;
		top: 2px;
		right: -2px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--navbar-accent);
		color: var(--navbar-fg);
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		border-radius: 99px;
	}
	.bnk17-mnav__badge[hidden] { display: none; }

	/* ---- Pannello menu (hamburger) ---- */
	.bnk17-mnav__panel {
		display: block;
		position: fixed;
		top: calc(10px + env(safe-area-inset-top, 0px) + var(--navbar-h) + 8px);
		left: var(--navbar-side);
		right: var(--navbar-side);
		background: var(--navbar-bg);
		border-radius: 20px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		padding: 8px;
		z-index: 999;
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.bnk17-mnav__panel.is-open {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.bnk17-mnav__panel a {
		display: block;
		padding: 12px 16px;
		color: var(--navbar-fg);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--quantico, sans-serif);
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-size: 0.85rem;
		border-radius: 12px;
		transition: background 0.2s ease, transform 0.15s ease;
	}
	.bnk17-mnav__panel a:active {
		background: rgba(190, 22, 35, 0.18);
		transform: scale(0.98);
	}
	.bnk17-mnav__panel a + a { border-top: 1px solid rgba(255, 255, 255, 0.06); }
}

@keyframes bnk17-mnav-in {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.bnk17-mnav { animation: none; transition: none; }
	.bnk17-mnav__panel,
	.bnk17-mnav__icon,
	.bnk17-mnav__logo,
	.bnk17-mnav__panel a { transition: none; }
}