/*
 * Stili del sito.
 *
 * Indice
 *  1. Reset
 *  2. Base
 *  3. Header
 *  4. Menu a tutto schermo e barra mobile
 *  5. Pulsanti
 *  6. Titoli e testi
 *  7. Sezioni e contenitori
 *  8. Card
 *  9. Camere
 * 10. Mosaico di immagini
 * 11. Gallery
 * 12. FAQ
 * 13. Blog e pagine di testo
 * 14. Footer
 * 15. Slider di Elementor
 *
 * I valori (colori, misure, font) arrivano da tokens.css.
 * Il CSS dei widget Floriani sta nel plugin dei widget, uno per widget.
 * Breakpoint: mobile fino a 767px, tablet fino a 1024px, come in Elementor.
 */

/* ==========================================================================
   1. Reset
   ========================================================================== */

@view-transition {
	navigation: auto;
}

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 2rem);
	scrollbar-gutter: stable;
	font-size: var(--base-font-size);
}

html,
body {
	overflow-x: hidden;
}

a,
button {
	cursor: revert;
}

ol,
ul,
menu,
summary {
	list-style: none;
}

img {
	max-inline-size: 100%;
	max-block-size: 100%;
}

table {
	border-collapse: collapse;
}

input,
textarea {
	-webkit-user-select: auto;
}

textarea {
	white-space: revert;
}

:where(pre, dialog:modal) {
	all: revert;
	box-sizing: border-box;
}

::placeholder {
	color: unset;
}

:where([hidden]) {
	display: none;
}

::-webkit-details-marker {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition: none !important;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* Schermi molto grandi: tutto il sito cresce in proporzione. */
@media (min-width: 1800px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 2400px) {
	html {
		font-size: 20px;
	}
}

body {
	font-family: var(--base-font-family);
	color: var(--text-color);
	accent-color: var(--primary);
}

a {
	color: var(--primary);
}

a[href^='tel'],
a[href^='mailto'] {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0;
	font-family: var(--header-font-family);
	font-weight: 600;
	line-height: 1.2;
	color: inherit;
}

/*
 * I paragrafi non creano un box proprio: spaziatura e misura le decide il
 * contenitore (.main-text, .post-content…). Evita margini doppi in Elementor.
 */
p {
	display: contents;
	font-size: var(--text-lg);
}

[id] {
	scroll-margin-top: 2.5rem;
}

.elementor-heading-title {
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Su iPhone i campi sotto i 16px fanno zoomare la pagina. */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	select,
	textarea,
	input {
		font-size: 16px;
	}
}

/* ==========================================================================
   3. Header
   --------------------------------------------------------------------------
   Contenitore con classe .header e sticky di Elementor attivo.
   Due stati, gestiti con le variabili --header-fg e --header-bg:
   - trasparente con testo chiaro, sopra lo slider a tutto schermo;
   - pieno (sfondo chiaro, ombra) dopo lo scroll e nelle pagine senza slider.
   Le classi di stato su <body> (past-top, menu-open) le mette scripts.js.
   ========================================================================== */

.header {
	--header-fg: var(--on-dark);
	--header-bg: transparent;
	color: var(--header-fg);
	background-color: var(--header-bg);
	transition:
		box-shadow 0.5s ease,
		background-color 0.5s ease;
}

body:not(:has(.few-fs-slider)):not(.menu-open) .header.elementor-sticky--active,
body.past-top:not(.menu-open) .header.elementor-sticky--active {
	--header-fg: var(--accent);
	--header-bg: #fff;
	box-shadow: 0 3px 6px rgb(0 0 0 / 0.16);
}

/* Logo: widget "Logo del sito" dentro un contenitore .header_logo. */
.header_logo {
	cursor: pointer;
}

.header_logo img,
.header_logo svg {
	display: block;
	width: auto;
	height: clamp(48px, 5vw, 80px);
	margin-inline: auto;
	transition: opacity 0.5s;
}

/* Header trasparente: il logo diventa bianco. Togli la regola se il logo ha già una versione chiara. */
.header:not(.elementor-sticky--active) .header_logo img,
body.menu-open .header_logo img,
body:has(.few-fs-slider):not(.past-top) .header .header_logo img {
	filter: brightness(0) invert(1);
}

/* Home: il logo grande è nello slider, quello dell'header compare dopo lo scroll. */
.home:not(.past-top):not(.menu-open) .header .header_logo {
	opacity: 0;
}

.home .few-fs-slider__overlay .header_logo img {
	height: min(40vw, 300px);
}

/* Pulsante hamburger: widget HTML con l'SVG .hamburger-icon dentro .menu-toggle. */
.menu-toggle {
	display: contents;
	color: var(--header-fg);
	cursor: pointer;
}

.hamburger-icon {
	display: block;
	width: 48px;
	height: 48px;
	fill: none;
	stroke: currentColor;
}

.hamburger-icon__line {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.25s ease;
}

body.menu-open .hamburger-icon__line--top {
	transform: translateY(8px) rotate(45deg);
}

body.menu-open .hamburger-icon__line--middle {
	opacity: 0;
}

body.menu-open .hamburger-icon__line--bottom {
	transform: translateY(-8px) rotate(-45deg);
}

/* Selettore con il contenitore davanti: batte lo stile dei <button> di Hello Elementor. */
.menu-toggle .menu-toggle__button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--header-fg, currentColor);
	line-height: 0;
	cursor: pointer;
}

.menu-toggle__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 50%;
}

/* Link WhatsApp / telefono nell'header: pulsante Elementor con classe .wa-link. */
.elementor .wa-link .elementor-button {
	padding-inline: 1rem;
	background: transparent;
	color: var(--header-fg, currentColor);
	font-family: var(--base-font-family);
	white-space: nowrap;
}

.elementor .wa-link .elementor-button,
.elementor .wa-link .elementor-button .elementor-button-text {
	font-size: 1rem;
	text-transform: none;
}

.elementor .wa-link .elementor-button:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, currentColor 15%, transparent);
	color: var(--header-fg, currentColor);
}

/* Header pieno: pulsante secondario e selettore lingua prendono il colore del testo. */
.header.elementor-sticky--active .few-language-switcher {
	--few-ls-menu-bg: #fff;
	--few-ls-menu-color: var(--primary);
}

@media (max-width: 1024px) {
	.header {
		--header-height: 85px;
	}
}

@media (max-width: 767px) {
	.header_logo img,
	.header_logo svg {
		height: 44px;
	}

	.elementor .wa-link .elementor-button,
	.elementor .wa-link .elementor-button .elementor-button-text {
		font-size: 0.8rem;
	}
}

/* ==========================================================================
   4. Menu a tutto schermo e barra mobile
   --------------------------------------------------------------------------
   #fs-menu          contenitore del menu, nascosto finché body non ha .menu-open
   #main-menu        pannello con sfondo scuro
   #menu-footer      barra con i pulsanti, in fondo al menu aperto
   #menu-footer-bottom-mobile   barra fissa in basso su mobile, a menu chiuso
   ========================================================================== */

html:has(body.menu-open),
body.menu-open {
	overflow: hidden;
}

#fs-menu {
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}

.menu-open #fs-menu {
	opacity: 1;
	z-index: 80;
	pointer-events: auto;
}

#main-menu {
	background-color: var(--surface-dark);
	color: var(--on-dark);
}

/*
 * Il menu sta sopra i dati di contatto: le sotto-voci si aprono a destra
 * della voce e si sovrappongono a quella colonna. La colonna dei contatti
 * lascia passare i clic, tranne che sui suoi link.
 */
#fs-menu .menu {
	z-index: 92;
}

#fs-menu .menu_info {
	z-index: 91;
	pointer-events: none;
}

#fs-menu .menu_info :is(a, button) {
	pointer-events: auto;
}

#fs-menu .menu_info,
#fs-menu .menu_info :is(p, a) {
	color: var(--on-dark);
	font-size: var(--text-base);
	text-align: right;
}

body.menu-open .few-fs-slider__scroll-arrow {
	display: none;
}

#menu-footer,
#menu-footer-bottom-mobile {
	color: var(--on-dark);
}

/* Le due barre dei pulsanti servono solo sotto i 1024px: su desktop i pulsanti sono nell'header. */
#menu-footer,
#menu-footer-bottom-mobile {
	display: none;
}

#menu-footer-bottom-mobile {
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

@media (max-width: 1024px) {
	#menu-footer,
	#menu-footer-bottom-mobile {
		display: flex;
		position: fixed;
		inset: auto 0 0;
		min-height: 4rem;
		padding-bottom: calc(var(--safe-area-bottom) + 0.5rem);
		background: var(--primary-dark);
	}

	.menu-open .menu_info {
		position: fixed;
		right: var(--container-padding-inline);
		bottom: 135px;
	}

	.menu-open .header .menu {
		margin-bottom: 300px;
	}
}

/* Schermi bassi: i dati di contatto nel menu non ci stanno. */
@media (max-width: 1024px) and (max-height: 1200px) {
	.menu-open .header .menu {
		margin-bottom: 6.5rem;
	}

	.menu-open .menu_info {
		display: none;
	}
}

/* La barra mobile compare dopo il primo scroll e si nasconde in fondo alla pagina. */
@media (orientation: portrait) {
	body.past-top:not(.near-bottom) #menu-footer-bottom-mobile {
		transform: translateY(0);
	}
}

/* ==========================================================================
   5. Pulsanti
   --------------------------------------------------------------------------
   Elementor colora ogni pulsante con il colore globale "accent" e lo scrive
   nel CSS di ogni pagina. Qui il pulsante predefinito diventa del colore
   principale; il prefisso .elementor serve a vincere su quella regola.
   Un colore scelto sul singolo widget continua ad avere la precedenza.
   Varianti con classe sul widget: .btn-secondary, .btn-outline, .btn-sm, .btn-xl.
   ========================================================================== */

.elementor .elementor-button {
	padding: 0.75rem 2.5rem;
	border-radius: var(--radius-lg);
	background-color: var(--primary);
	color: #fff;
	font-family: var(--button-font-family);
	cursor: pointer;
}

.elementor .elementor-button,
.elementor .elementor-button .elementor-button-text {
	font-size: var(--text-sm);
	text-transform: uppercase;
	text-decoration: none;
}

.elementor .elementor-button:is(:hover, :focus-visible) {
	background-color: var(--primary-dark);
	color: #fff;
}

.elementor .btn-secondary .elementor-button {
	background-color: var(--secondary);
}

.elementor .btn-secondary .elementor-button:is(:hover, :focus-visible) {
	background-color: var(--secondary-dark);
}

.elementor .btn-outline .elementor-button {
	border: 2px solid currentColor;
	background-color: transparent;
	color: var(--primary);
}

.elementor .btn-outline .elementor-button:is(:hover, :focus-visible) {
	border-color: var(--primary);
	background-color: var(--primary);
	color: #fff;
}

/* Su sfondo scuro o sopra lo slider il pulsante a contorno prende il colore del testo. */
.bg-dark .btn-outline .elementor-button,
#fs-menu .btn-outline .elementor-button,
.header:not(.elementor-sticky--active) .btn-outline .elementor-button,
body:has(.few-fs-slider):not(.past-top) .header .btn-outline .elementor-button {
	color: var(--on-dark);
}

.elementor .btn-sm .elementor-button {
	padding: 0.6rem 1.5rem;
}

.elementor .btn-xl .elementor-button {
	padding: 1.25em calc(1.5em + 6.5vw);
}

.elementor .btn-xl .elementor-button,
.elementor .btn-xl .elementor-button .elementor-button-text {
	font-size: var(--text-lg);
	font-weight: 700;
}

@media (max-width: 1024px) {
	.elementor .elementor-button {
		padding: 0.75em 2em;
	}
}

/* ==========================================================================
   6. Titoli e testi
   --------------------------------------------------------------------------
   Classi da mettere sul widget Titolo o Editor di testo.
   ========================================================================== */

.title .elementor-heading-title,
.title-big .elementor-heading-title,
.title-bigger .elementor-heading-title {
	color: var(--primary);
	font-weight: 500;
}

.title .elementor-heading-title {
	margin-bottom: 0.5em;
	font-size: var(--title-base);
}

.title-big .elementor-heading-title {
	margin-bottom: 0.25em;
	font-size: var(--title-big);
}

.title-bigger .elementor-heading-title {
	margin-bottom: 0.25em;
	font-size: var(--title-bigger);
}

/* Titolo decorativo di sezione, molto grande. */
.title-display .elementor-heading-title {
	font-size: var(--text-7xl);
	font-weight: 500;
	line-height: 1;
}

/* Occhiello: riga breve in maiuscolo sopra o sotto un titolo. */
.eyebrow,
.eyebrow p {
	font-size: var(--text-base);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Corpo del testo: paragrafi come blocchi, con respiro. */
.main-text,
.main-text p {
	display: block;
	color: var(--text-color);
	font-size: var(--text-lg);
	line-height: 2;
	text-wrap: pretty;
}

.main-text {
	margin-bottom: 1.5rem;
}

.main-text p:not(:last-child) {
	margin-bottom: 1em;
}

.text-med,
.text-med * {
	font-size: var(--text-lg);
	text-wrap: balance;
}

.text-big,
.text-big * {
	font-size: var(--text-2xl);
}

/* Larghezza di lettura. */
.text-mw {
	width: min(100%, 95ch);
}

/* ==========================================================================
   7. Sezioni e contenitori
   ========================================================================== */

.section-default-padding {
	padding-block: var(--section-padding-block);
}

/* Colonna centrale di testo: titolo, occhiello e paragrafi centrati. */
.main-content {
	padding-block: var(--section-padding-block);
	padding-inline: var(--container-padding-inline);
}

.main-content .main-text {
	width: min(100%, 56.25rem);
	margin-inline: auto;
	text-align: center;
}

/* Sezione su sfondo scuro: il testo passa al colore chiaro. */
.bg-dark {
	--text-color: var(--on-dark);
	background-color: var(--surface-dark);
	color: var(--on-dark);
}

/* I titoli colorati non si leggono sullo scuro: prendono il colore chiaro della sezione. */
.elementor .bg-dark .elementor-heading-title,
.elementor #main-menu .elementor-heading-title {
	color: var(--on-dark);
}

/* Oltre il breakpoint widescreen il contenitore non cresce più. */
@media (min-width: 2000px) {
	.e-con {
		--container-max-width: var(--container-width);
	}
}

/* Contenuto sopra lo slider a tutto schermo (template "hero"). */
.hero-content {
	padding-top: 50vh;
}

@media (max-width: 1024px) {
	body:not(.home) .hero-content {
		padding-top: max(40vh, 280px);
	}

	body:not(.home) .few-fs-slider {
		height: max(65vh, 460px);
	}
}

/* ==========================================================================
   8. Card
   --------------------------------------------------------------------------
   Contenitore .card con dentro .card__head (.card__icon + .card__title),
   .card__text e un pulsante. Due o più card in un contenitore .card-grid.
   ========================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2rem);
	width: 100%;
}

.elementor-element.card {
	--padding-block-start: clamp(24px, 3vw, 44px);
	--padding-block-end: clamp(24px, 3vw, 44px);
	--padding-inline-start: clamp(24px, 3vw, 44px);
	--padding-inline-end: clamp(24px, 3vw, 44px);
	--row-gap: clamp(1.5rem, 2.5vw, 2rem);
	--border-radius: clamp(16px, 1.6vw, 24px);
	background-color: var(--gray-light);
}

.card .card__head {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--column-gap: clamp(15px, 1.5vw, 20px);
	align-items: center;
}

.card .card__icon {
	flex: 0 0 auto;
	width: clamp(56px, 6vw, 84px);
}

.card .card__title .elementor-heading-title {
	color: var(--primary);
}

.card .elementor-widget-button {
	margin-top: auto;
}

@media (max-width: 767px) {
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   9. Camere
   ========================================================================== */

/* Slider delle foto nella pagina della camera. */
.single-camere .elementor-widget-few-rooms-slider .swiper-slide img {
	max-height: 80vh;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Elenco delle camere figlie: una sotto l'altra, slider a lati alterni. */
.child-rooms-loop .elementor-loop-container {
	grid-template-columns: minmax(0, 1fr);
	row-gap: clamp(40px, 6vw, 96px);
}

@media (min-width: 768px) {
	.child-rooms-loop .e-loop-item:nth-of-type(even) .few-rooms-slider--bleed-right {
		margin-right: 0;
		margin-left: calc(50% - 50vw);
	}
}

/*
 * Card "foto con etichetta": contenitore con immagine di sfondo, titolo in
 * basso su sfumatura scura, zoom al passaggio del mouse. Usata nei loop.
 */
.photo-with-label {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	padding: 15px;
	background-position: center;
	background-size: cover;
}

.photo-with-label::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: inherit;
	transition: transform 0.45s ease;
}

.photo-with-label::before {
	content: '';
	position: absolute;
	inset: 50% 0 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
	pointer-events: none;
}

@media (hover: hover) {
	.photo-with-label:hover::after {
		transform: scale(1.06);
	}
}

.photo-with-label > * {
	position: relative;
	z-index: 2;
	justify-content: flex-end;
}

.elementor .photo-with-label .elementor-heading-title {
	color: #fff;
	font-size: var(--title-base);
	font-weight: 700;
}

/* ==========================================================================
   10. Mosaico di immagini
   --------------------------------------------------------------------------
   Contenitore .mosaic-grid con sei contenitori .mosaic-card.mosaic-1 … mosaic-6,
   ognuno con un'immagine e un titolo. 1 colonna > 2 colonne > 3 colonne sfalsate.
   ========================================================================== */

.e-con.mosaic-grid {
	--mosaic-gap: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mosaic-gap);
}

.mosaic-grid > .mosaic-card {
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	overflow: hidden;
}

.mosaic-grid .elementor-widget-image {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.mosaic-grid .elementor-widget-image > *,
.mosaic-grid img {
	display: block;
	width: 100%;
	height: 100%;
}

.mosaic-grid img {
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mosaic-card:is(:hover, :focus-visible) img {
	transform: scale(1.04);
}

@media (min-width: 768px) {
	.e-con.mosaic-grid {
		--mosaic-gap: 30px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(24, minmax(0, 1fr));
		row-gap: 0;
		aspect-ratio: 3 / 4;
	}

	.mosaic-grid > .mosaic-card {
		margin-block: calc(var(--mosaic-gap) / 2);
	}

	.mosaic-grid .elementor-widget-image {
		flex: 1 1 0;
		min-height: 0;
		aspect-ratio: auto;
	}

	/* grid-area: riga / colonna / righe occupate */
	.mosaic-grid .mosaic-1 { grid-area: 1 / 1 / span 9; }
	.mosaic-grid .mosaic-2 { grid-area: 1 / 2 / span 7; }
	.mosaic-grid .mosaic-3 { grid-area: 10 / 1 / span 7; }
	.mosaic-grid .mosaic-4 { grid-area: 8 / 2 / span 8; }
	.mosaic-grid .mosaic-5 { grid-area: 17 / 1 / span 8; }
	.mosaic-grid .mosaic-6 { grid-area: 16 / 2 / span 9; }
}

@media (min-width: 1025px) {
	.e-con.mosaic-grid {
		--mosaic-gap: 50px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		aspect-ratio: 3 / 2;
	}

	.mosaic-grid .mosaic-1 { grid-area: 1 / 1 / span 14; }
	.mosaic-grid .mosaic-2 { grid-area: 1 / 2 / span 11; }
	.mosaic-grid .mosaic-3 { grid-area: 1 / 3 / span 9; }
	.mosaic-grid .mosaic-4 { grid-area: 15 / 1 / span 10; }
	.mosaic-grid .mosaic-5 { grid-area: 12 / 2 / span 13; }
	.mosaic-grid .mosaic-6 { grid-area: 10 / 3 / span 15; }
}

/* ==========================================================================
   11. Gallery
   --------------------------------------------------------------------------
   Widget "Galleria base" di Elementor in un contenitore .gallery-full:
   griglia a tutta larghezza senza spazi, 3 > 2 > 1 colonne.
   ========================================================================== */

.gallery-full {
	--padding-inline-start: 0;
	--padding-inline-end: 0;
}

.gallery-full > .e-con-inner {
	max-width: 100%;
}

.gallery-full .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.gallery-full .gallery-item {
	position: relative;
	width: 100%;
	max-width: 100% !important;
}

.gallery-full .gallery-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gallery-full .gallery-item a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gallery-full .gallery-item a:is(:hover, :focus-visible)::after {
	opacity: 1;
}

@media (max-width: 1024px) {
	.gallery-full .gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.gallery-full .gallery {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   12. FAQ
   --------------------------------------------------------------------------
   Widget Accordion annidato in un contenitore .faq-static: tutte le risposte
   restano aperte (utile per la SEO e per chi stampa). Senza la classe,
   l'accordion si comporta normalmente.
   ========================================================================== */

.faq-static .e-n-accordion {
	--n-accordion-border-style: none;
	display: grid;
	row-gap: 2.5rem;
}

.faq-static details.e-n-accordion-item > .e-con {
	display: flex !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.faq-static .e-n-accordion-item-title {
	justify-content: center;
	cursor: default;
	pointer-events: none;
	text-align: center;
}

.faq-static .e-n-accordion-item-title-text {
	color: var(--primary);
	font-family: var(--header-font-family);
	font-size: var(--text-2xl);
}

.faq-static .elementor-widget-text-editor p {
	display: block;
	max-width: 800px;
	margin: 1rem auto 0;
	font-size: var(--text-14-18);
	text-align: center;
	text-wrap: balance;
}

/* ==========================================================================
   13. Blog e pagine di testo
   --------------------------------------------------------------------------
   .post-content sul widget "Contenuto dell'articolo" o su un Editor di testo:
   riattiva titoli, paragrafi ed elenchi che il reset azzera.
   Va bene anche per privacy e cookie policy.
   ========================================================================== */

.post-content {
	width: min(100%, 75ch);
	margin-inline: auto;
	font-size: var(--text-lg);
	line-height: 1.75;
}

.post-content p {
	display: block;
	margin-block: 0 1em;
	font-size: inherit;
}

.post-content :is(h2, h3, h4) {
	margin-block: 2em 0.75em;
	color: var(--primary);
}

.post-content h2 {
	font-size: var(--text-2xl);
}

.post-content h3 {
	font-size: var(--text-xl);
}

.post-content :is(ul, ol) {
	display: block;
	margin-block: 0.75em;
	padding-inline-start: 1.75em;
}

.post-content li {
	display: list-item;
	margin-block: 0.25em;
}

.post-content ul {
	list-style: disc;
}

.post-content ol {
	list-style: decimal;
}

.post-content ::marker {
	color: var(--primary);
}

.post-content a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.post-content img {
	height: auto;
	border-radius: var(--radius-sm);
}

.post-content blockquote {
	margin-block: 1.5em;
	padding-inline-start: 1.25em;
	border-inline-start: 3px solid var(--primary);
	font-style: italic;
}

/* Card articolo nei loop (archivio, articoli correlati). */
.post-card .elementor-widget-theme-post-featured-image img,
.post-card .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.post-card .elementor-post-info {
	font-size: var(--text-sm);
	opacity: 0.75;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

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

footer a:is(:hover, :focus-visible),
.footer-credits__button:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-color: var(--secondary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.footer-credits {
	text-align: center;
	text-wrap: balance;
}

.footer-credits__row {
	display: block;
}

.footer-credits__row--top {
	font-size: var(--text-xl);
}

.footer-credits__row--bottom,
.footer-credits__row--codes {
	font-size: var(--text-xs);
}

.footer-credits__button {
	cursor: pointer;
}

.site-social-icons {
	display: flex;
	gap: 1rem;
}

.site-social-icons__icon {
	width: 1.75rem;
	height: 1.75rem;
	fill: currentColor;
}

.site-social-icons__link:is(:hover, :focus-visible) {
	color: var(--primary);
}

/* ==========================================================================
   15. Slider di Elementor
   ========================================================================== */

.elementor-image-carousel .swiper-slide-image {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.elementor-swiper-button {
		zoom: 0.65;
	}
}