/* =============================================================================
   DESIGN SYSTEM — Hotel Baia di Puolo
   -----------------------------------------------------------------------------
   Sorgente unica per famiglie tipografiche, colori del testo, scala dei titoli,
   bottoni, occhielli e spaziature di sezione.

   Caricato dopo style.css / modal.css / override.css (layouts/default.htm), così
   vince sulle regole storiche senza doverle riscrivere. Le regole che erano in
   conflitto sono state comunque rimosse alla sorgente:
     - override.css      titoli non più in "Times New Roman", .btn-more eliminata
     - style.css         body agganciato ai token --ff-body / --c-body
     - menu-overlay.css  "Roboto Condensed" (mai caricato) -> --ff-body

   Prima di aggiungere qui un valore nuovo: controllare che non esista già come
   token. Le utility .font-size-* / .font-weight-* di style.css restano valide per
   i casi puntuali, ma i titoli non ne hanno più bisogno.
   ========================================================================== */

:root {
	/* --- famiglie ------------------------------------------------------- */
	--ff-title: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
	--ff-body:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* --- colori del testo ----------------------------------------------- */
	/* Nessun nero pieno: i titoli usano un blu-grafite, i paragrafi un
	   grigio-ardesia (contrasto 7.4:1 su bianco, ampiamente sopra AA). */
	--c-title:   #2E3644;
	--c-body:    #4E545C;
	--c-muted:   #7A818C;
	--c-hairline: #E3E6EA;

	/* --- colori di marca ------------------------------------------------ */
	--c-brand:       #353b8f;
	--c-brand-dark:  #2a2f73;
	--c-accent:      #52c3bf;

	/* --- spaziature di sezione ------------------------------------------ */
	--section-pad-y: 5.5rem;
	--section-pad-x: 10%;
	--gap-sm: 1rem;
	--gap-md: 1.75rem;
	--gap-lg: 3rem;
}

@media (max-width: 991px) {
	:root {
		--section-pad-y: 4rem;
		--section-pad-x: 7%;
	}
}

@media (max-width: 575px) {
	:root {
		--section-pad-y: 3rem;
		--section-pad-x: 6%;
	}
}

/* =============================================================================
   TIPOGRAFIA
   ========================================================================== */

body {
	font-family: var(--ff-body);
	color: var(--c-body);
}

h1, h2, h3, h4, h5, h6,
.cp-titolo > div {
	font-family: var(--ff-title);
	color: var(--c-title);
	margin-top: 0;
}

/* Cormorant Garamond ha occhio piccolo e aste sottili: sotto il peso 300 e
   sopra il 500 perde eleganza, quindi la scala si muove solo fra i due. */
h1 { font-size: clamp(2.4rem, 4.2vw, 4.6rem); font-weight: 300; line-height: 1.1;  letter-spacing: -0.005em; }
h2 { font-size: clamp(2.0rem, 3.2vw, 3.4rem); font-weight: 300; line-height: 1.15; }
h3 { font-size: clamp(1.7rem, 2.2vw, 2.4rem); font-weight: 500; line-height: 1.2; }
h4 { font-size: clamp(1.5rem, 1.6vw, 1.9rem); font-weight: 500; line-height: 1.25; }
h5 { font-size: clamp(1.3rem, 1.2vw, 1.5rem); font-weight: 500; line-height: 1.3; }
h6 { font-size: clamp(1.2rem, 1.0vw, 1.3rem); font-weight: 600; line-height: 1.3; }

/* Titolo in sovrimpressione sulla copertina (partials/page-cover.htm) */
.cp-titolo > div {
	font-size: clamp(2.0rem, 3.2vw, 3.4rem);
	font-weight: 300;
	line-height: 1.15;
}

/* Titolo display: l'H1 dell'hero, unico caso che sale oltre la scala. */
.title-display {
	font-size: clamp(2.8rem, 5.6vw, 6.0rem);
	font-weight: 300;
	line-height: 1.05;
}

/* Corpo testo: vale anche per l'HTML che arriva dai campi rich text del
   backend (pageContent.content|raw), che non porta classi proprie. */
p,
li,
.testo-corrente {
	color: var(--c-body);
	line-height: 1.7;
}

/* Un solo corpo testo per tutto il sito. Prima le descrizioni delle pagine
   interne restavano al 16px di default del browser mentre in home i wrapper con
   .font-size-normal le portavano a ~21px: due misure per lo stesso ruolo. */
p, li {
	font-size: clamp(1rem, 1.05vw, 1.125rem);
}

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

/* Testo di apertura (occhiello + titolo + lead): un gradino sopra il corpo. */
.sezione-testo,
.sezione-testo p {
	font-size: clamp(1.1rem, 1.25vw, 1.3rem);
}

/* -----------------------------------------------------------------------------
   Occhiello (kicker sopra il titolo).
   Il MAIUSCOLO è tipografico, non scritto nel testo: le stringhe restano in
   stile frase e restano traducibili.
   -------------------------------------------------------------------------- */
.eyebrow {
	display: inline-block;
	max-width: 100%;
	font-family: var(--ff-body);
	font-size: clamp(0.78rem, 0.8vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 0.9rem;
}

.eyebrow-light { color: rgba(255, 255, 255, 0.85); }

/* Occhiello e titolo dentro un hero su immagine */
.cover-content-wrapper .eyebrow,
.header-img .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* =============================================================================
   SEZIONI E SPAZIATURE
   -----------------------------------------------------------------------------
   .sezione non aveva alcun padding: ogni pagina lo ricostruiva a mano con
   pt-10 / p-xs-8 + style="padding-left:10%" inline, con valori diversi fra
   sezioni visivamente identiche. Ora il ritmo verticale è uno solo.
   ========================================================================== */

.sezione {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
}

/* Contenitore interno standard: sostituisce gli inline
   style="padding-left:10%;padding-right:10%;" sparsi nelle pagine. */
.sezione-inner {
	padding-left: var(--section-pad-x);
	padding-right: var(--section-pad-x);
}

/* Sezione senza stacco verticale (blocchi immagine a filo) */
.sezione-flush { padding-top: 0; padding-bottom: 0; }

/* Intestazione di pagina (occhiello + titolo) e corpo che la segue: insieme
   valgono un solo stacco verticale, non due. Vedi partials/page-header.htm. */
.sezione-head {
	position: relative;
	width: 100%;
	padding-top: var(--section-pad-y);
	padding-bottom: 0;
}

.sezione-body {
	position: relative;
	width: 100%;
	padding-top: var(--gap-lg);
	padding-bottom: var(--section-pad-y);
}

/* Distanza fra occhiello+titolo e il testo che segue */
.sezione-testo { margin-top: var(--gap-md); }

/* Distanza fra il testo e il bottone della sezione */
.sezione-azione { margin-top: var(--gap-md); }

/* =============================================================================
   BOTTONI
   -----------------------------------------------------------------------------
   Prima .btn-primary e .btn-secondary avevano lo stesso identico colore e si
   distinguevano solo per taglie improvvisate nel markup
   (btn-sm rounded-pill p-1 pl-3 pr-3 font-weight-800). Ora: primario pieno,
   secondario in outline, due sole taglie.
   ========================================================================== */

.btn {
	font-family: var(--ff-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 50rem;
	border-width: 1px;
	transition: background-color .3s, border-color .3s, color .3s;
	white-space: normal;
}

.btn-md,
.btn:not(.btn-sm):not(.btn-lg):not([class*="btn-sq"]) {
	padding: 0.85rem 2.2rem;
	font-size: clamp(0.78rem, 0.8vw, 0.88rem);
}

.btn-sm {
	padding: 0.62rem 1.6rem;
	font-size: clamp(0.72rem, 0.72vw, 0.8rem);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
	background-color: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--c-brand-dark);
	border-color: var(--c-brand-dark);
	color: #fff;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
	background-color: transparent;
	border-color: var(--c-brand);
	color: var(--c-brand);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

/* Varianti su fondo scuro / immagine */
.btn-on-dark {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.btn-on-dark:hover,
.btn-on-dark:focus {
	background-color: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

/* I bottoni-icona quadrati mantengono le loro dimensioni (override.css) ma
   perdono maiuscolo e letter-spacing, che su un "+" non hanno senso. */
[class*="btn-sq"] {
	letter-spacing: normal;
	text-transform: none;
	padding: 0;
}

/* =============================================================================
   ALLINEAMENTI
   -----------------------------------------------------------------------------
   Il testo giustificato conviveva con testo a bandiera nella stessa pagina ed è
   la causa dei paragrafi "sformattati": su colonne strette produce buchi fra le
   parole. Tutto a bandiera a sinistra.
   ========================================================================== */

.text-justify { text-align: left !important; }

/* =============================================================================
   RICH TEXT DAL BACKEND
   -----------------------------------------------------------------------------
   I campi content / content_intro arrivano da editor WYSIWYG: normalizzo qui
   quello che l'editor produce, invece di correggerlo contenuto per contenuto.
   ========================================================================== */

.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }

.rich-text ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 1.15rem;
}

.rich-text ul > li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
}

.rich-text ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--c-accent);
}

.rich-text a { text-decoration: underline; }

/* Neutralizza colori e dimensioni incollati dall'editor: le descrizioni non
   devono poter tornare nere o cambiare font da un blocco all'altro. */
.rich-text [style*="color"] { color: var(--c-body) !important; }
.rich-text font[color] { color: var(--c-body) !important; }
.rich-text [style*="font-family"] { font-family: var(--ff-body) !important; }

/* =============================================================================
   NAVIGAZIONE E FOOTER
   -----------------------------------------------------------------------------
   Le etichette in config/lang-*.yaml sono in stile frase: il maiuscolo di menu e
   footer lo mette il CSS. Così basta una regola per cambiarlo su tutto il sito,
   invece di riscrivere trenta stringhe.
   ========================================================================== */

.f-body a,
.mm-small,
.mm-tiny {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.f-body a { font-family: var(--ff-body); }

.footer,
.footer a { color: var(--c-body); }

.footer a:hover { color: var(--c-brand); }

/* =============================================================================
   BLOCCO CONTATTI
   -----------------------------------------------------------------------------
   Usato in tre punti (sezione in home, pagina /contatti, footer) da un solo
   partial: partials/contatti.htm.
   ========================================================================== */

.contatti-blocco {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--gap-md);
}

.contatti-blocco-compact {
	grid-template-columns: 1fr;
	gap: var(--gap-sm);
	text-align: inherit;
}

.contatti-voce { display: block; }

.contatti-etichetta {
	display: block;
	font-size: clamp(0.72rem, 0.72vw, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 0.35rem;
}

.contatti-valore {
	display: block;
	font-size: clamp(1.05rem, 1.0vw, 1.2rem);
	line-height: 1.5;
	color: var(--c-body);
}

a.contatti-valore:hover { color: var(--c-brand); }

.contatti-link {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: clamp(0.78rem, 0.8vw, 0.88rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--c-brand);
	text-decoration: underline;
}

.contatti-link:hover { color: var(--c-brand-dark); }

.contatti-mappa {
	margin-top: var(--gap-lg);
	border: 1px solid var(--c-hairline);
}

.contatti-mappa iframe {
	display: block;
	width: 100%;
	height: clamp(280px, 40vh, 460px);
	border: 0;
}

/* Nel footer il blocco eredita l'allineamento della colonna */
.footer .contatti-etichetta { color: var(--c-muted); }
.footer .ft-legale { line-height: 1.7; }

/* Riga legale del footer: piu' piccola dei recapiti, non compete con loro */
.footer .ft-legale {
	margin-top: var(--gap-md);
	font-size: clamp(0.82rem, 0.85vw, 0.92rem);
	line-height: 1.7;
	color: var(--c-muted);
}

/* =============================================================================
   TITOLO SULLA COPERTINA "CARTOLINA"
   -----------------------------------------------------------------------------
   .cp-titolo sta dentro .mask-obj, che nello stato chiuso e' ritagliata con
   clip-path: inset(...) (hero-cartolina.css). Senza compensare quell'inset il
   titolo finisce fuori dalla cornice e viene tagliato — sul sito si leggeva
   "CAMER..." invece di "Camere". Gli offset seguono l'apertura della cornice.
   ========================================================================== */

.cover-pagina.hero-cartolina .cp-titolo {
	right: calc(var(--hc-side) + 40px);
	bottom: calc(var(--hc-bottom) + 40px);
	max-width: calc(100% - 2 * var(--hc-side) - 80px);
	transition: right .9s cubic-bezier(.65, 0, .35, 1), bottom .9s cubic-bezier(.65, 0, .35, 1);
}

body.hero-expanded .cover-pagina.hero-cartolina .cp-titolo {
	right: 70px;
	bottom: 150px;
	max-width: calc(100% - 140px);
}

.cover-pagina .cp-titolo > div {
	overflow-wrap: break-word;
	text-wrap: balance;
}

@media all and (max-width: 812px) {
	.cover-pagina.hero-cartolina .cp-titolo {
		left: calc(var(--hc-side) + 20px);
		right: calc(var(--hc-side) + 20px);
		bottom: calc(var(--hc-bottom) + 24px);
		max-width: none;
	}

	body.hero-expanded .cover-pagina.hero-cartolina .cp-titolo {
		left: 20px;
		right: 20px;
		bottom: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cover-pagina.hero-cartolina .cp-titolo { transition: none; }
}

/* Voci di navigazione del footer: una sola misura e un solo peso. Prima "HOME"
   era piu' piccola delle sorelle e il gruppo prenotazioni in font-weight 800. */
.f-body .ft-link {
	display: inline-block;
	font-family: var(--ff-body);
	font-size: clamp(0.9rem, 0.95vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.9;
}

/* -----------------------------------------------------------------------------
   Sotto-titoli scritti dall'editor come <p><strong><em>Testo</em></strong></p>
   invece che come intestazioni: e' il caso della pagina Servizi ("Servizi
   extra:", "Servizio in camera", "Noleggio auto o scooter"...). Restavano
   indistinguibili dal corpo del testo — uno dei punti "periodi sformattati".
   Qui prendono l'aspetto di un sotto-titolo senza dover riscrivere i contenuti;
   quando in backend verranno convertiti in <h3>/<h4> il risultato non cambia.
   -------------------------------------------------------------------------- */
.rich-text p > strong:only-child,
.rich-text p > strong:only-child > em:only-child,
.rich-text p > em:only-child > strong:only-child {
	font-family: var(--ff-title);
	font-style: normal;
	font-weight: 500;
	color: var(--c-title);
}

.rich-text p:has(> strong:only-child) {
	font-size: clamp(1.5rem, 1.6vw, 1.9rem);
	line-height: 1.25;
	margin-top: var(--gap-lg);
	margin-bottom: 0.6rem;
}

.rich-text p:has(> strong:only-child):first-child { margin-top: 0; }

/* Titoli dentro il rich text: stessa scala del resto del sito, con respiro. */
.rich-text h2,
.rich-text h3,
.rich-text h4 {
	margin-top: var(--gap-lg);
	margin-bottom: 0.6rem;
}

.rich-text > h2:first-child,
.rich-text > h3:first-child,
.rich-text > h4:first-child { margin-top: 0; }

/* -----------------------------------------------------------------------------
   Misura della riga di testo. A 1440px un blocco a piena larghezza produce righe
   di ~1150px: illeggibili. 74 caratteri e' la misura tipografica di riferimento.
   Va su un elemento interno a .sezione-inner, che porta il padding percentuale.
   -------------------------------------------------------------------------- */
.misura-testo { max-width: 74ch; }

.text-center .misura-testo,
.sezione-inner.text-center .misura-testo {
	margin-left: auto;
	margin-right: auto;
}

/* Le tre fasce del footer usano .row dentro .w-75 senza contenitore con padding:
   i margini negativi di Bootstrap (-15px) sfondano il contenitore e allargavano
   la pagina di 53px a 375px. Prima non si notava perche' il footer finiva dentro
   il .main del layout, che era clippato per via di un </main> fuori posto. */
.footer { overflow-x: clip; }

/* -----------------------------------------------------------------------------
   Titoli delle sezioni della home. Il layout li colloca in colonne strette a
   fianco delle immagini, dove funzionano come titoli display: restano piu' grandi
   della scala h2, ma con UNA sola misura per tutti. Prima ne convivevano cinque
   (font-size-huge, xxxlarge, xlarge, con pesi da 200 a 600).
   -------------------------------------------------------------------------- */
.titolo-sezione {
	font-size: clamp(2.4rem, 4.0vw, 4.3rem);
	font-weight: 300;
	line-height: 1.08;
}