/**
 * HI Header Bottom Openmenu.
 *
 * La voce "Categorie principali" della riga inferiore dell'header e il pannello
 * a comparsa con intro e griglia categorie.
 *
 * Sfondo, altezza (52px + 1px di bordo superiore) e visibilita' per dispositivo
 * della riga restano all'Header Builder e al codice personalizzato del tema: qui
 * si dichiarano solo position, overflow e z-index, che servono al pannello per
 * posizionarsi sotto la riga e per coprire il contenuto della pagina.
 *
 * Misure in px: il rem di Impreza cambia sotto i 1280px.
 *
 * Selettori a due classi dentro il pannello: le regole del tema nell'header
 * (es. `.l-header a`) hanno specificita' minore e non vincono sui colori qui.
 */

/* --------------------------------------------------------------------------
 * Riga che ospita la barra
 * -------------------------------------------------------------------------- */

/*
 * Il pannello si posiziona rispetto alla riga, non rispetto alla cella: la riga
 * deve essere il contenitore posizionato e i wrapper Impreza intermedi devono
 * restare statici. `:has()` tiene le regole limitate alla riga che contiene
 * davvero la barra.
 */
.l-subheader:has(.hi-botbar) {
	position: relative;
	overflow: visible;
	z-index: 10;
}

.l-subheader-h:has(.hi-botbar),
.l-subheader-cell:has(.hi-botbar),
.w-html:has(.hi-botbar) {
	position: static;
}

/* --------------------------------------------------------------------------
 * Voce (trigger)
 * -------------------------------------------------------------------------- */

.hi-botbar {
	/* Statico apposta: il contenitore del pannello deve essere la riga. */
	position: static;
	display: inline-flex;
	max-width: 100%;
}

.hi-botbar__trigger {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-family: Onest, Inter, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hi-botbar__trigger:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.hi-botbar__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	font-size: 14px;
	line-height: 1;
	transform: rotate(45deg);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.hi-botbar__trigger[aria-expanded="true"] .hi-botbar__icon {
	transform: rotate(225deg);
}

/* --------------------------------------------------------------------------
 * Pannello
 * -------------------------------------------------------------------------- */

.hi-botbar__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-hig-bordo, #E3E8F0);
	background: var(--color-hig-bianco, #fff);
	box-shadow: 0 30px 50px -28px rgba(10, 19, 38, .35);
	text-align: left;

	/* Da chiuso non occupa spazio, non copre nulla e non e' raggiungibile con Tab
	 * (visibility:hidden lo toglie dal tab order, l'attributo inert dal JS lo
	 * toglie anche agli screen reader). */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.hi-botbar__panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* Il tema applica margini propri dentro l'header: azzero e ridichiaro. */
.hi-botbar__panel :where(p, ul, li) {
	margin: 0;
	padding: 0;
}

/*
 * Contenitore unico da 1240px come il resto dell'header, con gli stessi 32px di
 * padding laterale: cosi' la colonna intro parte esattamente sotto la voce della
 * barra a qualsiasi viewport.
 */
.hi-botbar__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 32px 44px;
}

.hi-botbar__inner.is-single-column {
	display: block;
}

/* --------------------------------------------------------------------------
 * Colonna intro
 * -------------------------------------------------------------------------- */

.hi-botbar__intro {
	flex: 0 0 300px;
	max-width: 300px;
	min-width: 0;
}

.hi-botbar__panel .hi-botbar__title {
	color: var(--color-hig-lnk-navy, #0A1326);
	font-family: Onest, Inter, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.hi-botbar__panel .hi-botbar__title + .hi-botbar__text {
	margin-top: 14px;
}

.hi-botbar__panel .hi-botbar__text {
	color: var(--color-hig-testo-secondario, #8B96A5);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Griglia categorie
 * -------------------------------------------------------------------------- */

/*
 * Flexbox e non grid: una griglia a 4 colonne lascerebbe allineata a sinistra
 * l'ultima riga incompleta, mentre qui justify-content:center la centra. Le card
 * tengono comunque la larghezza di una colonna su quattro anche quando sono meno
 * di quattro, perche' la base e' calcolata sulle colonne, non sul contenuto.
 */
.hi-botbar__grid {
	--hi-botbar-cols: 4;
	--hi-botbar-gap-x: 18px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px var(--hi-botbar-gap-x);
	flex: 1 1 0;
	min-width: 0;
}

.hi-botbar__panel .hi-botbar__card {
	/* I 0.02px tolti evitano che l'arrotondamento della calc faccia sforare la
	 * riga piena e mandi a capo la quarta card. */
	flex: 0 0 calc((100% - (var(--hi-botbar-cols) - 1) * var(--hi-botbar-gap-x)) / var(--hi-botbar-cols) - .02px);
	max-width: calc((100% - (var(--hi-botbar-cols) - 1) * var(--hi-botbar-gap-x)) / var(--hi-botbar-cols) - .02px);

	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-decoration: none;
}

.hi-botbar__panel .hi-botbar__card.is-plain {
	cursor: default;
}

.hi-botbar__panel .hi-botbar__card:focus-visible {
	outline: 2px solid var(--color-hig-primario, #2B72C7);
	outline-offset: 4px;
}

/* Riquadro fisso: tiene i nomi delle card allineati anche se le immagini hanno
 * proporzioni diverse o mancano del tutto. */
.hi-botbar__panel .hi-botbar__card-media {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 93px;
	height: 93px;
	max-width: 100%;
}

.hi-botbar__panel .hi-botbar__card-img {
	display: block;
	width: 93px;
	height: 93px;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.hi-botbar__panel .hi-botbar__card-name {
	color: var(--color-hig-lnk-navy, #0A1326);
	font-family: Onest, Inter, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 15.6px;
	letter-spacing: -.01em;
	transition: color .2s ease;
}

.hi-botbar__panel .hi-botbar__card:hover .hi-botbar__card-name,
.hi-botbar__panel .hi-botbar__card:focus-visible .hi-botbar__card-name {
	color: var(--color-hig-primario, #2B72C7);
}

/* --------------------------------------------------------------------------
 * Breakpoint
 * -------------------------------------------------------------------------- */

/* La riga sparisce sotto i 1040px dalle impostazioni dell'Header Builder: queste
 * regole servono solo se viene mostrata anche su schermi piu' stretti. */
@media (max-width: 1023px) {
	.hi-botbar__grid {
		--hi-botbar-cols: 3;
	}
}

@media (max-width: 900px) {
	.hi-botbar__inner {
		display: block;
		padding: 32px 24px 36px;
	}

	.hi-botbar__intro {
		max-width: none;
		margin-bottom: 32px;
	}

	.hi-botbar__panel .hi-botbar__title {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.hi-botbar__grid {
		--hi-botbar-cols: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hi-botbar__panel,
	.hi-botbar__icon,
	.hi-botbar__panel .hi-botbar__card-name {
		transition: none;
	}
}