/*
Theme Name:   Osteopata Trambaiolli – Child
Theme URI:    https://osteopatatrambaiolli.it
Description:  Child theme di Extendable per osteopatatrambaiolli.it. Contiene solo le personalizzazioni del sito.
Author:       Andrea Lavezzi
Template:     extendable
Version:      1.0.0
Requires at least: 6.4
Text Domain:  otr-child
*/

/* Le personalizzazioni CSS vanno qui sotto. */

/* Hero homepage (pattern otr-child/hero): menu in alto, testo in basso. */

/*
 * Con la posizione "in alto a sinistra" WordPress mette il contenitore interno
 * a width:auto: lo riportiamo a tutta larghezza, con un limite sugli schermi
 * molto larghi perché menu e testo non finiscano ai bordi.
 */
.otr-hero.wp-block-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	align-self: stretch;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

/* Il gap del flex gestisce la distanza tra barra e testo: niente margini extra. */
.otr-hero .wp-block-cover__inner-container > * {
	margin-block: 0;
}

/*
 * 100svh = altezza realmente visibile sui telefoni (con le barre del browser).
 * 100vh resta nell'HTML del blocco come fallback: i browser che non conoscono
 * svh scartano questa dichiarazione.
 */
.otr-hero.wp-block-cover {
	min-height: 100svh !important;
}

.otr-hero .wp-block-site-title {
	white-space: nowrap;
}

.otr-hero .wp-block-site-title a,
.otr-hero .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
}

.otr-hero__content {
	width: 100%;
}

.otr-hero__text {
	max-width: 56rem;
}

.otr-hero__text > * {
	margin-block: 0;
}

.otr-hero__eyebrow {
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.otr-hero__text > .otr-hero__title {
	margin-top: var(--wp--preset--spacing--20);
	hyphens: none;
	overflow-wrap: normal;
}

.otr-hero__text > .otr-hero__lead {
	margin-top: var(--wp--preset--spacing--30);
}

.otr-hero__text > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.otr-hero__studi {
	margin: 0;
	letter-spacing: 0.06em;
	line-height: 1.8;
}

/*
 * Schermi grandi: il titolo cresce anche con l'altezza (vedi hero.php) e
 * occhiello, sottotitolo e margine inferiore lo seguono, così il blocco di
 * testo non resta piccolo e schiacciato in fondo alla foto.
 */
.otr-hero__text > .otr-hero__eyebrow {
	font-size: clamp(0.875rem, 0.6rem + 0.3vw, 1.125rem);
}

.otr-hero__text > .otr-hero__lead.has-medium-font-size {
	max-width: 34em;
	font-size: clamp(1.125rem, 0.9rem + 0.45vw, 1.5rem) !important;
	text-wrap: balance;
}

@media (min-width: 782px) {
	.otr-hero.wp-block-cover {
		padding-bottom: max(var(--wp--preset--spacing--60), 11vh) !important;
	}
}

/* Sotto questa larghezza gli studi scendono sotto i pulsanti: allineati a sinistra. */
@media (max-width: 1279px) {
	.otr-hero__studi.has-text-align-right {
		text-align: left;
	}
}

@media (max-width: 781px) {
	.otr-hero.wp-block-cover {
		padding-right: var(--wp--preset--spacing--30) !important;
		padding-left: var(--wp--preset--spacing--30) !important;
	}

	/* Su telefono il testo parte subito sotto la barra; sotto resta la foto. */
	.otr-hero.wp-block-cover .wp-block-cover__inner-container {
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.otr-hero .otr-hero__studi {
		display: none;
	}

	.otr-hero__text > .otr-hero__eyebrow {
		font-size: 0.75rem;
		letter-spacing: 0.2em;
	}

	.otr-hero__text > .otr-hero__title {
		font-size: clamp(3.5rem, 17vw, 4.5rem) !important;
	}

	.otr-hero__text > .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.otr-hero__text .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Base comune a tutte le pagine
   ========================================================================== */

/* Header, contenuto e footer si toccano: le distanze le danno le sezioni. */
.wp-site-blocks > * + *,
.otr-main.is-layout-constrained > * + * {
	margin-block-start: 0;
}

strong,
b {
	font-weight: 500;
}

/*
 * Pagine interne: testo a 400, più leggibile sui testi lunghi (privacy, landing).
 * La homepage resta a 300 come nel mockup.
 */
body:not(.home) .otr-main {
	font-weight: 400;
}

body:not(.home) .otr-main strong,
body:not(.home) .otr-main b {
	font-weight: 600;
}

@media (max-width: 781px) {
	body {
		font-size: 1.0625rem;
	}
}

/* Etichetta maiuscola sopra i titoli. */
.otr-eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Occhiello cliccabile (pagine ambito): sottolineato, perché si capisca che è un link. */
.otr-eyebrow a {
	text-underline-offset: 6px;
}

/* Etichetta piccola grigia ("Specializzato in", "Altri ambiti"…). */
.otr-label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #4f5b5f;
}

/* Titoli di sezione in Cormorant. */
.otr-display,
.otr-page__title,
.otr-prenota__title,
.otr-prose h2,
.otr-quote__text p {
	hyphens: manual;
}

.otr-display {
	margin: 0;
	font-size: clamp(2.375rem, 4.2vw, 3.5rem);
	line-height: 1.08;
	color: var(--wp--preset--color--primary);
	text-wrap: balance;
}

.otr-display--xl {
	font-size: clamp(3rem, 5.5vw, 4.5rem);
	line-height: 1;
}

/* Link testuale "Scopri…", "Leggi di più"… */
.otr-more a {
	font-size: 1rem;
	font-weight: 500;
	text-underline-offset: 6px;
}

/* ==========================================================================
   Pulsanti (a pillola, dalle impostazioni di theme.json)
   ========================================================================== */

.wp-block-button.otr-btn-light > .wp-block-button__link {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.otr-btn-light > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.otr-btn-dark > .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.wp-block-button.otr-btn-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--background);
}

.wp-block-button.otr-btn-outline-light > .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: transparent;
	color: var(--wp--preset--color--background);
}

.wp-block-button.otr-btn-outline-light > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Header delle pagine interne (pattern otr-child/header)
   ========================================================================== */

.otr-header {
	padding-block: 1.75rem;
}

.otr-header__bar {
	gap: 2rem;
}

.otr-header__title {
	margin: 0;
	white-space: nowrap;
	font-size: 1.625rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.otr-header__title a,
.otr-nav a {
	color: inherit;
	text-decoration: none;
}

.otr-header__nav {
	gap: 2.5rem;
}

.otr-nav {
	font-weight: 400;
	letter-spacing: 0.06em;
}

.otr-nav .wp-block-navigation__container {
	gap: 2.5rem;
}

/* Pagina corrente: sottolineatura oro. */
.otr-nav .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 8px;
}

/* Menu a tutto schermo su telefono (header e hero). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	/* Il tema padre fissa la dimensione con una regola più specifica. */
	font-size: 2rem !important;
	letter-spacing: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.25rem;
	padding-top: 2rem;
}

/* Il tema padre dà al pulsante di chiusura un fondo chiaro con l'icona bianca. */
.has-modal-open .wp-block-navigation .wp-block-navigation__responsive-container-close {
	background-color: transparent;
	color: inherit;
}

/* Nome clonato dal tema padre in cima al menu: bianco e in Cormorant come nell'header. */
body .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: inherit;
}

/*
 * Tablet: il menu completo ci sta solo da circa 900px (WordPress lo mostra già da 600px).
 * Sotto i 900px compare l'hamburger; sotto i 1200px il telefono (con il +39) non ci
 * sta più ed esce dalla barra: resta nei pulsanti, nel footer e, su telefono,
 * nella barra fissa in basso (.otr-callbar).
 */
@media (min-width: 600px) and (max-width: 899px) {
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.otr-header__phone .wp-block-button__link,
.otr-hero__phone .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.otr-header .wp-block-buttons.otr-header__phone,
	.otr-hero .wp-block-buttons.otr-hero__phone {
		display: none;
	}

	.otr-header__nav,
	.otr-header .wp-block-navigation .wp-block-navigation__container,
	.otr-hero .wp-block-navigation .wp-block-navigation__container {
		gap: 2rem;
	}
}

@media (max-width: 781px) {
	.otr-header {
		padding-block: 0.75rem;
	}

	.otr-header__title {
		font-size: 1.375rem;
	}
}

/* ==========================================================================
   Sezioni della homepage
   ========================================================================== */

.otr-section {
	padding-block: clamp(5rem, 10vw, 8.75rem);
}

.wp-block-columns.otr-split {
	gap: clamp(3rem, 7vw, 6rem);
}

.otr-split > .wp-block-column > .otr-eyebrow + * {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.otr-split__text {
		padding-top: 2.75rem;
	}
}

.otr-section > .otr-section__head {
	gap: 2rem;
}

.otr-section > .otr-section__head + * {
	margin-block-start: 3.5rem;
}

.otr-section__head .otr-eyebrow + .otr-display {
	margin-top: 0;
}

/* Foto verticali (Chi sono, La prima visita). */
.otr-photo {
	margin: 0;
}

.otr-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.otr-photo--omar img {
	object-position: 66% center;
}

/* Elenchi a righe separate da filetti oro: specializzazioni, princìpi, disturbi. */
.otr-specs,
.otr-principi,
.otr-ambito__list {
	padding: 0;
	list-style: none;
}

:is(.otr-specs, .otr-principi, .otr-ambito__list) li {
	border-top: 1px solid var(--wp--preset--color--accent);
}

:is(.otr-specs, .otr-principi, .otr-ambito__list) li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

.otr-specs {
	margin: 0;
}

.otr-specs li {
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
}

.otr-split .otr-label + .otr-specs {
	margin-block-start: 0.75rem;
}

/* Durata di visita e trattamenti. */
.otr-facts {
	gap: 2rem;
}

.otr-fact {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--accent);
}

.otr-fact > * {
	margin: 0;
}

.otr-fact__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3.25rem, 5vw, 4rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* Citazione di Still su fondo petrolio. */
.otr-quote {
	padding-block: clamp(5rem, 10vw, 8.75rem);
	text-align: center;
}

.otr-quote .otr-quote__text {
	margin-inline: auto;
	padding: 0;
	border: 0;
}

.otr-quote__text::before {
	content: "";
	display: block;
	width: 4rem;
	height: 1px;
	margin: 0 auto 2.25rem;
	background: var(--wp--preset--color--accent);
}

.otr-quote__text p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.875rem, 3.2vw, 2.75rem);
	font-style: italic;
	line-height: 1.3;
	text-wrap: balance;
}

.otr-quote__text cite {
	display: block;
	margin-top: 2.25rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Contatti in homepage. */
.otr-contact-buttons {
	gap: 1rem;
	margin-top: 2.5rem;
}

/* ==========================================================================
   Griglia degli ambiti (pattern otr-child/servizi-griglia)
   ========================================================================== */

.otr-ambiti {
	gap: 3rem 2rem;
}

.otr-card {
	position: relative;
}

.otr-card > * {
	margin: 0;
}

.otr-card__img {
	margin-bottom: 1rem;
}

.otr-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.otr-card__label {
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
}

.otr-card__title {
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.15;
}

.otr-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Tutta la scheda è cliccabile tramite il link del titolo. */
.otr-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.otr-card:hover .otr-card__title a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.otr-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 6px;
}

.otr-card__title a:focus {
	outline: none;
}

@media (max-width: 600px) {
	.otr-ambiti.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1rem;
	}

	.otr-card__title {
		font-size: 1.3125rem;
	}
}

/* ==========================================================================
   Studi (pattern otr-child/studi)
   ========================================================================== */

.otr-studi {
	gap: 2rem;
}

.otr-studio {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--primary);
}

.otr-studio > * {
	margin: 0;
}

.otr-studio > * + * {
	margin-top: 0.5rem;
}

.otr-studio__name {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Fascia "Prenota una visita"
   ========================================================================== */

.otr-prenota {
	padding-block: clamp(4.5rem, 8vw, 6.25rem);
}

.otr-prenota__inner {
	gap: 2rem;
}

.otr-prenota__text > * {
	margin: 0;
}

.otr-prenota__title {
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	color: inherit;
}

.otr-prenota__text > .otr-prenota__studi {
	margin-top: 1rem;
	font-size: 1.0625rem;
	color: #d6e0e3;
}

@media (max-width: 600px) {
	.otr-prenota .wp-block-buttons,
	.otr-prenota .wp-block-button,
	.otr-contact-buttons,
	.otr-contact-buttons .wp-block-button {
		width: 100%;
	}

	.otr-prenota .wp-block-button__link,
	.otr-contact-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Pagine interne (templates/page*.html)
   ========================================================================== */

.otr-page__head {
	padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem);
	border-bottom: 1px solid #d9e0e1;
}

.otr-page__head > * {
	margin: 0;
}

.otr-page__title {
	margin: 0;
	font-size: clamp(3.5rem, 8.5vw, 7.5rem);
	font-weight: 400;
	line-height: 0.98;
	color: var(--wp--preset--color--primary);
	text-wrap: balance;
	hyphens: none;
	overflow-wrap: normal;
}

.otr-page__body {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(5rem, 9vw, 7.5rem);
}

.otr-page__body > .otr-prose:empty {
	display: none;
}

/* Colonna di lettura, spostata a destra sugli schermi larghi come nel mockup. */
.otr-prose {
	max-width: 45rem;
}

@media (min-width: 1100px) {
	.otr-prose {
		margin-left: 22rem;
	}
}

.otr-prose h2 {
	clear: both;
	margin-block-start: 3.5rem;
	font-size: clamp(2.125rem, 3.6vw, 2.75rem);
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}

.otr-prose h3 {
	margin-block-start: 2.5rem;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.otr-prose > .otr-lead,
.otr-ambito__content .otr-lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4375rem, 2.4vw, 1.875rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
}

.otr-prose li::marker,
.otr-ambito__content li::marker {
	color: var(--wp--preset--color--accent);
}

/* I princìpi dell'osteopatia: numeri grandi (filetti oro: vedi .otr-specs). */
.otr-principi {
	counter-reset: otr-principi;
}

.otr-principi li {
	display: flex;
	gap: 1.75rem;
	padding: 1.375rem 0;
	counter-increment: otr-principi;
}

.otr-principi li::before {
	content: counter(otr-principi);
	min-width: 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* Ritratto accanto al testo (Still). */
.otr-prose .otr-portrait {
	float: left;
	width: 12.5rem;
	margin: 0.5rem 2.5rem 1rem 0;
}

.otr-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 20%;
	filter: grayscale(1);
}

.otr-portrait figcaption {
	margin-top: 0.625rem;
	font-size: 0.8125rem;
	color: #4f5b5f;
}

@media (max-width: 600px) {
	.otr-prose .otr-portrait {
		float: none;
		width: 10rem;
		margin: 0;
	}
}

/* Citazioni nel testo (es. ambito sportivo). */
.otr-prose .wp-block-quote,
.otr-ambito__content .wp-block-quote {
	margin-block: 2rem;
	padding: 0;
	border: 0;
}

.otr-prose .wp-block-quote p,
.otr-ambito__content .wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
}

.otr-prose .wp-block-quote cite,
.otr-ambito__content .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-style: normal;
	color: #4f5b5f;
}

/*
 * Ritmo verticale comune a testi e colonne: 1.5rem tra un elemento e il
 * successivo. Sta qui, dopo le citazioni e prima della pagina ambito, perché
 * tra regole di pari peso vince l'ultima: spostarlo cambia i margini.
 */
.otr-prose > *,
.otr-ambito__content > *,
.otr-ambito__content .wp-block-column > *,
.otr-split > .wp-block-column > * {
	margin-block: 0;
}

.otr-prose > * + *,
.otr-ambito__content > * + *,
.otr-ambito__content .wp-block-column > * + *,
.otr-split > .wp-block-column > * + * {
	margin-block-start: 1.5rem;
}

/* ==========================================================================
   Pagina ambito (templates/page-ambito.html)
   ========================================================================== */

.otr-ambito__head .otr-eyebrow {
	margin-bottom: 1.5rem;
}

.otr-page__title.otr-ambito__title {
	font-size: clamp(3.25rem, 7vw, 6.5rem);
}

/* Foto in evidenza dentro il contenuto, sopra l'elenco "Di cosa mi occupo". */
.otr-ambito__img {
	max-width: 37rem;
}

.otr-ambito__img img {
	display: block;
}

.otr-ambito__content .otr-ambito__img + * {
	margin-block-start: 2.5rem;
}

.wp-block-columns.otr-ambito__cols {
	gap: 2.5rem clamp(3rem, 7vw, 6rem);
}

.otr-ambito__content .wp-block-quote p {
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);
}

.otr-main--ambito .otr-page__body {
	padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
}

/* Elenco dei disturbi (filetti oro: vedi .otr-specs). */
.otr-ambito__content .otr-label + .otr-ambito__list {
	margin-block-start: 0.75rem;
}

.otr-ambito__list li {
	padding: 1.125rem 0;
}

/* Ambiti senza elenco: una sola colonna di lettura. */
.otr-ambito__content:not(:has(.wp-block-columns)) {
	max-width: 45rem;
}

.otr-altri {
	padding-bottom: clamp(5rem, 8vw, 7.5rem);
}

.otr-altri > * {
	margin: 0;
}

.otr-altri__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.otr-altri__list a {
	padding: 0.625rem 1.25rem;
	border: 1px solid #c9d3d5;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
}

.otr-altri__list a:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Pagina Contatti (templates/page-contatti.html)
   ========================================================================== */

.otr-contatti {
	padding-block: clamp(4rem, 8vw, 7rem) clamp(5rem, 9vw, 7.5rem);
}

.otr-contatti .otr-page__title {
	font-size: clamp(3.25rem, 7vw, 6.5rem);
	line-height: 0.95;
}

.otr-contatti__phone {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.2;
}

.otr-split > .wp-block-column > .otr-contatti__phone {
	margin-block-start: 2.5rem;
}

.otr-split > .wp-block-column > .otr-contatti__email {
	margin-block-start: 0.25rem;
}

.otr-contatti__phone a {
	text-decoration: none;
}

.otr-contatti__email a {
	font-size: 1.25rem;
	font-weight: 400;
	text-underline-offset: 6px;
}

.otr-contatti__studi .otr-studi.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 3.5rem;
}

.otr-contatti__studi .otr-studio__name {
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 400;
}

@media (min-width: 782px) {
	.otr-contatti__studi {
		padding-top: 3rem;
	}
}

/* ==========================================================================
   Footer (pattern otr-child/footer)
   ========================================================================== */

.otr-footer {
	padding-block: clamp(4rem, 7vw, 5.5rem) 2.5rem;
	font-size: 0.9375rem;
}

.otr-footer a {
	color: inherit;
	text-decoration: none;
}

.otr-footer a:hover {
	color: inherit;
	text-decoration: underline;
}

.otr-footer__cols {
	gap: 2.5rem 3rem;
}

/* La griglia di WordPress usa auto-fill: con 3 colonne lascerebbe tracce vuote a destra. */
.otr-footer__cols.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.otr-footer__cols > .wp-block-group > * {
	margin: 0;
}

.otr-footer__cols > .wp-block-group > * + * {
	margin-top: 0.625rem;
}

.otr-footer__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.2;
}

.otr-footer__muted {
	color: #c5d3d7;
}

.otr-footer__label {
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--accent);
}

.otr-footer > .otr-footer__bottom {
	gap: 1rem 2rem;
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.8125rem;
	color: #c5d3d7;
}

.otr-footer__bottom p {
	margin: 0;
}

.otr-footer__bottom a {
	text-decoration: underline;
}

.otr-footer__bottom a + a {
	margin-left: 1.5rem;
}

/* Foto dentro il testo (es. Chi sono): non più larga di metà colonna abbondante. */
.otr-prose .otr-photo {
	max-width: 26rem;
}

/* ==========================================================================
   Barra "Chiama" fissa in basso su telefono (pattern otr-child/footer):
   lì il numero non sta nell'header.
   ========================================================================== */

.otr-callbar {
	display: none;
}

@media (max-width: 781px) {
	.otr-callbar {
		display: block;
		position: fixed;
		inset: auto 0 0;
		z-index: 10;
		margin: 0;
	}

	.otr-callbar a {
		display: block;
		padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--primary);
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		color: var(--wp--preset--color--background);
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
		text-decoration: none;
	}

	/* Spazio perché la barra non copra l'ultima riga del footer. */
	.otr-footer {
		padding-bottom: calc(6rem + env(safe-area-inset-bottom));
	}
}