/* Base — reset leggero, tipografia globale e componenti condivisi da tutti i template.
   Vedi CLAUDE.md > Design system. Caricato su ogni pagina: nei CSS di template restano solo
   le varianti specifiche (vedi sezione "Componenti condivisi dai template di pagina"). */

/* Scroll animato quando si salta a un'ancora interna (#slug), es. dai link dell'indice o dal
   pulsante "Prenota una visita" della hero verso il box prenotazione (#cc-prenota-visita) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-family: var(--font-body);
	color: var(--foreground);
	background: var(--background) !important;
	/* Evita lo scroll orizzontale di pochi px causato da elementi full-bleed (width: 100vw)
	   che non tiene conto della larghezza della scrollbar verticale, vedi .cc-article-hero.
	   overflow-y esplicito a "visible" perché altrimenti il browser converte automaticamente
	   overflow-y in "auto" quando solo overflow-x è impostato, trasformando il body in un
	   proprio contenitore di scroll separato dall'html — la causa della doppia scrollbar
	   verticale notata su pagine lunghe come il profilo medico */
	overflow-x: hidden;
	overflow-y: visible;
}
.separate-containers .site-main {margin:0px 20px 0px 20px !important}
.page-header, .sidebar .widget, .site-main>* {margin-bottom:0px !important}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--primary);
	line-height: 1.2;
}

a {
	color: var(--accent);
}

/* Interlinea degli elenchi puntati "nudi" (wp-block-list senza classi nostre) nel corpo
   pagina/articolo: 1.55, valore intermedio tra l'1.5 del tema padre GeneratePress (default
   per ul/li non sovrascritti) e l'1.6 usato dai nostri elenchi custom (.cc-medico-section__list
   e derivati) — così un elenco "nudo" e uno con le nostre classi, quando compaiono vicini
   nella stessa sezione, hanno la stessa interlinea invece di uno più compresso dell'altro. */
.cc-page-body li,
.cc-visita-body li,
.cc-medico-body li,
.cc-gruppo-body li {
	line-height: 1.55;
}

/* Tag/kicker con il nome del sito sopra l'H1, nella hero di page.php / template-visita.php /
   template-medico.php / template-gruppo.php — un'unica classe per tutti e 4 i template. */
.cc-page-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--primary);
	color: #dce7fb;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 22px;
}

.cc-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 60px);
}

/* Scroll reveal — richiede IntersectionObserver, vedi assets/js/reveal.js */
.cc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--duration-hero) var(--ease),
		transform var(--duration-hero) var(--ease);
}

.cc-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

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

/* Animazioni d'ingresso condivise (foto hero, logo/avatar del profilo medico e delle card
   Team, indice dei contenuti): un solo keyframe per tipo invece di uno per template. */
@keyframes cc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

/* Voci del menu principale: maiuscolo, più piccolo, separate da un puntino in orizzontale.
   Il puntino è un ::before sull'<li> (non un ::after) così resta agganciato all'inizio di
   ogni voce successiva nella riga flex, indipendente dal padding del link */
.main-navigation .main-nav > ul > li > a {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.82rem;
}

.main-navigation .main-nav > ul > li {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav > ul > li + li::before {
	content: '·';
	margin-right: 10px;
	color: var(--muted-foreground);
}
/* per megamenu*/
.inside-navigation.grid-container {max-width:80%}
#mega-menu-wrap-primary #mega-menu-primary, #mega-menu-wrap-primary {width:100% !important;}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before
{	content: '·';
	display: inline;
	padding-right: 30px;
	color: var(--muted-foreground);}
.bordo{border: 2px solid rgba(143, 178, 234, 0.35) !important; background-color: #f4f6f9 !important; border-radius:20px}
.testo {font-family: var(--font-heading); font-size: 26px; line-height: 1.1; margin-top:20px;}

/* Icona a sinistra dei titoli h4 nei box delle pagine Centro (classe sul Gruppo contenitore):
   impostazione comune qui, solo l'immagine nelle singole classi sotto. */
.equipepoli h4,
.specialitapoli h4,
.trattamenti h4,
.strutturapoli h4,
.equipeodonto h4,
.specialitaodonto h4,
.focusodonto h4,
.strutturaodonto h4 {
	background: no-repeat left center / 34px auto !important;
	padding: 16px 0px 16px 38px !important;
}
.equipepoli h4 {background-image: url('/wp-content/uploads/2026/09/1equipe-polispecialistico.png') !important;}
.specialitapoli h4 {background-image: url('/wp-content/uploads/2026/09/1specialitapoli.png') !important;}
.trattamenti h4 {background-image: url('/wp-content/uploads/2026/10/1icon-trattamenti.png') !important;}
.strutturapoli h4 {background-image: url('/wp-content/uploads/2026/09/1CentroPolispecialistico.png') !important;}
.equipeodonto h4 {background-image: url('/wp-content/uploads/2026/10/1equipe-odonto.png') !important;}
.specialitaodonto h4 {background-image: url('/wp-content/uploads/2026/10/icon-specialita-odonto.png') !important;}
.focusodonto h4 {background-image: url('/wp-content/uploads/2026/10/focus-odonto.png') !important;}
.strutturaodonto h4 {background-image: url('/wp-content/uploads/2026/10/icon-strutturaodonto.png') !important;}
/* Mobile (stesso breakpoint del menu mobile di Max Mega Menu, 930px): icona sopra il titolo, centrata */
@media (max-width: 930px) {
	.equipepoli h4,
	.specialitapoli h4,
	.trattamenti h4,
	.strutturapoli h4,
	.equipeodonto h4,
	.specialitaodonto h4,
	.focusodonto h4,
	.strutturaodonto h4 {
		background-position: center top !important;
		padding: 46px 0 16px !important; /* 34px icona + 12px di respiro */
		text-align: center;
	}
}

.margine-top  {margin-top: 76px!important;}
@media (max-width: 930px) {
	.margine-top {margin-top: 0 !important;}
}


/* Voci dei sottomenu: sottolineatura che entra da sinistra in hover/focus. ::after scalato
   con transform (GPU) invece di animare width; inline-block così la linea segue il testo e
   non la larghezza della colonna. */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link {
	position: relative !important;
	display: inline-block !important;
}
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -2px !important;
	height: 2px !important;
	background: var(--accent) !important;
	transform: scaleX(0) !important;
	transform-origin: left !important;
	transition: transform var(--duration-ui) var(--ease) !important;
}
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link:hover::after,
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link:focus-visible::after {
	transform: scaleX(1) !important;
}
@media (prefers-reduced-motion: reduce) {
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a.mega-menu-link::after {
		transition: none !important;
	}
}

/* Sottovoce: voce figlia di quella sopra (es. "Impianti senza osso" sotto Implantologia).
   Classe "cc-sottovoce" nel campo "Classi CSS" della voce di menu (WP la mette sul li). */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.cc-sottovoce > a.mega-menu-link {

	font-style: italic !important;
}

.odontoiatria .icon img {width:40px;}

/* Toggle hamburger mobile di Max Mega Menu (blocco "animated" n. 1): bottone tondo blu
   come i bottoni del sito (.cc-medico-cta), linee bianche. Selettori con ID per superare
   il CSS generato dal plugin. */
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--primary);
	transition: transform var(--duration-ui) var(--ease), background-color var(--duration-ui) var(--ease);
}

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated:hover,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated:focus-visible {
	background: var(--footer);
	transform: translateY(-2px);
}

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after {
	background-color: #ffffff;
}

/* Overlay su tutta la pagina con il menu mobile aperto: Max Mega Menu aggiunge al body la
   classe mega-menu-primary-mobile-open. Overlay sempre presente ma invisibile, così entra e
   esce in dissolvenza; la navigazione sta sopra (z-index più alto). pointer-events solo da
   aperto, da chiuso non intercetta i tap sulla pagina. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(15, 36, 71, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--duration-ui) var(--ease), visibility var(--duration-ui) var(--ease);
}

body.mega-menu-primary-mobile-open::after {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.mega-menu-primary-mobile-open .main-navigation {
	position: relative;
	z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
	body::after {
		transition: none;
	}
}

/* Icona rimpicciolita senza toccare le misure del plugin (che regolano anche l'animazione
   a "X"): scale sul contenitore delle linee. */
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-box {
	transform: scale(0.6);
}

@media (prefers-reduced-motion: reduce) {
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated {
		transition: none;
	}
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1.mega-menu-toggle-animated-block button.mega-toggle-animated:hover {
		transform: none;
	}
}


/* Breadcrumb (cc_breadcrumb() in functions.php, agganciato a generate_before_main_content):
   stessa logica separatore ::before di sopra, "›" invece di "·" per distinguerlo dal menu.
   position + z-index: il badge deve restare sopra alla hero che segue subito dopo nel
   markup — senza z-index l'ordine del DOM la coprirebbe (la hero, successiva, dipingerebbe
   sopra). "bottom" invece di un margin-bottom negativo: sposta solo il badge dentro la hero,
   senza tirare su anche lei (il suo spazio nel flusso normale resta invariato). */
.cc-breadcrumb {
	position: relative;
	z-index: 2;
	bottom: -15px;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 16px clamp(10px, 2vw, 24px) 0;
	display: flex;
	justify-content: center;
}

/* Badge: solo quanto basta a contenere il testo (inline-flex, non block), centrato come il
   resto della hero sotto. */
.cc-breadcrumb__badge {
	margin: 0;
	padding: 5px 20px;
	list-style: none;
	display: inline-flex;
	flex-wrap: wrap;
	background: var(--background);
	border-radius: var(--radius-pill);
}

.cc-breadcrumb__item {
	display: flex;
	align-items: center;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.cc-breadcrumb__item + .cc-breadcrumb__item::before {
	content: '›';
	margin: 0 8px;
	color: var(--muted-foreground);
}

.cc-breadcrumb__item a {
	color: var(--muted-foreground);
	text-decoration: none;
}

.cc-breadcrumb__item a:hover,
.cc-breadcrumb__item a:focus-visible {
	color: var(--accent);
}

.cc-breadcrumb__item [aria-current="page"] {
	color: var(--foreground);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   COMPONENTI CONDIVISI DAI TEMPLATE DI PAGINA
   page.php, template-medico/gruppo/visita.php e front-page.php hanno la stessa struttura
   (hero → corpo → box prenotazione) con classi a prefisso diverso (cc-page-*, cc-medico-*,
   cc-gruppo-*, cc-visita-*) ma dichiarazioni identiche: sono definite una volta sola qui,
   con i selettori raggruppati. Nei CSS dei template restano solo le varianti.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Contenitore e corpo pagina ──────────────────────────────────────────────────────── */

/* Medico/Gruppo tagliano lo sconfinamento sul contenitore; Pagina/Visita no: lì le sezioni
   full-bleed (100vw) devono uscire dalla colonna stretta dei contenuti, e basta già
   l'overflow-x:hidden del body (largo quanto la finestra). */
.cc-medico,
.cc-gruppo {
	overflow-x: hidden;
	overflow-y: hidden;
}

.cc-page,
.cc-visita {
	overflow-y: visible;
}

/* Margine/padding come .cc-article-body (single.css). Visita: niente padding sotto (visita.css). */
.cc-page-body,
.cc-gruppo-body,
.cc-visita-body {
	margin-inline: auto;
	padding: clamp(20px, 8vw, 40px) clamp(20px, 5vw, 30px) clamp(20px, 8vw, 40px);
}

/* Tutti i paragrafi del corpo pagina con lo stesso font, qualunque sia la sezione/classe
   in cui si trovano — i titoli restano invece su var(--font-heading). */
.cc-page-body p,
.cc-visita-body p {
	font-family: var(--font-body);
}

/* Didascalie: vecchio shortcode [caption] (.wp-caption-text), figcaption del blocco Immagine
   di Gutenberg e .wp-caption-text da sola (es. frase sotto un video in una pagina FAQ) —
   stesso trattamento su articoli e pagine, qualunque sia il markup di origine. */
.cc-article-content .wp-caption-text,
.cc-page-body .wp-caption .wp-caption-text,
.cc-page-body .wp-block-image figcaption,
.cc-page-body .wp-caption-text,
.cc-visita-body .wp-caption .wp-caption-text,
.cc-visita-body .wp-block-image figcaption,
.cc-gruppo-body .wp-caption .wp-caption-text {
	font-family: var(--font-heading);
	font-weight: 300;
	font-style: italic;
	font-size: 0.95rem;
	text-align: center;
	color: var(--muted-foreground);
	margin-top: 10px;
}

/* Le fasce a piena larghezza escono dal contenitore centrato del tema padre (GeneratePress). */
.cc-medico-hero,
.cc-medico-section,
.cc-medico-contact,
.cc-gruppo-hero,
.cc-gruppo-section,
.cc-page-hero,
.cc-page-section,
.cc-visita-hero,
.cc-visita-section,
.cc-home-hero,
.cc-article-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ─── CTA e box prenotazione (widget condivisi, vedi functions.php) ───────────────────── */

/* .cc-btn: nome generico del pulsante del sito, da usare nei contenuti nuovi (varianti
   .cc-btn--link e .cc-btn--ghost). Identico a .cc-medico-cta, il nome storico (nato col
   profilo medico) che resta valido nei widget e nelle pagine già fatte: le due classi
   condividono tutte le regole, anche in pagina.css e visita.css (sezioni scure, card jobs).
   .cc-medico-cta: pulsante dei widget "CTA hero" e "Box prenotazione", riusato anche nel
   contenuto. .cc-cta-prenotazioni: stesso pulsante nel megamenu (area "CTA bottone
   prenotazioni") — selettore con gli id del megamenu per vincere sul reset del plugin, che
   forza display/width/colori dei link. */
.cc-medico-cta,
.cc-btn,
.cc-cta-prenotazioni,
#mega-menu-wrap-primary #mega-menu-primary a.cc-cta-prenotazioni {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--primary);
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 14px 28px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: transform var(--duration-ui) var(--ease), background-color var(--duration-ui) var(--ease);
}

.cc-cta-prenotazioni,
#mega-menu-wrap-primary #mega-menu-primary a.cc-cta-prenotazioni {
	width: auto;
	line-height: 1.2;
}

.cc-medico-cta:hover,

.cc-btn:hover,
.cc-medico-cta:active,
.cc-btn:active,
.cc-medico-cta:focus,
.cc-btn:focus,
.cc-cta-prenotazioni:hover,
.cc-cta-prenotazioni:focus-visible,
#mega-menu-wrap-primary #mega-menu-primary a.cc-cta-prenotazioni:hover,
#mega-menu-wrap-primary #mega-menu-primary a.cc-cta-prenotazioni:focus-visible {
	background: var(--footer);
	color: #ffffff;
	transform: translateY(-2px);
}

.cc-medico-cta--link ,

.cc-btn--link {
	background: transparent;
	color: var(--primary);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0;
	border-bottom: 1.5px solid var(--accent);
	border-radius: 0;
}

.cc-medico-cta--link:hover ,

.cc-btn--link:hover {
	color: var(--accent);
	background: transparent;
	transform: none;
}

.cc-medico-cta--ghost ,

.cc-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	color: #dce7fb;
}

.cc-medico-cta--ghost:hover ,

.cc-btn--ghost:hover {
	border-color: #dce7fb;
	background: transparent;
}

.cc-medico-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}

/* Pillola verso la pagina collegata tramite tassonomia cc_specialita (profilo medico ↔
   pagina visita, card Team del template Gruppo). */
.cc-specialita-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--primary);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 7px 16px;
	border: 1px solid var(--primary);
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color var(--duration-ui) var(--ease), color var(--duration-ui) var(--ease);
}

.cc-specialita-badge:hover,
.cc-specialita-badge:focus {
	background: var(--primary);
	color: #ffffff;
}

/* Box "Prenota una visita" in fondo a tutte le pagine (widget CC_Widget_Prenotazione). */
.cc-medico-contact {
	background: var(--footer);
	padding: clamp(56px, 8vw, 90px) clamp(20px, 6vw, 8vw);
	text-align: center;
}

.cc-medico-contact__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.7rem, 3vw, 2rem);
	color: #ffffff;
	margin: 0 0 14px;
}

.cc-medico-contact__text {
	font-family: var(--font-body);
	font-size: 1rem;
	color: #b9c8dd;
	max-width: 480px;
	margin: 0 auto clamp(28px, 4vw, 34px);
}

.cc-medico-contact__actions {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ─── Hero (Gruppo, Pagina, Visita; la hero del profilo medico ha un layout suo) ───────────
   Foto ambiente a piena larghezza/altezza con velo bianco; il fade per il contrasto è solo
   dietro al blocco testo (__info). Senza featured image __bkg non viene stampato: lo sfondo
   var(--muted) di Pagina/Visita evita una hero vuota. */
.cc-gruppo-hero,
.cc-page-hero,
.cc-visita-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: clamp(420px, 58vh, 620px);
}

.cc-page-hero,
.cc-visita-hero {
	background: var(--muted);
}

.cc-gruppo-hero__bkg,
.cc-page-hero__bkg,
.cc-visita-hero__bkg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #90b5e1;
}

.cc-gruppo-hero__bkg::after,
.cc-page-hero__bkg::after,
.cc-visita-hero__bkg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.4);
}

/* Pallino "vai al contenuto", sopra velo e foto */
.cc-gruppo-hero__scroll,
.cc-page-hero__scroll,
.cc-visita-hero__scroll {
	position: absolute;
	z-index: 2;
	bottom: clamp(20px, 4vw, 40px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--primary);
	color: #ffffff;
	font-size: 1.1rem;
	text-decoration: none;
	transition: transform var(--duration-ui) var(--ease), background-color var(--duration-ui) var(--ease);
}

.cc-gruppo-hero__scroll:hover,
.cc-gruppo-hero__scroll:active,
.cc-gruppo-hero__scroll:focus,
.cc-page-hero__scroll:hover,
.cc-page-hero__scroll:active,
.cc-page-hero__scroll:focus,
.cc-visita-hero__scroll:hover,
.cc-visita-hero__scroll:active,
.cc-visita-hero__scroll:focus {
	background: var(--footer);
	color: #ffffff;
	transform: translateX(-50%) translateY(4px);
}

/* Larghezza di riferimento condivisa con .cc-medico-hero__inner: la foto resta a piena
   larghezza, il testo si ferma al bordo del contenuto */
.cc-gruppo-hero__inner,
.cc-page-hero__inner,
.cc-visita-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding: clamp(32px, 6vw, 72px) clamp(10px, 2vw, 24px) 0;
}

/* Gruppo: larghezza/inquadratura proprie in gruppo.css */
.cc-gruppo-hero__photo,
.cc-page-hero__photo,
.cc-visita-hero__photo {
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	animation: cc-fade-in 900ms var(--ease) both;
}

.cc-page-hero__photo,
.cc-visita-hero__photo {
	width: 100%;
	object-position: center center;
}

/* Fade localizzato dietro al solo blocco testo, non un riquadro netto. Medico: max-width
   propria in medico.css. */
.cc-medico-hero__info,
.cc-gruppo-hero__info,
.cc-page-hero__info,
.cc-visita-hero__info {
	padding: clamp(28px, 4vw, 44px);
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.85) 0%,
		rgba(255, 255, 255, 0.55) 55%,
		rgba(255, 255, 255, 0) 100%
	);
}

.cc-gruppo-hero__info,
.cc-page-hero__info,
.cc-visita-hero__info {
	max-width: 580px;
	text-align: center;
}

.cc-gruppo-hero__info .cc-medico-hero__actions,
.cc-page-hero__info .cc-medico-hero__actions,
.cc-visita-hero__info .cc-medico-hero__actions {
	justify-content: center;
	margin-top: clamp(24px, 5vw, 50px);
}

@media (max-width: 640px) {
	.cc-gruppo-hero,
	.cc-page-hero,
	.cc-visita-hero {
		min-height: clamp(360px, 52vh, 480px);
	}

	.cc-gruppo-hero__info,
	.cc-page-hero__info,
	.cc-visita-hero__info {
		max-width: 100%;
	}
}

/* Testi della hero, identici nei 4 template (Medico: sottotitolo grigio in medico.css) */
.cc-medico-hero__name,
.cc-gruppo-hero__name,
.cc-page-hero__name,
.cc-visita-hero__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--primary);
	margin: 0 0 10px;
}

.cc-medico-hero__subtitle,
.cc-gruppo-hero__subtitle,
.cc-page-hero__subtitle,
.cc-visita-hero__subtitle {
	font-family: var(--font-body);
	font-size: 1.1rem;
	color: var(--foreground);
	line-height: 1.5;
	margin: 0 0 26px;
}

/* Righe dei campi cc_medico_credenziali / cc_gruppo_dettagli / cc_page_dettagli */
.cc-medico-hero__credentials,
.cc-gruppo-hero__credentials,
.cc-page-hero__credentials,
.cc-visita-hero__credentials {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--muted-foreground);
	margin: 0 0 30px;
	list-style: none;
	padding: 0;
}

/* Hero ridotta (template "Gruppo — Hero ridotta" / "Pagina — Hero ridotta"): stessi
   contenuti, solo più bassa; pallino "vai al contenuto" nascosto. La versione Gruppo non
   stampa nemmeno la foto (template-gruppo.php). */
.cc-gruppo-hero--compact,
.cc-page-hero--compact {
	min-height: clamp(200px, 30vh, 280px);
	background: var(--muted);
}

.cc-gruppo-hero--compact .cc-gruppo-hero__inner,
.cc-page-hero--compact .cc-page-hero__inner {
	padding: clamp(20px, 4vw, 32px) clamp(10px, 2vw, 24px) 0;
}

.cc-gruppo-hero--compact .cc-gruppo-hero__info,
.cc-page-hero--compact .cc-page-hero__info {
	padding: clamp(16px, 2.5vw, 24px);
	background: none;
}

.cc-gruppo-hero--compact .cc-gruppo-hero__name,
.cc-page-hero--compact .cc-page-hero__name {
	font-size: clamp(1.6rem, 3vw, 2.15rem);
	margin-bottom: 18px;
}

.cc-gruppo-hero--compact .cc-gruppo-hero__subtitle,
.cc-page-hero--compact .cc-page-hero__subtitle {
	margin-bottom: 0;
}

.cc-gruppo-hero--compact .cc-gruppo-hero__info .cc-medico-hero__actions,
.cc-page-hero--compact .cc-page-hero__info .cc-medico-hero__actions {
	margin-top: clamp(16px, 3vw, 30px);
}

.cc-gruppo-hero--compact .cc-gruppo-hero__scroll,
.cc-page-hero--compact .cc-page-hero__scroll {
	display: none;
}

@media (max-width: 640px) {
	.cc-gruppo-hero--compact,
	.cc-page-hero--compact {
		min-height: clamp(180px, 26vh, 240px);
	}
}

/* Hero con video (custom field cc_video, vedi cc_hero_video() in functions.php): più alta,
   video al posto della foto (avviato da assets/js/hero-video.js); poster = featured image,
   che resta su mobile / con prefers-reduced-motion. Dopo le regole sopra per prevalere
   sulla media query mobile della hero normale. */
.cc-gruppo-hero--video,
.cc-page-hero--video,
.cc-visita-hero--video {
	min-height: clamp(560px, 86vh, 900px);
}

.cc-gruppo-hero__video,
.cc-page-hero__video,
.cc-visita-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

@media (max-width: 640px) {
	.cc-gruppo-hero--video,
	.cc-page-hero--video,
	.cc-visita-hero--video {
		min-height: clamp(440px, 72vh, 620px);
	}
}

/* ─── Sezioni (blocco Gruppo full-bleed nel contenuto) ────────────────────────────────────
   Varianti: --dark (blu), --muted (grigio), --centered. Le forme con un trattino solo
   (cc-page-section-dark ecc.) sono alias storici, usare quelle con "--". I colori del testo
   "nudo" nelle sezioni scure restano in pagina.css / visita.css. */
.cc-medico-section,
.cc-gruppo-section,
.cc-page-section,
.cc-visita-section {
	padding: clamp(28px, 4vw, 52px) clamp(20px, 6vw, 8vw);
	background: var(--background);
}

/* Contenitore interno (sul blocco Colonne/Gruppo dentro la sezione): sfondo full-bleed,
   contenuto alla stessa larghezza della hero */
.cc-page-section__inner,
.cc-visita-section__inner {
	max-width: var(--content-max);
	margin: 0 auto;
}

.cc-medico-section--dark,
.cc-gruppo-section--dark,
.cc-page-section--dark,
.cc-page-section-dark,
.cc-visita-section--dark {
	position: relative;
	background: var(--primary);
}

.cc-medico-section--dark .cc-medico-section__head,
.cc-medico-section--dark .cc-medico-areas,
.cc-gruppo-section--dark .cc-gruppo-section__head,
.cc-gruppo-section--dark .cc-gruppo-areas,
.cc-page-section--dark .cc-page-section__head,
.cc-page-section--dark .cc-page-areas,
.cc-page-section--dark .cc-page-steps,
.cc-page-section-dark .cc-page-section__head,
.cc-page-section-dark .cc-page-areas,
.cc-page-section-dark .cc-page-steps {
	position: relative;
	z-index: 1;
}

.cc-medico-section--muted,
.cc-gruppo-section--muted,
.cc-page-section--muted,
.cc-page-section-muted,
.cc-visita-section--muted {
	background: var(--muted);
}

.cc-medico-section--centered,
.cc-gruppo-section--centered,
.cc-page-section--centered,
.cc-page-section-centered,
.cc-visita-section--centered {
	text-align: center;
}

.cc-medico-section__head,
.cc-gruppo-section__head,
.cc-page-section__head,
.cc-visita-section__head {
	max-width: 900px;
	margin: 0 auto clamp(40px, 6vw, 56px);
	text-align: center;
}

.cc-medico-section__eyebrow,
.cc-gruppo-section__eyebrow,
.cc-page-section__eyebrow,
.cc-visita-section__eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 10px;
}

.cc-medico-section--dark .cc-medico-section__eyebrow,
.cc-gruppo-section--dark .cc-gruppo-section__eyebrow,
.cc-page-section--dark .cc-page-section__eyebrow,
.cc-page-section-dark .cc-page-section__eyebrow,
.cc-visita-section--dark .cc-visita-section__eyebrow {
	color: #8fb2ea;
}

.cc-medico-section__title,
.cc-gruppo-section__title,
.cc-page-section__title,
.cc-visita-section__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	color: var(--primary);
	margin: 0;
}

.cc-medico-section--dark .cc-medico-section__title,
.cc-gruppo-section--dark .cc-gruppo-section__title,
.cc-page-section--dark .cc-page-section__title,
.cc-page-section-dark .cc-page-section__title,
.cc-visita-section--dark .cc-visita-section__title {
	color: #ffffff;
}

.cc-medico-section__title--sm,
.cc-gruppo-section__title--sm,
.cc-page-section__title--sm {
	font-size: 1.5rem;
	text-align: left;
	margin-bottom: 20px;
}

/* Frase che introduce un elenco subito sotto il titolo — dentro __head eredita la centratura */
.cc-medico-section__lead,
.cc-gruppo-section__lead,
.cc-page-section__lead {
	font-family: var(--font-body);
	font-size: 1.03rem;
	line-height: 1.6;
	color: var(--muted-foreground);
	margin: 14px 0 0;
}

.cc-medico-section--dark .cc-medico-section__lead,
.cc-gruppo-section--dark .cc-gruppo-section__lead,
.cc-page-section--dark .cc-page-section__lead,
.cc-page-section-dark .cc-page-section__lead {
	color: #ffffff;
}

/* ─── Timeline (percorso professionale, tappe, elenchi cronologici) ───────────────────── */

.cc-medico-timeline,
.cc-gruppo-timeline,
.cc-page-timeline {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 700px;
}

/* Titoletto + paragrafo introduttivo tra due timeline distinte nella stessa sezione */
.cc-medico-section__intro-head,
.cc-gruppo-section__intro-head,
.cc-page-section__intro-head {
	max-width: 700px;
	margin: 40px auto;
	text-align: center;
}

.cc-medico-section__intro-head .cc-medico-section__eyebrow,
.cc-gruppo-section__intro-head .cc-gruppo-section__eyebrow,
.cc-page-section__intro-head .cc-page-section__eyebrow {
	text-align: center;
}

.cc-medico-section__intro,
.cc-gruppo-section__intro,
.cc-page-section__intro {
	margin: 0;
	text-align: left;
	font-family: var(--font-body);
	font-size: 1.03rem;
	line-height: 1.6;
	color: var(--foreground);
}

.cc-medico-timeline__item,
.cc-gruppo-timeline__item,
.cc-page-timeline__item {
	position: relative;
	padding-left: 40px;
	padding-bottom: 40px;
}

.cc-medico-timeline__item:last-child,
.cc-gruppo-timeline__item:last-child,
.cc-page-timeline__item:last-child {
	padding-bottom: 0;
}

/* Pallino e linea ricreati via pseudo-elementi (il markup ha solo tag + testo) */
.cc-medico-timeline__item::before,
.cc-gruppo-timeline__item::before,
.cc-page-timeline__item::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
}

.cc-medico-timeline__item:not(:last-child)::after,
.cc-gruppo-timeline__item:not(:last-child)::after,
.cc-page-timeline__item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 20px;
	bottom: -40px;
	left: 6px;
	width: 2px;
	background: var(--border);
}

.cc-medico-timeline__tag,
.cc-gruppo-timeline__tag,
.cc-page-timeline__tag {
	display: block;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 6px;
}

.cc-medico-timeline__text,
.cc-gruppo-timeline__text,
.cc-page-timeline__text {
	font-family: var(--font-body);
	font-size: 1.03rem;
	line-height: 1.6;
	color: var(--foreground);
	margin: 0;
}

/* ─── Aree (chip su sfondo scuro). Pagina: margine e varianti con link in pagina.css ────── */

.cc-medico-areas,
.cc-gruppo-areas,
.cc-page-areas {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.cc-medico-areas__item,
.cc-gruppo-areas__item,
.cc-page-areas__item {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.97rem;
	line-height: 1.4;
	transition: background-color var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease);
}

.cc-medico-areas__item:hover,
.cc-gruppo-areas__item:hover,
.cc-page-areas__item:hover {
	background: rgba(255, 255, 255, 0.11);
	transform: translateY(-4px);
}

/* ─── Contenuto a due colonne (pubblicazioni o due temi affiancati) ───────────────────── */

.cc-medico-pub,
.cc-gruppo-pub,
.cc-page-pub {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 720px) {
	.cc-medico-pub,
	.cc-gruppo-pub,
	.cc-page-pub {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}
}

/* Pagina: :not() — altrimenti la regola (più specifica) sovrascrive lo stile dell'eyebrow */
.cc-medico-pub__col p,
.cc-gruppo-pub__col p,
.cc-page-pub__col p:not(.cc-page-section__eyebrow) {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--muted-foreground);
	margin: 0 0 14px;
}

.cc-medico-pub__col p:last-child,
.cc-gruppo-pub__col p:last-child,
.cc-page-pub__col p:last-child {
	margin-bottom: 0;
}

/* ─── Elenco pillole (società scientifiche, ruolo e attività) ─────────────────────────── */

.cc-medico-societies,
.cc-gruppo-societies,
.cc-page-societies {
	list-style: none;
	margin: clamp(28px, 4vw, 34px) auto 0;
	padding: 0;
	max-width: 760px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.cc-medico-societies__item,
.cc-gruppo-societies__item,
.cc-page-societies__item {
	background: var(--muted);
	color: var(--primary);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
}

/* ─── Elenco puntato semplice (.cc-medico-section__list) ──────────────────────────────────
   Per contenuti che non si prestano a chip/pillole (es. lungo elenco di prestazioni). */
.cc-medico-section__list {
	max-width: 700px;
	/* Sotto 1.5em come un elenco "nudo" di GeneratePress (ul,ol { margin: 0 0 1.5em 3em });
	   sopra uno spazio responsive; l'orizzontale centra il blocco. */
	margin-top: clamp(28px, 4vw, 34px);
	margin-bottom: 1.5em;
	margin-inline: auto;
	/* 3em: stesso rientro di un elenco "nudo" (padding perché il margine centra il blocco) */
	padding-left: 3em;
	text-align: left;
}

/* Niente font-size (eredita i 17px del body: 1rem farebbe 16px) né margin (un <li> nudo ha
   margin:0): così coincide con un elenco senza classi. */
.cc-medico-section__list li {
	font-family: var(--font-body);
	line-height: 1.55;
	color: var(--foreground);
	margin: 0;
}

.cc-medico-section--dark .cc-medico-section__list li {
	color: #ffffff;
}

/* Variante 2 colonne — per elenchi molto lunghi (es. 40+ voci brevi) */
.cc-medico-section__list--columns,
.cc-medico-section__list-columns {
	max-width: 900px;
}

@media (min-width: 640px) {
	.cc-medico-section__list--columns,
	.cc-medico-section__list-columns {
		columns: 2;
		column-gap: clamp(24px, 4vw, 48px);
	}

	.cc-medico-section__list--columns li,
	.cc-medico-section__list-columns li {
		break-inside: avoid;
	}
}

/* Margine sopra al pulsante quando compare da solo nel corpo di una sezione — selettore
   mirato al paragrafo che lo contiene, così non tocca i widget (non sono un <p>). Solo nel
   corpo di Pagina/Home/Visita (:where non aggiunge specificità). Dopo le regole sui
   paragrafi di .cc-*-pub__col, come nell'ordine di caricamento originale. */
:where(.cc-page-body, .cc-visita-body) p:has(> .cc-medico-cta),
:where(.cc-page-body, .cc-visita-body) p:has(> .cc-btn) {
	margin-top: clamp(16px, 3vw, 24px);
}

@media (prefers-reduced-motion: reduce) {
	.cc-medico-cta,
	.cc-btn,
	.cc-cta-prenotazioni,
	#mega-menu-wrap-primary #mega-menu-primary a.cc-cta-prenotazioni,
	.cc-specialita-badge,
	.cc-gruppo-hero__scroll,
	.cc-page-hero__scroll,
	.cc-visita-hero__scroll,
	.cc-medico-areas__item,
	.cc-gruppo-areas__item,
	.cc-page-areas__item {
		transition: none;
	}

	.cc-gruppo-hero__photo,
	.cc-page-hero__photo,
	.cc-visita-hero__photo {
		animation: none;
		opacity: 1;
	}
}

/* MENU STICKY — commentato in sospeso, il menu torna a scorrere normalmente.
   Riattivare togliendo il commento a questo blocco (comprende anche l'iconcina "is-stuck",
   che ha senso solo insieme allo sticky).

.main-navigation {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--background);
}

body.admin-bar .main-navigation {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .main-navigation {
		top: 46px;
	}
}

.main-navigation .main-nav > ul > li:first-child > a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 52px;
	margin-right: 0;
	vertical-align: middle;
	background-image: url('/wp-content/uploads/2026/07/iconlogo-centrochirurgico.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	transition: width var(--duration-ui) var(--ease), margin-right var(--duration-ui) var(--ease), opacity var(--duration-ui) var(--ease);
}

.main-navigation.is-stuck .main-nav > ul > li:first-child > a::before {
	width: 42px;
	margin-right: 10px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav > ul > li:first-child > a::before {
		transition: none;
	}
}

*/

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1399px) {
	.inside-navigation.grid-container {max-width:100%}
	#mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link {line-height:1.2 !important}
	/* Mega-pannello: un po' di respiro ai lati quando lo schermo si stringe */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {padding-left: 15px !important; padding-right: 15px !important;}
}

@media (max-width: 1199px) {
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {padding: 15px 10px 15px 0px !important}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {font-size: 18px;}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard h4.mega-block-title, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title {font-size:12px;}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before {padding-right:20px}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding:0px 0px 0px 20px}
	

}
/* Menu mobile: Max Mega Menu passa alla versione mobile sotto i 930px (breakpoint del plugin) */
@media (max-width: 930px) {
	
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding:0px 20px 0px 20px}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {font-size: 20px;}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard h4.mega-block-title, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title {font-size:13px;}

/* Barra di navigazione trasparente su mobile (resta visibile solo il toggle tondo blu) */
body .main-navigation {background-color: transparent;}
/* Pannello del menu aperto: angoli arrotondati come le card del sito */
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {border-radius: var(--radius-lg); overflow: hidden;}
/* Niente puntino separatore "·" tra le voci: nel menu mobile le voci sono in colonna */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::before {content: none; display: none;}
/* Sottomenu senza angoli arrotondati (il raggio arriva dalle impostazioni del tema del plugin,
   da qui !important per superare il CSS generato) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu {border-radius: 0 !important;}
/* Voce di primo livello aperta (tap): sfondo azzurro chiaro e testo blu, attaccata al
   sottomenu azzurro chiarissimo che si apre sotto */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {background: var(--primary-tint) !important; color: var(--primary) !important;}
/* Sottomenu: sfondo azzurro chiarissimo uniforme (anche righe/colonne/voci interne del
   mega-pannello, che hanno sfondi propri dal plugin) e niente ombra */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu {background: var(--primary-soft) !important; box-shadow: none !important;}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu li.mega-menu-row,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu li.mega-menu-column,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu li.mega-menu-item {background: transparent !important; box-shadow: none !important;}
/* Voci di secondo livello centrate come quelle di primo livello */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {text-align: center;}
/* Titoletti di colonna e link del mega-pannello: il plugin imposta text-align: left
   direttamente su link e titoli, da qui !important per superare il CSS generato */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu .mega-block-title {text-align: center !important;}
/* Titoli di colonna staccati dal blocco precedente (!important per superare il CSS generato dal plugin) */
#mega-menu-wrap-primary #mega-menu-primary .mega-block-title {margin-top: 25px !important; padding-bottom: 0 !important;}
/* Voci principali più ariose e più facili da toccare */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding-top: 20px !important; padding-bottom: 20px !important; height: auto !important; position: relative;}
/* Separatore sotto ogni voce di primo livello: un pallino che, sulla voce della pagina
   corrente o sulla voce aperta, si allunga in una lineetta (scaleX, niente animazione di width) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {
	content: '';
	display: block; /* il CSS di Max Mega Menu nasconde di default a.mega-menu-link:after */
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: var(--radius-pill);
	background: #ffffff;
	opacity: 0.6;
	transform: scaleX(1);
	transition: transform var(--duration-ui) var(--ease), opacity var(--duration-ui) var(--ease);
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child > a.mega-menu-link::after {display: none;}
/* Freccetta delle voci con sottomenu: margine sinistro negativo, più vicina al testo */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {margin-left: -6px !important;}
/* Freccetta disegnata in CSS al posto dell'icona Dashicons del plugin: chevron sottile
   (due bordi ruotati) che da chiuso punta in basso e da aperto ruota verso l'alto. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
	content: '' !important;
	display: inline-block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	vertical-align: middle;
	margin-top: -4px;
	transform: rotate(45deg);
	transition: transform var(--duration-ui) var(--ease);
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
	transform: translateY(4px) rotate(-135deg);
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-toggle-on > a.mega-menu-link::after {
	opacity: 1;
	background: var(--accent);
	border-radius: 0;
	transform: scale(6, 0.4); /* lineetta netta ~30×2px, senza estremi arrotondati */
}
}
@media (max-width: 930px) and (prefers-reduced-motion: reduce) {
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator::after {transition: none;}
.prima, .seconda, .terza, .quinta, .sesta {width: 100% !important}

}
@media (max-width: 850px) {
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {padding:20px}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {padding:15px 15px 15px 15px;}
}
@media (max-width: 768px) {


.margine-top{margin-top: 0px !important;}

/* Margini laterali ridotti al minimo: 15px dal bordo dello schermo, uguali ovunque.
   Prima si sommavano margine di .site-main (20) + padding del corpo (20) + i 30px che
   GeneratePress mette su OGNI contenitore interno dei Gruppi (anche annidati: 60-90px). */
.separate-containers .site-main {margin: 0 !important;}
.separate-containers .inside-article {padding-inline: 15px;}
.cc-page-body,
.cc-gruppo-body,
.cc-visita-body,
.cc-container,
.cc-page-section,
.cc-visita-section {padding-inline: 15px;}
/* Gruppi Gutenberg: niente padding laterale del tema padre (CSS inline, da qui "body" per
   superarlo), tranne i gruppi con colore di sfondo, che come card ne hanno bisogno */
body .site-main .wp-block-group:not(.has-background) > .wp-block-group__inner-container {padding-left: 0; padding-right: 0;}
/* Tabelle larghe (es. pagine Sincristallizzatrice): scorrono in orizzontale al loro interno
   invece di allargare tutta la pagina */
.cc-page-body table {display: block; overflow-x: auto;}
/* Titoli ed eyebrow sempre centrati, qualunque sia l'allineamento del testo sotto.
   !important per superare le classi di allineamento di Gutenberg (has-text-align-left)
   e i text-align: left dei singoli template. */
.site-main h1, .site-main h2, .site-main h3, .site-main h4, .site-main h5, .site-main h6,
.cc-medico-section__eyebrow,
.cc-gruppo-section__eyebrow,
.cc-page-section__eyebrow,
.cc-visita-section__eyebrow {text-align: center !important;}
/* Visite: l'accento sotto l'h2 dell'intro è ancorato a sinistra (visita.css), qui torna al centro */
body .cc-visita-body .cc-page-intro h2::after,
body .cc-visita-body .cc-visita-intro h2::after {left: 50%; transform: translateX(-50%);}

}

/* Honeypot dei moduli CF7 (campo "cc-verifica", filtro wpcf7_spam in functions.php): fuori
   schermo invece di display:none, che alcuni bot riconoscono e saltano. aria-hidden e
   tabindex -1 sul markup lo tengono fuori da lettori di schermo e navigazione da tastiera. */
.cc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Banner cookie (CookieYes): tutti i pulsanti con lo stesso peso visivo — "Accetta tutti" non
   più pieno mentre "Rifiuta" e "Personalizza" sono solo bordati (prassi Garante/EDPB: rifiutare
   deve essere facile quanto accettare). I colori li scrive CookieYes inline (style="…"), non
   modificabili dal pannello nella versione gratuita: da qui !important. Pieno solo all'hover. */
.cky-consent-container .cky-btn,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn {
	color: var(--primary) !important;
	background-color: transparent !important;
	border-color: var(--primary) !important;
	transition: background-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease);
}
.cky-consent-container .cky-btn:hover,
.cky-consent-container .cky-btn:focus-visible,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn:hover,
.cky-modal .cky-prefrence-btn-wrapper .cky-btn:focus-visible {
	color: var(--background) !important;
	background-color: var(--primary) !important;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.cky-consent-container .cky-btn,
	.cky-modal .cky-prefrence-btn-wrapper .cky-btn {transition: none;}
}

/* Tabella dei cookie nella Cookie policy (shortcode [cky_outside_audit_table] di CookieYes:
   una tabella per categoria, colonne Cookie / Durata / Descrizione). Specificità sopra
   ".cc-page-body table" (display: block + scroll orizzontale), qui non serve: torna tabella
   a tutta larghezza. Sotto i 600px diventa una scheda per cookie: nome e durata sulla prima
   riga, descrizione sotto a tutta larghezza — niente scroll orizzontale. */
.cky-table-wrapper .cky-cookie-audit-table {
	display: table;
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
}
.cky-table-wrapper .cky-cookie-audit-table th,
.cky-table-wrapper .cky-cookie-audit-table td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}
.cky-table-wrapper .cky-cookie-audit-table th {background: var(--muted);}
.cky-table-wrapper .cky-cookie-audit-table td p {margin: 0;}

@media (max-width: 600px) {
	.cky-table-wrapper .cky-cookie-audit-table,
	.cky-table-wrapper .cky-cookie-audit-table tbody {display: block;}
	/* Intestazione nascosta solo alla vista: resta leggibile dai lettori di schermo */
	.cky-table-wrapper .cky-cookie-audit-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cky-table-wrapper .cky-cookie-audit-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		margin-bottom: 0.75rem;
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}
	.cky-table-wrapper .cky-cookie-audit-table td {border: 0;}
	.cky-table-wrapper .cky-cookie-audit-table td:nth-child(1) {
		font-weight: 600;
		background: var(--muted);
	}
	.cky-table-wrapper .cky-cookie-audit-table td:nth-child(2) {
		background: var(--muted);
		color: var(--muted-foreground);
		white-space: nowrap;
	}
	.cky-table-wrapper .cky-cookie-audit-table td:nth-child(3) {grid-column: 1 / -1;}
}