/*
Theme Name: MisterScommessa
Theme URI: https://misterscommessa.com
Author: MisterScommessa
Description: Block theme (FSE) per il restyling grafico di Misterscommessa — sito di comparazione bookmaker e bonus scommesse. Struttura contenuti, permalink, custom post type e SEO restano quelli del sito esistente: cambia solo il layer di presentazione.
Version: 0.8.5
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: misterscommessa
*/

/* ==========================================================================
   Reset minimo e regole trasversali non esprimibili in theme.json
   ========================================================================== */

/* Nessun margine extra sopra il footer del Site Editor (utile dalla Tappa 4,
   quando le sezioni della home saranno full-bleed). */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Stesso motivo del footer: WordPress applica margin-block-start:24px a ogni
   figlio diretto di .wp-site-blocks tranne il primo (regola pensata per
   contenuto impilato). La barra legale 18+ è il primo figlio (margine già a
   zero di suo), l'header è il secondo, <main> è il terzo — riceveva quindi
   24px di distanza dall'header sticky sopra di lui, visibile come uno
   spazio indesiderato tra header e hero (segnalazione utente). */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Footer sempre in fondo alla viewport, mai "attaccato" a un contenuto
   corto (es. lo stato "nessun risultato" della ricerca) lasciando spazio
   bianco vuoto sotto — segnalazione utente. body diventa una colonna flex
   alta almeno quanto lo schermo; <main> si espande per riempire lo spazio
   rimanente, spingendo il footer in fondo quando il contenuto non basta a
   riempire la pagina, senza alcun effetto quando il contenuto è già più
   alto della viewport (il flex-grow non ha nulla da "riempire" in quel
   caso, il footer resta semplicemente dopo il contenuto). */
html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-site-blocks > main {
	flex: 1;
}

/* Focus visibile e ad alto contrasto su tutti gli elementi interattivi:
   requisito di accessibilità, non delegabile a theme.json. */
:focus-visible {
	outline: 3px solid var( --wp--preset--color--primary, #0066bf );
	outline-offset: 2px;
}

/* Rispetta la preferenza utente di ridurre le animazioni (WCAG 2.3.3). */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Animazioni e micro-interazioni (Tappa 4 — riviste dopo un bug reale)
   ========================================================================== */

/*
 * Le prime versioni usavano opacity:0 + IntersectionObserver, rivelato via
 * JS. Bug reale riscontrato dall'utente: sezioni intere invisibili ("il
 * testo non si vede, è bianco" su "Chi è Misterscommessa" e sull'indice
 * blog) — con ogni probabilita' per un fallimento del JS lato browser
 * (ottimizzazione JS di LiteSpeed, un blocco pubblicitario, o semplicemente
 * l'observer che non scattava per sezioni molto alte). Qualsiasi meccanismo
 * che possa lasciare contenuto vero PERMANENTEMENTE a opacity:0 e' un
 * rischio inaccettabile su un sito con la SEO come requisito primario.
 *
 * Sostituito con animazioni SOLO CSS, eseguite automaticamente al
 * caricamento della pagina (nessuna dipendenza da JS, nessun modo in cui
 * possano restare "in sospeso"): l'elemento e' sempre visibile appena
 * renderizzato, l'animazione e' un effetto in piu', mai una condizione
 * per vedere il contenuto. Contropartita accettata: niente piu' effetto
 * "si anima quando scorro fino a lì" per il contenuto sotto la piega -
 * l'affidabilità vale più dell'effetto su un sito che monetizza il
 * contenuto.
 */
.enter-fade-up {
	animation: msc-fade-up 0.7s ease both;
}

.enter-stagger > * {
	opacity: 0;
	animation: msc-fade-up 0.5s ease forwards;
}

.enter-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.enter-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.enter-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.enter-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.enter-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.enter-stagger > *:nth-child(6) { animation-delay: 0.4s; }

@keyframes msc-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Interazioni al passaggio del mouse su card/bottoni. */
.hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -12px rgb(16 24 40 / 0.18);
}

/* Movimento ambientale discreto per elementi decorativi dell'hero. */
.float-slow {
	animation: msc-float 7s ease-in-out infinite;
}

@keyframes msc-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* Parallax leggero via CSS puro (background-attachment), niente JS di
   scroll. Disattivato su touch: su iOS Safari "fixed" non si comporta
   in modo affidabile e su mobile l'effetto non si apprezza comunque. */
.parallax-bg {
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}

@media ( hover: none ), ( prefers-reduced-motion: reduce ) {
	.parallax-bg {
		background-attachment: scroll;
	}
}

/* ==========================================================================
   Pagina recensione (Tappa 4)
   ========================================================================== */

/* Box rating "appiccicato" mentre si scorre l'articolo — micro-interazione
   utile (resta visibile la CTA/valutazione), non solo decorativa. */
.sticky-top {
	position: sticky;
	top: 1.5rem;
	align-self: flex-start;
}

@media ( max-width: 781px ) {
	.sticky-top {
		position: static;
	}
}

/* ==========================================================================
   Bento grid (home, Tappa 4 — corretto dopo segnalazione utente)
   ========================================================================== */

.bento-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.25rem;
}

/*
 * Bug reale segnalato dall'utente: "il primo blocco è alzato, gli altri
 * abbassati". Causa: il layout "flow" di WordPress applica margin-block-start
 * a tutti i figli tranne il primo (pensato per contenuto impilato); quella
 * regola resta attiva anche quando qui sopra ridefiniamo display:grid, quindi
 * la prima card parte più in alto delle altre. Si annulla esplicitamente.
 */
.bento-grid > * {
	margin-block-start: 0;
}

/* Contenuto ancorato in alto (non centrato verticalmente): con il badge
   colorato in testa a ogni card (vedi .msc-tag più sotto), centrare l'intero
   blocco badge+testo lo faceva scendere di un'altezza diversa in ogni card
   a seconda della lunghezza del testo sottostante — badge "disallineati tra
   loro" nella stessa riga (segnalazione utente). Ancorandolo in alto, il
   badge è sempre alla stessa distanza dal bordo superiore della card,
   qualunque sia la lunghezza del testo che segue. */
.bento-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.bento-span-2 {
	grid-column: span 2;
}

.bento-span-4 {
	grid-column: span 4;
}

@media ( max-width: 781px ) {
	.bento-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.bento-span-4 {
		grid-column: span 2;
	}
}

@media ( max-width: 480px ) {
	.bento-grid,
	.bento-grid .bento-span-2,
	.bento-grid .bento-span-4 {
		grid-template-columns: 1fr;
		grid-column: span 1;
	}
}

/* ==========================================================================
   Sezione "Come registrarsi" — un passo alla volta (segnalazione utente:
   con 4 card fianco a fianco, quella con più testo — il passo 4 — non si
   allineava mai bene alle altre). Sostituito il grid di card con un
   componente "tab": solo lo step selezionato mostra il suo testo, gli altri
   sono etichette cliccabili. Tecnica radio+label, CSS puro (nessun JS): la
   selezione è sempre affidabile, mai a rischio "contenuto nascosto se lo
   script fallisce" (lezione della Tappa 4). Alla comparsa del pannello,
   una piccola animazione a rotazione/scorrimento — l'effetto "si sfogliano
   le carte" richiesto — con perspective + rotateY.
   ========================================================================== */

.msc-steps {
	position: relative;
}

.msc-steps input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.msc-steps__tabs {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.msc-steps__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	padding: 1.25rem 0.75rem;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 16px;
	background: var( --wp--preset--color--surface );
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.msc-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var( --wp--preset--color--surface-alt );
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 700;
	transition: background 0.2s ease, color 0.2s ease;
}

.msc-steps__title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --wp--preset--color--dark );
}

.msc-steps__panels {
	position: relative;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 20px;
	padding: 2rem;
	min-height: 7rem;
	overflow: hidden;
}

.msc-steps__panel {
	display: none;
}

.msc-steps__panel > *:first-child {
	margin-top: 0;
}

.msc-steps__panel > *:last-child {
	margin-bottom: 0;
}

#msc-step-1:checked ~ .msc-steps__tabs label[for="msc-step-1"],
#msc-step-2:checked ~ .msc-steps__tabs label[for="msc-step-2"],
#msc-step-3:checked ~ .msc-steps__tabs label[for="msc-step-3"],
#msc-step-4:checked ~ .msc-steps__tabs label[for="msc-step-4"] {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 12px 24px -12px rgb( 0 102 191 / 0.35 );
	transform: translateY( -4px );
}

#msc-step-1:checked ~ .msc-steps__tabs label[for="msc-step-1"] .msc-steps__num,
#msc-step-2:checked ~ .msc-steps__tabs label[for="msc-step-2"] .msc-steps__num,
#msc-step-3:checked ~ .msc-steps__tabs label[for="msc-step-3"] .msc-steps__num,
#msc-step-4:checked ~ .msc-steps__tabs label[for="msc-step-4"] .msc-steps__num {
	background: linear-gradient( 135deg, var( --wp--preset--color--primary ), var( --wp--preset--color--info ) );
	color: #ffffff;
}

#msc-step-1:focus-visible ~ .msc-steps__tabs label[for="msc-step-1"],
#msc-step-2:focus-visible ~ .msc-steps__tabs label[for="msc-step-2"],
#msc-step-3:focus-visible ~ .msc-steps__tabs label[for="msc-step-3"],
#msc-step-4:focus-visible ~ .msc-steps__tabs label[for="msc-step-4"] {
	outline: 3px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

#msc-step-1:checked ~ .msc-steps__panels #msc-panel-1,
#msc-step-2:checked ~ .msc-steps__panels #msc-panel-2,
#msc-step-3:checked ~ .msc-steps__panels #msc-panel-3,
#msc-step-4:checked ~ .msc-steps__panels #msc-panel-4 {
	display: block;
	animation: msc-deal-in 0.5s ease;
}

@keyframes msc-deal-in {
	from {
		opacity: 0;
		transform: perspective( 800px ) rotateY( -10deg ) translateX( -24px ) scale( 0.97 );
	}
	to {
		opacity: 1;
		transform: perspective( 800px ) rotateY( 0 ) translateX( 0 ) scale( 1 );
	}
}

@media ( max-width: 781px ) {
	.msc-steps__tabs {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.msc-steps__tabs {
		grid-template-columns: 1fr;
	}

	.msc-steps__tab {
		flex-direction: row;
		text-align: left;
	}

	.msc-steps__panels {
		padding: 1.5rem;
	}
}

/* ==========================================================================
   Accordion "Chi è Misterscommessa" — sostituisce il bento-grid a testo
   lungo (segnalazione utente: colonne troppo strette per il testo, layout
   banale). <details>/<summary> nativi: zero JS, sempre accessibile da
   tastiera e da screen reader, il testo ha tutta la larghezza disponibile
   quando una voce è aperta.
   ========================================================================== */

.msc-accordion {
	counter-reset: msc-accordion;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 900px;
	margin-inline: auto;
}

.msc-accordion-item {
	counter-increment: msc-accordion;
	background: var( --wp--preset--color--surface-alt );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.msc-accordion-item[open] {
	border-color: var( --wp--preset--color--primary );
}

.msc-accordion-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.msc-accordion-summary::-webkit-details-marker {
	display: none;
}

.msc-accordion-summary::before {
	content: counter( msc-accordion, decimal-leading-zero );
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 999px;
	background: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--primary );
	font-size: 0.9375rem;
	font-weight: 700;
}

.msc-accordion-summary h3 {
	flex: 1;
	margin: 0;
	font-size: 1.125rem;
}

.msc-accordion-summary::after {
	content: '';
	flex-shrink: 0;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid var( --wp--preset--color--dark );
	border-bottom: 2px solid var( --wp--preset--color--dark );
	transform: rotate( 45deg );
	transition: transform 0.25s ease;
}

.msc-accordion-item[open] .msc-accordion-summary::after {
	transform: rotate( -135deg );
}

.msc-accordion-body {
	padding: 0 1.5rem 1.75rem calc( 1.5rem + 2.5rem + 1rem );
}

.msc-accordion-body > *:first-child {
	margin-top: 0;
}

.msc-accordion-body > *:last-child {
	margin-bottom: 0;
}

@media ( max-width: 600px ) {
	.msc-accordion-body {
		padding-left: 1.5rem;
	}
}

/* ==========================================================================
   Hero — decorazioni fluttuanti + luce radiale (segnalazione utente: sfondo
   troppo piatto/monotono)
   ========================================================================== */

.hero-mesh {
	position: relative;
}

.hero-mesh::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 85% 15%, rgba( 255, 255, 255, 0.22 ), transparent 55% );
	pointer-events: none;
	z-index: 0;
}

.hero-content {
	position: relative;
	z-index: 1;
}

.hero-decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* Loghi reali dei bookmaker che fluttuano nell'hero (segnalazione utente —
   prima erano icone astratte disegnate, ora sono i loghi veri dei partner).
   Badge circolari con anello bianco e ombra, tutti sul lato destro
   dell'hero per non sovrapporsi al testo (colonna sinistra, contentSize
   720px). */
.hero-decor img {
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	border: 3px solid rgba( 255, 255, 255, 0.85 );
	box-shadow: 0 14px 28px -10px rgba( 0, 0, 0, 0.4 );
	opacity: 0.32;
}

.hero-decor img:nth-child( 1 ) { top: 10%; right: 8%; width: 76px; height: 76px; }
.hero-decor img:nth-child( 2 ) { top: 42%; right: 5%; width: 60px; height: 60px; }
.hero-decor img:nth-child( 3 ) { bottom: 14%; right: 18%; width: 68px; height: 68px; }
.hero-decor img:nth-child( 4 ) { top: 20%; right: 30%; width: 52px; height: 52px; }
.hero-decor img:nth-child( 5 ) { bottom: 24%; right: 38%; width: 58px; height: 58px; }
.hero-decor img:nth-child( 6 ) { top: 66%; right: 12%; width: 48px; height: 48px; }

@media ( max-width: 781px ) {
	.hero-decor img:nth-child( n + 4 ) {
		display: none;
	}
}

/* ==========================================================================
   Navigazione principale — su una riga sola, sottomenu visibili
   ========================================================================== */

/*
 * Prima versione: overflow-x:auto per forzare una riga sola. Sbagliato -
 * impostare overflow-x su un asse forza anche l'altro asse (overflow-y) a
 * "auto" per specifica CSS, il che RITAGLIA i sottomenu a tendina (sono
 * posizionati in absolute e "escono" verticalmente dal contenitore): dopo
 * il fix il menu non andava più a capo ma i sottomenu non si vedevano più.
 *
 * Fix corretto: niente overflow. Voci più compatte (meno padding, testo
 * più piccolo) cosi' le ~10 voci di primo livello entrano su una riga sola
 * alle larghezze desktop normali; flexWrap:nowrap sul blocco impedisce che
 * la lista vada a capo su piu' righe quando c'è spazio a sufficienza.
 */
.site-nav-primary .wp-block-navigation__container {
	flex-wrap: nowrap;
	column-gap: 0.25rem;
}

.site-nav-primary .wp-block-navigation-item {
	flex-shrink: 0;
}

.site-nav-primary .wp-block-navigation-item__content {
	padding: 0.5rem 0.65rem;
	font-size: 0.875rem;
}

/*
 * Bug reale segnalato dall'utente: sotto una certa larghezza il menu
 * diventa correttamente un hamburger, ma appena sopra quella soglia torna
 * alla lista intera e — con ~10 voci — non ci sta nella larghezza dello
 * schermo: la pagina intera diventa scorrevole in orizzontale. Causa: il
 * core di WordPress passa da hamburger a lista intera con un breakpoint
 * FISSO e non configurabile a 600px (vedi wp-includes/blocks/navigation/
 * style.css), indipendentemente dal fatto che la lista ci stia davvero. Il
 * nostro flex-wrap:nowrap qui sopra (necessario per restare su una riga)
 * impedisce inoltre a WordPress di "vedere" l'overflow e correggersi da
 * solo. Fix: si estende la soglia dell'hamburger fino a 1023px con una
 * media query dedicata che ribalta le due regole native di WP (mostra il
 * pulsante hamburger, nasconde la lista intera) solo per il nostro menu,
 * lasciando invariato il comportamento sotto i 600px e sopra i 1024px.
 */
@media ( min-width: 600px ) and ( max-width: 1023px ) {
	.site-nav-primary.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.site-nav-primary.wp-block-navigation .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none !important;
	}
}

/* Nel menu aperto (hamburger o dropdown): le voci di primo livello — le
   "macrocategorie" — in grassetto, le sottovoci con peso normale, per
   distinguere subito la gerarchia (segnalazione utente). */
.site-nav-primary .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

.site-nav-primary .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 400;
}

/* ==========================================================================
   Header — sticky, logo più grande, ricerca centrata (segnalazione utente)
   ========================================================================== */

/* L'header resta visibile mentre si scorre la pagina; la barra legale 18+
   sopra di lui NON è sticky e scorre via normalmente. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Riga logo + ricerca + CTA: grid a 3 colonne (non flex) cosi' la ricerca
   resta sempre centrata nel contenitore, indipendentemente dalla larghezza
   di logo e bottone ai lati (con un flex "space-between" la colonna centrale
   si sposta se logo e CTA hanno larghezze diverse). Stesso escamotage già
   usato per il bento-grid: layout WP "default" + display:grid via classe,
   con lo stesso fix del margine residuo sul primo figlio. */
.site-header-utility {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	padding-block: var( --wp--preset--spacing--20 );
}

.site-header-utility > * {
	margin-block-start: 0;
}

/* Logo più grande e ben visibile in testa all'header (segnalazione utente):
   l'attributo width del blocco (220) è solo un limite superiore per lo
   srcset; la dimensione reale visualizzata è governata qui via max-height,
   cosi' resta proporzionata e coerente a ogni larghezza di schermo senza
   dover ritoccare il blocco. */
.site-header-logo img {
	height: auto;
	width: auto;
	max-height: 60px;
	max-width: 100%;
}

@media ( max-width: 599px ) {
	.site-header-logo img {
		max-height: 42px;
	}
}

/* Centratura verticale di logo, ricerca e CTA (segnalazione utente): il
   grid della riga (align-items:center) centra già le tre colonne come
   blocchi, ma dentro ognuna serve lo stesso align-items:center esplicito
   — altrimenti gli elementi interni (form di ricerca, input+bottone dentro
   la pillola) tornano al default "stretch" e possono apparire disallineati
   rispetto al logo. */
.site-header-logo {
	display: flex;
	align-items: center;
	align-self: center;
}

.site-header-logo a {
	display: flex;
	align-items: center;
}

.site-header-search {
	display: flex;
	align-items: center;
	align-self: center;
	justify-content: center;
}

.site-header-search form.wp-block-search {
	display: flex;
	align-items: center;
}

.site-header-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 480px;
	border-radius: 999px;
	overflow: hidden;
	border-color: var( --wp--preset--color--border );
}

.site-header-search .wp-block-search__input {
	border: none;
	padding-left: 1.5rem;
}

.site-header-search .wp-block-search__button {
	border-radius: 999px;
	margin: 0.25rem;
}

.site-header-cta {
	display: flex;
	align-items: center;
	align-self: center;
}

.site-header-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.site-header-nav-row {
	border-top: 1px solid var( --wp--preset--color--border );
	padding-block: 0.4rem;
}

@media ( max-width: 599px ) {
	.site-header-utility {
		grid-template-columns: 1fr auto;
		row-gap: 0.75rem;
	}

	.site-header-search {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* ==========================================================================
   Componenti CPT (Tappa 3) — regole non esprimibili con le sole utility
   Tailwind quando il markup passa per the_content()/do_shortcode(): WordPress
   applica wptexturize() al contenuto degli shortcode, che normalizza le "&"
   isolate (usate dalla sintassi Tailwind [&_selettore]) in "&#038;". I
   browser la decodificano correttamente, ma è un dettaglio da cui non
   vogliamo dipendere (es. con un minifier HTML aggressivo in mezzo). Le
   regole che userebbero varianti arbitrarie "[&_...]" restano qui.
   ========================================================================== */

/* Riga toplist: enfasi sull'importo del bonus dentro il testo dell'offerta
   (misterscommessa_casino_row(), views/casino-row.php). */
.msc-offer-copy strong {
	color: var( --wp--preset--color--dark );
	font-weight: 600;
}

/* Box Pro/Contro: lista con segno di spunta/meno al posto dei bullet
   (misterscommessa_pros_cons(), views/pros-cons.php). */
.msc-check-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.msc-check-list li {
	position: relative;
	padding-left: 1.5rem;
}

.msc-check-list li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.msc-check-list--pros li::before {
	content: '✓';
	color: var( --wp--preset--color--success );
}

.msc-check-list--cons li::before {
	content: '−';
	color: var( --wp--preset--color--secondary );
}

/* ==========================================================================
   Badge "In evidenza" — sostituisce l'etichetta di testo semplice
   ("Recensione"/"App") con una pillola colorata con icona, per non
   sembrare anonima (segnalazione utente).
   ========================================================================== */

.msc-tag {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	gap: 0.45rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.msc-tag svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	display: block;
}

.msc-tag--review {
	background: rgba( 0, 102, 191, 0.1 );
	color: var( --wp--preset--color--primary );
}

.msc-tag--app {
	background: rgba( 255, 36, 83, 0.1 );
	color: var( --wp--preset--color--secondary );
}