/*
Theme Name: GeneratePress Child - Indico
Template: generatepress
Version: 1.0.0
Description: Child theme di GeneratePress per Indico srl - personalizzazioni separate dal tema padre.
*/

/* ===== Archivio Bandi (category-bandi.php) - card grid con ricerca client-side, al posto del loop blog
   standard (un post per riga, immagine a piena larghezza: illeggibile con 50+ bandi). ===== */
.indico-bandi-header {
	padding: 40px 20px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.indico-bandi-title {
	margin: 0;
}

.indico-bandi-search {
	position: relative;
	flex: 0 1 320px;
	display: flex;
	align-items: center;
}

.indico-bandi-search svg {
	position: absolute;
	left: 12px;
	fill: #646464;
	pointer-events: none;
}

.indico-bandi-search input {
	width: 100%;
	padding: 10px 14px 10px 38px;
	border: 1px solid #E5E5E5;
	font-size: 14px;
}

.indico-bandi-filtro-stato {
	display: flex;
	gap: 8px;
}

.indico-bandi-filtro-stato button {
	background: #fff;
	border: 1px solid #E5E5E5;
	color: #646464;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.indico-bandi-filtro-stato button.is-active {
	background: #213B8B;
	border-color: #213B8B;
	color: #fff;
}

.indico-bandi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	padding: 32px 20px 40px;
}

.indico-bando-card {
	display: block;
	border: 1px solid #E5E5E5;
	text-decoration: none;
	color: inherit;
}

.indico-bando-card-thumb {
	position: relative;
	height: 160px;
	overflow: hidden;
	background: #F0F0F0;
}

.indico-bando-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.indico-bando-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	color: #fff;
}

.indico-bando-badge.is-open {
	background: #00A993;
}

.indico-bando-badge.is-closed {
	background: #646464;
}

.indico-bando-card-body {
	padding: 16px;
}

.indico-bando-card-body h3 {
	font-size: 16px;
	color: #213B8B;
	margin: 0 0 8px;
	line-height: 1.3;
}

.indico-bando-card-body p {
	font-size: 13px;
	color: #646464;
	margin: 0;
}

.indico-bandi-no-results {
	padding: 0 20px 40px;
	color: #646464;
}

/* ===== Banner stato/scadenza in cima alla scheda del singolo bando ===== */
.indico-bando-status-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 24px;
	border-left: 4px solid;
}

.indico-bando-status-banner.is-open {
	background: #E6F7F4;
	border-color: #00A993;
}

.indico-bando-status-banner.is-closed {
	background: #F0F0F0;
	border-color: #646464;
}

.indico-bando-status-badge {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	color: #fff;
}

.indico-bando-status-banner.is-open .indico-bando-status-badge {
	background: #00A993;
}

.indico-bando-status-banner.is-closed .indico-bando-status-badge {
	background: #646464;
}

.indico-bando-status-deadline {
	font-size: 15px;
	color: #222;
}

/* Titolo della scheda bando colorato in base allo stato REALE (classe indico-stato-aperto/chiuso aggiunta
   via post_class in functions.php - non la sola categoria "Bando attivo", che puo' restare assegnata anche
   a bandi gia' scaduti se nessuno la toglie a mano). */
.type-bandi .entry-title {
	color: #646464;
}

.type-bandi.indico-stato-aperto .entry-title {
	color: #213B8B;
}

/* Box "Vuoi partecipare a questo bando?" in fondo alla scheda, con il modulo CF7 breve. */
.indico-bando-cta {
	background: #F7F9FC;
	border-left: 4px solid #213B8B;
	padding: 32px;
	margin: 40px 0 0;
}

.indico-bando-cta h3 {
	color: #213B8B;
	margin: 0 0 8px;
}

.indico-bando-cta > p {
	margin: 0 0 20px;
	color: #646464;
}

.indico-bando-cta .contact-form .row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.indico-bando-cta .contact-form .col-sm-6 {
	flex: 1 1 220px;
}

.indico-bando-cta .contact-form .col-sm-12 {
	flex: 1 1 100%;
}

.indico-bando-cta .contact-form input[type="text"],
.indico-bando-cta .contact-form input[type="email"],
.indico-bando-cta .contact-form input[type="tel"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #E5E5E5;
}

.indico-bando-cta .contact-form input[type="submit"] {
	background: #213B8B;
	color: #fff;
	border: none;
	padding: 12px 28px;
	font-weight: 700;
	cursor: pointer;
}

.indico-bando-cta .privacy-contatti {
	font-size: 13px;
	color: #646464;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* La scheda del bando (Pods) include gia' un'immagine dentro al contenuto con questa classe: il nome
   suggerisce un formato "piccolo" ma non aveva nessuna regola CSS a vincolarla, quindi appariva grande
   quanto l'immagine in evidenza automatica del tema (rimossa sopra per i bandi, vedi
   indico_disattiva_immagine_doppia_bandi). */
.immagine-bandi-piccola {
	max-width: 360px;
	margin: 0 0 24px;
}

.immagine-bandi-piccola img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 480px) {
	.indico-bandi-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Banner cookie (plugin WP Cookie Allow) - colori impostati via wp_option wpca_settings_style,
   qui solo il dettaglio che l'opzione del plugin non gestisce: bottoni squadrati come da design system
   (border-radius:0), non gli angoli leggermente arrotondati di default del plugin. ===== */
.wpca-btn {
	border-radius: 0 !important;
}

/* ===== Pagine pilastro (Finanza Agevolata / Digital Transformation) - ricostruite in Gutenberg,
   erano rimaste HTML grezzo di Elementor (mai migrate nel Task 4/6, scoperto il 2026-09-29 perche'
   il posizionamento assoluto di Elementor non funziona piu' senza il CSS del plugin, disattivato
   in Task 7) ===== */
.indico-pillar-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 20px;
}

.indico-pillar-sidebar {
	flex: 0 0 260px;
	background: #fff;
	border: 1px solid #E5E5E5;
	padding: 24px;
	position: sticky;
	top: 90px;
}

.indico-pillar-sidebar h2 {
	font-size: 18px;
	color: #213B8B;
	margin: 0 0 16px;
}

.indico-pillar-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.indico-pillar-sidebar-list a {
	display: block;
	background: #fff;
	color: #213B8B;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 16px;
	text-decoration: none;
	line-height: 1.3;
}

.indico-pillar-sidebar-list a:hover,
.indico-pillar-sidebar-list a:focus-visible {
	background: #213B8B;
	color: #fff;
}

.indico-pillar-content {
	flex: 1 1 auto;
	min-width: 0;
}

.indico-pillar-eyebrow {
	color: #00A993;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 8px;
}

.indico-pillar-content h1 {
	margin-top: 0;
}

/* "Il nostro metodo di lavoro" - 3 step numerati */
.indico-method-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0;
}

.indico-method-steps.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.indico-pillar-subtitle {
	font-size: 18px;
	color: #575760;
	margin-top: -8px;
}

.indico-pillar-content h3 {
	color: #213B8B;
	margin-top: 32px;
}

.indico-method-step-number {
	font-size: 36px;
	font-weight: 800;
	color: #646464;
	line-height: 1;
	margin-bottom: 4px;
}

.indico-method-step h3 {
	color: #213B8B;
	margin: 0 0 8px;
}

.indico-method-step p {
	font-size: 14px;
	margin: 0;
}

/* CTA con immagine */
.indico-pillar-cta {
	display: flex;
	align-items: center;
	gap: 32px;
	background: #F7F9FC;
	padding: 32px;
	margin: 32px 0;
	flex-wrap: wrap;
}

.indico-pillar-cta-text {
	flex: 1 1 280px;
}

.indico-pillar-cta-text h3 {
	color: #213B8B;
	margin: 0 0 16px;
}

.indico-pillar-cta img {
	flex: 1 1 280px;
	max-width: 320px;
	height: auto;
	object-fit: cover;
}

/* Griglia servizi (stessa card dello slider homepage, qui statica non scrollabile) */
.indico-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

@media (max-width: 768px) {
	.indico-pillar-layout {
		flex-direction: column;
	}
	.indico-pillar-sidebar {
		flex-basis: auto;
		width: 100%;
		position: static;
	}
	.indico-method-steps {
		grid-template-columns: 1fr;
	}
}

/* ===== Sezione "Bandi e agevolazioni" Homepage (ricostruita - conteneva bandi reali, quindi qui e' una
   query dinamica sui 4 bandi attivi piu' recenti, non testo fisso che diventerebbe stale) ===== */
.indico-bandi-teaser-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.indico-bando-card {
	background: #fff;
	text-decoration: none;
	color: var(--indico-grigio);
	display: block;
	border: 1px solid #E5E5E5;
	transition: box-shadow 0.15s ease;
}

.indico-bando-card:hover,
.indico-bando-card:focus-visible {
	box-shadow: 0 4px 12px rgba(33, 59, 139, 0.15);
}

.indico-bando-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.indico-bando-card-body {
	padding: 16px;
}

.indico-bando-card-body h4 {
	color: #213B8B;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
}

.indico-bando-card-body p {
	font-size: 13px;
	margin: 0 0 10px;
}

.indico-bando-card-link {
	color: #213B8B;
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 959px) {
	.indico-bandi-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
	.indico-bandi-teaser-grid { grid-template-columns: 1fr; }
}

/* ===== Hero slider Homepage (ricostruito su richiesta esplicita - era Slider Revolution, plugin disattivato
   in Task 7: stesso contenuto/immagini recuperati dal DB, nessuna dipendenza dal plugin) ===== */
.indico-hero-slider {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	height: 560px;
	overflow: hidden;
	background-color: #213B8B;
}

.indico-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.indico-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.indico-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 30, 60, 0.75) 0%, rgba(20, 30, 60, 0.35) 55%, rgba(20, 30, 60, 0.15) 100%);
}

.indico-hero-slide-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	padding-inline: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 640px;
}

.indico-hero-eyebrow {
	color: #fff;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 16px;
}

.indico-hero-headline {
	color: #fff;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 24px;
	max-width: 22ch;
}

.indico-hero-btn {
	display: inline-block;
	background: #4EA8DE;
	color: #0B1F4D;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 14px 28px;
	text-decoration: none;
	border-radius: 0;
	width: fit-content;
	transition: background-color 0.15s ease;
}

.indico-hero-btn:hover,
.indico-hero-btn:focus-visible {
	background: #2f8fc9;
}

.indico-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #fff;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	padding: 8px 16px;
	z-index: 2;
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

.indico-hero-arrow:hover,
.indico-hero-arrow:focus-visible {
	opacity: 1;
}

.indico-hero-prev { left: 8px; }
.indico-hero-next { right: 8px; }

.indico-hero-dots {
	position: absolute;
	left: 40px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	gap: 10px;
}

.indico-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	cursor: pointer;
}

.indico-hero-dot.is-active {
	background: #fff;
}

@media (max-width: 959px) {
	.indico-hero-slider { height: 480px; }
	.indico-hero-slide-inner { max-width: 90%; }
}

@media (max-width: 599px) {
	.indico-hero-slider { height: 440px; }
	.indico-hero-headline { max-width: none; }
	.indico-hero-arrow { display: none; }
}

/* ===== Slider servizi Homepage (ricostruito dopo la migrazione — nella vecchia versione Elementor era un widget
   "th-slider" con le stesse card servizio; qui e' uno scroller orizzontale nativo con CSS scroll-snap,
   nessuna dipendenza da plugin disattivati) ===== */
.indico-servizi-slider h3 {
	color: #213B8B;
	font-size: 20px;
	margin: 24px 0 12px;
}

.indico-servizi-slider h3:first-child {
	margin-top: 0;
}

.indico-slider-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}

.indico-slider-card {
	flex: 0 0 240px;
	height: 220px;
	scroll-snap-align: start;
	position: relative;
	text-decoration: none;
	color: #fff;
	display: block;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

/* Variante senza foto (nessuna immagine dedicata disponibile per queste card, es. Sostenibilita'):
   sfondo blu Indico pieno al posto della foto, stessa struttura/hover delle altre card. */
.indico-slider-card.no-photo {
	background-color: #213B8B;
}

.indico-slider-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 30, 60, 0.35) 0%, rgba(15, 22, 46, 0.85) 100%);
}

.indico-slider-card:hover::before,
.indico-slider-card:focus-visible::before {
	background: linear-gradient(180deg, rgba(20, 30, 60, 0.5) 0%, rgba(15, 22, 46, 0.92) 100%);
}

.indico-slider-card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 16px;
}

.indico-slider-card-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #213B8B;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.indico-slider-card-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

.indico-slider-card span {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 8px;
}

.indico-slider-card em {
	display: inline-block;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	border-bottom: 2px solid #4EA8DE;
	padding-bottom: 2px;
}

@media (max-width: 599px) {
	.indico-slider-card {
		flex-basis: 180px;
	}
}

/* Fix: overflow orizzontale su mobile (<600px) nei blocchi Gutenberg wp-block-columns con layout flex (es. hero
   Homepage a 2 colonne testo/immagine) - non si impilavano verticalmente sotto i 600px, forzando la larghezza
   del contenuto oltre il viewport. Trovato dalla revisione indipendente del Task 7 (switch-over). */
@media (max-width: 599px) {
	.wp-block-columns.is-layout-flex {
		flex-wrap: wrap;
	}
	.wp-block-columns.is-layout-flex > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Fix: blocco "riga-bandi" (is-nowrap) piazzato in sidebar stretta causava overflow orizzontale su tutta la pagina (News, Bandi attivi, ecc.) */
.widget-area .riga-bandi.is-nowrap {
	flex-wrap: wrap !important;
}
.widget-area {
	overflow-x: hidden;
}

/* ===== Header layout ===== */
.site-logo img {
	max-height: 50px;
	width: auto;
}

/* Il logo include gia' nome e payoff: il titolo testuale duplicato accanto va nascosto (visibile solo agli screen reader) */
.site-branding .main-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #fff;
}

.inside-header.grid-container {
	display: flex;
	flex-wrap: nowrap; /* con "wrap" il menu andava a capo sotto al logo anche se ci stava in una riga sola
	                       (verificato: 1107px di contenuto su 1200px disponibili) - il menu mobile hamburger
	                       e' comunque un elemento separato, mostrato solo sotto la breakpoint mobile di GP */
	align-items: center;
	gap: 12px;
	padding-block: 12px;
}

@media (max-width: 768px) {
	.inside-header.grid-container {
		flex-wrap: wrap;
	}
}

/* Stesso problema anche sulla <ul> interna del menu (menu sf-menu): andava a capo (la voce "Bandi" finiva su
   una seconda riga) pur stando nello spazio disponibile - verificato forzando nowrap via devtools. */
.main-navigation ul.sf-menu {
	flex-wrap: nowrap;
}

/* La freccetta a tendina (dropdown-menu-toggle) e' inline-block subito dopo il testo del link, ma l'ancora
   aveva "white-space:normal": per voci come "Finanza Agevolata" il testo da solo riempiva gia' tutta la
   larghezza disponibile, quindi la freccetta andava a capo su una riga propria sotto al testo (staccata,
   con un vuoto sotto ogni voce). Fix: tenerli sempre sulla stessa riga. Con questo tutte le voci tornano
   alte allo stesso modo (una sola riga), quindi non serve piu' nessun aggiustamento specifico per "News"
   (l'unica voce senza sottomenu/freccetta). */
.main-navigation ul.sf-menu > .menu-item > a {
	white-space: nowrap;
}

@media (max-width: 768px) {
	.main-navigation ul.sf-menu {
		flex-wrap: wrap;
	}
}

/* Stesso identico problema di flex-wrap (terza occorrenza): l'icona di ricerca, aggiunta dopo il menu
   tramite generate_after_primary_menu, finisce dentro .inside-navigation.grid-container insieme alla <ul>
   del menu - anche questo contenitore va a capo pur avendo spazio. */
.main-navigation .inside-navigation.grid-container {
	flex-wrap: nowrap;
}

@media (max-width: 768px) {
	.main-navigation .inside-navigation.grid-container {
		flex-wrap: wrap;
	}
}

/* ===== Icona di ricerca in fondo al menu principale ===== */
.indico-header-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.indico-search-toggle {
	background: transparent;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: #213B8B;
	display: flex;
	align-items: center;
}

.indico-search-toggle svg {
	fill: #213B8B;
}

.indico-search-form {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	width: 0;
	overflow: hidden;
	transition: width 0.2s ease;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.indico-header-search.is-open .indico-search-form {
	width: 260px;
}

.indico-search-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E5E5E5;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--indico-grigio);
}

.indico-search-input:focus {
	outline: 2px solid #00A993;
	outline-offset: -2px;
}

@media (max-width: 768px) {
	/* Sul mobile GeneratePress nasconde (display:none) tutto cio' che non e' un item del menu dentro
	   .inside-navigation - la ricerca finiva invisibile anche col menu hamburger aperto. Rimessa visibile
	   come riga propria in fondo al menu, campo sempre aperto (niente overlay a comparsa su mobile). */
	.indico-header-search {
		display: block !important;
		margin: 12px 20px 16px;
		position: static;
	}
	.indico-search-toggle {
		display: none;
	}
	.indico-search-form {
		position: static;
		width: 100% !important;
		margin-top: 0;
		box-shadow: none;
	}
}


/* ===== Design tokens (design system 2026-09-15) ===== */
:root {
	--indico-blu: #213B8B;
	--indico-verde: #00A993;
	--indico-grigio: #646464;
	--indico-successo: #00A993;
	--indico-attenzione: #E0A527;
	--indico-errore: #C4432E;
	--indico-focus: #00A993;
}

body,
button,
input,
select,
textarea {
	font-family: 'Inter', sans-serif;
	font-weight: 400; /* Inter regola a 400, non 300 come Fira Sans: a 300 risulterebbe troppo sottile per la lettura del corpo testo */
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Scala tipografica responsive del design system (specs/2026-09-15-design-system-indico.md §3):
   H1 40/28px, H2 32/24px, H3 24/20px (desktop/mobile). Mai implementata finora - la sua assenza ha causato
   un H1 a 42px in un blocco colonna larga 200px su mobile (375px), che non riusciva a fare a capo su singole
   parole lunghe (es. "transformation") e sfondava il viewport orizzontalmente. Trovato dalla revisione
   indipendente del Task 7. */
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }

@media (max-width: 599px) {
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
}

/* Contrasto #646464 su bianco verificato: rapporto 5.92:1, supera WCAG AA (4.5:1) - nessuna modifica necessaria */
body {
	overflow-x: hidden; /* il trucco 100vw dell'hero slider (full-bleed) conta anche la larghezza della scrollbar, causando qualche px di overflow orizzontale altrimenti */
	color: var(--indico-grigio);
	background-color: #FFFFFF;
}

/* ===== Header: telefono + CTA, barra blu a tutta larghezza sopra logo/menu =====
   Iniettata via hook generate_before_header (fuori da #masthead/.inside-header): resta un div di
   pagina normale, non un flex item del grid-container dell'header, cosi' e' davvero full-bleed
   senza il trucco vw che in un flex item viene ignorato (flex-basis vince su width). */
.indico-header-contact {
	background-color: var(--indico-blu);
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 0;
}

/* .grid-container e' la classe di GeneratePress per il container centrato a larghezza fissa:
   riusarla qui allinea telefono/CTA esattamente al bordo di logo/menu/contenuto sottostanti,
   invece di un padding fisso indipendente. */
.indico-header-contact-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.indico-header-contact .indico-header-phone {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.indico-header-phone svg {
	fill: #fff;
}

.indico-header-contact .indico-header-cta {
	background-color: #4EA8DE;
	color: #0B1F4D;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 16px;
	border-radius: 0;
	white-space: nowrap;
	font-size: 0.9rem;
	transition: background-color 0.15s ease;
}

.indico-header-contact .indico-header-cta:hover,
.indico-header-contact .indico-header-cta:focus-visible {
	background-color: #2f8fc9;
	color: #0B1F4D;
}

.indico-header-cta:focus-visible,
.indico-header-phone:focus-visible {
	outline: 2px solid var(--indico-focus);
	outline-offset: 2px;
}

/* ===== Responsive (mobile <600px, tablet 600-959px, desktop >=960px) ===== */
@media (max-width: 959px) {
	.indico-header-contact-inner {
		gap: 12px;
	}
	.indico-header-cta {
		padding: 6px 12px;
	}
}

@media (max-width: 599px) {
	.indico-header-contact-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.indico-header-cta {
		width: 100%;
		text-align: center;
	}
}