/**
 * HEADER — restyling AgriGiardiSocial (fase 2).
 *
 * Tutti i colori, le spaziature e le ombre provengono dai token di
 * ags-tokens.css: qui nessun valore cromatico hardcoded.
 *
 * Questo file viene caricato DOPO theme.css e PRIMA degli \3c style> pushed
 * dalle pagine: per specificita' pari vince sul tema ma perde sugli push.
 * Le regole dell'header-userpanel che devono battere il tema Hyper
 * (caricato piu' tardi dalle pagine) vivono nel push \3c style> del component.
 */

/** CHROME HEADER PUBBLICO **/

/* Lo sfondo vive sull'<header> (assoluto/fisso/trasparente): il <nav> interno
   deve restare sempre trasparente. Scoperto per id perche' il tema Hyper, caricato
   anche dalle pagine con filtri (es. cerca utenti), forza .navbar a sfondo bianco
   sotto i 992px. */
#navbar .navbar
{
	background: transparent;
}

.header-absolute
{
	position:   absolute;
	top:        0;
	width:      100%;
	z-index:    100;
	background: var(--ags-white);
}

/* Transizione morbida fra stato assoluto, trasparente e fisso su scroll
   (ereditata dal tema, ristretta alle proprieta' che cambiano davvero). */
.header
{
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Stato fisso su scroll: sfondo chiaro opaco, bordo leggero, ombra morbida
   (sostituisce la vecchia ombra nera piena). */
.header.header-fixed
{
	position:        fixed;
	top:             0;
	width:           100%;
	z-index:         100;
	background:      var(--ags-white);
	border-bottom:   1px solid var(--ags-border);
	box-shadow:      var(--ags-shadow-soft);
}

/* Stato trasparente sopra l'hero scuro della home. */
.header-light,
.header-light .header__bottom
{
	background: transparent;
}

.header .header__bottom
{
	padding-block: var(--ags-space-2);
}

/* Menu mobile aperto: il toggle inline aggiunge/toglie "blurred" su #navbar. */
.header.blurred
{
	background:         color-mix(in srgb, var(--ags-cream) 88%, transparent);
	backdrop-filter:    blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Aperto sopra l'hero scuro lo sfondo diventa chiaro: le icone tornano scure, altrimenti
   la X di chiusura, la condivisione e le notifiche restano bianche su crema. */
.header-light.blurred .ags-share-btn
{
	color: var(--ags-forest);
}

.header-light.blurred .navbar-toggler,
.header-light.blurred .ags-notifiche__btn
{
	background:   var(--ags-white);
	border-color: var(--ags-border);
	color:        var(--ags-ink);
}

.header-light.blurred .navbar-toggler--icon,
.header-light.blurred .navbar-toggler--icon::before,
.header-light.blurred .navbar-toggler--icon::after
{
	background-color: var(--ags-forest);
}

#navbar + div
{
	margin-top: 0;
}

/** LOGO — dimensione costante fra desktop e mobile (38px) **/

.header .logo,
.topbar-custom .logo
{
	display:         inline-flex;
	align-items:     center;
}

.header .logo img,
.topbar-custom .logo img
{
	display:    block;
	height:     38px;
	width:      auto;
	max-width:  none;
}

/** MENU PRINCIPALE (.mainmenu — nessun sottomenu nel markup, solo voci semplici) **/

.mainmenu ul
{
	list-style: none;
	padding:    0;
	margin:     0;
}

/* Voce di menu: pila verticale di default, inline dal breakpoint desktop
   (era del tema: e' la regola che rende orizzontale il menu su lg). */
.mainmenu ul li
{
	position:  relative;
	display:   block;
}

@media (min-width: 992px)
{
	.mainmenu ul li
	{
		display: inline-block;
	}
}

.header .navbar-nav.mainmenu
{
	margin-bottom: 0;
}

.mainmenu ul li a
{
	position:     relative;
	display:      block;
	color:        var(--ags-ink);
	font-weight:  500;
	text-decoration: none;
}

.mainmenu ul li:hover > a,
.mainmenu ul li.active > a
{
	text-decoration: none;
}

/* Il tema imponeva il padding con !important: con il tema fuori dalla
   build la specificita' dell'id basta, niente piu' !important. */
#navbar .mainmenu li > a
{
	padding: 10px 14px;
}

@media (min-width: 992px)
{
	/* Indicatore sottile di hover e di pagina corrente (2px). */
	.mainmenu ul li a::after
	{
		content:          '';
		position:         absolute;
		left:             14px;
		right:            14px;
		bottom:           4px;
		height:           2px;
		border-radius:    1px;
		background-color: var(--ags-green);
		transform:        scaleX(0);
		transform-origin: left;
		transition:       transform 0.25s ease-in-out;
	}

	.mainmenu ul li a:hover::after,
	.mainmenu ul li a:focus-visible::after,
	.mainmenu ul li.active > a::after
	{
		transform: scaleX(1);
	}

	.mainmenu ul li.active > a
	{
		color:       var(--ags-forest);
		font-weight: 600;
	}

	.mainmenu ul li.active > a::after
	{
		background-color: var(--ags-forest);
	}
}

/* Fra 992 e 1200 px le voci (Post e "Bacheca annunci di lavoro" compaiono anche all'ospite)
   con il padding pieno spingono Accedi oltre il bordo: si stringe lo spazio fra una voce e l'altra */
@media (min-width: 992px) and (max-width: 1199.98px)
{
	#navbar .mainmenu li > a
	{
		padding: 10px 8px;
	}

	.mainmenu ul li a::after
	{
		left:  8px;
		right: 8px;
	}
}

/** HEADER-LIGHT: testo bianco sopra l'hero scuro **/

.header-light .mainmenu ul li a,
.header-light .mainmenu ul li:hover > a,
.header-light .mainmenu ul li.active > a
{
	color: var(--ags-white);
}

@media (min-width: 992px)
{
	.header-light .mainmenu ul li a::after
	{
		background-color: var(--ags-white);
	}

	.header-light .mainmenu ul li.active > a::after
	{
		background-color: var(--ags-white);
	}
}

.header-light .ags-share-btn
{
	color: var(--ags-white);
}

/** TOGLER MENU MOBILE — touch target 44px, focus visibile da tastiera **/

.navbar-toggler
{
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	/* Il tema azzerava il padding del toggler: senza di lui tornerebbe
	   quello di Bootstrap, che stringerebbe l'hamburger nei 44px. */
	padding:         0;
	border:          1px solid var(--ags-border);
	border-radius:   var(--ags-radius-control);
	background:      var(--ags-white);
}

.header-light .navbar-toggler
{
	background:      color-mix(in srgb, var(--ags-white) 16%, transparent);
	border-color:    color-mix(in srgb, var(--ags-white) 45%, transparent);
}

/* Bootstrap disegna un anello nero da 4px anche dopo un tocco col dito: per la tastiera
   basta l'outline di :focus-visible qui sotto. */
.navbar-toggler:focus
{
	box-shadow: none;
}

/* Il tema azzera l'outline su :focus: lo ripristiniamo per la tastiera. */
.navbar-toggler:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.navbar-toggler--icon,
.navbar-toggler--icon::before,
.navbar-toggler--icon::after
{
	background-color: var(--ags-forest);
}

.header-light .navbar-toggler--icon,
.header-light .navbar-toggler--icon::before,
.header-light .navbar-toggler--icon::after
{
	background-color: var(--ags-white);
}

/* Geometria dell'hamburger: barra centrale + due pseudo-barre sovrapposte sulla stessa
   riga di base. A menu chiuso si separano in tre (hamburger); a menu aperto la centrale
   sparisce e le altre due ruotano intorno allo STESSO punto (il proprio centro, che
   coincide con quello del bottone) per formare la X. Prima la barra centrale stessa
   diventava una delle due diagonali con rotate+translateY combinati: la composizione
   spostava il punto di rotazione e la X risultava decentrata verso l'alto a sinistra. */
.navbar-toggler--icon,
.navbar-toggler--icon::before,
.navbar-toggler--icon::after
{
	transition: transform 0.3s linear;
}

.navbar-toggler--icon
{
	position:   relative;
	display:    inline-block;
	width:      27px;
	height:     2px;
	/* Nascosta con visibility, non con opacity: l'opacity di un elemento si applica
	   anche alle sue pseudo-barre (sono discendenti nell'albero di rendering), quindi
	   sparivano anche loro e a menu aperto non restava alcuna X visibile. La visibility
	   invece e' ereditata ma un discendente puo' dichiararsi di nuovo "visible". */
	visibility: hidden;
}

.navbar-toggler--icon::before,
.navbar-toggler--icon::after
{
	position:   absolute;
	content:    "";
	left:       0;
	top:        0;
	width:      100%;
	height:     2px;
	visibility: visible;
}

.navbar-toggler--icon::before
{
	transform: rotate(45deg);
}

.navbar-toggler--icon::after
{
	transform: rotate(-45deg);
}

/* Menu chiuso: le tre barre tornano a riposo, separate sopra/sotto la centrale. */
.navbar-toggler.collapsed .navbar-toggler--icon
{
	visibility: visible;
}

.navbar-toggler.collapsed .navbar-toggler--icon::before
{
	transform: translateY(-7px);
}

.navbar-toggler.collapsed .navbar-toggler--icon::after
{
	transform: translateY(7px);
}

/** PANNELLO MENU MOBILE (Bootstrap collapse #navbarNavAltMarkup) **/

@media (max-width: 991.98px)
{
	.header .navbar-collapse
	{
		margin-top:    var(--ags-space-2);
		padding:       var(--ags-space-1);
		background:    var(--ags-white);
		border:        1px solid var(--ags-border);
		border-radius: var(--ags-radius-container);
		box-shadow:    var(--ags-shadow-soft);
	}

	/* L'header-userpanel usa lo stesso collapse, full-bleed sotto la barra. */
	.ags-mobile-menu
	{
		background:    var(--ags-white);
		border-bottom: 1px solid var(--ags-border);
		box-shadow:    var(--ags-shadow-soft);
	}

	#navbar .navbar-collapse .mainmenu ul li a,
	.ags-mobile-menu .mainmenu ul li a
	{
		display:      flex;
		align-items:  center;
		min-height:   44px;
		color:        var(--ags-ink);
	}

	/* Separatore fra le voci del menu mobile, l'ultima senza bordo
	   (era del tema, colore riportato su token). */
	.mainmenu ul li a
	{
		border-bottom: 1px solid var(--ags-border);
	}

	.mainmenu ul li:last-child a
	{
		border-bottom: none;
	}

	/* Pagina corrente su mobile: fondo sabbia + indicatore laterale sottile. */
	#navbar .navbar-collapse .mainmenu ul li.active > a,
	.ags-mobile-menu .mainmenu ul li.active > a
	{
		background:    var(--ags-sand);
		color:         var(--ags-forest);
		font-weight:   600;
		border-radius: var(--ags-radius-control);
		box-shadow:    inset 3px 0 0 0 var(--ags-forest);
	}

	.ags-header__actions
	{
		padding:       var(--ags-space-2) var(--ags-space-2) var(--ags-space-1);
	}
}

/** AZIONI HEADER — Accedi discreto, Registrati unico pulsante pieno **/

.ags-header__actions
{
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	gap:            var(--ags-space-1);
}

@media (min-width: 992px)
{
	.ags-header__actions
	{
		flex-direction: row;
		align-items:    center;
		margin-left:    var(--ags-space-3);
	}
}

.ags-btn-cta
{
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ags-space-1);
	min-height:      44px;
	padding:         10px 20px;
	border:          1px solid var(--ags-forest);
	border-radius:   var(--ags-radius-control);
	background:      var(--ags-forest);
	color:           var(--ags-white);
	font-family:     inherit;
	font-size:       0.9375rem;
	font-weight:     600;
	line-height:     1.2;
	text-decoration: none;
	white-space:     nowrap;
	cursor:          pointer;
	transition:      background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ags-btn-cta:hover
{
	background: var(--ags-green);
	border-color: var(--ags-green);
	color:      var(--ags-white);
}

.ags-btn-cta:active
{
	background: var(--ags-forest);
}

.ags-btn-cta:disabled,
.ags-btn-cta.disabled
{
	opacity:   0.55;
	cursor:    not-allowed;
}

.ags-btn-cta--sm
{
	min-height: 38px;
	padding:    7px 14px;
	font-size:  0.875rem;
}

@media (max-width: 575.98px)
{
	.ags-btn-cta--sm
	{
		min-height: 44px;
	}
}

/* Pulsante pieno come .ags-btn-cta (Registrati), ma in un verde piu' chiaro: le due azioni
   restano vicine (stesso raggio, stessa altezza) ma "Accedi" pesa meno perche' non e' l'azione
   primaria. Prima era un link solo testo: su sfondo bianco (menu mobile) o chiaro restava
   troppo poco visibile. */
.ags-link-login
{
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ags-space-1);
	min-height:      44px;
	padding:         10px 20px;
	border:          1px solid var(--ags-green);
	border-radius:   var(--ags-radius-control);
	background:      var(--ags-green);
	color:           var(--ags-white);
	font-family:     inherit;
	font-size:       0.9375rem;
	font-weight:     600;
	line-height:     1.2;
	text-decoration: none;
	white-space:     nowrap;
	cursor:          pointer;
	transition:      background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ags-link-login:hover
{
	background:   var(--ags-forest);
	border-color: var(--ags-forest);
	color:        var(--ags-white);
}

/* Stessa variante compatta anche per "Accedi": nella topbar delle pagine con avatar
   affianca "Registrati" in .ags-btn-cta--sm, devono restare alti uguali. Dopo la regola
   base (non prima): a parita' di specificita' vince l'ultima, altrimenti il min-height
   di 44px sopra prevaleva e "Accedi" restava piu' alto di "Registrati". */
.ags-link-login--sm
{
	min-height: 38px;
	padding:    7px 14px;
	font-size:  0.875rem;
}

@media (max-width: 575.98px)
{
	.ags-link-login--sm
	{
		min-height: 44px;
	}
}

/** SHARE — #share-icon viene reso visibile su mobile dagli script inline **/

.ags-share-btn
{
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	width:         40px;
	height:        40px;
	margin-left:   var(--ags-space-1);
	border:        0;
	border-radius: var(--ags-radius-control);
	background:    transparent;
	color:         var(--ags-forest);
	cursor:        pointer;
}

.ags-share-btn:hover
{
	background: var(--ags-sand);
	color:      var(--ags-green);
}

/** AVATAR E DROPDOWN **/

.ags-avatar-btn
{
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	border:        0;
	background:    transparent;
	line-height:   1;
	cursor:        pointer;
}

.ags-avatar
{
	display:    block;
	width:      36px;
	height:     36px;
	border:     1px solid var(--ags-border);
	border-radius: 50%;
	background: var(--ags-sand);
	-o-object-fit: cover;
	   object-fit: cover;
}

/* Iniziali al posto della foto quando l'utente non ne ha caricata una: stesso
   riquadro dell'avatar, senza la fotografia generica "nessuna immagine". */
.ags-avatar--iniziali
{
	align-items:     center;
	color:           var(--ags-forest);
	display:         flex;
	font-size:       0.8125rem;
	font-weight:     700;
	justify-content: center;
	letter-spacing:  0.02em;
	-webkit-user-select:     none;
	   -moz-user-select:     none;
	        user-select:     none;
}

/* Nell'header l'avatar ha la stessa misura del pulsante notifiche e il suo contenitore
   non aggiunge spazio sotto l'immagine: i due quadrati restano sulla stessa linea. */
.ags-header__actions .dropdown
{
	align-items: center;
	display:     flex;
}

.ags-avatar-btn .ags-avatar
{
	height: 40px;
	width:  40px;
}

/* Nel menu a scomparsa l'avatar diventa una riga intera: foto, nome e freccia. */
@media (max-width: 991.98px)
{
	.ags-header__actions .dropdown
	{
		display: block;
	}

	.ags-avatar-btn
	{
		gap:           var(--ags-space-2);
		justify-content: flex-start;
		min-height:    52px;
		padding:       6px var(--ags-space-1);
		width:         100%;
		border-radius: var(--ags-radius-control);
		color:         var(--ags-ink);
		text-align:    left;
	}

	.ags-avatar-btn:hover,
	.ags-avatar-btn[aria-expanded="true"]
	{
		background: var(--ags-sand);
	}

	.ags-avatar-btn__nome
	{
		flex:        1;
		font-size:   0.9375rem;
		font-weight: 600;
		line-height: 1.3;
	}

	.ags-avatar-btn__freccia
	{
		color:      var(--ags-muted);
		font-size:  0.75rem;
		transition: transform 0.2s ease;
	}

	.ags-avatar-btn[aria-expanded="true"] .ags-avatar-btn__freccia
	{
		transform: rotate(180deg);
	}

	/* Nel menu delle pagine con topbar le voci sono a tutta larghezza con 16px di rientro:
	   8px qui + 8px del pulsante allineano la foto al testo delle voci. Niente spazio
	   sopra, la lista ha gia' il suo margine inferiore. */
	.ags-mobile-menu .ags-header__actions
	{
		padding: 0 var(--ags-space-1) var(--ags-space-2);
	}

	/* Stesso sottomenu in linea anche nel menu delle pagine con topbar (.ags-mobile-menu). */
	#navbar .ags-header__actions .dropdown-menu,
	.ags-mobile-menu .ags-header__actions .dropdown-menu
	{
		position:   static;
		box-shadow: none;
		margin-top: 4px;
		width:      100%;
	}
}

#navbar .dropdown-menu,
.topbar-custom .dropdown-menu
{
	border:      1px solid var(--ags-border);
	border-radius: var(--ags-radius-container);
	box-shadow:  var(--ags-shadow-soft);
}

#navbar .dropdown-item,
.topbar-custom .dropdown-item
{
	color: var(--ags-ink);
}

#navbar .dropdown-item:hover,
#navbar .dropdown-item:focus,
.topbar-custom .dropdown-item:hover,
.topbar-custom .dropdown-item:focus
{
	background: var(--ags-sand);
	color:      var(--ags-ink);
}

#navbar .dropdown-header
{
	color:     var(--ags-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

/** BOTTONI DEL TEMA — ricollegati ai token (usati anche fuori dall'header) **/

.default-btn,
.default-btn.reverse,
.header__more .default-btn
{
	--shadow:         var(--ags-shadow-soft);
	background-color: var(--ags-forest);
}

.default-btn.reverse span
{
	color:      var(--ags-cream);
	font-weight: 600;
}

.default-btn.reverse:hover
{
	background-color: var(--ags-forest);
	--shadow:         var(--ags-shadow-soft);
}

/** VARIE — regole non di header che vivono storicamente in questo file **/

/* Chiaro e non verde di proposito: il bottone galleggia su hero scuri, sezioni
   forest (.home-cta-banner) e sfondo crema. Pieno di --ags-forest si confondeva
   con le sezioni dello stesso colore. */
.scrollToTop
{
	position:      fixed;
	right:         5%;
	bottom:        -30%;
	z-index:       9;
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         44px;
	height:        44px;
	border:        1px solid var(--ags-border);
	border-radius: 50%;
	background:    var(--ags-white);
	box-shadow:    var(--ags-shadow-soft);
	color:         var(--ags-forest);
	/* Senza il tema, Bootstrap sottolinea gli <a>: il bottone e' solo icona. */
	text-decoration: none;
	opacity:       0;
	transition:    bottom 0.3s ease, opacity 0.3s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Stato visibile: la classe la toggla frontend.js oltre i 300px di scroll
   (prima li scriveva in linea il main.js del tema). */
.scrollToTop.is-visible
{
	/* Il pulsante WhatsApp e' fisso nello stesso angolo (56px piu' 20px dal bordo):
	   il pulsante torna-su resta sempre sopra di lui, mai sovrapposto. */
	bottom:  90px;
	opacity: 1;
}

.scrollToTop:hover
{
	background: var(--ags-forest);
	color:      var(--ags-white);
}

/* Il markup usa <i>, ma FontAwesome JS puo' rimpiazzarlo con <svg>. */
.scrollToTop i,
.scrollToTop svg
{
	color:       inherit;
	font-size:   1.5rem;
	line-height: 1;
}

/* Su mobile la riga dei crediti è centrata e a fine pagina finirebbe sotto i pulsanti:
   quando entra in vista salgono sopra di lei insieme (frontend.js misura l'altezza e
   sposta entrambi della stessa quantità, così restano alla stessa distanza di sempre
   invece di separarsi). */
@media (max-width: 575.98px)
{
	.scrollToTop,
	.whatsapp-float-wrapper
	{
		transition: bottom 0.3s ease, opacity 0.3s ease, background-color 0.2s ease, color 0.2s ease, transform 0.45s var(--ags-ease-out);
	}

	.scrollToTop.is-sopra-crediti,
	.whatsapp-float-wrapper.is-sopra-crediti
	{
		transform: translateY(calc(-1 * var(--ags-sopra-crediti, 64px)));
	}
}

@media (prefers-reduced-motion: reduce)
{
	.scrollToTop,
	.whatsapp-float-wrapper
	{
		transition: none;
	}
}

/* Ritorno al pannello, solo per gli admin: in basso a sinistra, lato opposto allo
   scrollToTop. Sotto modali (1050) e fogli mobile (1040), sopra header e contenuti. */
.ags-pannello-admin
{
	align-items:     center;
	background:      var(--ags-ink);
	border:          1px solid var(--ags-ink);
	border-radius:   999px;
	bottom:          var(--ags-space-3);
	box-shadow:      var(--ags-shadow-soft);
	color:           var(--ags-sand);
	display:         inline-flex;
	font-size:       0.875rem;
	font-weight:     600;
	gap:             var(--ags-space-1);
	left:            var(--ags-space-3);
	min-height:      44px;
	padding:         0 var(--ags-space-3);
	position:        fixed;
	text-decoration: none;
	transition:      background-color 0.2s ease, color 0.2s ease;
	z-index:         1030;
}

.ags-pannello-admin:hover,
.ags-pannello-admin:focus-visible
{
	background: var(--ags-forest);
	color:      var(--ags-white);
}

/* Su mobile resta solo l'icona, come lo scrollToTop: il testo copriva i contenuti */
@media (max-width: 575.98px)
{
	.ags-pannello-admin
	{
		justify-content: center;
		padding:         0;
		width:           44px;
	}

	.ags-pannello-admin__testo
	{
		display: none;
	}
}

@media (max-width: 768px)
{
	#banner-home
	{
		padding-top: 100px !important;
	}
}

.divider
{
	text-align: center;
	height:    1px;
	margin:    30px 0;
	background-color: var(--ags-border);
}

.divider span
{
	position:  relative;
	top:       -20px;
	display:   inline-block;
	padding:   10px;
	background-color: var(--ags-white);
	font-style: italic;
}

/** RICHIESTE E NOTIFICHE nell'header pubblico **/

/* Su mobile il pulsante sta accanto al menu, su desktop subito prima dell'avatar
   (che resta sempre l'ultima icona a destra). */
.ags-header__notifiche
{
	margin-left:  auto;
	margin-right: var(--ags-space-2);
}

/* Qui il pulsante notifiche sta accanto al toggle del menu (44px): il default del
   componente condiviso (40px, ags-components.css) creava un dislivello visibile fra le
   due icone. Scoperto solo a questa coppia, il resto del sito tiene il default. */
.ags-header__notifiche .ags-notifiche__btn
{
	height: 44px;
	width:  44px;
}

@media (min-width: 992px)
{
	/* Scoperto a #navbar (solo l'header pubblico standard): l'header dell'area post
	   riusa questi stessi id/classi con un markup diverso, quindi una regola non
	   scoperta romperebbe anche quello. */

	/* #navbarNavAltMarkup diventa comunque una riga flex a questa larghezza (Bootstrap
	   la forza sempre visibile): "contents" toglie il suo riquadro e mette i link del
	   menu e il blocco avatar direttamente tra i figli di <nav>, sullo stesso livello
	   del pulsante notifiche. Solo così l'ordine visivo può separare le due cose, che
	   nel markup sono rami diversi (le notifiche servono anche a menu chiuso, su mobile). */
	#navbar #navbarNavAltMarkup
	{
		/* Bootstrap forza questo stesso elemento a "flex" con !important
		   (.navbar-expand-lg .navbar-collapse): serve pari peso per vincere. */
		display: contents !important;
	}

	#navbar .navbar-nav.mainmenu
	{
		/* "contents" toglie anche il "justify-content-end" che il contenitore dava al
		   gruppo: questo margine lo rimpiazza, spingendo menu, notifiche e avatar
		   verso il bordo destro invece di lasciarli appiccicati al logo. */
		margin-left: auto;
		order:       1;
	}

	#navbar .ags-header__notifiche
	{
		margin-left:  var(--ags-space-2);
		margin-right: 0;
		order:        2;
	}

	#navbar .ags-header__actions
	{
		order: 3;
	}
}

/* Header da autenticati su mobile: il menu hamburger non tocca l'avatar. */
.topbar-custom #topbar #toggleMenuMobile
{
	margin-left: var(--ags-space-1);
}

/* Sopra l'hero scuro (header trasparente) il pulsante diventa chiaro. */
.header-light .ags-notifiche__btn
{
	background-color: color-mix(in srgb, var(--ags-white) 12%, transparent);
	border-color:     color-mix(in srgb, var(--ags-white) 45%, transparent);
	color:            var(--ags-white);
}

/** PANNELLO CHE SALE DAL BASSO (filtri di Cerca Utenti e Post su mobile) **/

/* Foglio modale ancorato in fondo allo schermo, con la pagina oscurata dietro. La pagina che lo
   usa aggiunge le proprie regole per il contenuto, scoped su .ags-foglio. */
@media (max-width: 991.98px)
{
	html.ags-foglio-aperto,
	html.ags-foglio-aperto body
	{
		overflow: hidden;
	}

	.ags-foglio
	{
		inset:    0;
		position: fixed;
		z-index:  1040;
	}

	.ags-foglio[hidden]
	{
		display: none;
	}

	.ags-foglio__velo
	{
		background: color-mix(in srgb, var(--ags-ink) 45%, transparent);
		inset:      0;
		opacity:    0;
		position:   absolute;
		transition: opacity 0.3s var(--ags-ease-out);
	}

	.ags-foglio.is-aperto .ags-foglio__velo
	{
		opacity: 1;
	}

	.ags-foglio__pannello
	{
		background:     var(--ags-white);
		border-radius:  16px 16px 0 0;
		bottom:         0;
		box-shadow:     0 -20px 50px -20px color-mix(in srgb, var(--ags-ink) 40%, transparent);
		display:        flex;
		flex-direction: column;
		left:           0;
		max-height:     88dvh;
		outline:        none;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		position:       absolute;
		right:          0;
		transform:      translateY(100%);
		transition:     transform 0.38s var(--ags-ease-expo);
	}

	.ags-foglio.is-aperto .ags-foglio__pannello
	{
		transform: none;
	}

	.ags-foglio__maniglia
	{
		background:    var(--ags-border);
		border-radius: 999px;
		flex:          none;
		height:        4px;
		margin:        10px auto 0;
		width:         36px;
	}

	.ags-foglio .ags-foglio__chiudi
	{
		top: 14px;
	}

	.ags-foglio__chiudi
	{
		align-items:     center;
		background:      transparent;
		border:          0;
		border-radius:   var(--ags-radius-control);
		color:           var(--ags-muted);
		display:         inline-flex;
		font-size:       1.25rem;
		height:          44px;
		justify-content: center;
		position:        absolute;
		right:           var(--ags-space-2);
		top:             var(--ags-space-2);
		width:           44px;
		z-index:         1;
	}

	.ags-foglio__chiudi:hover
	{
		background: var(--ags-sand);
		color:      var(--ags-ink);
	}
}

@media (prefers-reduced-motion: reduce)
{
	.ags-foglio__velo,
	.ags-foglio__pannello
	{
		transition: none;
	}
}

/** MOVIMENTO — comparsa allo scroll condivisa dalle pagine pubbliche **/

/* Curve di decelerazione naturali, niente rimbalzi. */
:root
{
	--ags-ease-out:  cubic-bezier(0.25, 1, 0.5, 1);
	--ags-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tutto vale solo con la classe js-motion sull'<html>, accesa nel <head> del
   layout e spenta se lo script non parte: senza JavaScript nulla resta nascosto.
   data-reveal: l'elemento sale in vista (varianti left, right, scale).
   data-reveal-stagger: i figli diretti entrano uno dopo l'altro.
   data-reveal-group: nessuno stile qui, la pagina coreografa i propri figli.
   data-reveal-lines: il titolo entra riga per riga (frontend.js prepara le parole). */
.js-motion [data-reveal]
{
	opacity:    0;
	transform:  translateY(24px);
	transition: opacity 0.7s var(--ags-ease-out), transform 0.9s var(--ags-ease-expo);
}

.js-motion [data-reveal="scale"]
{
	transform: scale(0.96);
}

@media (min-width: 768px)
{
	.js-motion [data-reveal="left"]
	{
		transform: translateX(-32px);
	}

	.js-motion [data-reveal="right"]
	{
		transform: translateX(32px);
	}
}

.js-motion [data-reveal].is-revealed
{
	opacity:   1;
	transform: none;
}

.js-motion [data-reveal-stagger] > *
{
	opacity:    0;
	transform:  translateY(20px);
	transition: opacity 0.6s var(--ags-ease-out), transform 0.8s var(--ags-ease-expo);
}

.js-motion [data-reveal-stagger].is-revealed > *
{
	opacity:   1;
	transform: none;
}

.js-motion [data-reveal-stagger].is-revealed > :nth-child(2)
{
	transition-delay: 90ms;
}

.js-motion [data-reveal-stagger].is-revealed > :nth-child(3)
{
	transition-delay: 180ms;
}

.js-motion [data-reveal-stagger].is-revealed > :nth-child(4)
{
	transition-delay: 270ms;
}

.js-motion [data-reveal-stagger].is-revealed > :nth-child(5)
{
	transition-delay: 360ms;
}

.js-motion [data-reveal-stagger].is-revealed > :nth-child(6)
{
	transition-delay: 450ms;
}

/* Ogni parola sale dal proprio ritaglio, una riga dopo l'altra. Il ritaglio sporge in alto
   e in basso (compensato dai margini) per non tagliare accenti e discendenti. */
.js-motion [data-reveal-lines] .ags-parola
{
	display:        inline-block;
	margin-block:   -0.1em -0.15em;
	overflow:       hidden;
	padding-block:  0.1em 0.15em;
	vertical-align: top;
}

.js-motion [data-reveal-lines] .ags-parola > span
{
	display:          inline-block;
	transform:        translateY(130%);
	transition:       transform 0.9s var(--ags-ease-expo);
	transition-delay: calc(var(--riga, 0) * 120ms);
}

.js-motion [data-reveal-lines].is-revealed .ags-parola > span
{
	transform: none;
}

/** SPAZIO IN FONDO ALLA PAGINA — pagine pubbliche con il tema dell'area utente **/

/* Ricerca, post e profilo caricano il tema dell'area utente, che sotto i 992px riserva
   80px in fondo al body per la barra di navigazione mobile di quell'area. Qui la barra non
   esiste e sotto il footer restava una fascia chiara vuota. "html body" vince sulla regola
   del tema a prescindere dall'ordine dei fogli di stile. */
@media (max-width: 991.98px)
{
	html body
	{
		padding-bottom: 0;
	}
}

/** MODALE DI CONDIVISIONE — versione mobile **/

/* Su schermo piccolo la finestra centrata pensata per il mouse diventa un foglio che
   sale dal basso, come i pannelli di condivisione nativi: più naturale al tocco e più
   riconoscibile di una finestra fluttuante. */
@media (max-width: 767.98px)
{
	#shareModal .modal-dialog
	{
		align-items: flex-end;
		margin:      0 auto;
		max-width:   100%;
		min-height:  100%;
		padding:     0 var(--ags-space-3);
	}

	#shareModal.fade .modal-dialog
	{
		transform:                   translateY(40px);
		transition-timing-function: var(--ags-ease-out);
	}

	#shareModal.show .modal-dialog
	{
		transform: none;
	}

	#shareModal .modal-content
	{
		border:         0;
		border-radius:  var(--ags-radius-container) var(--ags-radius-container) 0 0;
		box-shadow:     0 -20px 50px -20px color-mix(in srgb, var(--ags-ink) 40%, transparent);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		width:          100%;
	}

	/* Maniglietta decorativa in cima, come nei fogli nativi: segnala che è un pannello
	   trascinabile anche senza poterlo davvero trascinare. */
	#shareModal .modal-content::before
	{
		background:    var(--ags-border);
		border-radius: 999px;
		content:       "";
		height:        4px;
		margin:        10px auto 0;
		width:         36px;
	}

	#shareModal .modal-header
	{
		border-bottom: 1px solid var(--ags-border);
		padding:       var(--ags-space-3) var(--ags-space-4);
	}

	#shareModal .modal-title
	{
		color:       var(--ags-ink);
		font-size:   1.0625rem;
		font-weight: 700;
	}

	#shareModal .btn-close
	{
		height:                      44px;
		opacity:                     0.6;
		width:                       44px;
		-webkit-tap-highlight-color: transparent;
	}

	#shareModal .modal-body
	{
		padding: var(--ags-space-5) var(--ags-space-4) calc(var(--ags-space-4) + env(safe-area-inset-bottom, 0px));
	}

	#shareModal .modal-body > p:first-child
	{
		color: var(--ags-muted);
	}

	/* Pulsanti di condivisione: cerchi pieni con un'ombra propria invece dei pulsanti
	   Bootstrap piatti, e una pressione al tocco al posto dell'hover del mouse.
	   WhatsApp e Facebook mantengono già il proprio colore ufficiale; qui allineiamo
	   anche X, nel suo nero, e la mail, che non avendo un colore proprio prende il
	   verde del brand. */
	#shareModal a.btn
	{
		align-items:                 center;
		border-radius:               50%;
		box-shadow:                  0 10px 20px -12px color-mix(in srgb, var(--ags-ink) 45%, transparent);
		display:                     inline-flex;
		font-size:                   1.25rem;
		height:                      52px;
		justify-content:             center;
		padding:                     0;
		transition:                  transform 0.2s var(--ags-ease-out), box-shadow 0.2s var(--ags-ease-out);
		width:                       52px;
		-webkit-tap-highlight-color: transparent;
	}

	#shareModal a.btn:active
	{
		box-shadow: 0 4px 10px -8px color-mix(in srgb, var(--ags-ink) 45%, transparent);
		transform:  scale(0.92);
	}

	#shareModal #shareX,
	#shareModal #shareEmail
	{
		border-color: transparent !important;
	}

	#shareModal #shareX
	{
		background-color: #000 !important;
	}

	#shareModal #shareEmail
	{
		background-color: var(--ags-forest) !important;
	}

	#shareModal .divider
	{
		margin-block: var(--ags-space-4);
	}

	#shareModal .input-group
	{
		border-radius: var(--ags-radius-control);
		overflow:      hidden;
	}

	#shareModal #baseDomainLink
	{
		background:   var(--ags-sand);
		border:       1px solid var(--ags-border);
		border-right: 0;
		color:        var(--ags-ink);
		font-size:    0.9375rem;
	}

	#shareModal #copyLinkButton
	{
		background:                  var(--ags-forest);
		border:                      1px solid var(--ags-forest);
		color:                       var(--ags-white);
		min-width:                   52px;
		transition:                  background-color 0.2s var(--ags-ease-out), transform 0.2s var(--ags-ease-out);
		-webkit-tap-highlight-color: transparent;
	}

	#shareModal #copyLinkButton:active
	{
		transform: scale(0.95);
	}

	#shareModal #copyLinkButton.disabled
	{
		background:   var(--ags-green);
		border-color: var(--ags-green);
		opacity:      1;
	}

	#shareModal #copyLinkButton .text-success
	{
		color: var(--ags-white) !important;
	}
}

/** RICERCA GLOBALE — barra nell'header con tendina dei risultati (mobile e desktop) **/

/* Nella topbar dell'area utente la colonna del logo cresce per ospitare la barra. */
.ags-topbar__sinistra
{
	min-width: 0;
}

.ags-ricerca
{
	flex:          1 1 0%;
	margin-inline: var(--ags-space-2);
	max-width:     360px;
	min-width:     0;
	position:      relative;
}

.ags-ricerca__campo
{
	align-items:   center;
	background:    var(--ags-sand);
	border:        1px solid var(--ags-border);
	border-radius: 999px;
	display:       flex;
	gap:           10px;
	height:        44px;
	margin:        0;
	padding:       0 4px 0 14px;
	transition:    background-color 0.2s var(--ags-ease-out), border-color 0.2s var(--ags-ease-out), box-shadow 0.2s var(--ags-ease-out);
}

.ags-ricerca__campo:focus-within
{
	background:   var(--ags-white);
	border-color: var(--ags-forest);
	box-shadow:   0 0 0 4px color-mix(in srgb, var(--ags-forest) 12%, transparent);
}

.ags-ricerca__campo > i,
.ags-ricerca__campo > svg
{
	color:     var(--ags-forest);
	flex:      none;
	font-size: 0.9375rem;
}

/* 16px: sotto questa misura iOS ingrandisce la pagina quando il campo prende il focus. */
.ags-ricerca__input
{
	-webkit-appearance:    none;
	   -moz-appearance:    none;
	        appearance:    none;
	background:    transparent;
	border:        0;
	color:         var(--ags-ink);
	flex:          1;
	font-size:     16px;
	height:        100%;
	min-width:     0;
	outline:       none;
	padding:       0;
	text-overflow: ellipsis;
	width:         100%;
}

/* L'anello di focus e' gia' sul campo intero: niente secondo bordo sull'input (stili globali) */
.ags-ricerca .ags-ricerca__input:focus,
.ags-ricerca .ags-ricerca__input:focus-visible
{
	border:     0;
	box-shadow: none;
	outline:    none;
}

.ags-ricerca__input::-moz-placeholder
{
	color: var(--ags-muted);
}

.ags-ricerca__input::placeholder
{
	color: var(--ags-muted);
}

.ags-ricerca__input::-webkit-search-cancel-button,
.ags-ricerca__input::-webkit-search-decoration
{
	-webkit-appearance: none;
}

.ags-ricerca__cancella
{
	align-items:     center;
	background:      none;
	border:          0;
	border-radius:   50%;
	color:           var(--ags-muted);
	display:         inline-flex;
	flex:            none;
	height:          36px;
	justify-content: center;
	width:           36px;
}

.ags-ricerca__cancella[hidden]
{
	display: none;
}

/* Sopra la foto (header trasparente) il campo a riposo e' vetro chiaro; al focus torna bianco. */
.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within)
{
	backdrop-filter:         blur(12px) saturate(140%);
	background:              color-mix(in srgb, var(--ags-white) 16%, transparent);
	border-color:            color-mix(in srgb, var(--ags-white) 45%, transparent);
}

.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within) > i,
.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within) > svg,
.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within) .ags-ricerca__input
{
	color: var(--ags-white);
}

.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within) .ags-ricerca__input::-moz-placeholder
{
	color: color-mix(in srgb, var(--ags-white) 85%, transparent);
}

.header-light:not(.blurred) .ags-ricerca__campo:not(:focus-within) .ags-ricerca__input::placeholder
{
	color: color-mix(in srgb, var(--ags-white) 85%, transparent);
}

/* ---------- Tendina ---------- */

.ags-ricerca__tendina
{
	background:          var(--ags-white);
	border:              1px solid var(--ags-border);
	border-radius:       var(--ags-radius-container);
	box-shadow:          0 24px 48px -22px color-mix(in srgb, var(--ags-ink) 35%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--ags-ink) 10%, transparent);
	left:                0;
	max-height:          min(70vh, 560px);
	opacity:             0;
	overflow-y:          auto;
	overscroll-behavior: contain;
	padding:             6px 8px 8px;
	position:            absolute;
	text-align:          left;
	top:                 calc(100% + 8px);
	transform:           translateY(-6px);
	transition:          opacity 0.18s var(--ags-ease-out), transform 0.22s var(--ags-ease-out);
	width:               min(440px, 92vw);
	z-index:             1045;
}

.ags-ricerca__tendina[hidden]
{
	display: none;
}

.ags-ricerca__tendina.is-visibile
{
	opacity:   1;
	transform: none;
}

.ags-ricerca__gruppo
{
	padding-top: 4px;
}

.ags-ricerca__gruppo + .ags-ricerca__gruppo
{
	border-top: 1px solid color-mix(in srgb, var(--ags-border) 70%, transparent);
	margin-top: 6px;
	padding-top: 8px;
}

.ags-ricerca__gruppo-testa
{
	align-items:     center;
	display:         flex;
	justify-content: space-between;
	min-height:      32px;
	padding:         0 6px;
}

.ags-ricerca__gruppo-titolo
{
	color:       var(--ags-muted);
	font-size:   0.8125rem;
	font-weight: 700;
	margin:      0;
}

.ags-ricerca__vedi
{
	background:      none;
	border:          0;
	border-radius:   6px;
	color:           var(--ags-forest);
	font-size:       0.8125rem;
	font-weight:     600;
	padding:         6px;
	text-decoration: none;
}

.ags-ricerca__vedi:hover,
.ags-ricerca__vedi:focus-visible
{
	background: var(--ags-green-soft);
	color:      var(--ags-forest);
	outline:    none;
}

.ags-ricerca__elenco
{
	list-style: none;
	margin:     0;
	padding:    0;
}

.ags-ricerca__voce
{
	align-items:                 center;
	background:                  none;
	border:                      0;
	border-radius:               var(--ags-radius-control);
	color:                       var(--ags-ink);
	display:                     flex;
	gap:                         var(--ags-space-2);
	min-height:                  56px;
	padding:                     8px 6px;
	text-align:                  left;
	text-decoration:             none;
	transition:                  background-color 0.15s var(--ags-ease-out);
	width:                       100%;
	-webkit-tap-highlight-color: transparent;
}

.ags-ricerca__voce:hover,
.ags-ricerca__voce:focus-visible
{
	background: var(--ags-sand);
	color:      var(--ags-ink);
	outline:    none;
}

.ags-ricerca__voce:active
{
	background: var(--ags-green-soft);
}

.ags-ricerca__voce--recente
{
	min-height: 44px;
}

.ags-ricerca__recente-icona
{
	color:      var(--ags-muted);
	text-align: center;
	width:      20px;
}

.ags-ricerca__avatar
{
	align-items:     center;
	background:      var(--ags-green-soft);
	border-radius:   50%;
	color:           var(--ags-forest);
	display:         inline-flex;
	flex:            none;
	font-size:       0.8125rem;
	font-weight:     700;
	height:          40px;
	justify-content: center;
	-o-object-fit:      cover;
	   object-fit:      cover;
	width:           40px;
}

.ags-ricerca__miniatura
{
	align-items:     center;
	background:      var(--ags-sand);
	border-radius:   var(--ags-radius-control);
	color:           var(--ags-moss);
	display:         inline-flex;
	flex:            none;
	height:          44px;
	justify-content: center;
	-o-object-fit:      cover;
	   object-fit:      cover;
	width:           44px;
}

.ags-ricerca__testi
{
	display:        flex;
	flex:           1;
	flex-direction: column;
	gap:            1px;
	min-width:      0;
}

.ags-ricerca__titolo,
.ags-ricerca__estratto
{
	-webkit-box-orient: vertical;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	line-height:        1.35;
	overflow:           hidden;
}

.ags-ricerca__titolo
{
	font-size:   0.9375rem;
	font-weight: 600;
}

.ags-ricerca__estratto
{
	font-size: 0.875rem;
}

.ags-ricerca__meta
{
	color:         var(--ags-muted);
	font-size:     0.8125rem;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.ags-ricerca__meta--a-capo
{
	white-space: normal;
}

.ags-ricerca mark
{
	background:    color-mix(in srgb, var(--ags-moss) 30%, transparent);
	border-radius: 3px;
	color:         inherit;
	padding:       0 1px;
}

.ags-ricerca__accesso
{
	align-items:   center;
	background:    var(--ags-green-soft);
	border-radius: var(--ags-radius-control);
	display:       flex;
	gap:           var(--ags-space-2);
	margin-top:    var(--ags-space-1);
	padding:       10px;
}

.ags-ricerca__accesso-icona
{
	align-items:     center;
	background:      var(--ags-white);
	border-radius:   50%;
	color:           var(--ags-forest);
	display:         inline-flex;
	flex:            none;
	height:          36px;
	justify-content: center;
	width:           36px;
}

.ags-ricerca__accedi
{
	flex:        none;
	font-weight: 600;
	min-height:  40px;
}

.ags-ricerca__stato
{
	align-items:    center;
	display:        flex;
	flex-direction: column;
	padding:        var(--ags-space-4) var(--ags-space-3) var(--ags-space-3);
	text-align:     center;
}

.ags-ricerca__stato-icona
{
	align-items:     center;
	background:      var(--ags-green-soft);
	border-radius:   50%;
	color:           var(--ags-forest);
	display:         inline-flex;
	font-size:       1rem;
	height:          44px;
	justify-content: center;
	margin-bottom:   var(--ags-space-2);
	width:           44px;
}

.ags-ricerca__stato-titolo
{
	color:         var(--ags-ink);
	font-size:     0.9375rem;
	font-weight:   700;
	margin:        0 0 4px;
	overflow-wrap: anywhere;
}

.ags-ricerca__stato-testo
{
	color:       var(--ags-muted);
	font-size:   0.875rem;
	line-height: 1.5;
	margin:      0;
	max-width:   36ch;
}

.ags-ricerca__riprova
{
	align-items: center;
	display:     inline-flex;
	font-weight: 600;
	gap:         8px;
	margin-top:  var(--ags-space-2);
	min-height:  40px;
}

.ags-ricerca__scheletro
{
	align-items: center;
	display:     flex;
	gap:         var(--ags-space-2);
	min-height:  56px;
	padding:     8px 6px;
}

.ags-ricerca__scheletro-cerchio,
.ags-ricerca__scheletro-righe > span
{
	animation:       ags-ricerca-luce 1.2s ease-in-out infinite;
	background:      linear-gradient(90deg, var(--ags-sand) 0%, color-mix(in srgb, var(--ags-border) 60%, var(--ags-sand)) 50%, var(--ags-sand) 100%);
	background-size: 200% 100%;
}

.ags-ricerca__scheletro-cerchio
{
	border-radius: 50%;
	flex:          none;
	height:        40px;
	width:         40px;
}

.ags-ricerca__scheletro-righe
{
	display:        flex;
	flex:           1;
	flex-direction: column;
	gap:            8px;
}

.ags-ricerca__scheletro-righe > span
{
	border-radius: 4px;
	height:        11px;
	width:         70%;
}

.ags-ricerca__scheletro-righe > span + span
{
	width: 45%;
}

@keyframes ags-ricerca-luce
{
	from
	{
		background-position: 100% 0;
	}

	to
	{
		background-position: -100% 0;
	}
}

/* Mobile e tablet: la tendina prende tutta la larghezza della barra dell'header, non solo del campo */
@media (max-width: 991.98px)
{
	.ags-ricerca
	{
		position: static;
	}

	.header .ags-ricerca__tendina
	{
		left:  0;
		right: 0;
		width: auto;
	}

	.topbar-custom .ags-ricerca__tendina
	{
		left:  var(--ags-space-2);
		right: var(--ags-space-2);
		width: auto;
	}

	.ags-ricerca__tendina
	{
		max-height: calc(100dvh - 96px);
	}

	.ags-ricerca__voce
	{
		min-height: 60px;
	}

	/* Voce "Condividi" nel menu a scomparsa: stessa riga delle voci di navigazione. */
	.ags-menu-condividi button
	{
		align-items: center;
		background:  none;
		border:      0;
		color:       var(--ags-forest);
		display:     flex;
		font:        inherit;
		font-weight: 600;
		gap:         10px;
		min-height:  44px;
		padding:     10px var(--ags-space-3);
		text-align:  left;
		width:       100%;
	}

	.ags-menu-condividi button:active
	{
		background:    var(--ags-green-soft);
		border-radius: var(--ags-radius-control);
	}

	/* Icone a contorno delle voci del menu a scomparsa: stessa colonna di quella di "Condividi" */
	.ags-menu-icona,
	.ags-menu-condividi .svg-inline--fa
	{
		flex:   none;
		height: 22px;
		width:  22px;
	}

	.ags-menu-icona
	{
		color:          var(--ags-muted);
		margin-right:   12px;
		vertical-align: middle;
	}

	.ags-menu-condividi button
	{
		gap: 12px;
	}

	/* Nell'header pubblico le voci rientrano di 14px, non 16 */
	.header .ags-menu-condividi button
	{
		padding-left: 14px;
	}
}

/* Desktop: il campo sta fra il logo e il menu, la tendina resta ancorata sotto il campo */
@media (min-width: 992px)
{
	.header .ags-ricerca
	{
		flex:        0 1 320px;
		margin:      0 var(--ags-space-3) 0 var(--ags-space-4);
	}

	/* Il menu resta su una riga: e' il campo a stringersi quando lo spazio non basta */
	.header .navbar-collapse
	{
		flex:        0 0 auto;
		margin-left: auto;
	}

	.header .mainmenu ul
	{
		white-space: nowrap;
	}

	.topbar-custom .ags-ricerca
	{
		flex:        0 1 340px;
		margin:      0 0 0 var(--ags-space-4);
	}
}

@media (prefers-reduced-motion: reduce)
{
	.ags-ricerca__tendina,
	.ags-ricerca__scheletro-cerchio,
	.ags-ricerca__scheletro-righe > span
	{
		animation:  none;
		transform:  none;
		transition: none;
	}
}