/**
 * Badge prodotto.
 * Elemento hi-ggu-product-badges — vedi includes/styles/class-hi-ggu-style-product-badges.php
 *
 * Le regole sono agganciate al markup dello shortcode [HI_product_badges], che le
 * produce già con le classi giuste: qui non c'è nulla da applicare a mano nel page
 * builder. Il markup su cui lavorano è:
 *
 *   div.hi-product-badges.layout_row.align_left     <- contenitore
 *     span.hi-product-badge.is-novita               <- un badge per ogni stato attivo
 *     span.hi-product-badge.is-promo
 *     span.hi-product-badge.is-esaurito
 *     span.hi-product-badge.is-vegano
 *     span.hi-product-badge.is-senza-lattosio
 *     span.hi-product-badge.is-senza-glutine
 *
 * UN SOLO TRATTAMENTO, SEI COLORI. Forma, carattere, spaziatura e maiuscolo stanno
 * nella regola comune .hi-product-badge: ogni badge aggiunge soltanto il proprio
 * fondo. Così un badge nuovo si ottiene con una riga di CSS e non può divergere
 * dagli altri per dimensione o peso del carattere.
 *
 * IL MAIUSCOLO È TIPOGRAFICO. text-transform, non testo scritto in maiuscolo nel
 * markup: l'etichetta resta leggibile allo screen reader e traducibile, e nelle
 * lingue senza maiuscole la trasformazione semplicemente non ha effetto. Vale la
 * stessa scelta fatta per le etichette dei tab (.hi-product-info).
 *
 * GLI SPIGOLI SONO VIVI. --hi-badge-radius è 0, come nel catalogo grafico. È una
 * variabile perché il raggio è l'unica differenza fra questo badge e l'etichetta
 * arrotondata usata altrove: cambiarlo qui non richiede toccare le regole.
 *
 * IN COLONNA I BADGE NON SI ALLARGANO. align-items su flex-start invece del
 * default stretch, altrimenti ciascuno prenderebbe la larghezza del contenitore e
 * il più corto risulterebbe largo quanto il più lungo. In riga il problema non si
 * pone, ma la regola vale per entrambi i versi, così il badge misura sempre il
 * proprio testo.
 *
 * SPECIFICITÀ — i selettori ripetono la classe del contenitore per prevalere sulle
 * regole del tema su span e sui figli di un elemento di testo, senza dipendere
 * dall'ordine di caricamento. Nessun !important.
 *
 * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole. Essendo
 * variabili si possono ridefinire anche per una singola istanza dalle Design
 * Options dell'elemento.
 */

/* --------------------------------------------------------------------------
 * Valori dell'elemento
 * I colori sono quelli del catalogo grafico. Il carattere richiama quello dei
 * titoli del tema (--h1-font-family), come fanno gli altri elementi del plugin.
 * ------------------------------------------------------------------------ */

.hi-product-badges {
	/* Forma e spaziatura, comuni a tutti i badge */
	--hi-badge-gap: 0.5rem;
	--hi-badge-padding: 0.55em 1.1em;
	--hi-badge-radius: 0;

	/* Testo */
	--hi-badge-font-family: var(--h1-font-family);
	--hi-badge-font-size: 0.8125rem;
	--hi-badge-font-weight: 700;
	--hi-badge-letter-spacing: 0.06em;
	--hi-badge-line-height: 1.15;
	--hi-badge-text-transform: uppercase;
	--hi-badge-color: #ffffff;

	/* Fondo di ciascun badge */
	--hi-badge-novita-bg: #4a1a7d;
	--hi-badge-promo-bg: #e3762a;
	--hi-badge-esaurito-bg: #808285;
	--hi-badge-vegano-bg: #3c7a2c;
	--hi-badge-senza-lattosio-bg: #9c4f95;
	--hi-badge-senza-glutine-bg: #7f8fc7;
}

/* --------------------------------------------------------------------------
 * Contenitore
 * ------------------------------------------------------------------------ */

.hi-product-badges.hi-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hi-badge-gap);

	/* Senza questo ogni badge prenderebbe la larghezza piena del contenitore. */
	align-items: flex-start;
}

.hi-product-badges.hi-product-badges.layout_row {
	flex-direction: row;
}

.hi-product-badges.hi-product-badges.layout_column {
	flex-direction: column;
}

/* L'allineamento agisce sull'asse in cui i badge sono disposti: in riga li sposta
   orizzontalmente, in colonna li sposta rispetto al bordo della colonna. */
.hi-product-badges.hi-product-badges.layout_row.align_left {
	justify-content: flex-start;
}

.hi-product-badges.hi-product-badges.layout_row.align_center {
	justify-content: center;
}

.hi-product-badges.hi-product-badges.layout_row.align_right {
	justify-content: flex-end;
}

.hi-product-badges.hi-product-badges.layout_column.align_left {
	align-items: flex-start;
}

.hi-product-badges.hi-product-badges.layout_column.align_center {
	align-items: center;
}

.hi-product-badges.hi-product-badges.layout_column.align_right {
	align-items: flex-end;
}

/* --------------------------------------------------------------------------
 * Il badge
 * ------------------------------------------------------------------------ */

.hi-product-badges.hi-product-badges .hi-product-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: var(--hi-badge-padding);
	border-radius: var(--hi-badge-radius);

	font-family: var(--hi-badge-font-family);
	font-size: var(--hi-badge-font-size);
	font-weight: var(--hi-badge-font-weight);
	letter-spacing: var(--hi-badge-letter-spacing);
	line-height: var(--hi-badge-line-height);
	text-transform: var(--hi-badge-text-transform);
	text-align: center;
	white-space: nowrap;

	color: var(--hi-badge-color);
}

/* --------------------------------------------------------------------------
 * I fondi
 * Unica differenza fra un badge e l'altro.
 * ------------------------------------------------------------------------ */

.hi-product-badges.hi-product-badges .hi-product-badge.is-novita {
	background-color: var(--hi-badge-novita-bg);
}

.hi-product-badges.hi-product-badges .hi-product-badge.is-promo {
	background-color: var(--hi-badge-promo-bg);
}

.hi-product-badges.hi-product-badges .hi-product-badge.is-esaurito {
	background-color: var(--hi-badge-esaurito-bg);
}

.hi-product-badges.hi-product-badges .hi-product-badge.is-vegano {
	background-color: var(--hi-badge-vegano-bg);
}

.hi-product-badges.hi-product-badges .hi-product-badge.is-senza-lattosio {
	background-color: var(--hi-badge-senza-lattosio-bg);
}

.hi-product-badges.hi-product-badges .hi-product-badge.is-senza-glutine {
	background-color: var(--hi-badge-senza-glutine-bg);
}