/* ============================================================
   Logo grande fisso allo scroll — opt-in: body.hero-logo-fixed
   Progresso scroll in --mt-p (0=in cima, 1=scrollato).
   Desktop: logo piccolo->grande crescendo (a cavallo) scrollando.
   Mobile: INVERSO — grande a cavallo in cima, rientra piccolo
           nella toolbar scrollando. Titolo NON fisso su mobile.
   ============================================================ */

/* --- Header e fascia (DESKTOP) --- */
.hero-logo-fixed #masthead{ position:sticky; top:0; z-index:100; }
.hero-logo-fixed .entry-hero{ position:sticky; top: var(--mt-head-h, 110px); z-index:90; }
/* ammorbidisce lo stacco tra fascia titolo fissa e contenuto che scorre sotto (ombra) */
.hero-logo-fixed .entry-hero-container-inner{ transition: box-shadow .3s ease; }
.hero-logo-fixed.is-scrolled .entry-hero-container-inner{ box-shadow: 0 16px 26px -12px rgba(0,0,0,.45); }

/* Default: la striscia di maioliche sotto al menu NON compare su queste pagine.
   :not(.mtc-sep-tiles) esclude il separatore sopra "I più venduti" (stessa classe). */
.hero-logo-fixed .mt-menu-tiles:not(.mtc-sep-tiles){ display:none; }
/* 2a opzione (body.hero-show-tiles): la striscia compare e SPARISCE allo scroll */
.hero-logo-fixed.hero-show-tiles .mt-menu-tiles:not(.mtc-sep-tiles){ display:block; opacity: calc(1 - var(--mt-p, 0)); }

/* --- Logo overlay (DESKTOP): piccolo -> grande, sale un po' a fine zoom --- */
.hero-logo-fixed .mt-hero-logo{
	position:fixed; left:50%; top: var(--mt-head-h, 110px);
	transform: translate(-50%, calc(-50% + (-20px * var(--mt-p, 0)))) scale(calc(0.4 + 0.6 * var(--mt-p, 0)));
	transform-origin:center center;
	z-index:120; pointer-events:none;
	opacity: var(--mt-p, 0);
	will-change: transform, opacity;
}
/* Il logo overlay e' un collegamento alla home. Il contenitore resta trasparente ai
   clic (pointer-events:none) per non coprire l'intestazione sottostante: li riattiva
   SOLO l'ancora, cosi' il logo si puo' toccare ma il resto dell'area no. */
.hero-logo-fixed .mt-hero-logo a{ display:block; line-height:0; pointer-events:auto; }
/* Su desktop il logo e' invisibile finche' non si scorre (opacity:0), ma un
   elemento invisibile riceve comunque il mouse: la sua ancora cadeva sul centro
   della barra e rubava il passaggio alle voci di menu li' sotto — il sottomenu
   di «News» si apriva solo dalla freccetta, che sporgeva appena fuori. */
@media (min-width: 1025px){
	.hero-logo-fixed:not(.is-scrolled) .mt-hero-logo a{ pointer-events:none; }
}
.hero-logo-fixed .mt-hero-logo img{ display:block; width:200px; height:auto; }

/* Logo toolbar desktop: sfuma mentre l'overlay cresce */
.hero-logo-fixed .site-branding{ opacity: calc(1 - var(--mt-p, 0)); }

/* Menu desktop: scivola a sinistra quando scrollato */
.hero-logo-fixed .site-header-item-main-navigation{ transition:transform .3s ease; }
.hero-logo-fixed.is-scrolled .site-header-item-main-navigation{ transform: translateX(-440px); }
/* transizione SECCA (body.hero-logo-snap): il menu scatta, niente animazione */
.hero-logo-fixed.hero-logo-snap .site-header-item-main-navigation{ transition:none; }

/* Desktop stretto (1025-1450px): menu a sinistra del logo centrato, su 2 righe
   se non ci sta. Niente shift (uscirebbe dal bordo). Sotto 1025px: hamburger. */
@media (min-width: 1025px) and (max-width: 1450px){
	/* collasso la sezione-logo piccola: libera la meta' sinistra per il menu */
	.hero-logo-fixed.is-scrolled .site-header-main-section-left{ display:none; }
	.hero-logo-fixed.is-scrolled .site-main-header-inner-wrap.site-header-row{ grid-template-columns:1fr !important; }
	.hero-logo-fixed.is-scrolled .site-header-item-main-navigation{
		transform:none !important;
		margin-right:auto;
		/* larghezza fissa: con max-width il flex-item collasserebbe a min-content */
		flex:0 0 calc(50% - 130px);
	}
	.hero-logo-fixed.is-scrolled .site-header-item-main-navigation .header-menu-container,
	.hero-logo-fixed.is-scrolled .site-header-item-main-navigation ul.menu{
		flex-wrap:wrap; justify-content:flex-start;
	}
}

/* ============================================================
   MOBILE (<=1024px)
   ============================================================ */
@media (max-width: 1024px){
	/* il titolo NON e piu fisso: scorre normalmente */
	.hero-logo-fixed .entry-hero{ position:static; top:auto; }
	/* niente shift menu (c'e l'hamburger) */
	.hero-logo-fixed.is-scrolled .site-header-item-main-navigation{ transform:none; }
	/* la striscia di maioliche (2a opzione) NON si vede su mobile (ma non il separatore) */
	.hero-logo-fixed.hero-show-tiles .mt-menu-tiles:not(.mtc-sep-tiles){ display:none !important; }

	/* SOLO il menu in alto resta fisso (sticky qui non regge: un antenato lo
	   annulla). --mt-ab e' quanto resta visibile della barra di WordPress, che
	   il js misura a ogni scroll: cosi' l'header le sta sotto quando c'e' e
	   sale a filo quando e' scorsa via, senza distinguere i casi a mano. */
	.hero-logo-fixed #masthead{ position:fixed; top:var(--mt-ab, 0px); left:0; right:0; width:100%; z-index:100; }
	/* l'header e' fuori dal flusso: il contenuto va spinto sotto di esso e sotto
	   la sporgenza del logo (--mt-extra, misurata dal js). */
	/* Solo l'altezza della barra, non il suo bordo inferiore: lo scostamento per
	   la barra di WordPress ce l'ha gia' il documento (html.wp-toolbar), e
	   sommarlo qui lo contava due volte. */
	.hero-logo-fixed #inner-wrap{ padding-top: calc(var(--mt-head-h, 90px) + var(--mt-extra, 0px)); }

	/* niente testo del nome sito */
	.hero-logo-fixed .mobile-site-branding .site-title-wrap{ display:none; }
	/* il logo reale mobile resta nascosto: l'overlay E' il logo (sempre centrato).
	   Lo teniamo solo per dare altezza alla toolbar. */
	.hero-logo-fixed .mobile-site-branding{ opacity:0; }
	/* il logo "fantasma" da' l'altezza alla toolbar (!important: Kadence lo sovrascrive) */
	.hero-logo-fixed .mobile-site-branding .custom-logo{ width:auto !important; height:53px !important; max-height:53px !important; }
	/* comprime la riga header mobile => toolbar molto piu bassa (azzera padding catena) */
	.hero-logo-fixed .site-mobile-header-wrap .site-header-row-container-inner,
	.hero-logo-fixed .site-mobile-header-wrap .site-header-row,
	.hero-logo-fixed .site-mobile-header-wrap .site-header-item,
	.hero-logo-fixed .site-mobile-header-wrap .site-branding{ padding-top:3px !important; padding-bottom:3px !important; margin-top:0 !important; margin-bottom:0 !important; min-height:0 !important; }

	/* overlay: GRANDE e un po' piu in alto in cima (a cavallo)
	   -> a fine scroll ESATTAMENTE centrato nella toolbar. Sempre visibile. */
	.hero-logo-fixed .mt-hero-logo{
		display:block;
		/* A riposo il logo sta piu' su (-8px): sporgeva troppo sotto la toolbar.
		   Non si puo' alzare oltre, o senza la barra di amministrazione toccherebbe
		   il bordo dello schermo. A fine scroll si centra nella toolbar da se':
		   --mt-head-bottom e' calcolata, non riletta, quindi nessuna correzione. */
		top: calc(var(--mt-head-bottom, 55px) - 18px * (1 - var(--mt-p, 0)) - var(--mt-head-h, 48px) * 0.5 * var(--mt-p, 0));
		/* scrollato resta al 72%: la toolbar e' alta apposta per contenerlo */
		transform: translate(-50%, -50%) scale(calc(1 - 0.28 * var(--mt-p, 0)));
		opacity: 1;
	}
	.hero-logo-fixed .mt-hero-logo img{ width:188px; }
}