/*
 * Abello Restyling — header e navigazione ("l'insegna").
 * Fascia in ghisa su tutte le pagine, logo a colori su una targa color carta.
 * Pagine con copertina (template "trasparent"), da 1190 px: allo scroll la targa sfuma nel logo negativo
 * e l'header si compatta (stesso meccanismo del child originale: classi .scroll-down, .hide-desktop/.hide-mobile).
 * Markup: header.php del tema genitore, invariato. Solo variabili di tokens.css.
 */

/* ---------------------------------------------------------------- Fascia */
.header,
.page-template-menu-trasparent .header,
.page-template-align-wide-fix-trasparent .header {
	background: var(--ab-color-dark);
	color: var(--ab-color-on-dark);
	padding: 0 var(--ab-gutter);
	box-shadow: inset 0 calc(-1 * var(--ab-border-hair)) 0 var(--ab-color-accent-on-dark);
	transition: none;
}
.header__content,
.page-template-menu-trasparent .header__content,
.page-template-align-wide-fix-trasparent .header__content {
	max-width: var(--ab-width-max);
	height: var(--ab-header-h);
	margin: 0 auto;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ab-space-7);
	transition: height var(--ab-duration-slow) var(--ab-ease);
}

/* Spazio sotto l'header fisso: sempre presente, anche sui template trasparenti (l'header ora è pieno) */
.spacer,
.page-template-menu-trasparent .spacer,
.page-template-align-wide-fix-trasparent .spacer,
.page-template-align-wide-fix .spacer,
.page-template-blank .spacer,
.page-template-contained-no-title .spacer { display: block; height: var(--ab-header-h) !important; }

/* Pagine senza copertina né hero: respiro tra header e titolo */
body:not(.page-template-align-wide-fix-trasparent):not(.page-template-menu-trasparent):not(.woocommerce-shop):not(.tax-product_cat):not(.tax-product_tag) #content {
	padding-top: var(--ab-space-7);
}

/* ---------------------------------------------------------------- Logo nel medaglione (proposta B, 2026-10-03)
   Sempre il logo a colori, su un'etichetta color carta con bordo ottone che pende sotto la nav;
   allo scroll si riduce. Il logo negativo che il tema stampa sui template trasparenti non si usa. */
.header .header__logo {
	display: grid;
	align-self: flex-start;
	align-items: start;
	color: var(--ab-color-on-dark);
	text-decoration: none;
	position: relative;
	z-index: 1;
}
.header .header__logo_white-img { display: none !important; }
.header .header__logo-img,
.header .header__logo-img.hide-desktop,
.page-template-menu-trasparent .header__logo-img,
.page-template-align-wide-fix-trasparent .header__logo-img {
	display: block !important;
	opacity: 1 !important;
	grid-area: 1 / 1;
	width: auto;
	height: var(--ab-logo-h);
	box-sizing: content-box;
	padding: var(--ab-medal-pad);
	background-color: var(--ab-color-bg);
	border-radius: var(--ab-medal-radius);
	box-shadow: 0 0 0 var(--ab-border-hair) var(--ab-color-accent-on-dark), var(--ab-shadow-medal);
	filter: none;
	transition: height var(--ab-duration-slow) var(--ab-ease), padding var(--ab-duration-slow) var(--ab-ease);
}
.scroll-down .header .header__logo-img { height: var(--ab-logo-h-compact); padding: var(--ab-medal-pad-compact); }

@media (min-width: 1190px) {
	/* header compatto dopo lo scroll */
	.scroll-down .header .header__content { height: var(--ab-header-h-compact); }
}

/* ---------------------------------------------------------------- Menu desktop */
@media (min-width: 1190px) {
	/* il genitore usa (max-width: 1190px) per il menu mobile: a 1190 px esatti si sovrapporrebbe al desktop */
	.icon-hamburger { display: none; }
	.header .menu {
		position: static;
		height: auto;
		margin: 0;
		padding: 0;
		background: transparent;
		transform: none;
		overflow: visible;
		display: flex;
		gap: var(--ab-space-2);
	}
	.header .menu li { width: auto; margin: 0; border: 0; }
}
.header .menu > li > a,
.page-template-menu-trasparent .menu li a,
.page-template-align-wide-fix-trasparent .menu li a {
	color: var(--ab-color-on-dark-muted);
	opacity: 1;
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
	font-weight: var(--ab-weight-medium);
	letter-spacing: var(--ab-tracking-ui);
	padding: var(--ab-space-3) var(--ab-space-3);
	text-decoration: none;
}
.header .menu > li > a:hover,
.header .menu > li > a:focus-visible,
.header .menu > li.current-menu-item > a,
.header .menu > li.current-menu-ancestor > a { color: var(--ab-color-on-dark); }
@media (min-width: 1190px) {
	.header .menu > li > a { box-shadow: inset 0 calc(-1 * var(--ab-border-hair)) 0 transparent; transition: box-shadow var(--ab-duration-fast) var(--ab-ease), color var(--ab-duration-fast) var(--ab-ease); }
	.header .menu > li > a:hover,
	.header .menu > li.current-menu-item > a,
	.header .menu > li.current-menu-ancestor > a { box-shadow: inset 0 calc(-1 * var(--ab-border-hair)) 0 var(--ab-color-accent-on-dark); }
}

/* Sottomenu (oggi il menu non ne ha: stile pronto se verranno aggiunti) */
.header .menu > li > ul {
	background: var(--ab-color-surface);
	border-radius: var(--ab-radius-1);
	box-shadow: var(--ab-shadow-2);
	padding: var(--ab-space-2);
}
.header .menu li ul > li > a,
.page-template-align-wide-fix-trasparent .menu li ul > li > a { color: var(--ab-color-text); border-radius: var(--ab-radius-1); font-weight: var(--ab-weight-regular); }
.header .menu li ul > li > a:hover { background: var(--ab-color-stage); color: var(--ab-color-text); }
.header .menu > li.menu-item-has-children > a::after { filter: invert(1); }

/* ---------------------------------------------------------------- Area rapida: Contatti + carrello */
.header__quick { margin-left: auto; color: var(--ab-color-on-dark); }
.header__quick ul { display: flex; align-items: center; gap: var(--ab-space-4); }
.header__quick ul li a,
.page-template-align-wide-fix-trasparent .header__quick ul li a { color: var(--ab-color-on-dark); }
.header__quick .evi a {
	display: inline-block;
	padding: var(--ab-space-3) var(--ab-space-5) !important;
	font-size: var(--ab-text-ui);
	font-weight: var(--ab-weight-semibold);
	color: var(--ab-color-on-action) !important;
	text-decoration: none;
}
.menu-item-type-woocommerce-cart { width: auto; height: auto; }
.header .menu-cart-total {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--ab-space-2) !important;
	color: var(--ab-color-on-dark);
}
.header .menu-cart-total svg { width: var(--ab-icon); height: var(--ab-icon); }
.header .menu-cart-total span {
	position: absolute;
	top: 0;
	right: 0;
	min-width: var(--ab-badge);
	height: var(--ab-badge);
	padding: 0 var(--ab-space-1);
	border-radius: var(--ab-radius-2);
	background: var(--ab-color-accent-on-dark);
	color: var(--ab-color-dark);
	font-size: var(--ab-text-xs);
	font-weight: var(--ab-weight-semibold);
	line-height: var(--ab-badge);
	text-align: center;
}

/* ---------------------------------------------------------------- Mobile e tablet (< 1190 px) */
@media (max-width: 1189.98px) {
	.header .header__content { height: var(--ab-header-h-mobile); padding-right: var(--ab-space-8); gap: var(--ab-space-4); }
	.spacer,
	.page-template-menu-trasparent .spacer,
	.page-template-align-wide-fix-trasparent .spacer { height: var(--ab-header-h-mobile) !important; }
	.header .header__logo-img, .header .header__logo-img.hide-desktop { height: var(--ab-logo-h-mobile); padding: var(--ab-medal-pad-compact); }
	.scroll-down .header .header__logo-img, .scroll-down .header .header__logo-img.hide-desktop { height: var(--ab-logo-h-compact); }

	.icon-hamburger { top: 50%; right: 0; transform: translateY(-50%); margin: 0; width: var(--ab-tap-lg); height: var(--ab-tap-lg); display: grid; align-content: center; justify-items: center; }
	.icon-hamburger span { width: var(--ab-icon-line); margin: var(--ab-space-1) 0; background: var(--ab-color-on-dark); }
	.menu-open .icon-hamburger span:nth-child(2) { transform: translateY(calc(var(--ab-space-1) + var(--ab-border-hair))) rotate(45deg); }
	.menu-open .icon-hamburger span:nth-child(3) { transform: translateY(calc(-1 * (var(--ab-space-1) + var(--ab-border-hair)))) rotate(-45deg); }

	/* pannello del menu: sotto l'header, senza coprire il logo */
	.header .menu {
		top: 100%;
		left: calc(-1 * var(--ab-gutter));
		right: calc(-1 * var(--ab-gutter));
		margin: 0;
		height: calc(var(--ab-vh) - var(--ab-header-h-mobile));
		padding: var(--ab-space-5) var(--ab-gutter) var(--ab-space-9);
		background: var(--ab-color-dark);
		box-shadow: inset 0 var(--ab-border-hair) 0 var(--ab-color-accent-on-dark);
		transition: transform var(--ab-duration-slow) var(--ab-ease);
	}
	.header .menu li { width: 100%; margin: 0; border-bottom: var(--ab-border-hair) solid color-mix(in srgb, var(--ab-color-on-dark-muted) 25%, transparent); }
	.header .menu > li > a {
		font-family: var(--ab-font-display);
		font-size: var(--ab-text-2xl);
		font-weight: var(--ab-weight-medium);
		letter-spacing: var(--ab-tracking-display);
		padding: var(--ab-space-4) 0;
		color: var(--ab-color-on-dark);
	}
	.header .menu > li.current-menu-item > a { color: var(--ab-color-accent-on-dark); }
	.menu-open .menu > li:last-child { margin-bottom: 0; }

	.header__quick ul { gap: var(--ab-space-2); }
}
@media (max-width: 560px) {
	.header__quick .evi a { padding: var(--ab-space-2) var(--ab-space-3) !important; font-size: var(--ab-text-sm); }
}

/* ================================================================ Navigazione sovrapposta (2026-10-03)
   Pagine con hero (copertina delle pagine "trasparent", hero di Shop e categorie): l'header è trasparente
   e sovrapposto alla foto; dopo 100 px di scroll (.scroll-down, script del tema) diventa nero all'80%.
   Pagine senza hero (prodotto, carrello, checkout, articolo, Contatti): sempre nero all'80%, con lo spazio sotto. */
.header,
.page-template-menu-trasparent .header,
.page-template-align-wide-fix-trasparent .header {
	background: var(--ab-color-nav-scrolled) !important;
	box-shadow: none;
	transition: background-color var(--ab-duration-slow) var(--ab-ease);
}
:is(.page-template-align-wide-fix-trasparent, .page-template-menu-trasparent, body:has(.hero-categoria)):not(.scroll-down):not(.menu-open) .header {
	background: transparent !important;
}
/* la hero parte da sotto l'header: niente spazio vuoto */
:is(.page-template-align-wide-fix-trasparent, .page-template-menu-trasparent, body:has(.hero-categoria)) .spacer { display: none !important; }
/* ombra in cima alla foto e altezza delle hero: in hero.css (caricato dopo) */