/* =========================================================================
   custom.css — override responsive / accessibility / grafica
   Caricato DOPO default-theme.css. Contiene solo correzioni mirate al
   template Bootstrap 3 esistente. Non modifica style.css originale.
   ========================================================================= */

/* ---------- 1. Skip-link (accessibilità tastiera) ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
}
.skip-link:focus {
	position: fixed;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	background: #275fb4;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ---------- 2. Niente scroll orizzontale ---------- */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}
.page-wrapper {
	overflow: visible !important;
}

/* ---------- 3. Immagini fluide e prevenzione layout-shift ---------- */
img {
	max-width: 100%;
	height: auto;
}

/* ---------- 4. Focus visibile e coerente (WCAG 2.4.7) ---------- */
*:focus {
	outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #275fb4;
	outline-offset: 2px;
	border-radius: 2px;
}
#main:focus { outline: none; }

/* ---------- 5. Tap target minimi 44×44 (WCAG 2.5.5) ---------- */
.footer-widget.links-widget .list a,
.scroll-to-top,
.theme-btn,
.btn,
button {
	min-height: 44px;
}
/* I link del menu desktop conservano il display:block originale (style.css:1067)
   per non alterare la larghezza orizzontale: il template è dimensionato al pixel
   sul container Bootstrap 1170 e qualsiasi extra-spazio fa wrappare il menu. */
.main-menu .navigation > li > a {
	min-height: 44px;
}

/* Hamburger toggle: visibile solo nel layout mobile (Bootstrap 3 lo nasconde
   ≥768 ma il vecchio override `display:inline-flex` su .navbar-toggle lo
   rimetteva visibile a desktop, occupando ~100px dentro .navbar-header e
   spingendo l'ultima voce di menu su una seconda riga). */
@media (min-width: 768px) {
	.main-menu .navbar-header .navbar-toggle {
		display: none;
	}
}
.navbar-toggle {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
}

/* Spaziature menu desktop — riduco margin-left tra le voci per evitare il wrap
   dell'ultima voce sul container Bootstrap 1170 (sotto i 1340px lo spazio è
   in pixel proprio al limite con il valore originale di 25px). */
@media (min-width: 992px) and (max-width: 1339px) {
	.main-menu .navigation > li {
		margin-left: 18px;
	}
}
.footer-widget.links-widget .list li {
	margin-bottom: 4px;
}
.footer-widget.links-widget .list a {
	padding: 6px 0;
	display: inline-flex;
}

/* ---------- 6. Body / leggibilità mobile ---------- */
body, p, .text, .designation {
	font-size: 16px;
	line-height: 1.65;
}
@media (max-width: 599px) {
	body, p, .text {
		font-size: 15px;
		line-height: 1.6;
	}
}

/* ---------- 7. Hero: overlay leggibilità testo ---------- */
.page-title {
	position: relative;
}
.page-title.home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
	z-index: 1;
	pointer-events: none;
}
.page-title.home .auto-container {
	position: relative;
	z-index: 2;
}
.page-title.home h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ---------- 8. Footer: hover dei link leggibile su sfondo blu ---------- */
/* Il footer ha bg-color #094299. Il default-theme.css imposta il color:#275fb4
   per i link in :hover (sia .main-footer .list li a:hover che le voci dei
   widget info), che pero' su quel blu scuro ha contrasto insufficiente.
   Qui ripristiniamo il bianco + underline come affordance visiva. */

/* CTA telefonica/email (info-widget): colore ereditato dal contenitore (.text/.number) */
.footer-widget.info-widget a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease, opacity .2s ease;
}
.footer-widget.info-widget a:hover,
.footer-widget.info-widget a:focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
}

/* Lista link del footer (links-widget): override del default-theme.css che
   forzerebbe #275fb4 su :hover. Specificita' (0,4,2) per battere
   `.main-footer .list li a:hover` (0,3,2) del theme. */
.main-footer .footer-widget .list li a {
	transition: color .2s ease, opacity .2s ease;
}
.main-footer .footer-widget .list li a:hover,
.main-footer .footer-widget .list li a:focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
}

/* Footer-bottom: link "POWERED BY..." — stesso trattamento per coerenza */
.main-footer .footer-bottom a {
	transition: color .2s ease, opacity .2s ease;
}
.main-footer .footer-bottom a:hover,
.main-footer .footer-bottom a:focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
}

/* ---------- 9. Form contatti: titolo, card wrapper, input moderni ---------- */

/* Titolo sopra il form: stessa larghezza della colonna form, centrato */
.contact-section .contact-title {
	margin-bottom: 32px;
	text-align: center;
}
.contact-section .contact-title h2 {
	color: #275fb4;
	font-size: clamp(22px, 1.2rem + 1.2vw, 30px);
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
	max-width: 28ch;
	margin-left: auto;
	margin-right: auto;
}

/* Card-wrapper attorno al form: profondita' + separazione visiva dallo sfondo */
.contact-section .contact-form {
	background: #ffffff;
	border: 1px solid #e8ecf2;
	border-radius: 12px;
	padding: clamp(20px, 3vw, 36px);
	box-shadow: 0 6px 24px rgba(15, 35, 80, 0.06);
}

/* Form group: spacing armonico (annulla il margin-bottom:30px del template) */
.contact-form .form-group {
	margin-bottom: 20px;
}

/* Label sopra l'input — chiare e leggibili */
.contact-form .form-group label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #2a2f3a;
	margin-bottom: 8px;
	letter-spacing: 0.01em;
}
.contact-form .form-group label.sr-only {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Input field — rounded, padded, sfondo tenue, focus blu coerente con il tema.
   Selettore con [type] per battere `.contact-form .form-group input` (style.css)
   che imposta border-bottom-only e height fisso 55px. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	height: auto;
	padding: 13px 16px;
	font-size: 16px;
	line-height: 1.4;
	color: #1f2530;
	background: #f7f9fc;
	border: 1.5px solid #e1e6ee;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 500;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.contact-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
	overflow: auto; /* override del template che mette overflow:hidden */
}
.contact-form input:hover,
.contact-form textarea:hover {
	border-color: #c8d0db;
	background: #ffffff;
}
.contact-form input:focus,
.contact-form textarea:focus {
	border-color: #275fb4;
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(39, 95, 180, 0.14);
	outline: none;
}
.contact-form ::placeholder {
	color: #9aa3b2;
	opacity: 1;
	font-weight: 400;
}

/* Privacy row: checkbox affiancato alla label, accent-color tematico */
.contact-form .privacy-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 6px 0 24px;
	font-size: 14px;
	line-height: 1.5;
}
.contact-form .privacy-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	flex-shrink: 0;
	accent-color: #275fb4;
}
.contact-form .privacy-row label {
	margin: 0;
	font-weight: 400;
	color: #4a4f5b;
}
.contact-form .privacy-row a {
	color: #275fb4;
	text-decoration: underline;
}

/* Submit centrato + presenza maggiore */
.contact-form .form-actions {
	text-align: center;
	margin-bottom: 0;
}
.contact-form .form-actions button[type="submit"] {
	min-width: 220px;
	padding: 14px 44px;
	font-size: 16px;
	border-radius: 8px;
	margin-top: 4px;
}

/* ---------- 10. Cookie banner: leggibilità + flex robusto ---------- */
#cookie-banner {
	gap: 12px;
	flex-wrap: wrap;
}
#cookie-banner, #cookie-banner #accept-cookies {
	font-size: 15px !important;
	line-height: 1.45 !important;
}
#cookie-banner #accept-cookies {
	min-height: 44px;
	min-width: 100px;
	padding: 8px 16px;
}
@media (max-width: 479px) {
	#cookie-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	#cookie-banner, #cookie-banner #accept-cookies {
		font-size: 14px !important;
	}
}

/* ---------- 11. Menu mobile: accessibilità dropdown ---------- */
.main-menu .dropdown-btn {
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.main-menu .dropdown-btn[aria-expanded="true"] .fa-angle-down {
	transform: rotate(180deg);
	transition: transform .25s ease;
}
.navbar-toggle[aria-expanded="true"] {
	background: rgba(39, 95, 180, 0.1);
}

/* ---------- 12. Footer: spaziature + predisposizione social ---------- */
.main-footer .widgets-section {
	padding-top: 60px;
	padding-bottom: 30px;
}
.footer-widget h2 {
	margin-bottom: 18px;
}
.social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}
.social-icons li { margin: 0; }
.social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #275fb4;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease;
}
.social-icons a:hover,
.social-icons a:focus {
	transform: translateY(-2px);
	background: #1d4a8c;
	color: #fff;
}

/* ---------- 13. Riduzione padding section su mobile ---------- */
/* Le dimensioni di .page-title h1 sono gestite dalla scala fluida (sezione 22). */
@media (max-width: 599px) {
	.welcome-section,
	.therapy-section,
	.therapists-section,
	.about-section,
	.services-page-section,
	.sidebar-page-container,
	.contact-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.page-title {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/* ---------- 14. CTA primaria — leggibilità su qualsiasi sfondo ---------- */
.theme-btn {
	white-space: normal;
	text-align: center;
}

/* ---------- 15. (rimossa) — checkbox privacy ora gestito in sezione 9 (privacy-row) ---------- */

/* ---------- 16. Cookie banner: spinta del contenuto + dimensionamento mobile ---------- */
/* Quando il banner è visibile, aggiunge padding-bottom al body così che footer/
   sidebar non vengano coperti. La classe è gestita in header.php (script inline). */
body.has-cookie-banner {
	padding-bottom: 110px;
}
@media (max-width: 767px) {
	body.has-cookie-banner {
		padding-bottom: 170px;
	}
}
@media (max-width: 479px) {
	body.has-cookie-banner {
		padding-bottom: 200px;
	}
}
.scroll-to-top {
	bottom: 20px;
}
body.has-cookie-banner .scroll-to-top {
	bottom: 130px;
}
@media (max-width: 767px) {
	body.has-cookie-banner .scroll-to-top {
		bottom: 190px;
	}
}

/* ---------- 17. Hero (page-title) — riduzione padding su mobile ---------- */
/* Le pagine brevi (privacy, contatti) avevano un hero blu sproporzionato.
   Ridotto il padding su mobile, mantenendo la home (con bg image) più respirata.
   La dimensione del titolo h1 è gestita dalla scala fluida (sezione 22). */
@media (max-width: 767px) {
	.page-title {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.page-title.home {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
@media (max-width: 599px) {
	.page-title {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.page-title.home {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

/* ---------- 18. Footer: 3 widget allineati (logo / link / info) ---------- */
/* Footer ristrutturato in 3 colonne pulite. La lista link è unica (6 voci)
   e su desktop si dispone in 2 colonne via column-count, su mobile in 1.
   Le widget con h2 (Link, Contatti) si allineano in alto da sole; il widget
   logo (senza h2) è centrato e bilancia visivamente il blocco. */

/* Lista link in 2 colonne su desktop ≥768px */
@media (min-width: 768px) {
	.main-footer .footer-link-list {
		column-count: 2;
		column-gap: 30px;
	}
	.main-footer .footer-link-list li {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* Mobile: nascondo la lista Link (duplicato del menu hamburger) e centro
   logo + contatti per un footer essenziale e simmetrico. */
@media (max-width: 767px) {
	.main-footer .widgets-section {
		padding: 50px 0 10px;
	}
	.main-footer .widgets-section .footer-column {
		margin-bottom: 0;
	}
	.main-footer .footer-widget {
		margin-bottom: 28px;
		text-align: center;
	}
	.main-footer .footer-widget:last-child {
		margin-bottom: 0;
	}
	/* La lista Link è ridondante: già presente nel menu hamburger.
	   La nascondo a mobile per snellire il footer. */
	.main-footer .footer-widget.links-widget {
		display: none;
	}
	/* H2 con underline centrata (l'originale è ancorato a left:0) */
	.main-footer .footer-widget h2 {
		text-align: center;
	}
	.main-footer .footer-widget h2:after {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Footer-bottom: stack su mobile invece di pull-left/pull-right affiancati */
@media (max-width: 767px) {
	.main-footer .footer-bottom {
		padding: 18px 0;
	}
	.main-footer .footer-bottom .copyright,
	.main-footer .footer-bottom .created {
		font-size: 13px;
	}
}

/* ---------- 19. CTA call-to-action — leggibilità su viewport stretti ---------- */
.call-to-action-section .theme-btn {
	white-space: normal;
	word-break: break-word;
	hyphens: auto;
	line-height: 1.3;
}
@media (max-width: 480px) {
	.call-to-action-section .theme-btn,
	.theme-btn.btn-style-one {
		font-size: 14px;
		padding-left: 22px;
		padding-right: 22px;
	}
}
@media (max-width: 360px) {
	.call-to-action-section .theme-btn,
	.theme-btn.btn-style-one {
		font-size: 13px;
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* =========================================================================
   SCALA TIPOGRAFICA FLUIDA (sezioni 20-24)
   Override centralizzato: una sola fonte di verità per font-size, line-height
   e spaziature di titoli e paragrafi. clamp() interpola fra ~480px e ~1280px
   di viewport, eliminando i salti dei breakpoint storici.
   ========================================================================= */

/* ---------- 20. Token tipografici (custom properties) ---------- */
:root {
	/* Body / paragrafi */
	--fs-body: clamp(16px, 0.93rem + 0.18vw, 17px);
	--lh-body: 1.7;

	/* Heading generici */
	--fs-h1: clamp(28px, 1.4rem + 1.6vw, 40px);
	--fs-h2: clamp(24px, 1.25rem + 1.1vw, 32px);
	--fs-h3: clamp(20px, 1.1rem + 0.7vw, 26px);
	--fs-h4: clamp(18px, 1rem + 0.4vw, 21px);
	--fs-h5: clamp(16px, 0.95rem + 0.2vw, 18px);
	--fs-h6: clamp(15px, 0.9rem + 0.15vw, 17px);

	--lh-h1: 1.2;
	--lh-h2: 1.25;
	--lh-h3: 1.35;
	--lh-h4: 1.4;
	--lh-h5: 1.45;
	--lh-h6: 1.5;

	/* Heading sezione (override) */
	--fs-page-title-h1: clamp(30px, 1.5rem + 2.6vw, 56px);
	--fs-sec-title-h2: clamp(26px, 1.3rem + 1.5vw, 38px);
	--fs-therapy-title-h2: clamp(24px, 1.25rem + 1.4vw, 36px);
	--fs-welcome-h2: clamp(24px, 1.25rem + 1vw, 32px);
	--fs-cta-h2: clamp(24px, 1.3rem + 1.4vw, 35px);
	--fs-slider-h1: clamp(26px, 1rem + 3.6vw, 52px);
	--fs-slider-h2: clamp(22px, 1rem + 2.4vw, 40px);
	--fs-slider-text: clamp(15px, 0.9rem + 0.5vw, 18px);

	/* Spaziature verticali */
	--space-after-heading: clamp(12px, 0.7rem + 0.5vw, 18px);
	--space-between-paragraphs: clamp(10px, 0.6rem + 0.3vw, 14px);
	--space-sec-title-bottom: clamp(28px, 1.5rem + 2vw, 50px);
}

/* ---------- 21. Scala globale: body, paragrafi, h1-h6 ---------- */
/* Il selettore body, p, .text, .designation della sezione 6 viene aggiornato
   per allinearsi ai nuovi token. La regola @media (max-width:599px) della
   sezione 6 resta valida (font 15px / lh 1.6) come fallback finale. */
body,
p,
.text,
.designation {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); }

/* Letter-spacing leggero per migliorare leggibilità su display dense */
h1, h2, h3 {
	letter-spacing: -0.005em;
}

/* ---------- 22. Override sezioni hero / title / slider ---------- */
.page-title h1 {
	font-size: var(--fs-page-title-h1);
	line-height: 1.15;
}

.sec-title h2 {
	font-size: var(--fs-sec-title-h2);
	line-height: 1.2;
}
.sec-title {
	margin-bottom: var(--space-sec-title-bottom);
}
.sec-title .text {
	font-size: clamp(15px, 0.9rem + 0.4vw, 17px);
	line-height: 1.6;
}

.therapy-title h2 {
	font-size: var(--fs-therapy-title-h2);
	line-height: 1.25;
	max-width: 31ch;
	margin-left: auto;
	margin-right: auto;
}
.therapy-title .text {
	max-width: 61ch;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.welcome-section .content-column h2 {
	font-size: var(--fs-welcome-h2);
	line-height: 1.25;
}
.welcome-section .content-column .title {
	font-size: clamp(18px, 1rem + 0.6vw, 24px);
	line-height: 1.3;
}
.welcome-section .content-column .bold-text {
	font-size: clamp(17px, 1rem + 0.5vw, 22px);
	line-height: 1.4;
}

.video-section .content-column h2 {
	font-size: var(--fs-welcome-h2);
	line-height: 1.25;
}

.call-to-action-section h2 {
	font-size: var(--fs-cta-h2);
	line-height: 1.25;
}

.main-slider h1 {
	font-size: var(--fs-slider-h1);
	line-height: 1.1;
}
.main-slider h2 {
	font-size: var(--fs-slider-h2);
	line-height: 1.2;
}
.main-slider .text {
	font-size: var(--fs-slider-text);
	line-height: 1.55;
}

/* ---------- 23. Spaziature heading e paragrafi ---------- */
/* Il template originale azzera il margin di h*; qui ridiamo respiro
   gestendo lo spazio successivo (verso il prossimo elemento) e tra paragrafi. */
.content h1 + *,
.content h2 + *,
.content h3 + *,
.content h4 + *,
.text h2 + *,
.text h3 + *,
.text h4 + *,
.inner-column h2 + *,
.benifits-content h3 + * {
	margin-top: var(--space-after-heading);
}

/* Spazio tra paragrafi consecutivi nelle aree contenuto lunghe */
.content p + p,
.text p + p,
.benifits-content p + p,
.inner-column p + p {
	margin-top: var(--space-between-paragraphs);
}

/* Heading interni alle sezioni testuali — margin-top per separarli
   dal blocco precedente (paragrafo, lista, immagine). */
.content h2,
.content h3,
.content h4,
.text h2,
.text h3,
.text h4 {
	margin-top: clamp(20px, 1.2rem + 1vw, 32px);
}
.content > h2:first-child,
.content > h3:first-child,
.text > h2:first-child,
.text > h3:first-child {
	margin-top: 0;
}

/* ---------- 24. Word-wrap naturale per titoli ex-<br> e leggibilità mobile ---------- */
/* Con i <br> rimossi dall'HTML, limitiamo la larghezza dei titoli "narrativi"
   con max-width in unità ch così ottengono break naturali coerenti su ogni
   viewport, senza forzature. */
.page-title h1 {
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}
.welcome-section .content-column h2,
.video-section .content-column h2 {
	max-width: 28ch;
}
.call-to-action-section h2 {
	max-width: 32ch;
}
@media (min-width: 992px) {
	.welcome-section .content-column h2,
	.video-section .content-column h2 {
		max-width: 32ch;
	}
}

/* Hyphenation per testi lunghi su viewport molto stretti — evita orfani
   in pagine come patologie con paragrafi densi. */
@media (max-width: 480px) {
	.content p,
	.text p,
	.benifits-content p {
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* =========================================================================
   25. Mobile header compatto + menu hamburger come pannello overlay
   - Header su singola riga (logo sx, hamburger dx) fino a 767px.
   - Menu apre come pannello assoluto sotto la barra: NON spinge i contenuti.
   - Niente cap a 300px: tutte le 7 voci visibili (incluso "Contatti").
   - Backdrop + body scroll-lock quando il menu è aperto (classe .menu-open
     applicata via JS sugli eventi shown/hidden.bs.collapse).
   - Hamburger animato in "X" usando i 3 .icon-bar già presenti nel markup.
   ========================================================================= */
@media (max-width: 767px) {

	/* Header single-row: grid 3 colonne (col laterali = larghezza hamburger
	   per bilanciamento) → logo centrato, hamburger ancorato a destra. */
	.main-header .main-box .outer-container {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		gap: 12px;
		padding: 8px 0;
	}
	header.main-header .main-box .logo-box {
		float: none;
		width: auto;
		margin: 0;
		padding: 6px 0;
		grid-column: 2;
		justify-self: center;
	}
	.main-header .main-box .logo-box .logo img {
		max-height: 56px;
		width: auto;
	}
	.main-header .nav-outer {
		float: none;
		width: auto;
		padding-right: 0;
		grid-column: 3;
		justify-self: end;
	}
	.main-menu .navbar-header {
		float: none;
		width: auto;
		padding: 0;
		text-align: right;
	}

	/* Pannello menu: overlay assoluto sotto la barra (non in-flow).
	   Uso #primary-navigation (id) per avere specificità maggiore degli
	   override responsive.css `.main-menu .collapse(.in)`.
	   `.main-box` è già position:relative (style.css:847) — neutralizzo i
	   `position:relative` intermedi (`.outer-container`, `.nav-outer`,
	   `.main-menu`) altrimenti il containing block del pannello sarebbe
	   uno di questi, larghi solo ~44-94px (il bottone), troncando le voci.
	   Il pannello assoluto deve agganciarsi a `.main-box` (full-width). */
	.main-header .main-box {
		position: relative;
	}
	.main-header .main-box .outer-container,
	.main-header .nav-outer,
	.main-header .main-menu,
	.main-header .main-menu .navbar-header {
		position: static;
	}
	#primary-navigation.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 0;
		background: #2c2c2c;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-top: none;
		border-radius: 0;
		z-index: 1000;
	}
	#primary-navigation.navbar-collapse:not(.in) {
		display: none;
	}
	#primary-navigation.navbar-collapse.in {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#primary-navigation .navigation {
		background: #2c2c2c;
		border: none;
	}

	/* Backdrop + scroll-lock quando il menu è aperto */
	.main-header.menu-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 999;
		pointer-events: auto;
	}
	body.menu-open {
		overflow: hidden;
	}

	/* Hamburger animato in "X" sullo stato aperto */
	.navbar-toggle .icon-bar {
		transition: transform .25s ease, opacity .2s ease;
		transform-origin: center;
	}
	.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
		opacity: 0;
	}
	.navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Su viewport molto stretti (≤479px) responsive.css:806-813 ridichiara il
   logo a width:100% — duplico i miei valori dentro lo stesso media più
   ristretto per vincere per source-order anche a quei breakpoint. */
@media (max-width: 479px) {
	header.main-header .main-box .logo-box {
		width: auto;
		margin: 0;
		padding: 6px 0;
	}
}

/* =========================================================================
   26. Immagini float a lato del testo (pages/*.php — layout articolo)
   Per le pagine con layout sidebar+contenuto (mal-di-schiena, tallonite,
   ecc.) dove le immagini sono inline dentro un unico .text/.content. Su
   desktop fluttuano a destra o a sinistra al ~45% di larghezza, su tablet al
   50%, su mobile tornano full-width sopra il testo successivo.
   ========================================================================= */
@media (min-width: 992px) {
	.img-float-right,
	.img-float-left {
		max-width: 46%;
		clear: both; /* evita sovrapposizioni quando piu' immagini si succedono */
	}
	.img-float-right {
		float: right;
		margin: 6px 0 22px 32px;
	}
	.img-float-left {
		float: left;
		margin: 6px 32px 22px 0;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.img-float-right,
	.img-float-left {
		max-width: 50%;
		clear: both;
	}
	.img-float-right {
		float: right;
		margin: 6px 0 18px 24px;
	}
	.img-float-left {
		float: left;
		margin: 6px 24px 18px 0;
	}
}
@media (max-width: 767px) {
	.img-float-right,
	.img-float-left {
		float: none;
		max-width: 100%;
		margin: 16px 0;
	}
}

/* Clearfix per i container delle pagine articolo: garantisce che il testo
   successivo all'ultimo elemento flottato non rimanga "incassato" e che
   l'altezza del contenitore racchiuda i float. */
.sidebar-page-container .content::after,
.sidebar-page-container .content .text::after,
.about-section .text::after {
	content: "";
	display: block;
	clear: both;
}

/* .list-style-one è un BFC: i suoi <li> hanno bullet (:before) in
   position:absolute con left:0; senza un nuovo block formatting context il
   <ul> si estenderebbe sotto le immagini flottate (.img-float-*) e i bullet
   finirebbero sovrapposti all'immagine. Con flow-root la lista si dispone
   interamente accanto alla float e i bullet restano allineati ai propri <li>. */
.list-style-one {
	display: flow-root;
}

/* =========================================================================
   27. Uniformazione colori titoli e testi nelle aree contenuto (.auto-container)
   - Titoli h1-h6 SENZA class propria  -> #275fb4 (blu primario)
   - Testo (p, ul, ol, li)             -> #777777 (grigio body)
   I contesti su sfondo colorato/scuro (page-title hero, call-to-action,
   main-footer) sono esclusi: il bianco originale deve restare per non
   perdere il contrasto. Le righe successive ripristinano #ffffff in quei
   container con specificita' pari (e source-order vincente).
   ========================================================================= */
.auto-container :is(h1, h2, h3, h4, h5, h6):not([class]) {
	color: #275fb4;
}
.auto-container :is(p, ul, ol, li) {
	color: #777777;
}

/* Eccezioni: contesti su sfondo colorato/scuro -> testo bianco originale */
.page-title .auto-container h1,
.call-to-action-section .auto-container h2,
.main-footer .auto-container h2 {
	color: #ffffff;
}
.main-footer .auto-container :is(p, ul, ol, li),
.call-to-action-section .auto-container :is(p, ul, ol, li),
.page-title .auto-container :is(p, ul, ol, li) {
	color: #ffffff;
}

/* ---------- 23. Griglia a 5 colonne (therapists-section home) ---------- */
/* Bootstrap 3 non ha la 5-col nativa: 12/5 = 2.4 → width 20%.
   Attiva solo da md (≥992px); sotto restano col-sm-6 e col-xs-12 del template. */
.col-md-5col {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 992px) {
	.col-md-5col {
		float: left;
		width: 20%;
	}
}
/* Allineamento titoli su righe diverse: le card con titolo lungo
   non devono spingere giù la lower-box delle vicine. */
.therapists-section .therapist-block .inner-box .lower-box .designation {
	min-height: 3em;
}
/* Sotto md (col-sm-6/col-xs-6 → 2 per riga) il 5° blocco resta
   spaiato sull'ultima riga: lo centriamo con un offset del 25%. */
@media (max-width: 991px) {
	.therapists-section .therapist-block:last-child {
		margin-left: 25%;
	}
}

/* ---------- Footer contatti: icone telefono / WhatsApp ----------
   Allineiamo l'icona FA al testo con flex inline (no float, niente layout
   shift) e diamo a WhatsApp lo stesso peso visivo di .number. */
.main-footer .info-widget .number a,
.main-footer .info-widget .whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.main-footer .info-widget .contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	font-size: 15px;
	flex-shrink: 0;
	transition: background-color .2s ease, color .2s ease;
}
.main-footer .info-widget .number a:hover .contact-icon,
.main-footer .info-widget .number a:focus .contact-icon {
	background-color: #ffffff;
	color: #094299;
}
.main-footer .info-widget .whatsapp {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
	font-family: 'Montserrat', sans-serif;
}
.main-footer .info-widget .whatsapp .contact-icon {
	background-color: #25d366;
	color: #ffffff;
}
.main-footer .info-widget .whatsapp a:hover .contact-icon,
.main-footer .info-widget .whatsapp a:focus .contact-icon {
	background-color: #1ebe5d;
}
/* L'underline su :hover (regola 8 sopra) sottolineerebbe anche l'icona —
   limitiamolo alla sola label testuale. */
.main-footer .info-widget .number a:hover,
.main-footer .info-widget .number a:focus,
.main-footer .info-widget .whatsapp a:hover,
.main-footer .info-widget .whatsapp a:focus {
	text-decoration: none;
}
.main-footer .info-widget .number a:hover .contact-label,
.main-footer .info-widget .number a:focus .contact-label,
.main-footer .info-widget .whatsapp a:hover .contact-label,
.main-footer .info-widget .whatsapp a:focus .contact-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- CTA Pancafit (pages/terapie.php) — full-image visibility ----------
   L'immagine sorgente (terapie-pancafit.jpg, 1405×641, ratio ~2.19:1) con
   background-size:cover veniva tagliata in alto/basso su desktop (section
   proporzionalmente più larga dell'immagine). Su mobile, invece, la section
   è più stretta dell'immagine: cover scala in altezza e ritaglia ai lati,
   ma la persona resta visibile.
   Soluzione: da ≥768px imponiamo alla section lo stesso aspect-ratio
   dell'immagine, così cover combacia esattamente senza tagli. Il contenuto
   (h2 + bottone) viene centrato verticalmente via flex.
   Sotto 768px lasciamo il padding di default e cover/center, che mantiene
   la persona inquadrata. */
.cta-pancafit {
	background-position: center center !important;
	background-size: cover !important;
}
@media (min-width: 768px) {
	.cta-pancafit {
		aspect-ratio: 1448 / 864;
		padding: 0 !important;
		display: flex;
		align-items: center;
	}
	.cta-pancafit > .auto-container {
		width: 100%;
	}
}