/*
Theme Name: SSML Bootstrap
Theme URI: https://ssml.unimn.it
Author: Matteo Spaggiari
Author URI: https://wwww.matteospaggiari.it
Description: Tema WordPress a blocchi per la Scuola Superiore di Mediazione Linguistica della Fondazione UniverMantova, basato su Bootstrap.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssml-bootstrap
Tags: full-site-editing, block-patterns, accessibility-ready, custom-menu, custom-logo, featured-images, wide-blocks
*/


/* =========================================================
   1) RESET / NORMALIZZAZIONI FSE
========================================================= */

body .wp-site-blocks .site-main {
	margin: 0;
	padding: 0;
}

.wp-block-template-part {
	margin: 0;
	padding: 0;
}

.wp-block-columns {
	margin-bottom: 0;
}

.wp-block-group.alignfull > .container-fluid {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}


/* =========================================================
   2) UTILITIES / PICCOLE FIX GLOBALI
========================================================= */


.language a {
	text-transform: uppercase;
	font-weight: bold;
}

.wp-image-650 {
	vertical-align: middle !important;
}

.home img {
	border-radius: 0 !important;
}

.home-grid {
	padding-top: 3.4rem;
}

.ssml-btn-lg{
  padding: 0.9rem 1.4rem;
  font-size: 1.1rem;
}


/* =========================================================
   3) TYPOGRAPHY / CONTENT AREA
========================================================= */

.entry-content .wp-block-button__link {
	text-transform: uppercase !important;
	font-size: 1rem;
}

.wp-block-query-no-results {
	margin: 0 auto !important;
	padding: 0 0 2rem !important;
}

.wp-block-post-content {
	padding: 1.4rem 0 3.6rem !important;
}


/* =========================================================
   4) BUTTONS (stili e hover)
   Nota: qui c’è roba legacy (is-style-*-button) + fill palette.
========================================================= */

/* DAELIMINARE PROGRESSIVAMENTE */

.is-style-grey-button,
.page-template-page-with-sidebar-didattica-title .wp-block-button__link,
.page-template-page-with-sidebar-servizi-title .wp-block-button__link {
	border: 1px solid #76787B !important;
	transition: all 0.5s ease 0s;
}

.page-template-page-with-sidebar-didattica-title .wp-block-button__link:hover,
.page-template-page-with-sidebar-servizi-title .wp-block-button__link:hover {
	color: #76787B !important;
	background-color: transparent !important;
}


/* Blue legacy */
.is-style-blue-button,
.page-template-page-with-sidebar-ssml-title .wp-block-button__link,
.wp-block-button.is-style-fill .has-blu-logo-background-color {
	border: 1px solid #025382 !important;
	transition: all 0.5s ease 0s;
}

.page-template-page-with-sidebar-ssml-title .wp-block-button__link:hover {
	color: #025382 !important;
	background-color: transparent !important;
}

.wp-block-button.is-style-fill .has-blu-logo-background-color:hover {
	color: #025382 !important;
	background-color: #fff !important;
}


/* Red legacy */
.is-style-red-button,
.page-template-page-with-sidebar-internazionalizzazione-title .wp-block-button__link,
.wp-block-button.is-style-fill .has-rosso-logo-background-color {
	border: 1px solid #A71946 !important;
	transition: all 0.5s ease 0s;
}

.page-template-page-with-sidebar-internazionalizzazione-title .wp-block-button__link:hover {
	color: #A71946 !important;
	background-color: transparent !important;
}

.wp-block-button.is-style-fill .has-rosso-logo-background-color:hover {
	color: #A71946 !important;
	background-color: #fff !important;
}


/* Fill: verde / arancione */
.wp-block-button.is-style-fill .has-verde-logo-background-color {
	background-color: #64DD17;
	border: 1px solid #64DD17 !important;
	transition: all 0.5s ease 0s;
}

.wp-block-button.is-style-fill .has-verde-logo-background-color:hover {
	color: #64DD17 !important;
	background-color: #fff !important;
}

.wp-block-button.is-style-fill .has-arancione-logo-background-color {
	background-color: #FB8C00;
	border: 1px solid #FB8C00 !important;
	transition: all 0.5s ease 0s;
}

.wp-block-button.is-style-fill .has-arancione-logo-background-color:hover {
	color: #FB8C00 !important;
	background-color: #fff !important;
}


/* Centrare testo (template specifici) */
.page-template-page-with-sidebar-didattica-title .wp-block-button__link,
.page-template-page-with-sidebar-servizi-title .wp-block-button__link,
.page-template-page-with-sidebar-ssml-title .wp-block-button__link,
.page-template-page-with-sidebar-internazionalizzazione-title .wp-block-button__link {
	text-align: center !important;
	font-weight: normal !important;
}


/* =========================================================
   5) SHADOW / DETAILS / ELEMENTI COMUNI
========================================================= */


.wp-block-details {
	border-radius: 0.33rem;
}

.wp-block-details > * {
	padding: 0.25rem 1rem;
	overflow: hidden;
}

.wp-block-post-navigation-link a {
	font-weight: 500;
}

.wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}


/* =========================================================
   6) TABELLE SPECIFICHE
========================================================= */

.riepilogo-scadenze th:nth-child(1) {
	width: 70%;
}

.riepilogo-scadenze th:nth-child(2),
.riepilogo-scadenze th:nth-child(3) {
	width: 15%;
}

.degree-courses th:nth-child(1),
.corsi-di-laurea th:nth-child(1) {
	width: 55%;
}

.degree-courses th:nth-child(2),
.corsi-di-laurea th:nth-child(2) {
	width: 15%;
}

.degree-courses th:nth-child(3),
.degree-courses th:nth-child(4),
.degree-courses th:nth-child(5),
.corsi-di-laurea th:nth-child(3),
.corsi-di-laurea th:nth-child(4),
.corsi-di-laurea th:nth-child(5) {
	width: 10%;
}

/* =========================================================
   7) HEADER / FOOTER BASE
========================================================= */

header,
footer {
	background-color: var(--wp--preset--color--grigio) !important;
	font-size: 1.1rem;
}

.top-bar {
	background-color: var(--wp--preset--color--grigio-contrasto);
}

/* Footer: logo / testi (tolti inline style) */
.ssml-footer .ssml-footer-logo {
	max-height: 70px;
	width: auto;
}

.ssml-footer .ssml-footer-title {
	color: var(--wp--preset--color--nero);
}

.ssml-footer .ssml-footer-desc {
	color: var(--wp--preset--color--contrast-2);
}


/* =========================================================
   8) SOCIAL ICONS
========================================================= */

.social-icons .fa-facebook-f {
	color: #1877f2;
}

.social-icons .fa-instagram {
	background: radial-gradient(
		circle at 30% 107%,
		#fdf497 0%,
		#fdf497 5%,
		#fd5949 45%,
		#d6249f 60%,
		#285aeb 90%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.social-icons .fa-tiktok {
	color: #000000;
}

.social-icons a:hover {
	opacity: 0.75;
}


/* =========================================================
   9) NAVBAR / MENU COLORS + OFFCANVAS
========================================================= */

.ssml-header .ssml-navbar .nav-link,
.ssml-header .ssml-navbar .dropdown-item {
	display: inline-block;
	padding: 1rem;
	color: var(--wp--preset--color--bianco) !important;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ssml-header .ssml-navbar .nav-link:hover,
.ssml-header .ssml-navbar .nav-link:focus,
.ssml-header .ssml-navbar .nav-link:active {
	color: var(--wp--preset--color--bianco) !important;
	text-decoration: underline;
}

.ssml-header .ssml-navbar .dropdown-item:hover,
.ssml-header .ssml-navbar .dropdown-item:focus,
.ssml-header .ssml-navbar .dropdown-item:active {
	background-color: transparent !important;
	text-decoration: underline;
}

.ssml-header .ssml-navbar .dropdown-menu {
	border-radius: .33rem;
}

/* Contenitore barra menu */
.ssml-menu-bar,
.ssml-offcanvas  {
	background-color: var(--ssml-menu-bg);
	z-index: 2000;
}

/* Sezioni */
.menu-bar--blu-logo {
	--ssml-menu-bg: var(--wp--preset--color--blu-logo);
}
.menu-bar--rosso-logo {
	--ssml-menu-bg: var(--wp--preset--color--rosso-logo);
}
.menu-bar--grigio-logo {
	--ssml-menu-bg: var(--wp--preset--color--grigio-logo);
}

.ssml-navbar .dropdown-menu {
	background-color: var(--ssml-menu-bg);
	color: var(--wp--preset--color--bianco);
	border: 0;
}

.ssml-navbar .dropdown-item {
	color: var(--wp--preset--color--bianco);
}

/* Offcanvas */
.offcanvas.ssml-offcanvas{
	background-color: var(--ssml-menu-bg, var(--wp--preset--color--grigio-logo));
	color: var(--wp--preset--color--bianco);
}

.ssml-offcanvas .dropdown-menu {
	background-color: var(--ssml-menu-bg);	
}

.ssml-offcanvas ul.dropdown-menu {
	border: 1px solid #fff !important;
	border-top: none !important;
	border-radius: 0 0 0.3rem 0.3rem !important;
}

.ssml-offcanvas .dropdown-item {
	color: var(--wp--preset--color--bianco);
}

.ssml-offcanvas .nav-link:hover,
.ssml-offcanvas .nav-link:focus,
.ssml-offcanvas .nav-link:active {
	border: none !important;
}

/* Offcanvas: dropdown verticali tipo accordion */
.offcanvas .navbar-nav .dropdown-menu {
	position: static;
	float: none;
	width: 100%;
	margin: 0.25rem 0 0;
	border: 0;
	padding-left: 0.75rem;
}

/* Dropdown caret */
.offcanvas .navbar-nav .dropdown-toggle::after {
	float: right;
	margin-top: 0.6rem;
}

.ssml-offcanvas .btn-close {
	filter: invert(1) grayscale(100%);
	opacity: 1;
}

/* Focus ring */
.ssml-navbar .nav-link:focus-visible,
.ssml-navbar .dropdown-toggle:focus-visible {
	outline: none;
}

.ssml-offcanvas .navbar-nav .dropdown-toggle:focus,
.ssml-offcanvas .navbar-nav .dropdown-toggle:focus-visible,
.ssml-offcanvas .navbar-nav .nav-link:focus,
.ssml-offcanvas .navbar-nav .nav-link:focus-visible {
	outline: none;
}


/* =========================================================
   10) MAIN COVER
========================================================= */

.ssml-main-cover {
	margin: 0;
	width: 100%;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ssml-main-cover__overlay {
	min-height: 420px;
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.25);
}

.ssml-main-cover__title {
	color: #fff;
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3.5rem);
	margin: 0;
}

.ssml-main-cover h1 {
	padding: 0.2rem 4rem 0.2rem 0.5rem;
	width: fit-content;
	background-color: #a8a8a8bd;
	border-radius: 0 0.5rem 0.5rem 0;
}


/* =========================================================
   11) CAROUSEL IN EVIDENZA
========================================================= */

.ssml-featured-carousel {
	background-color: #76787B0F;
}

.ssml-carousel-img {
	width: 100%;
	object-fit: cover;
	height: 260px;
}

@media (min-width: 768px){
	.ssml-carousel-img{
		height: 400px;
	}
}

.ssml-carousel-caption {
	background: color-mix(
		in srgb,
		var(--wp--preset--color--nero) 85%,
		transparent
	);
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	max-width: 720px;
	margin-inline: auto;
	backdrop-filter: blur(2px);
}

.ssml-carousel-caption h5,
.ssml-carousel-caption p {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.ssml-carousel-caption h5 {
	font-size: 1rem;
}

@media (min-width: 768px){
	.ssml-carousel-caption h5 {
		font-size: 1.25rem;
	}
}


/* =========================================================
   12) NEWS / EVENTS (front-page)
========================================================= */

.ssml-news {
	background-color: #0253820F;
}

.ssml-news h2 { 
    color: var(--wp--preset--color--blu-logo); 
}

.ssml-news h3 a {
	color: var(--wp--preset--color--blu-logo);
}

.ssml-news h3 a:hover,
.ssml-news h3 a:focus,
.ssml-news h3 a:active {
	text-decoration: underline !important;
}

.ssml-news .card-img-top {
	width: 100%;
	object-fit: cover;
	height: 200px;
}

@media (min-width: 768px){
	.ssml-news .card-img-top {
		height: 260px;
	}
}

.ssml-events {
	background-color: #A719460F;
}

.ssml-events h2 { 
    color: var(--wp--preset--color--rosso-logo); 
}

.ssml-events h3 a {
	color: var(--wp--preset--color--rosso-logo);
}

.ssml-events h3 a:hover,
.ssml-events h3 a:focus,
.ssml-events h3 a:active {
	text-decoration: underline !important;
}

.ssml-events .card-img-top {
	width: 100%;
	object-fit: cover;
	height: 200px;
}

/* BUG FIX: qui prima avevi .ssml-news */
@media (min-width: 768px){
	.ssml-events .card-img-top{
		height: 260px;
	}
}


/* =========================================================
   14) GRID 4 COVERS (tile)
========================================================= */

/* Base link/tile */
.ssml-grid-4-covers .wp-block-button__link{
	max-width: 320px;
	min-height: 150px;

	/* centra il testo sempre */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	box-sizing: border-box;
	
	box-shadow:
		0 6px 12px rgba(0,0,0,0.08),
		0 16px 32px rgba(0,0,0,0.12);
	transition: all .3s ease;
}

.ssml-grid-4-covers .wp-block-button__link:hover,
.ssml-grid-4-covers .wp-block-button__link:focus{
	transform: translateY(-4px);
	box-shadow:
		0 12px 20px rgba(0,0,0,0.12),
		0 24px 48px rgba(0,0,0,0.18);
}

.wp-block-button__link,
button.wp-element-button[class*="is-style-ssml-"] {
	transition:
		background-color 0.35s ease,
		color 0.35s ease,
		border-color 0.35s ease;
}

/* =========================================================
   SSML BUTTON STYLES
   Supporta:
   1) .wp-block-button.is-style-ssml-xxx > .wp-block-button__link (a)
   2) button.wp-element-button.is-style-ssml-xxx (button)
========================================================= */

/* Base: comportamento hover comune (inverte bg/text) */
.wp-block-button[class*="is-style-ssml-"] > .wp-block-button__link,
button.wp-element-button[class*="is-style-ssml-"]{
  border-width: 1px;
  border-style: solid;
}

/* Hover / focus / active: invertiamo usando una variabile colore */
.wp-block-button[class*="is-style-ssml-"] > .wp-block-button__link:hover,
.wp-block-button[class*="is-style-ssml-"] > .wp-block-button__link:focus,
.wp-block-button[class*="is-style-ssml-"] > .wp-block-button__link:active,
button.wp-element-button[class*="is-style-ssml-"]:hover,
button.wp-element-button[class*="is-style-ssml-"]:focus,
button.wp-element-button[class*="is-style-ssml-"]:active{
  background-color: var(--wp--preset--color--bianco);
  color: var(--ssml-btn-color);
}

/* ===== GRIGIO ===== */
.wp-block-button.is-style-ssml-grey > .wp-block-button__link,
button.wp-element-button.is-style-ssml-grey{
  --ssml-btn-color: var(--wp--preset--color--grigio-logo);
  background-color: var(--ssml-btn-color);
  color: var(--wp--preset--color--bianco);
  border-color: var(--ssml-btn-color);
}

/* ===== BLU ===== */
.wp-block-button.is-style-ssml-blue > .wp-block-button__link,
button.wp-element-button.is-style-ssml-blue{
  --ssml-btn-color: var(--wp--preset--color--blu-logo);
  background-color: var(--ssml-btn-color);
  color: var(--wp--preset--color--bianco);
  border-color: var(--ssml-btn-color);
}

/* ===== ROSSO ===== */
.wp-block-button.is-style-ssml-red > .wp-block-button__link,
button.wp-element-button.is-style-ssml-red{
  --ssml-btn-color: var(--wp--preset--color--rosso-logo);
  background-color: var(--ssml-btn-color);
  color: var(--wp--preset--color--bianco);
  border-color: var(--ssml-btn-color);
}

/* ===== ARANCIONE ===== */
.wp-block-button.is-style-ssml-orange > .wp-block-button__link,
button.wp-element-button.is-style-ssml-orange{
  --ssml-btn-color: var(--wp--preset--color--arancione);
  background-color: var(--ssml-btn-color);
  color: var(--wp--preset--color--bianco);
  border-color: var(--ssml-btn-color);
}

/* ===== VERDE ===== */
.wp-block-button.is-style-ssml-green > .wp-block-button__link,
button.wp-element-button.is-style-ssml-green{
  --ssml-btn-color: var(--wp--preset--color--verde);
  background-color: var(--ssml-btn-color);
  color: var(--wp--preset--color--bianco);
  border-color: var(--ssml-btn-color);
}


/* =========================================================
   BUTTON STYLE: SSML Overlay Dark (badge scuro semi-trasparente)
========================================================= */
.wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link{
	background: color-mix(in srgb, var(--wp--preset--color--nero) 80%, transparent);
	color: var(--wp--preset--color--bianco);
	border: 0;
}

.wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:focus,
.wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:active{
	background: color-mix(in srgb, var(--wp--preset--color--nero) 92%, transparent);
}

/* =========================================================
   BUTTON STYLE: SSML Overlay Plain (solo testo sopra immagine)
   - hover/focus aggiunge overlay per affordance + accessibilità
========================================================= */
.wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link{
	background: transparent;
	color: var(--wp--preset--color--bianco);
	border: 0;
	padding: .85rem 1.1rem; /* lascia “area cliccabile” */
	text-shadow: 0 1px 2px rgba(0,0,0,.65); /* leggibilità su foto */
}

.wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:hover,
.wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:focus,
.wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:active{
	background: color-mix(in srgb, var(--wp--preset--color--nero) 70%, transparent);
	text-shadow: none;
}

/* Focus visibile (tastiera) */
.wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:focus-visible{
	outline: 2px solid var(--wp--preset--color--bianco);
	outline-offset: 2px;
}


/* =========================================================
   GRID 4 COVERS – FLEX “auto-center”
   (4/3/2 sempre centrati, tile max 320px)
========================================================= */

.ssml-grid-4-covers .ssml-grid-4-buttons.wp-block-buttons{
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;  /* centra sempre la riga */
	gap: 0;                   /* spacing via padding sui wrapper */
}

/* wrapper singolo bottone = “colonna” */
.ssml-grid-4-covers .ssml-grid-4-buttons .wp-block-button{
	flex: 1 1 100%;
	width: 100%;
	padding: 0.3rem;

	/* centra la tile (che ha max-width 320) dentro la colonna */
	display: flex;
	justify-content: center;

	box-sizing: border-box;
}

/* tablet: 2 per riga */
@media (min-width: 768px){
	.ssml-grid-4-covers .ssml-grid-4-buttons .wp-block-button{
		flex-basis: 50%;
		width: auto;
	}
}

/* desktop: 4 per riga */
@media (min-width: 1200px){
	.ssml-grid-4-covers .ssml-grid-4-buttons .wp-block-button{
		flex-basis: 25%;
	}
}

/* =========================================================
   GRID 4 IMAGES – modalità selezionabile (fluid/fixed)
   (stili sul core/group)
========================================================= */

/* BASE comune */
.ssml-grid-4-images .wp-block-columns.row{
	display:flex !important;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:0;
	margin-right:0;
}

.ssml-grid-4-images .wp-block-columns.row > .wp-block-column{
	box-sizing:border-box;
	padding:.3rem;
	min-width:0; /* importantissimo in flex */
}


/* -------------------------
   FLUID (default consigliato)
   ------------------------- */
@media (min-width: 768px){
	.ssml-grid-4-images.is-style-ssml-grid-4-images-fluid .wp-block-columns.row > .wp-block-column{
		flex: 1 1 50% !important;
		width: auto !important;
		max-width: none !important;
	}
}

@media (min-width: 1200px){
	.ssml-grid-4-images.is-style-ssml-grid-4-images-fluid .wp-block-columns.row > .wp-block-column{
		flex: 1 1 25% !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* -------------------------
   FIXED (card)
   ------------------------- */
@media (min-width: 768px){
	.ssml-grid-4-images.is-style-ssml-grid-4-images-fixed .wp-block-columns.row > .wp-block-column{
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 520px;
	}
}

@media (min-width: 1200px){
	.ssml-grid-4-images.is-style-ssml-grid-4-images-fixed .wp-block-columns.row > .wp-block-column{
		flex: 0 0 25% !important;
		width: 25% !important;
		max-width: 320px;
	}
}


/* --- cover --- */
.ssml-grid-4-images .ssml-cover-item{
	position: relative;
	min-height: 260px;
}
@media (min-width: 992px){
	.ssml-grid-4-images .ssml-cover-item{ min-height: 300px; }
}


/* =========================================================
   Inner container: deve coprire tutta la cover
   (necessario per allineamenti "basso ..." )
========================================================= */
.ssml-grid-4-images .ssml-cover-item > .wp-block-cover__inner-container{
	position: absolute;
	inset: 0;
	z-index: 2;

	display: flex;
	flex-direction: column;   /* ora: justify = verticale, align = orizzontale */

	padding: 1rem;
	box-sizing: border-box;

	/* default: centro-centro */
	justify-content: center;
	align-items: center;

	text-align: center;
}

/* assicurati che immagine e dim stiano sotto */
.ssml-grid-4-images .ssml-cover-item .wp-block-cover__image-background,
.ssml-grid-4-images .ssml-cover-item .wp-block-cover__background{
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* =========================================================
   POSIZIONI ETICHETTA (stili sul blocco Cover)
   - con flex-direction: column
     justify-content = verticale
     align-items     = orizzontale
========================================================= */

/* Alto centro */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-top-center > .wp-block-cover__inner-container{
	justify-content: flex-start;
	align-items: center;
	padding-top: 1.25rem;
}

/* Alto sinistra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-top-left > .wp-block-cover__inner-container{
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	padding-top: 1.25rem;
}

/* Alto destra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-top-right > .wp-block-cover__inner-container{
	justify-content: flex-start;
	align-items: flex-end;
	text-align: right;
	padding-top: 1.25rem;
}

/* Centro sinistra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-center-left > .wp-block-cover__inner-container{
	justify-content: center;
	align-items: flex-start;
	text-align: left;
}

/* Centro destra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-center-right > .wp-block-cover__inner-container{
	justify-content: center;
	align-items: flex-end;
	text-align: right;
}

/* Basso centro */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-bottom-center > .wp-block-cover__inner-container{
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 1.25rem;
}

/* Basso sinistra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-bottom-left > .wp-block-cover__inner-container{
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	padding-bottom: 1.25rem;
}

/* Basso destra */
.ssml-grid-4-images .wp-block-cover.is-style-ssml-cta-bottom-right > .wp-block-cover__inner-container{
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
	padding-bottom: 1.25rem;
}

/* =========================================================
   CTA (bottone/etichetta) – comportamento comune
========================================================= */
.ssml-grid-4-images .ssml-cover-cta .wp-block-button__link{

	font-weight: 300;
	font-size: 1.4rem;

	position: relative;
	z-index: 3;

	border: 0;
	border-radius: .5rem;
	padding: .85rem 1.25rem;

	text-transform: uppercase;
	letter-spacing: .5px;
	text-decoration: none;

	transition: filter .2s ease, transform .2s ease;
}

/* hover/focus */
.ssml-grid-4-images .ssml-cover-cta .wp-block-button__link:hover,
.ssml-grid-4-images .ssml-cover-cta .wp-block-button__link:focus{
	filter: brightness(1.05);
	transform: translateY(-1px);
	text-decoration: underline;
}

/* =========================================================
   Stretched link (solo frontend) – tutta la tile cliccabile
========================================================= */
.ssml-grid-4-images .ssml-cover-cta .wp-block-button__link::after{
	content: "";
	position: absolute;
	inset: -1px;
	top: -1000px;
	right: -1000px;
	bottom: -1000px;
	left: -1000px;
}

/* in editor disattivalo per poter editare */
.editor-styles-wrapper .ssml-grid-4-images .ssml-cover-cta .wp-block-button__link::after{
	content: none;
}

/* =========================================================
   Overlay styles (solo per il grid)
========================================================= */

/* Plain: davvero "nudo" SEMPRE (anche hover) */
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link{
	background: transparent !important;
	color: var(--wp--preset--color--bianco);
	backdrop-filter: none !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:hover,
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:focus,
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-plain > .wp-block-button__link:active{
	background: transparent !important;
}

/* Dark: badge con blur + shadow (look carousel) */
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link{
	background: color-mix(in srgb, var(--wp--preset--color--nero) 80%, transparent);
	color: var(--wp--preset--color--bianco);
	backdrop-filter: blur(2px);
}

.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:hover,
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:focus,
.ssml-grid-4-images .wp-block-button.is-style-ssml-overlay-dark > .wp-block-button__link:active{
	background: color-mix(in srgb, var(--wp--preset--color--nero) 92%, transparent);
}


/* =========================================================
   15) SIDEBAR STICKY (da template)
========================================================= */

.site-main .sidebar-sticky {
	top: 1.5rem;
}

/* Sidebar sezione: accent variabile in base alla root */
.ssml-section-sidebar.ssml-sidebar--blu-logo   { --ssml-sidebar-accent: var(--wp--preset--color--blu-logo); }
.ssml-section-sidebar.ssml-sidebar--rosso-logo { --ssml-sidebar-accent: var(--wp--preset--color--rosso-logo); }
.ssml-section-sidebar.ssml-sidebar--grigio-logo { --ssml-sidebar-accent: var(--wp--preset--color--grigio-logo); }

/* Card + header */
.ssml-section-sidebar .ssml-sidebar-card {
	border: 1px solid color-mix(in srgb, var(--ssml-sidebar-accent) 35%, #ffffff);
}

.ssml-section-sidebar .ssml-sidebar-title {
	background: var(--ssml-sidebar-accent);
	color: #fff;
	font-weight: 600;
	padding: 0.9rem 1rem;
	margin: 0;
	border-bottom: 0;
}

/* List items */
.ssml-section-sidebar .list-group-item {
	color: var(--ssml-sidebar-accent);
	background: #fff;
	border-color: rgba(0,0,0,0.06);
}

.ssml-section-sidebar .list-group-item:hover {
  	background: color-mix(in srgb, var(--ssml-sidebar-accent) 8%, #ffffff);
}

/* ACTIVE (consigliato): pieno colore sezione + testo bianco */
.ssml-section-sidebar .list-group-item.active,
.ssml-section-sidebar .list-group-item.active:hover {
	background: color-mix(in srgb, var(--ssml-sidebar-accent) 10%, #ffffff);
	color: var(--ssml-sidebar-accent);
	font-weight: 700;
	border-left: 6px solid var(--ssml-sidebar-accent);
	border-top-color: var(--ssml-sidebar-accent);
	border-bottom-color: var(--ssml-sidebar-accent);
}

/* riuso del sistema accent anche sulle card singole */
.ssml-section-sidebar .ssml-sidebar-card.ssml-sidebar--blu-logo   { --ssml-sidebar-accent: var(--wp--preset--color--blu-logo); }
.ssml-section-sidebar .ssml-sidebar-card.ssml-sidebar--rosso-logo { --ssml-sidebar-accent: var(--wp--preset--color--rosso-logo); }
.ssml-section-sidebar .ssml-sidebar-card.ssml-sidebar--grigio-logo{ --ssml-sidebar-accent: var(--wp--preset--color--grigio-logo); }


/* =========================================================
   16) VIDEO (responsive + portrait/landscape)
========================================================= */

/* Di default, nascondo il video verticale */
.video-vertical {
	display: none;
}

/* Optional: rendere il video responsive */
video {
	width: 100%;
	height: auto;
	max-height: 100vh;
	object-fit: cover;
}

.titolo-video {
	font-weight: normal !important;
	margin: 2.4rem auto 0 !important;
}

.titolo-video.primo-video {
	margin-top: 0 !important;
}

figure.ex-studenti video {
	height: 600px;
	width: auto;
}

.ssml-video-modal video{
	object-fit: contain; /* nel modal meglio così */
	max-height: 85vh;
	background: #000;
}

/* Bootstrap non include ratio-9x16: lo aggiungiamo noi */
.ssml-modal-ratio.ratio-9x16 { --bs-aspect-ratio: 177.7778%; } /* 16/9 * 100 */

/* Portrait */
@media (orientation: portrait) {
	.video-horizontal {
		display: none;
	}
	.video-vertical {
		display: block;
	}
}

/* Landscape */
@media (orientation: landscape) {
	.video-horizontal {
		display: block;
	}
	.video-vertical {
		display: none;
	}
}


/* =========================================================
   17) BOOTSTRAP MODALS
========================================================= */

.modal-backdrop.show {
	opacity: .80;
}

/* Modali più comode su schermi piccoli */
@media (max-width: 575.98px) {
	.modal-dialog {
		margin: 1rem;
	}
}


/* =========================================================
   18) COMPONENTI / FIX VARI RESPONSIVE
========================================================= */

@media (max-width: 576px) {
	.wp-block-avatar img {
		width: 36px !important;
		height: 36px !important;
	}
}

/* Stile specifico per il widget con classe custom-widget */
@media (max-width: 768px) {
	.is-style-disappear{
		display: none !important;
	}
}

/* =========================================================
   19) PULSANTI FISSI CONTATTI
========================================================= */

/* Floating contact buttons (bottom-right) — mobile-first */
.ssml-floating-contacts {
	position: fixed;
	right: .8rem;
	bottom: .8rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.ssml-fc-btn {
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.ssml-fc-btn i {
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
}

.ssml-fc-btn:hover {
	transform: translateY(-2px);
	opacity: .95;
}

/* Colori */
.ssml-fc-phone{ background: var(--wp--preset--color--blu-logo); }
.ssml-fc-email{ background: var(--wp--preset--color--rosso-logo); }
.ssml-fc-whatsapp{ background: #25D366; }
.ssml-fc-whatsapp:hover i{
	transform: scale(1.1);
}

/* Desktop / tablet */
@media (min-width: 768px) {

	.ssml-floating-contacts {
		right: 1.1rem;
		bottom: 1.1rem;
		gap: .55rem;
	}

	.ssml-fc-btn {
		width: 52px;
		height: 52px;
	}

}


/* --------------------------------------------------------------
   20) Breadcrumb (mobile-first)
-------------------------------------------------------------- */

/* Breadcrumb bar */
.ssml-breadcrumb-wrapper{
	padding: .75rem 0;
	border-bottom: 1px solid rgba(0,0,0,.12);
	margin-bottom: 1.25rem; /* stacca dal contenuto */
	background: rgba(0,0,0,.02);
}

.ssml-breadcrumb{
	font-size: .95rem;
	color: rgba(0,0,0,.65);
}

.ssml-breadcrumb .breadcrumb{
	margin: 0;
	background: transparent;
}

.ssml-breadcrumb a{
  	text-decoration: none;
}

.ssml-breadcrumb a:hover{
  	text-decoration: underline;
}

@media (min-width: 992px){

  .ssml-breadcrumb-wrapper{
		padding: 1rem 0;
		margin-bottom: 1.5rem;
  }
  .ssml-breadcrumb{
   		font-size: 1rem;
  }

}

/* --------------------------------------------------------------
   21) Modale per video presentazione
-------------------------------------------------------------- */

.ssml-video-modal .modal-dialog{
	max-width: min(1400px, 96vw);
}
.ssml-video-modal .modal-body{
	padding: 0;
}
.ssml-video-modal .ratio{
	max-height: 85vh;
}

/* === Video modal: overlay più cinematografico === */
.ssml-video-modal .modal-backdrop.show{
	opacity: .92;
}

.ssml-video-modal .modal-content{
	animation: ssmlModalIn .18s ease-out;
}

@keyframes ssmlModalIn{
	from{ transform: translateY(8px) scale(.985); opacity: 0; }
	to  { transform: translateY(0)   scale(1);     opacity: 1; }
}

.ssml-video-modal.modal.show{
	backdrop-filter: blur(2px);
}

.ssml-video-modal .btn-close{
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background-color: color-mix(in srgb, #000 55%, transparent);
	opacity: 1;
}
.ssml-video-modal .btn-close:hover{
	background-color: color-mix(in srgb, #000 70%, transparent);
}

/* =========================
   SHADOW SOFT
========================= */
.shadow-soft {
	box-shadow:
		0 4px 8px rgba(0,0,0,0.06),
		0 12px 24px rgba(0,0,0,0.08);
	transition: box-shadow .3s ease, transform .3s ease;
}

/* =========================
   SHADOW LIFT
========================= */
.shadow-lift {
	box-shadow:
		0 6px 12px rgba(0,0,0,0.08),
		0 16px 32px rgba(0,0,0,0.12);
	transition: all .3s ease;
}

.shadow-lift:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 20px rgba(0,0,0,0.12),
		0 24px 48px rgba(0,0,0,0.18);
}

/* =========================
   SHADOW DIRECTIONAL
========================= */
.shadow-directional {
	box-shadow:
		6px 6px 14px rgba(0,0,0,0.08);
	transition: box-shadow .3s ease;
}

.shadow-orange {
	box-shadow:
		0 12px 30px rgba(251, 140, 0, 0.25);
}

.shadow-green {
	box-shadow:
		0 12px 30px rgba(100, 221, 23, 0.25);
}

.shadow-blue {
	box-shadow:
		0 12px 30px rgba(2, 83, 130, 0.25);
}

a, button{
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.ssml-footer-contact{
  font-style: normal; /* evita corsivo automatico di <address> */
  line-height: 1.6;
}

.ssml-footer-contact i{
  width: 18px;
  text-align: center;
  opacity: .85;
}

.ssml-footer-contact a:hover{
  text-decoration: underline;
}


/* =========================================================
   TITOLI HOME - effetto 3D elegante
========================================================= */

.container-title h2{
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: 400;

	text-shadow:
		0 1px 0 rgba(255,255,255,.6),
		0 2px 0 rgba(0,0,0,.10),
		0 8px 18px rgba(0,0,0,.10);
}

/* Icona */
.container-title h2 i{
	transform: translateY(-1px);
	filter:
		drop-shadow(0 2px 0 rgba(0,0,0,.15))
		drop-shadow(0 10px 18px rgba(0,0,0,.10));
}

/* =========================================================
   REVEAL ANIMATIONS (opt-in) + reduced motion
========================================================= */

/* base: elemento nascosto finché non entra in viewport */
.ssml-reveal {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity 520ms ease,
		transform 520ms cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}

/* quando è visibile */
.ssml-reveal.is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* varianti */
.ssml-reveal--up { transform: translate3d(0, 18px, 0); }
.ssml-reveal--left { transform: translate3d(-18px, 0, 0); }
.ssml-reveal--right { transform: translate3d(18px, 0, 0); }
.ssml-reveal--zoom { transform: scale(.96); }

/* delay helpers (stagger manuale) */
.ssml-delay-1 { transition-delay: 80ms; }
.ssml-delay-2 { transition-delay: 160ms; }
.ssml-delay-3 { transition-delay: 240ms; }
.ssml-delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce){
	.ssml-reveal{
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* =========================================================
   FLOATING CONTACT BUTTONS – keyframes + stagger (robusto)
========================================================= */

@keyframes ssmlFabIn {
	from {
		opacity: 0;
		transform: translate3d(28px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* stato iniziale */
.ssml-fab {
  	pointer-events: none;
}

.ssml-fab .ssml-fc-btn{
	opacity: 0;
	transform: translate3d(28px, 0, 0);
	/* nessuna transition qui: così shadow-lift non disturba */
}

/* attivazione */
.ssml-fab.is-inview{
  	pointer-events: auto;
}

.ssml-fab.is-inview .ssml-fc-btn{
  	animation: ssmlFabIn 520ms cubic-bezier(.2,.8,.2,1) both;
}

/* stagger */
.ssml-fab.is-inview .ssml-fc-btn.ssml-delay-1{ animation-delay: 120ms; }
.ssml-fab.is-inview .ssml-fc-btn.ssml-delay-2{ animation-delay: 240ms; }
.ssml-fab.is-inview .ssml-fc-btn.ssml-delay-3{ animation-delay: 360ms; }

/* hover (solo dopo ingresso) */
.ssml-fab .ssml-fc-btn{
  	transition: transform 180ms ease; /* questa è solo per hover */
}
.ssml-fab .ssml-fc-btn:hover{
  	transform: translate3d(0, -2px, 0);
}

/* accessibilità */
@media (prefers-reduced-motion: reduce){
	.ssml-fab,
	.ssml-fab .ssml-fc-btn{
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* =========================================================
   EDITOR FIX – mostra sempre elementi animati nell’editor
========================================================= */

.block-editor-page .ssml-reveal,
.editor-styles-wrapper .ssml-reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.block-editor-page .ssml-fab,
.block-editor-page .ssml-fab .ssml-fc-btn,
.editor-styles-wrapper .ssml-fab,
.editor-styles-wrapper .ssml-fab .ssml-fc-btn{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}


/* =========================================================
   FIX: hover che usano transform + ssml-reveal
   (mettere DOPO le regole .ssml-reveal)
========================================================= */

/* shadow-lift torna a “sollevarsi” anche con reveal attivo */
.ssml-reveal.is-inview.shadow-lift:hover{
  transform: translate3d(0, -4px, 0);
}

/* se hai altri hover basati su transform, aggiungili qui */
.ssml-reveal.is-inview.shadow-soft:hover{
  transform: translate3d(0, -2px, 0);
}

/* grid 4 covers: hover sul link (se il link ha anche ssml-reveal) */
.ssml-grid-4-covers .ssml-reveal.is-inview.wp-block-button__link:hover,
.ssml-grid-4-covers .ssml-reveal.is-inview.wp-block-button__link:focus{
  transform: translate3d(0, -4px, 0);
}

/* grid 4 images: hover CTA (se anche il bottone ha ssml-reveal) */
.ssml-grid-4-images .ssml-cover-cta .ssml-reveal.is-inview.wp-block-button__link:hover,
.ssml-grid-4-images .ssml-cover-cta .ssml-reveal.is-inview.wp-block-button__link:focus{
  transform: translate3d(0, -1px, 0);
}

/* Bottoni con reveal: mantieni transizioni colore + reveal */
button.wp-element-button.ssml-reveal{
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(.2,.8,.2,1),
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

button.wp-element-button.ssml-reveal.is-inview.shadow-lift:hover{
  transform: translate3d(0, -4px, 0);
}

/* =========================================================
   FRONT PAGE – CIRCLE LINKS (4)
========================================================= */

.ssml-front-circle-links{
	margin-top: .25rem;
	margin-bottom: .25rem;
}

.ssml-circle-link{
 	transition: transform .25s ease;
}

.ssml-circle-link:hover{
  	transform: translateY(-4px);
}

/* Cerchio base */
.ssml-circle{
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #f2f2f2;
	font-size: 2rem;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.ssml-circle i{
  	transition: transform .3s ease;
}

/* Colori (icone a riposo) */
.ssml-circle-orange{ color: var(--wp--preset--color--arancione); }
.ssml-circle-green { color: var(--wp--preset--color--verde); }
.ssml-circle-blue  { color: var(--wp--preset--color--blu-logo); }
.ssml-circle-red   { color: var(--wp--preset--color--rosso-logo); }

/* Hover: riempi */
.ssml-circle-link:hover .ssml-circle-orange{
	background-color: var(--wp--preset--color--arancione);
	color: var(--wp--preset--color--bianco);
	box-shadow: 0 12px 30px rgba(251, 140, 0, 0.25);
}

.ssml-circle-link:hover .ssml-circle-green{
	background-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--bianco);
	box-shadow: 0 12px 30px rgba(100, 221, 23, 0.25);
}

.ssml-circle-link:hover .ssml-circle-blue{
	background-color: var(--wp--preset--color--blu-logo);
	color: var(--wp--preset--color--bianco);
	box-shadow: 0 12px 30px rgba(2, 83, 130, 0.25);
}

.ssml-circle-link:hover .ssml-circle-red{
	background-color: var(--wp--preset--color--rosso-logo);
	color: var(--wp--preset--color--bianco);
	box-shadow: 0 12px 30px rgba(167, 25, 70, 0.25);
}

/* Hover animazione icona */
.ssml-circle-link:hover i{
  	transform: scale(1.1);
}

/* Label */
.ssml-circle-label{
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--nero);
}

.ssml-circle-link:hover .ssml-circle-label{
  	text-decoration: underline;
}

/* Mobile */
@media (max-width: 576px){
	.ssml-circle{
		width: 90px;
		height: 90px;
		font-size: 1.6rem;
	}
}