/* ===================================================
   Make Different Magazine - Custom Styles
   Stili che integrano Tailwind CDN (definito in functions.php)
   =================================================== */

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hero-gradient {
	background: linear-gradient(135deg, #193C6A 0%, #112a4a 100%);
}

.editorial-shadow {
	box-shadow: 0 20px 40px rgba(25, 28, 29, 0.06);
}

body {
	font-family: 'Roboto', sans-serif;
}

/* Filtro magazine: tutti i bottoni della stessa larghezza per uniformità visiva */
.filter-btn {
	min-width: 140px;
	text-align: center;
}

/* Filtro magazine - active state.
   Uso !important per vincere su Tailwind CDN che inietta il proprio CSS
   DOPO i nostri stili enqueued, rendendo altrimenti invisibile il bg verde
   (resterebbe bg-white) o le hover variants come hover:bg-brand-green/5. */
.filter-btn.active,
.filter-btn.active:hover,
.filter-btn.active:focus,
.filter-btn.active:active {
	background-color: #46B066 !important;
	color: #ffffff !important;
	border-color: #46B066 !important;
}

/* Magazine items animation */
.magazine-item {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.magazine-item.hidden {
	display: none;
	opacity: 0;
	transform: translateY(20px);
}

/* La WP admin bar è nascosta dal frontend via filter show_admin_bar,
   quindi non servono offset CSS per evitare sovrapposizioni. */

/* Reset stile pulsanti WordPress che potrebbero interferire */
button {
	cursor: pointer;
}

/* La sidebar del single articolo scorre insieme al contenuto (nessuno sticky). */

/* ===================================================
   Slider Eventi (Swiper) - personalizzazione brand
   =================================================== */
.mdm-eventi-swiper {
	padding-bottom: 0;
	overflow: hidden;
}

.mdm-eventi-swiper .swiper-slide {
	height: auto;
	display: flex;
}

.mdm-eventi-swiper .swiper-slide > a {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Dots di paginazione: gialli sul fondo verde della sezione Eventi */
.mdm-eventi-pagination.swiper-pagination-bullets {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mdm-eventi-pagination .swiper-pagination-bullet {
	width: 14px;
	height: 14px;
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
	border-radius: 0;
	transition: background 0.3s ease;
	margin: 0 !important;
}

.mdm-eventi-pagination .swiper-pagination-bullet-active {
	background: #FFED00;
}

/* Stato disabled delle frecce (quando loop:false e si arriva ai bordi) */
.swiper-button-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide frecce su mobile molto stretto se rovinano il layout */
@media (max-width: 480px) {
	.mdm-eventi-prev,
	.mdm-eventi-next {
		width: 44px;
		height: 44px;
	}
}

/* Stili per contenuto editor (single post / page) */
.entry-content p {
	margin-bottom: 1.25rem;
	line-height: 1.7;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-weight: 900;
	color: #193C6A;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.entry-content a {
	color: #46B066;
	text-decoration: underline;
}

.entry-content a:hover {
	color: #193C6A;
}