/**
 * Stili del form ricette.
 *
 * DA DOVE VIENE QUESTO CSS
 *
 * Non è inventato: riproduce riga per riga le regole che salutemetabolica ha in
 * produzione, dove il form è in uso da tempo. Lì stanno sparse in blocchi `<style>`
 * della pagina, e alcune hanno l'id del form o dei campi scritto a mano
 * (`#wpforms-form-2895 h3`, `#wpforms-2895-field_34-container`): è il motivo per
 * cui sugli altri quattro siti non si applicava nulla, l'id cambia da sito a sito.
 *
 * Qui le regole che dipendono da un id sono generate a runtime dal PHP, che
 * conosce l'id del form e quelli dei campi dalla configurazione. Quelle che
 * dipendono solo da classi stanno in questo file.
 */

/* ---------------------------------------------------------------
   Indice delle sezioni
   --------------------------------------------------------------- */

#nav-form-ricette ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 2.3rem;
}

/*
 * Sottolineato e in grassetto come su salutemetabolica, dove però l'aspetto arriva
 * per caso da una regola di accessibilità del tema (`p a, #content li a`) che
 * dipende da un antenato con id `content` e sugli altri siti non si applica.
 * Dichiararlo qui rende i cinque siti uguali a prescindere dal tema.
 */
#nav-form-ricette a {
	color: var( --e-global-color-primary, #1e623d );
	text-decoration: underline;
	font-weight: 700;
}

#nav-form-ricette a:focus-visible {
	outline: 2px solid #5C2C63;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------
   Riquadro delle conversioni in grammi
   --------------------------------------------------------------- */

.lista-trasformazioni {
	border: 1px solid black !important;
	background: #f5ece2 !important;
	border-radius: 15px !important;
	padding-left: 10px !important;
	padding-top: 10px !important;
}

.lista-trasformazioni ul {
	padding-left: 40px !important;
}

/* ---------------------------------------------------------------
   Lista degli ingredienti aggiunti
   --------------------------------------------------------------- */

#listaIngredienti {
	background-color: #8080803d;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 0;
}

.ingredient-button-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 15px !important;
	height: 100% !important;
}

/*
 * I due pulsanti che tolgono una riga già inserita: quello della lista ingredienti
 * e quello degli ingredienti principali.
 *
 * Nello snippet originale erano graficati solo su salutemetabolica, e con
 * `background: url(https://salutemetabolica.aboca.life/wp-content/uploads/…png)`:
 * un indirizzo assoluto del sito italiano, che sugli altri quattro non avrebbe
 * caricato nulla. Qui il cestino è un SVG scritto dentro il foglio di stile, così
 * non dipende da un file caricato su un dominio e vale su tutti i siti.
 */
button.removeItemButton,
button.removeIngredientePrincipaleButton {
	margin-left: 10px !important;
	margin-bottom: 5px !important;
	color: #1E623D;
	padding: 5px 40px 5px 10px !important;
	border-radius: 25px !important;
	border: 1px solid #1E623D !important;
	background-color: white !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E623D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-size: 18px 18px !important;
	background-position: right 12px center !important;
}

button.removeItemButton:hover,
button.removeIngredientePrincipaleButton:hover {
	background-color: #1E623D !important;
	color: white !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------------
   Select degli ingredienti (select2)
   --------------------------------------------------------------- */

.select2-container {
	width: 100% !important;
}

.select2-container--default .select2-selection--single {
	height: 41px !important;
	border-radius: 50px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 26px !important;
	position: absolute !important;
	top: 55px !important;
	right: 5px !important;
	width: 20px !important;
}

/* Il focus da tastiera sulla select deve restare visibile. */
.select2-container--focus .select2-selection--single,
.select2-selection--single:focus {
	outline: 2px solid #015220 !important;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Tabella dei valori nutrizionali
   --------------------------------------------------------------- */

#tabella-valori-nutrizionali {
	width: 100%;
}

#tabella-valori-nutrizionali th {
	padding: 15px;
}

#tabella-valori-nutrizionali td {
	padding: 15px;
	border: 1px solid hsla( 0, 0%, 50.2%, 0.5019607843 );
}

/* Riga fuori dai parametri: il colore non è l'unico segnale, il testo lo dice. */
#tabella-valori-nutrizionali tr.error {
	background-color: #ff000025;
	color: red;
}

/* ---------------------------------------------------------------
   Barra di avanzamento, se il form torna a più pagine
   --------------------------------------------------------------- */

.wpforms-page-indicator-page-progress {
	background-color: #5C2C63 !important;
}

/* ---------------------------------------------------------------
   Schermi larghi
   --------------------------------------------------------------- */

@media screen and ( min-width: 767px ) {
	.sticky-ingredienti {
		position: sticky;
		top: 0;
	}
}

@media screen and ( max-width: 766px ) {
	#nav-form-ricette ol {
		column-gap: 1.2rem;
		row-gap: 0.4rem;
	}

	#tabella-valori-nutrizionali {
		display: block;
		overflow-x: auto;
	}
}