/*
Theme Name: CSC Mobilità
Theme URI: https://www.cscmobilita.com/
Description: Child theme di Twenty Twenty-Five che replica la grafica del sito Joomla di CSC Mobilità (template Uranus).
Author: CSC Mobilità
Template: twentytwentyfive
Version: 1.2.3
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cscmobilita
*/

/* ==========================================================================
   Tipografia di base (come il sito live: Open Sans 15px, peso 300)
   ========================================================================== */
body {
	/* in rem, non px: con font-size: 15px la dimensione base scelta dall'utente
	   nelle impostazioni del browser verrebbe ignorata (WCAG 1.4.4). */
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 2.2rem;
}
strong {
	font-weight: bold;
}

/* ==========================================================================
   Barra colorata sopra l'header: immagine reale del sito live (barratop.jpg),
   ripetuta orizzontalmente, sempre a tutta larghezza anche su mobile
   ========================================================================== */
.csc-topbar-image {
	height: 8px;
	background-image: url('assets/images/barratop.jpg');
	background-repeat: repeat-x;
	background-position: top left;
	background-size: auto 100%;
}

/* ==========================================================================
   Header: bianco, logo sopra e menu sotto allineato a sinistra
   ========================================================================== */
.csc-header {
	padding: 1rem 0 0;
}

.csc-header .wp-block-site-logo {
	margin-bottom: 0.5rem;
}

/* Logo e menu con padding laterale sulle risoluzioni mobile */
@media (max-width: 781px) {
	.csc-header-inner {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ==========================================================================
   Menu di navigazione: maiuscolo, grigio, con sottolineatura colorata
   per ogni voce (come il megamenu del template Uranus: .sp-megamenu-parent)
   ========================================================================== */
.csc-nav .wp-block-navigation-item > a,
.csc-nav .wp-block-navigation-item > button {
	font-size: 0.9375rem; /* 15px, come .sp-megamenu-parent >li >a (il core WP forza 16px sui link) */
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	color: #666;
	padding: 0.85rem 0.75rem;
	min-height: 24px; /* WCAG 2.5.8 target size */
	border-bottom: 3px solid transparent;
	text-decoration: none;
}

.wp-block-navigation__container {gap: 0;}

/* Sottolineature colorate per voce, nell'ordine reale del preset Uranus
   (.sp-megamenu-parent >li.menu-N >a span { border-bottom-color: ... }) */
.csc-nav .wp-block-navigation__container > li:nth-child(1) > a { border-bottom-color: #0f719e; }
.csc-nav .wp-block-navigation__container > li:nth-child(2) > a { border-bottom-color: #73bd12; }
.csc-nav .wp-block-navigation__container > li:nth-child(3) > a { border-bottom-color: #ed6a24; }
/*.csc-nav .wp-block-navigation__container > li:nth-child(4) > a { border-bottom-color: #ffc000; }*/
.csc-nav .wp-block-navigation__container > li:nth-child(4) > a,
.csc-nav .wp-block-navigation__container > li:nth-child(4) > button { border-bottom-color: #ff005a; }
.csc-nav .wp-block-navigation__container > li:nth-child(5) > a { border-bottom-color: #24b83c; }

.csc-nav .wp-block-navigation-item > a:hover,
.csc-nav .wp-block-navigation-item > button:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none; /* sovrascrive il sottolineato hover di default di Twenty Twenty-Five */
}

/* Pagina corrente: WordPress emette aria-current="page" sulla voce attiva, ma
   senza stile l'informazione esiste solo per gli screen reader. Colore + peso
   del carattere, così non è affidata al solo colore (WCAG 1.4.1). */
.csc-nav .wp-block-navigation-item > a[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Sottomenù "Strumenti": sfondo bianco, voci con lo stesso stile del menù principale
   (il tema imposta overlayBackgroundColor sul blocco navigazione anche per il dropdown) */
.csc-nav .wp-block-navigation__submenu-container {
	/* .has-primary-background-color del core usa !important: va sovrascritto allo stesso modo */
	background-color: #fff !important;
	/* Il dropdown è bianco su pagina bianca: con #e5e5e5 (1,26:1) il suo confine
	   non era percepibile. #767676 dà 4,54:1, sopra la soglia 3:1 di WCAG 1.4.11. */
	border: 1px solid #767676;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.csc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	color: #666 !important;
	font-weight: 600;
	border-bottom: none;
}

.csc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
	color: var(--wp--preset--color--primary) !important;
}

/* Focus visibile ad alto contrasto (WCAG 2.4.7 / 2.4.11).
   Include anche il <button> di "Strumenti": senza questa riga il sottomenu
   riceveva l'outline nero di default del browser, diverso dalle altre voci. */
.csc-nav .wp-block-navigation-item > a:focus-visible,
.csc-nav .wp-block-navigation-item > button:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sul marrone del footer il blu non si vedrebbe: giallo su #4b3d34 = 6,35:1. */
.csc-footer a:focus-visible {
	outline-color: var(--wp--preset--color--accent-yellow);
}

/* Sulla banda titolo blu l'outline blu darebbe 1,00:1 (invisibile) e sul box
   arancione dell'hero il giallo darebbe 1,33:1. Qui servono colori dedicati. */
.csc-page-title-band a:focus-visible,
.csc-page-title-band :focus-visible {
	outline-color: var(--wp--preset--color--accent-yellow);
}

.wp-block-cover a:focus-visible,
.csc-hero-box a:focus-visible {
	outline-color: var(--wp--preset--color--footer-brown);
}

/* Target size minimo per il toggle del menu mobile (WCAG 2.5.8).
   L'icona freccia di "Strumenti" resta a dimensione naturale: il target di 24x24
   è già garantito dal pulsante dell'intera voce (openSubmenusOnClick), ingrandire
   anche l'icona crea solo uno spazio vuoto prima della voce successiva. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 24px;
	min-height: 24px;
}

/* ==========================================================================
   Hero: immagine senza overlay, tagline su box arancione traslucido
   (come .excerpt2 dello slider Revolution del sito live)
   ========================================================================== */
.csc-hero-box {
	background: rgba(255, 140, 17, 0.88);
	padding: 20px;
	max-width: 480px;
	margin-right: 4rem;
}

.csc-hero-title {
	font-family: Arial, "Open Sans", sans-serif;
	color: var(--wp--preset--color--footer-brown);
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

/* ==========================================================================
   Box CTA sovrapposti allo slider (Trip planner / Prossimi bus / Acquista)
   Colori e dimensioni reali: #divCalcolaPercorsoInner / #divProssimiBusInner / #divBigliettiInner
   ========================================================================== */
/* La sovrapposizione all'hero è espressa in em, così scala insieme al testo:
   con un valore fisso in px le card crescono a zoom solo-testo 200% (o con i
   valori di test di WCAG 1.4.12) e risalgono fino a coprire il titolo dell'hero. */
.csc-cta-row {
	margin-top: -7.3em;
	position: relative;
	z-index: 2;
	margin-bottom: 2.5rem;
}
.csc-cta-row .wp-block-columns {
	padding-right: 10px;
	padding-left: 10px;
}

.csc-cta-box {
	background: #fff;
	text-align: center;
	padding: 2rem 1rem;
	border-bottom: 6px solid transparent;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.csc-cta-box:hover,
.csc-cta-box:focus-within {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	transform: translateY(-3px);
}

.csc-cta-link {
	margin: 0;
}

.csc-cta-link a {
	text-transform: uppercase;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	display: block;
}

.csc-cta-green  { border-bottom-color: #526b37; }
.csc-cta-orange { border-bottom-color: #b85c00; }
.csc-cta-blue   { border-bottom-color: #2a6fbf; }

.csc-cta-green  .csc-cta-link a { color: #526b37; }
.csc-cta-orange .csc-cta-link a { color: #b85c00; }
/* #4a90e2 dava 3,29:1: passava solo perché il testo è 28px bold ("testo grande",
   soglia 3:1), con 0,29 di margine. #2a6fbf dà 4,55:1 e regge anche se in futuro
   il corpo del testo viene ridotto. */
.csc-cta-blue   .csc-cta-link a { color: #2a6fbf; }

/* ==========================================================================
   Sezione "Ultime Notizie": titolo arancione con riga sottile grigia
   (come .left_title_border .sppb-addon-title e il modulo News Show SP2)
   ========================================================================== */
.csc-news-section {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.csc-news-section > * ,
.csc-news-list {
	max-width: 560px;
	margin-left: 0;
}

.csc-section-title {
	color: var(--wp--preset--color--accent-yellow-dark);
	font-size: 1.5rem;
	font-weight: 700;
	border-bottom: 4px solid var(--wp--preset--color--accent-yellow-dark);
	padding-bottom: 0.6rem;
	margin-bottom: 0;
}

.csc-uppercase-title {
	text-transform: uppercase;
}

.csc-news-item {
	border-top: 1px solid #ccc;
	padding: 1.2rem 0 0;
	margin: 0;
}

.wp-block-post:first-child .csc-news-item {
	border-top: 0px;
}

.csc-news-date {
	color: var(--wp--preset--color--line-orange-dark);
	margin: 0 0 0.35rem;
}

.csc-news-title,
.csc-news-title a {
	/*font-size: 1.125rem; /* 18px, come h4.ns2-title */
	font-weight: 700;
	color: #333;
	text-decoration: none;
	margin: 0 0 0.4rem;
}

.csc-news-title a:hover {
	text-decoration: underline;
	/*color: var(--wp--preset--color--primary);*/
}

.csc-news-excerpt p {
	margin: 0;
	font-size: 0.9375rem; /* 15px */
	color: #000;
}

.csc-news-nav {
	margin-top: 1.25rem;
}

.csc-news-list .wp-block-query-pagination {
	margin: 0;
}

/* Navigazione a frecce prev/next stile "carosello" (come il modulo News Show SP2
   del sito live, che pagina le notizie con frecce invece che con numeri) */
.csc-news-arrows {
	gap: 0.5rem;
}

.csc-news-arrows .wp-block-query-pagination-previous,
.csc-news-arrows .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	/* Il bordo è il contorno del controllo: #ccc dava 1,61:1, serve 3:1 (1.4.11). */
	border: 1px solid #767676;
	border-radius: 50%;
	color: #666;
	text-decoration: none;
}

.csc-news-arrows .wp-block-query-pagination-previous-arrow, 
.csc-news-arrows .wp-block-query-pagination-next-arrow{
	margin: 0;
}

.csc-news-arrows .wp-block-query-pagination-previous:hover,
.csc-news-arrows .wp-block-query-pagination-next:hover {
	background-color: #ffc000;
	border-color: #ffc000;
	color:var(--wp--preset--color--footer-brown);
}

/* Paginazione della pagina News (archivio): numeri e frecce come chip
   circolari colorati, più marcati e moderni dei semplici link numerici */
.csc-news-list .csc-archive-pagination {
	margin-top: 3rem;
}

.csc-archive-pagination {
	gap: 0.5rem;
	align-items: center;
}

.csc-archive-pagination .wp-block-query-pagination-previous,
.csc-archive-pagination .wp-block-query-pagination-next,
.csc-archive-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.csc-archive-pagination .wp-block-query-pagination-previous,
.csc-archive-pagination .wp-block-query-pagination-next {
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.csc-archive-pagination .wp-block-query-pagination-previous:hover,
.csc-archive-pagination .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	transform: translateY(-2px);
}

.csc-archive-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
}

.csc-archive-pagination .page-numbers {
	color: #666;
	background-color: #f2f2f2;
}

/* La pagina corrente non è indicata dal solo colore: il grassetto è il segnale
   non cromatico richiesto da WCAG 1.4.1. */
.csc-archive-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
}

/* Testo scuro, non bianco: #fff su #e0a800 dava 2,15:1 su un testo di 13px bold
   (non "testo grande", quindi soglia 4,5:1). Con footer-brown si arriva a 4,85:1. */
.csc-archive-pagination .page-numbers:not(.current):hover {
	background-color: #e0a800;
	color: var(--wp--preset--color--footer-brown);
}

.csc-archive-pagination .page-numbers.dots {
	background: none;
	color: var(--wp--preset--color--muted); /* #999 dava 2,85:1: è testo, serve 4,5:1 */
	width: auto;
}

/* ==========================================================================
   Pulsanti: flat, squadrati, maiuscoli, piccoli (come il sito live)
   ========================================================================== */
.wp-block-button__link {
	border-radius: 0;
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.65rem 1.5rem;
}

/* Variante gialla (es. "Vedi tutte le news" / "Acquista") */
.csc-btn-yellow .wp-block-button__link {
	background-color: #ffc000;
	color: var(--wp--preset--color--footer-brown);
}

.csc-btn-yellow .wp-block-button__link:hover {
	background-color: #e0a800;
	color: var(--wp--preset--color--footer-brown);
}

/* Pulsante celeste "Segui @MobilitaCSC" (variante scurita rispetto al celeste
   originale #17A3DD del sito live: a quel valore il testo bianco ha contrasto
   ≈2.87:1, sotto la soglia 4.5:1 richiesta per il testo del bottone) */
.csc-btn-cyan .wp-block-button__link {
	background-color: #0d7ab0;
	color: #ffffff;
}

.csc-btn-cyan .wp-block-button__link:hover {
	background-color: #0a5f8a;
	color: #ffffff;
}

.csc-news-nav .wp-block-buttons {
	gap: 0.75rem;
}

/* ==========================================================================
   Banda titolo pagina (pagine interne)
   ========================================================================== */
.csc-page-title-band {
	background-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Card generiche (archivi)
   ========================================================================== */
.csc-card {
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.csc-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

/* Gli stati :hover/:focus-within vanno elencati esplicitamente: hanno specificità
   maggiore dei selettori base, quindi senza !important le regole di movimento
   qui sotto continuerebbero a vincere anche con reduced-motion attivo.
   NB: non toccare .csc-ticket-panel > summary::after, dove translateY(-50%) è
   posizionamento statico e non un'animazione. */
@media (prefers-reduced-motion: reduce) {
	.csc-card,
	.csc-card:hover,
	.csc-cta-box,
	.csc-cta-box:hover,
	.csc-cta-box:focus-within,
	.csc-archive-pagination .wp-block-query-pagination-previous,
	.csc-archive-pagination .wp-block-query-pagination-previous:hover,
	.csc-archive-pagination .wp-block-query-pagination-next,
	.csc-archive-pagination .wp-block-query-pagination-next:hover,
	.csc-archive-pagination .wp-block-query-pagination-numbers .page-numbers,
	.csc-archive-pagination .page-numbers:not(.current):hover,
	.csc-post-nav .wp-block-post-navigation-link,
	.csc-post-nav .wp-block-post-navigation-link:hover {
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Footer: marrone, colonne "Contatti" / "Azienda" + logo Moovit
   (come #sp-bottom del sito live), poi riga legale centrata grigia (#sp-footer)
   ========================================================================== */
footer {
	margin-block-start:0
}
.csc-footer {
	color: #ffffff;
}

.csc-footer-title {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

.csc-footer-columns a {
	color: #ffffff;
	font-size: 0.9375rem; /* 15px */
	text-decoration: none;
}

.csc-footer-columns a:hover,
.csc-footer-columns a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.csc-footer-columns .wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csc-footer-columns .wp-block-list li {
	padding-block: 0.2rem;
}

.csc-footer-moovit {
	max-width: 160px;
}

.csc-footer-legal {
	color: var(--wp--preset--color--footer-legal-gray);
	font-size: 0.9375rem; /* 15px */
	text-align: center;
}

/* I link stanno nella stessa frase del testo non-link ("… | Copyright © 2026 CSC
   Mobilità"): senza sottolineatura sarebbero distinguibili solo dal colore, che qui
   è per giunta identico. Il sottolineato è il segnale non cromatico richiesto da
   WCAG 1.4.1 (Use of Color). */
.csc-footer-legal a {
	color: var(--wp--preset--color--footer-legal-gray);
	font-size: 0.9375rem; /* 15px: sovrascrive il font-size globale 1rem impostato su tutti i link da Twenty Twenty-Five */
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.csc-footer-legal a:hover,
.csc-footer-legal a:focus {
	color: #ffffff;
}

.csc-footer-legal p {
	margin: 0 0 0.5rem;
}

/* ==========================================================================
   Navigazione articolo precedente / successivo (singoli articoli)
   ========================================================================== */
.csc-post-nav {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
	gap: 1rem;
	align-items: stretch;
}

.csc-post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

.csc-post-nav .wp-block-post-navigation-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 260px;
	padding: 1rem 1.25rem;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.csc-post-nav .wp-block-post-navigation-link:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.csc-post-nav .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}

.csc-post-nav .post-navigation-link-previous::before,
.csc-post-nav .post-navigation-link-next::after {
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.csc-post-nav .post-navigation-link-previous::before {
	content: "←";
}

.csc-post-nav .post-navigation-link-next::after {
	content: "→";
}

.csc-post-nav .post-navigation-link__label {
	display: block;
	font-size: 0.75rem; /* era 0.6875rem (11px): troppo piccolo per un'etichetta uppercase */
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--muted); /* #999 dava 2,85:1 */
}

.csc-post-nav a {
	text-decoration: none;
	font-weight: 700;
	color: #333;
}

.csc-post-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 781px) {
	.csc-cta-row {
		margin-top: 1.5rem;
	}

	.csc-hero-box {
		margin-right: 0;
		max-width: 100%;
	}
}

/* Fino a 767px: niente immagine hero, solo il box arancione col titolo.
   NON usare display:none sul contenitore: l'hero contiene l'unico <h1> della
   home page, e nasconderlo lascerebbe la pagina senza intestazione di primo
   livello su mobile e a zoom 400% (WCAG 1.3.1, 2.4.6, 1.4.10). Si nasconde solo
   l'immagine di sfondo e si azzera l'altezza minima del cover. */
@media (max-width: 767px) {
	/* !important necessario: il blocco cover stampa min-height come stile inline */
	.csc-hero {
		min-height: 0 !important;
		padding: 0;
		align-items: flex-start;
	}

	.csc-hero .wp-block-cover__image-background,
	.csc-hero .wp-block-cover__video-background,
	.csc-hero > .wp-block-cover__background {
		display: none;
	}

	.csc-hero .wp-block-cover__inner-container {
		width: 100%;
	}

	.csc-hero-box {
		margin: 0;
		max-width: 100%;
	}

	.csc-cta-row .wp-block-columns {
		padding-left: 0;
		padding-right: 0;
	}

	/* Blocco azienda: logo a dimensione reale e centrato (non 100%),
	   colonna del titolo/testo senza padding laterale */
	.csc-company .wp-block-media-text {
		grid-template-columns: 100% !important;
	}

	.csc-company .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}

	.csc-company .wp-block-media-text__media img {
		width: auto;
		max-width: 100%;
		margin: 0 auto 2rem;
	}

	.csc-company .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Menu mobile (hamburger): visibile fino a 767px, sulla stessa riga del logo
   ========================================================================== */
@media (max-width: 767px) {
	.csc-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.csc-header-inner .wp-block-site-logo {
		margin-bottom: 0;
	}

	/* Il core WP nasconde il toggle e mostra il menu esteso solo da 600px in su:
	   spostiamo la soglia a 767px, coerente con le altre viste "mobile" del tema. */
	.csc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.csc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Icona hamburger a 3 linee (anziché le 2 di default) e leggermente più grande */
.csc-nav .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* Menu mobile aperto: outline bianco (altrimenti invisibile sullo sfondo blu) */
.csc-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.csc-nav .wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
	outline-color: #fff;
}

/* Sottomenù "Strumenti" nel menu mobile aperto: niente sfondo/ombra, voci con lo
   stesso stile di quelle di primo livello, solo leggermente rientrate a destra */
.csc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	box-shadow: none;
	border: none;
}

.csc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	color: var(--wp--preset--color--base) !important;
	font-size: 0.9375rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	padding-left: 1.5rem;
	border-bottom: 3px solid #ff005a; /* stesso colore della voce padre "Strumenti" */
}

/* ==========================================================================
   Accordion Biglietti/Abbonamenti (pagina "Biglietti e abbonamenti")
   ========================================================================== */
.csc-tickets {
	gap: 0.75rem;
}

.csc-ticket-panel {
	/* unico separatore fra i pannelli dell'accordion: con #e5e5e5 era 1,26:1 */
	border-bottom: 1px solid #767676;
	background: #fff;
	margin: 0;
}

.csc-ticket-panel > summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.9375rem;
	color: #333;
	position: relative;
	padding-right: 2.5rem;
}

.csc-ticket-panel > summary::-webkit-details-marker {
	display: none;
}

.csc-ticket-panel > summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.csc-ticket-panel[open] > summary::after {
	content: "\2212";
}

.csc-ticket-panel > summary:hover {
	background-color: var(--wp--preset--color--light-gray);
}

.csc-ticket-panel > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
}

.csc-ticket-media {
	padding: 1.25rem;
	border-top: 1px solid #e5e5e5;
	margin-block-start: 0;
}

.csc-ticket-media .wp-block-media-text__media img {
	border: 1px solid #e5e5e5;
}

.csc-ticket-media .wp-block-media-text__content {
	padding: 0 0 0 1.5rem;
}

.csc-ticket-media p {
	margin: 0;
	font-size: 0.9375rem;
}

@media (max-width: 600px) {
	.csc-ticket-media .wp-block-media-text__content {
		padding: 1.25rem 0 0;
	}
}