/* ==========================================================================
   1. DEFINIZIONI GLOBALI (VARIABILI ROOT)
   ========================================================================== */
/**
 * In questa sezione definiamo i colori e i font principali del sito.
 * Modificare una variabile qui cambierà il valore in tutto il sito.
 */
:root {
	/* -- Palette Colori Brand -- */
	--brand-purple: #8C2B87;
	--brand-green: #63A845;
	--brand-blue: #009BDB;
	--text-dark: #333333;

	/* * -- Integrazione con Bootstrap/Cassiopeia -- 
	 * NOTA: '!important' qui è necessario per sovrascrivere le variabili
	 * di default del template con la giusta priorità.
	 */
	--primary: var(--brand-purple) !important;
	--secondary: var(--brand-green) !important;
	--info: var(--brand-blue) !important;
	--link-color: var(--brand-purple) !important;
	--cassiopeia-color-primary: var(--brand-purple) !important;
	--template-text-dark: var(--text-dark) !important;
	--template-link-color: var(--link-color) !important;

	/* -- Configurazione Font -- */
	--cassiopeia-font-family-body: 'Open Sans', sans-serif !important;
	--cassiopeia-font-family-headings: 'Montserrat', sans-serif !important;
	--cassiopeia-font-weight-normal: 400 !important;
	--cassiopeia-font-weight-headings: 700 !important;
}

/* ==========================================================================
   2. STILI DI BASE E COMPONENTI
   ========================================================================== */

/* -- Effetto "Glassmorphism" -- */
.glass-effect {
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.85);
}

/* -- Stile per la Testata (Header) -- */
.header {
	background-color: #ffffff !important;
	background-image: none !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
	padding: 1rem 1.5rem;
	z-index: 1050; /* Z-index alto per assicurare che sia sopra gli altri elementi */
}

/* -- Logo/Immagine del Brand nella Testata -- */
.header .navbar-brand .brand-logo {
	width: 100%;
	position: relative;
	z-index: 20;
	cursor: pointer;
}

.header .navbar-brand .brand-logo h1 {
	display: inline-block;
}

/* -- Titolo del sito (Logo testuale) -- */
.site-title-header {
	color: var(--brand-purple);
	font-family: var(--cassiopeia-font-family-headings);
}

/* -- Stile per la Navigazione (Links) -- */
.container-nav .nav-link,
.container-nav a {
	color: #000000 !important;
	font-weight: 600;
	transition: color 0.2s;
}

.container-nav .nav-link:hover,
.container-nav a:hover,
.container-nav .active > .nav-link,
.container-nav .active > a {
	color: var(--brand-blue) !important;
}

/* -- Stile per il bottone "Hamburger" (Toggler) -- */
.navbar-toggler .icon-menu {
	color: var(--brand-purple) !important;
}

/* -- Stile per i bottoni personalizzati -- */
.btn-brand-purple {
	background-color: var(--brand-purple);
	color: white;
	font-weight: 700;
	transition: transform 0.2s, background-color 0.2s;
	border: none;
}

.btn-brand-purple:hover {
	background-color: #70226b; /* Tonalità più scura per l'hover */
	transform: scale(1.05);
	color: white; /* Assicura che il testo rimanga bianco */
}

/* -- Rimuove la sottolineatura dai titoli degli articoli che sono link -- */
h2 a {
	text-decoration: none !important;
}

/* -- Stile per il Footer (Spostato e corretto) -- */
footer .grid-child {
	align-items: baseline !important;
	padding-bottom: 15px !important; /* CORRETTO: Aggiunta unità 'px' */
}

/* ==========================================================================
   3. STILI PER CONTENUTI SPECIFICI
   ========================================================================== */

/* -- Stile per le immagini prodotto -- */
.product-image {
	max-width: 400px;
}

/* -- Regole per gli articoli del blog in generale -- */
.blog-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.blog-item figure.item-image {
	width: 100%;
	max-height: 300px;
	margin: 5px;
	object-fit: cover; /* Assicura che l'immagine copra lo spazio */
}

.blog-item .item-content {
	padding-left: 0;
	width: 100%;
}

/* Articoli in colonne (columns-3): forza l'immagine sopra al testo su TUTTI gli schermi */
.blog-items.columns-3 .blog-item figure.item-image {
	float: none;
	width: 100%;
	margin: 0 0 1rem 0; /* Rimuove margini laterali e aggiunge spazio sotto */
}

/* Nasconde le didascalie delle immagini solo per gli articoli in colonna */
.blog-items.columns-3 .blog-item figcaption {
	display: none;
}

/* Correzione visualizzazione per blog alternato a 3 colonne */
div.blog-items.image-alternate.columns-3 div.blog-item {
	display: block;
}

/* -- Regole per moduli specifici per ID -- */
#mod-custom128 img {
	max-width: 400px;
	height: auto;
}

#mod-custom132 figure img {
	margin: 20px;
	float: left;
	max-width: 500px;
}

#mod-custom132 div figure figcaption {
	display: none; /* Nasconde la didascalia dell'immagine */
}

/* ==========================================================================
   4. REGOLE RESPONSIVE (MEDIA QUERIES)
   ========================================================================== */

/**
 * Regole per gli schermi medi/grandi (>= 768px)
 */
@media (min-width: 768px) {
	/* Immagine a sinistra in articoli singoli */
	figure.image-left.item-image {
		float: left;
		width: 30%;
		margin: 10px;
	}

	/* Immagine a destra in articoli singoli */
	figure.image-right.item-image {
		float: right;
		width: 30%;
		margin: 10px;
	}

	/* --- Regole per layout alternato del blog (Unite dal blocco duplicato) --- */

	/* 1. Forza Flexbox su tutti gli articoli "leading" */
	.blog-items.image-alternate .blog-item.leading {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		margin-bottom: 30px;
	}

	/* 2. Layout per articoli dispari (Immagine a SINISTRA) */
	.blog-items.image-alternate .blog-item.leading:nth-child(odd) {
		flex-direction: row !important; /* Forza Immagine-Testo */
	}

	.blog-items.image-alternate .blog-item.leading:nth-child(odd) .item-image {
		flex: 0 0 35% !important;
		max-width: 35% !important;
		padding-right: 15px !important;
		padding-left: 0 !important;
	}

	.blog-items.image-alternate .blog-item.leading:nth-child(odd) .item-content {
		flex: 1 !important;
		padding-left: 0 !important;
	}

	/* 3. Layout per articoli pari (Immagine a DESTRA) */
	.blog-items.image-alternate .blog-item.leading:nth-child(even) {
		flex-direction: row-reverse !important; /* Forza Testo-Immagine */
	}

	.blog-items.image-alternate .blog-item.leading:nth-child(even) .item-image {
		flex: 0 0 35% !important;
		max-width: 35% !important;
		padding-left: 15px !important;
		padding-right: 0 !important;
	}

	.blog-items.image-alternate .blog-item.leading:nth-child(even) .item-content {
		flex: 1 !important;
		padding-right: 15px !important;
	}
}

/**
 * Correzioni per la visualizzazione su Desktop (>= 992px)
 */
@media (min-width: 992px) {
	/* Nasconde il contenitore del menu mobile */
	.header #cassiopeia-menu-collapse {
		display: none !important;
		visibility: hidden !important;
	}

	/* Assicura la visibilità del menu desktop */
	.header .container-nav.d-lg-flex {
		display: flex !important;
	}

	/* Nasconde la barra di ricerca duplicata (regola di sicurezza) */
	#cassiopeia-menu-collapse .container-search {
		display: none !important;
	}
}

/**
 * Correzioni per la visualizzazione su Mobile (<= 991.98px)
 */
@media (max-width: 991.98px) {
	/* Forza la visualizzazione del menu a tendina */
	#cassiopeia-menu-collapse.show {
		display: block !important;
		visibility: visible !important;
		height: auto !important;
		max-height: 80vh !important;
		overflow-y: auto !important;
	}

	/* Forza la visualizzazione del contenitore interno del menu */
	#cassiopeia-menu-collapse.show #navbar129 {
		display: block !important;
		visibility: visible !important;
		max-height: none !important;
	}

	/* Regole aggiuntive per il contenitore di navigazione */
	.container-nav:not(.d-lg-flex) {
		display: block !important;
	}

	/* Nasconde gli elementi che non servono più in mobile */
	.navbar-toggler.navbar-toggler-right {
		display: none !important;
	}

	.header .toggle-menu {
		display: none !important;
	}

	/* Correzione colore link nel menu mobile */
	#cassiopeia-menu-collapse .nav-link,
	#cassiopeia-menu-collapse a {
		color: var(--text-dark) !important;
		font-weight: 600;
		padding-left: 0;
	}

	/* Stile per l'hover e il link attivo su mobile */
	#cassiopeia-menu-collapse .nav-link:hover,
	#cassiopeia-menu-collapse a:hover,
	#cassiopeia-menu-collapse .active > .nav-link,
	#cassiopeia-menu-collapse .active > a {
		color: var(--brand-purple) !important;
		background-color: transparent !important;
	}

	/* Assicura che il testo della ricerca sia scuro */
	.container-search input[type="search"] {
		color: var(--text-dark);
	}
}

.no-wrap-social {
    white-space: nowrap;
}

/**
 * CSS per forzare i video in formato verticale (9:16)
 * Il valore 177.77% deriva da (16 / 9) * 100
 */
.ratio-custom-vertical {
    /* Per Bootstrap 5.x (se supporta le variabili CSS) */
    --bs-aspect-ratio: 177.77%; 
    
    /* Se usi una versione più vecchia di Bootstrap o Cassiopeia non supporta le variabili, usa: */
    /* padding-bottom: 177.77%; */
    /* height: 0; */
    /* position: relative; */
}

/* Regole per garantire che l'iframe occupi il contenitore */
.ratio-custom-vertical iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}