/*
Theme Name: AGAPAIS
Theme URI: https://www.agapais.com
Author: AGAPAIS Team
Author URI: https://www.agapais.com
Description: Fiorire nella Presenza
Version: 1.0.47
Text Domain: agapais
*/

/* ------------------------------------------------------------------------- *
 * 1. IMPORTAZIONE FONT (Google Fonts)
 * ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

/* ------------------------------------------------------------------------- *
 * 2. VARIABILI GLOBALI (La Palette Tecnica)
 * ------------------------------------------------------------------------- */
:root {
	/* Palette Cromatica */
	--color-silk:   #F9F8F5;   /* Sfondo Principale (Bianco Seta) */
	--color-petrol: #1A2B3C;   /* Testo Corpo & Titoli Scuri */
	--color-gold:   #C5A059;   /* Dettagli di Luce (Accenti) */
	--color-white:  #FFFFFF;
	--color-smoke:  #666666;   /* Grigio Fumo per anteprime e pulsanti */
	--color-soft-black: #2C2C2C; /* Nero Morbido per titoli sottocategorie */
	
	/* Effetti Glass (Frosted/Satinato) */
	--glass-bg:        rgba(255, 255, 255, 0.9);
	--glass-bg-scroll: rgba(249, 248, 245, 0.90); /* 90% Seta per effetto "Vedo non vedo" */
	--glass-blur:      blur(12px) saturate(110%);  /* Blur aumentato + Saturazione per vividezza */

	/* Tipografia */
	--font-sans:    'Montserrat', sans-serif;       /* Metadati tecnici */
	--font-serif:   'Cormorant Garamond', serif;    /* Titoli, Menu, Corpo */

	/* Spaziature e Layout */
	--spacing-unit: 1rem;
	--container-width: 1200px;
}

/* ------------------------------------------------------------------------- *
 * 3. RESET & BASE
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--color-silk);
	color: var(--color-petrol);
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	/* --- GESTIONE TRANSIZIONE PAGINA (FADE) --- */
	opacity: 1;
	transition: opacity 0.5s ease-in-out; 
}

/* Classe per il Fade-Out */
body.fade-out {
	opacity: 0;
}

/* Link Stili */
a {
	color: var(--color-petrol);
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover,
a:focus,
a:active {
	color: var(--color-gold);
}

/* Immagini */
img {
	height: auto;
	max-width: 100%;
	display: block;
}

/* ------------------------------------------------------------------------- *
 * 4. TIPOGRAFIA
 * ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.2;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }

p {
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------------- *
 * 5. STRUTTURA LAYOUT
 * ------------------------------------------------------------------------- */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--spacing-unit);
}

/* ------------------------------------------------------------------------- *
 * 6. HEADER & NAVIGAZIONE (STICKY FROSTED GLASS)
 * ------------------------------------------------------------------------- */

.site-header {
	/* MODIFICA ARCHITETTURALE: Sganciato dal flusso del DOM */
	position: fixed;
	top: 0;
	
	/* FIX WIDTH: Assicuriamo larghezza piena senza gap laterali */
	width: 100%;
	max-width: 100%;
	left: 0;
	right: 0;
	
	z-index: 99999;
	transform: translateZ(0); /* Anti-farfallio */
	
	/* Layout a colonna: Logo sopra, Menu sotto */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	/* STATO INIZIALE: Totalmente trasparente per la Hero */
	background-color: transparent; 
	backdrop-filter: none;
	border-bottom: 1px solid transparent; /* Predisposizione per la transizione */
	
	/* Padding Generoso Iniziale (Ariosità) */
	padding-top: 60px; 
	padding-bottom: 25px;
	
	/* Transizioni fluide (0.4s) su tutto */
	transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out, transform 0.4s ease-in-out, backdrop-filter 0.4s ease, border-bottom 0.4s ease;
	
	box-shadow: none; 
}

/* COMPENSAZIONE SPAZIO HEADER FIXED (Solo Desktop) */
/* 60px padding-top + 60px logo + 25px padding-bottom = 145px esatti */
@media (min-width: 769px) {
	body {
		padding-top: 145px;
	}
}

/* --- LOGO E IDENTITÀ --- */
.site-branding {
	margin-bottom: 15px;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	
	/* FIX VIBRAZIONE: Altezza contenitore fissa */
	height: 60px; 
	align-items: center;
	transition: height 0.4s ease;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	height: auto;
	max-height: 60px; 
	width: auto;
	transition: max-height 0.4s ease-in-out;
}

.site-title {
	font-family: var(--font-serif);
	font-size: 2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
	color: var(--color-petrol);
}

.site-description { display: none; }

/* --- MENU PRINCIPALE --- */
.main-navigation {
	width: 100%;
	text-align: center;
	margin: 0;
	
	/* FLEXBOX PER ALLINEARE MENU E CERCA */
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* DISTANZA TRA LE VOCI (Aumentata) */
	gap: 50px; 
}

.main-navigation li {
	position: relative; 
}

/* Stile Voci Menu */
.main-navigation a {
	font-family: var(--font-serif); 
	font-size: 14px; 
	font-weight: 500 !important; /* Peso base forzato */
	font-variant: small-caps; 
	letter-spacing: 0.1em;
	color: var(--color-petrol);
	text-decoration: none;
	padding: 5px 0;
	transition: color 0.3s ease, opacity 0.3s ease;
	opacity: 0.9;
	display: block;
	margin: 0;
}

/* FIX HOME BOLD: Forziamo il peso 500 anche per la pagina attiva */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	font-weight: 500 !important; /* Sovrascrive il grassetto di WordPress */
	color: var(--color-petrol);
	opacity: 1;
}

.main-navigation a:hover {
	color: var(--color-gold);
	opacity: 1;
}

/* --- STATO "SCROLLED" (Effetto Shrink + Frosted Glass) --- */
.site-header.header-scrolled {
	/* Vetro Satinato: Sfondo 90% + Blur 12px + Saturazione */
	background-color: var(--glass-bg-scroll);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	
	/* Shrink: Riduciamo il padding */
	padding-top: 20px;
	padding-bottom: 20px;
	
	/* Micro-Dettaglio di Stacco: Linea Oro sottilissima (15% Opacity) */
	border-bottom: 1px solid rgba(197, 160, 89, 0.15);
	box-shadow: none; /* Rimosso in favore del bordo più netto ed elegante */
}

/* Riduciamo l'altezza del contenitore e del logo */
.site-header.header-scrolled .site-branding {
	height: 45px;
}

.site-header.header-scrolled .custom-logo {
	max-height: 45px;
}

/* Quando l'header si nasconde (scroll down veloce) */
.site-header.header-hidden {
	transform: translateY(-100%);
}

/* ------------------------------------------------------------------------- *
 * 8. CLASSI DI UTILITÀ WORDPRESS
 * ------------------------------------------------------------------------- */
.alignwide {
	margin-left: -100px;
	margin-right: -100px;
	max-width: calc(100% + 200px);
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------------- *
 * 9. HOME PAGE: HERO SECTION 
 * ------------------------------------------------------------------------- */

/* Immagine Hero */
.hero-visual {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* 70vh va bene, l'header non è sovrapposto */
	height: 70vh; 
	overflow: hidden;
	position: relative;
}

.hero-img-element {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Blocco Testo Hero */
.hero-text-block {
	text-align: center;
	margin-top: 60px; 
	
	/* MODIFICA CTA 1: Riduciamo drasticamente il margine sotto */
	margin-bottom: 40px; /* Era 120px -> Ora la CTA è vicina alle porte */
	
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Messaggio Principale */
.hero-message {
	font-family: var(--font-serif);
	font-size: 30px;
	color: var(--color-petrol);
	font-weight: 400;
	text-transform: none; 
	line-height: 1.3;
	letter-spacing: 0.15em;
	
	/* MODIFICA CTA 2: Aumentiamo spazio tra testo e bottone */
	margin-bottom: 60px; /* Era 24px -> Spinge il bottone in basso */
}

.hero-message::first-letter {
	text-transform: uppercase;
}

/* CTA */
.hero-cta {
	font-family: var(--font-serif);
	font-size: 20px;
	font-style: italic;
	color: var(--color-gold);
	display: inline-block;
	position: relative;
	text-decoration: none;
	letter-spacing: 0.2em;
}

.hero-cta:hover {
	opacity: 0.8;
}

/* ------------------------------------------------------------------------- *
 * 10. NAVIGATION TILES (LE 3 PORTE) 
 * ------------------------------------------------------------------------- */
.navigation-tiles {
	margin-bottom: 120px;
}

.tiles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px; 
}

@media (min-width: 768px) {
	.tiles-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tile-item {
	text-align: center;
	transition: transform 0.5s ease;
}

.tile-item:hover {
	transform: translateY(-8px);
}

.tile-image-wrapper {
	position: relative;
	
	/* MODIFICA: Riduzione dimensione porte del 10% per creare spazio */
	width: 90%; 
	margin: 0 auto 20px auto; /* Centrata orizzontalmente */
	
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.tile-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.tile-item:hover .tile-image-wrapper img {
	transform: scale(1.05);
}

.tile-title {
	font-family: var(--font-serif);
	font-size: 16px; 
	font-weight: 700;
	color: var(--color-gold);
	text-transform: uppercase;
	margin-bottom: 5px;
	letter-spacing: 0.1em;
}

.tile-subtitle {
	font-family: var(--font-serif);
	font-size: 17px;
	font-style: italic;
	color: var(--color-petrol);
}

/* ------------------------------------------------------------------------- *
 * 11. SEPARATORE TRANSIZIONE 
 * ------------------------------------------------------------------------- */
.section-separator {
	text-align: center;
	margin-bottom: 60px;
}

.separator-title {
	font-family: var(--font-serif);
	font-size: 20px;
	font-style: italic;
	color: var(--color-gold);
	
	/* MODIFICA MAIUSCOLO: Esplorazioni Recenti */
	text-transform: uppercase;
	letter-spacing: 0.2em; /* Aumentato il respiro per eleganza */
	font-weight: 400;
}

/* ------------------------------------------------------------------------- *
 * 12. GRIGLIA CONTENUTI & SLIDER 
 * ------------------------------------------------------------------------- */
.posts-layout-wrapper {
	padding-bottom: 120px;
}

/* --- HOME PAGE: GRIGLIA MISTA (CSS Grid) --- */
.mixed-grid-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px; /* Spazio verticale generoso */
	
	/* MODIFICA: Restringimento del 20% (960px) e centratura */
	max-width: 850px; 
	margin: 0 auto 60px auto;
}

@media (min-width: 768px) {
	.mixed-grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px; /* Gap orizzontale */
		row-gap: 60px; /* Gap verticale per separare le righe */
	}
}

/* Classi Articoli (Generate da PHP in front-page) */

/* 1. I primi 4 Post della Homepage (Griglia) */
/* Reset base per Mobile e Desktop */
.mixed-grid-wrapper .post-item-standard {
	width: 100%;
	max-width: 350px; /* Larghezza ridotta */
	position: relative;
	/* Mobile: centrato */
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	/* Desktop: Override allineamento usando Grid properties */
	
	/* Post Dispari (1, 3) -> Colonna Sinistra -> Allineati a Sinistra (Start) */
	.mixed-grid-wrapper .post-item-standard:nth-child(odd) {
		margin-left: 0;
		margin-right: auto;
		justify-self: start; /* Grid property per sicurezza */
	}

	/* Post Pari (2, 4) -> Colonna Destra -> Allineati a Destra (End) */
	.mixed-grid-wrapper .post-item-standard:nth-child(even) {
		margin-left: auto;
		margin-right: 0;
		justify-self: end; /* Grid property per sicurezza */
	}
}

/* 2. Il 5° elemento occupa tutta la riga (Panorama) */
.post-item-panorama {
	width: 100%;
	position: relative;
	grid-column: 1 / -1;
	text-align: center;
}

/* --- GESTIONE IMMAGINI UNIFORMI (CROP) --- */

/* Wrapper Immagine: Definisce le proporzioni */
.post-thumbnail-wrapper,
.post-grid-item .post-thumbnail { /* Compatibilità con Archivi */
	display: block;
	width: 100%;
	overflow: hidden; /* Maschera per lo zoom */
	border-radius: 2px;
	margin-bottom: 20px;
	background-color: #f0f0f0;
	position: relative;
}

/* 1. Proporzione Home Page (Standard) */
.post-item-standard .post-thumbnail-wrapper {
	aspect-ratio: 1.618 / 1; 
}

/* 2. Proporzione Panoramica (Post 5 Home) */
.post-item-panorama .post-thumbnail-wrapper {
	aspect-ratio: 2.4 / 1; /* Es. 1200x500 */
}

/* Immagine Reale: Si adatta coprendo lo spazio (Focal Point: Center) */
.post-thumbnail-wrapper img,
.post-grid-item .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;    /* Taglio perfetto senza deformazione */
	object-position: center; /* Centro dell'immagine */
	transition: transform 0.6s ease, opacity 0.4s ease; /* Aggiunta opacity */
	display: block;
}

/* Effetto Zoom + Opacity Hover (Home Page e Generico) */
.post-item-standard:hover .post-thumbnail-wrapper img,
.post-item-panorama:hover .post-thumbnail-wrapper img,
.post-grid-item:hover .post-thumbnail img {
	transform: scale(1.05);
	opacity: 0.8; /* Richiesto: Opacità più marcata in Homepage */
}

/* --- TIPOGRAFIA & CONTENUTO --- */
.entry-title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 400;
	margin-top: 15px;
	margin-bottom: 10px;
}

.entry-meta {
	font-size: 11px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 15px;
}

.entry-content {
	text-align: justify;
}

/* Stili specifici Panorama (Testo GIUSTIFICATO ma in box centrato) */
.post-item-panorama .entry-content {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify; 
}

/* --- ARCHIVI E SEARCH (Retrocompatibilità) --- */
.post-grid-item {
	/* Stessa larghezza dei post in homepage per coerenza */
	max-width: 340px; 
	margin: 0 auto;
}

/* --- Slider Arrow --- */
.slider-arrow-container {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
	gap: 20px; /* Spazio tra le frecce */
}

.slider-arrow {
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	display: flex;
	align-items: center;
	transition: width 0.3s ease-in-out, opacity 0.3s ease, transform 0.3s ease; 
}

/* Freccia Indietro (Nascosta inizialmente) */
.prev-arrow {
	opacity: 0;
	pointer-events: none; /* Non cliccabile se invisibile */
	transform: rotate(180deg); /* Ruotata per puntare a sinistra */
}

.prev-arrow.show-arrow {
	opacity: 1;
	pointer-events: all;
}

.arrow-line {
	display: block;
	width: 60px; 
	height: 1px; 
	background-color: var(--color-gold); 
	position: relative;
	transition: width 0.3s ease;
}

.arrow-line::after {
	content: '';
	position: absolute;
	right: 0;
	top: -3px;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--color-gold);
	border-right: 1px solid var(--color-gold);
	transform: rotate(45deg);
}

.slider-arrow:hover .arrow-line {
	width: 70px;
}

/* --- Slider Container --- */
.slider-container-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 20px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	
	/* Cursore per trascinamento */
	cursor: grab;
	user-select: none; /* Evita selezione testo durante drag */

	/* MODIFICA: Allineamento alla larghezza della griglia (850px) */
	max-width: 850px;
	margin: 0 auto;
}

.slider-container-wrapper.active {
	cursor: grabbing; /* Cursore "presa" durante il click */
}

.slider-container-wrapper::-webkit-scrollbar {
	display: none;
}

.slider-track {
	display: flex;
	gap: 30px;
	align-items: flex-start; /* FIX: Evita che le mattonelle si stirino in altezza */
}


.slider-item {
	/* MODIFICA: Ridotto a 230px per mostrare 4 anteprime piene */
	flex: 0 0 230px; 
	min-width: 260px;
}

.slider-image-square {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 15px;
	background-color: #f0f0f0;
}

.slider-image-square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* Impedisce drag nativo immagine del browser */
	/* MODIFICA: Aggiunte transizioni per effetto hover */
	transition: transform 0.6s ease, opacity 0.4s ease; 
	display: block;
}

/* MODIFICA: Effetto Hover Zoom + Opacity per il Carosello */
.slider-item:hover .slider-image-square img {
	transform: scale(1.05);
	opacity: 0.8;
}

.slider-title {
	font-family: var(--font-serif);
	font-size: 18px;
	margin: 0;
	line-height: 1.3;
	/* MODIFICA: Titolo giustificato come richiesto */
	text-align: justify; 
}

.archive-link-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: var(--color-silk); 
	border: 1px solid rgba(197, 160, 89, 0.3);
}

.archive-text {
	font-family: var(--font-serif);
	font-size: 20px; 
	font-style: italic; 
	color: var(--color-gold); 
	text-align: center;
	line-height: 1.4;
}

/* ------------------------------------------------------------------------- *
 * 13. SOTTOMENU (DROPDOWN)
 * ------------------------------------------------------------------------- */
.main-navigation ul ul {
	display: block;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	
	/* Posizionamento */
	top: 100%;
	left: 0;
	min-width: 200px;
	
	/* Sfondo: Identico all'Header */
	background-color: var(--color-silk);
	
	/* Nessun bordo, nessuna ombra */
	box-shadow: none;
	border: none;
	border-radius: 0;
	
	padding: 15px 0;
	margin-top: 10px;
	
	z-index: 999;
	
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, margin-top 0.3s ease;
}

.main-navigation li:hover > ul {
	visibility: visible;
	opacity: 1;
	margin-top: 0;
}

.main-navigation ul ul li {
	display: block;
	text-align: left;
	margin: 0;
}

.main-navigation ul ul a {
	font-family: var(--font-serif);
	font-size: 13px;
	font-variant: normal;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0.05em;
	
	color: var(--color-petrol);
	display: block;
	
	padding: 10px 20px; 
	white-space: nowrap;
	opacity: 1;
}

.main-navigation ul ul a:hover {
	background-color: transparent;
	color: var(--color-gold);
	opacity: 0.8; 
}


/* ==========================================================================
   15. SINGLE POST PAGE (L'Oasi di Lettura e Pagine Standard)
   ========================================================================== */

.single-post-container .container-narrow {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* --- 1. HEADER ARTICOLO E PAGINE --- */
.entry-header.alignwide {
	text-align: center;
	margin-top: 60px; /* Margine normale */
	margin-bottom: 60px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.entry-meta-single {
	font-family: var(--font-sans);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: #CCCCCC;
	margin-bottom: 20px;
	display: block;
}

.entry-meta-single a { color: #CCCCCC; }

.entry-title-single {
	font-family: var(--font-serif);
	font-size: 42px;
	font-weight: 400;
	color: var(--color-gold); /* MODIFICA 1: Titolo colore Oro */
	line-height: 1.2;
	margin-bottom: 0;
}

/* --- 2. IMMAGINE DI COPERTINA --- */
.single-post-container .post-thumbnail-single.alignfull {
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	margin-bottom: 60px;
	overflow: visible;
}

.post-thumbnail-single img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* --- 3. CORPO DEL TESTO --- */
.entry-content-single {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.8;
	color: var(--color-petrol);
	text-align: justify;
}

.entry-content-single p {
	margin-bottom: 2rem;
}

/* MODIFICA 2: Commentato lo stile del drop cap (prima lettera ingrandita e oro). 
   Ora il testo inizierà con un carattere normale.
.entry-content-single > p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-serif);
	font-size: 85px;
	line-height: 0.8;
	color: var(--color-gold);
	padding-right: 15px;
	padding-top: 5px;
}
*/

.entry-content-single blockquote {
	margin: 60px 0;
	padding-left: 30px;
	border-left: 2px solid var(--color-gold);
	font-family: var(--font-serif);
	font-size: 24px;
	font-style: italic;
	color: var(--color-petrol);
	text-align: left;
}

.entry-content-single figure {
	margin: 60px 0;
	width: 100%;
}
.entry-content-single img {
	border-radius: 2px;
}

/* --- 4. FOOTER ARTICOLO --- */
.entry-footer-single {
	margin-top: 80px;
	padding-top: 40px;
	border-top: 1px solid rgba(197, 160, 89, 0.3);
	text-align: center;
	font-size: 14px;
	font-family: var(--font-serif);
	font-style: italic;
	color: #999;
}

/* ==========================================================================
   16. SEZIONE "CONTINUA L'ASCOLTO" (Related Posts)
   ========================================================================== */

.related-posts-section {
	margin-top: 100px;
	margin-bottom: 80px;
	text-align: center;
}

.related-title {
	font-family: var(--font-serif);
	font-size: 20px;
	font-style: italic;
	color: var(--color-petrol);
	margin-bottom: 10px;
}

.line-separator-gold {
	width: 40px;
	height: 1px;
	background-color: var(--color-gold);
	margin: 0 auto 40px auto;
}

.related-grid {
	display: flex;
	justify-content: center;
	gap: 100px;
	flex-wrap: wrap;
}

.related-item {
	text-align: center;
}

.related-image {
	width: 220px;
	height: 220px; 
	position: relative;
	overflow: hidden;
	margin: 0 auto 15px auto;
	background-color: #f0f0f0;
}

.related-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	border-radius: 2px;
	display: block;
}

.related-item:hover .related-image img {
	transform: scale(1.05);
}

.related-post-title {
	font-family: var(--font-serif);
	font-size: 16px;
	color: var(--color-petrol);
	margin: 0;
	line-height: 1.3;
	width: 220px; 
	margin-left: auto;
	margin-right: auto;
}

.social-share-links {
	margin-top: 20px;
	font-family: var(--font-serif);
	font-size: 14px;
	font-style: italic;
	color: #999;
}

.social-share-links a {
	color: var(--color-gold);
	text-decoration: none;
	margin: 0 5px;
	font-style: italic;
	text-transform: lowercase;
}

.social-share-links a:hover {
	text-decoration: underline;
}

@media (min-width: 768px) { .menu-toggle { display: none; } }

/* ==========================================================================
   17. ARCHIVE & CATEGORY PAGES
   ========================================================================== */
.archive-header-wrapper {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}

.archive-title-gold {
	font-family: var(--font-serif);
	font-size: 38px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-gold);
	margin-bottom: 15px;
	font-weight: 500;
}

/* Modifica stile H1 SOLO per Sottocategorie (Room) */
.archive-header-wrapper.header-room-style {
	/* MODIFICA: Ridotto padding-top a 60px per far salire il blocco */
	padding-top: 60px; 
	/* MODIFICA: Ridotto padding-bottom a 40px per avvicinare la griglia */
	padding-bottom: 40px; 
	margin-top: 0;
	margin-bottom: 0;
}

.header-room-style .archive-title-gold {
	font-family: var(--font-serif);
	/* MODIFICA: Aumentato font-size a 32px */
	font-size: 32px; 
	font-weight: 500; /* Medium/Light */
	text-transform: none; /* Sentence case base (gestito da PHP solitamente, qui resetto uppercase) */
	letter-spacing: 0.12em; /* Richiesto */
	/* Sentence case in CSS è limitato, si affida al testo inserito o 'initial' */
}
/* Forziamo la prima lettera maiuscola se il testo è tutto minuscolo, ma 'Single_cat_title' di solito è corretto */
.header-room-style .archive-title-gold::first-letter {
	text-transform: uppercase;
}

/* MODIFICA: Sottotitolo Archivio/Porte (es: "UNO SPAZIO PER MUOVERSI...") */
/* Puoi cambiare 'font-size' per la grandezza o 'color' per usare un'altra variabile sito */
.archive-subtitle-serif {
	font-family: var(--font-serif);
	font-size: 18px;
	font-style: normal; /* Rimossa l'inclinazione (era italic) */
	color: var(--color-smoke); /* Usato il Grigio Fumo invece del colore scuro Petrolio */
	margin: 0 0 30px 0;
}

/* Navigazione Archivio (Filtri) */
.archive-filter-nav {
	margin-top: 80px; 
	margin-bottom: 80px; /* Spazio prima della griglia */
}

.archive-filter-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.archive-filter-nav li {
	display: flex;
	align-items: center;
}

.archive-filter-nav li:not(:last-child)::after {
	content: '-';
	margin-left: 15px;
	color: var(--color-petrol);
	opacity: 0.4;
	font-size: 13px;
}

.archive-filter-nav a {
	font-family: var(--font-serif);
	font-size: 13px;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	color: var(--color-petrol);
	opacity: 0.6;
	text-decoration: none;
	transition: all 0.3s ease;
}

.archive-filter-nav a:hover {
	opacity: 1;
	color: var(--color-gold);
}

.archive-filter-nav a.active-filter,
.archive-filter-nav li.current-cat a {
	opacity: 1;
	color: var(--color-gold);
}

.archive-hero-visual-constrained {
	width: 100%; 
	margin: -10px auto 60px auto; 
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	border-radius: 2px;
}

.archive-hero-visual-constrained img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.archive-grid-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 120px;
}

/* --- LOGICA DI LAYOUT ARCHIVIO: ROOM vs DOOR --- */

/* Wrapper Post Globale Archivio */
.archive-grid-wrapper .post-grid-item {
	width: 100%;
	max-width: 100%; 
}

/* --- CLASSE PER LA RIDUZIONE DELLA LARGHEZZA (PAGINA MADRE) --- */
.door-constrained-width {
	max-width: 900px; 
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

/* A) LAYOUT "DOOR" (PORTE - Genitori) -> 3 Colonne */
.archive-layout-door {
	gap: 80px; 
}

@media (min-width: 768px) {
	.archive-layout-door {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Stili Door: Titolo 18px Regular/Bold + Excerpt */
.archive-layout-door .entry-title {
	font-family: var(--font-serif);
	font-size: 18px; 
	font-weight: 600; /* Grassetto leggero */
	font-style: normal;
	margin-top: 15px;
	margin-bottom: 8px;
	line-height: 1.2;
}

.archive-layout-door .entry-content {
	display: block; /* Visibile */
	text-align: justify;
	font-family: var(--font-serif); /* Cormorant come richiesto */
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-smoke);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* B) LAYOUT "ROOM" (STANZE - Sottocategorie) -> 2 Colonne */
.archive-layout-room {
	gap: 40px; /* Gutter orizzontale 40px come Home */
	row-gap: 60px; /* Gutter verticale 60px come Home */
	/* MODIFICA: Ripristinato contenitore 850px come Home. La foto sarà ridotta dal wrapper interno. */
	max-width: 850px; 
	
	/* MODIFICA: margin-bottom 120px per staccare le frecce inferiori */
	margin: 0 auto 120px auto; 
}

@media (min-width: 768px) {
	.archive-layout-room {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Override specifico per Layout Room (Sottocategorie) --- */

/* --- GESTIONE HOVER UNIFICATA (Zoom + Opacity 0.8) --- */

/* 1. Sottocategorie (Room) */
.archive-layout-room .post-thumbnail-wrapper {
	border-radius: 0px !important; /* Angoli netti */
	overflow: hidden;
	/* MODIFICA: Larghezza Wrapper ridotta dell'15% rispetto alla colonna, centrata */
	width: 85%;
	margin: 0 auto 20px auto;
}

.archive-layout-room .post-thumbnail-wrapper img {
	transition: opacity 0.4s ease, transform 0.6s ease;
	opacity: 1;
}

/* Effetto Combinato Room */
.archive-layout-room .post-thumbnail-wrapper:hover img {
	opacity: 0.8; /* Richiesto: Opacità 0.8 */
	transform: scale(1.05); /* Richiesto: Zoom */
}

/* 2. Porte (Door) - Zoom + Opacity */
.archive-layout-door .post-thumbnail-wrapper img {
	transition: transform 0.6s ease, opacity 0.4s ease; /* Aggiunta transizione opacity */
}
.archive-layout-door .post-thumbnail-wrapper:hover img {
	transform: scale(1.05); /* Zoom esistente */
	opacity: 0.8; /* Aggiunto effetto schiarita richiesto anche qui */
}

/* 2. Titolo Post: 20px, Corsivo, Nero Morbido, Centrato */
.archive-layout-room .entry-title {
	font-family: var(--font-serif);
	font-size: 20px; 
	font-weight: 400; 
	font-style: italic; /* Corsivo */
	color: var(--color-soft-black); /* #2C2C2C */
	text-align: center;
	margin-top: 20px; /* Distanza dall'immagine */
	margin-bottom: 0;
	line-height: 1.2;
}

.archive-layout-room .entry-content {
	display: none; /* Silenzio assoluto */
}

/* --- OVERRIDE IMMAGINI ARCHIVIO (COMUNE 4:5 di base, ma Room usa 1.618 come Home) --- */

/* Default Archivi (Porte) */
.archive-grid-wrapper .post-thumbnail-wrapper {
	aspect-ratio: 4 / 5; 
}

/* Override per Room (Clone Home) */
.archive-layout-room .post-thumbnail-wrapper {
	aspect-ratio: 1.618 / 1 !important; /* Ratio Home Page */
}


/* ==========================================================================
   18. SEARCH FOCUS (Overlay & Minimal Input)
   ========================================================================== */

.search-icon-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	margin-left: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-petrol);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.search-icon-btn:hover {
	transform: scale(1.1);
	opacity: 0.8;
}

.search-icon-btn svg path {
	stroke: var(--color-petrol);
	transition: stroke 0.3s ease;
}

.search-icon-btn:hover svg path {
	stroke: var(--color-gold);
}

.search-overlay-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.search-overlay-container.open {
	opacity: 1;
	visibility: visible;
}

body.search-active {
	overflow: hidden;
}

.search-close-btn {
	position: absolute;
	top: 40px;
	right: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 15px;
	transition: transform 0.3s ease;
}

.search-close-btn:hover {
	transform: rotate(90deg);
}

.search-form-wrapper-centered {
	width: 100%;
	max-width: 800px;
	padding: 0 20px;
	text-align: center;
	transform: translateY(20px);
	transition: transform 0.5s ease-out;
}

.search-overlay-container.open .search-form-wrapper-centered {
	transform: translateY(0);
}

.search-field-minimal {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-gold);
	font-family: var(--font-serif);
	font-size: 48px;
	font-weight: 300;
	font-style: italic;
	color: var(--color-petrol);
	text-align: center;
	padding: 20px 0;
	outline: none;
	box-shadow: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.search-field-minimal::placeholder {
	color: #ccc;
	font-style: italic;
	opacity: 1;
}

@media (max-width: 768px) {
	.search-field-minimal {
		font-size: 28px;
	}
	
	.search-close-btn {
		top: 20px;
		right: 20px;
	}
	
	.search-icon-btn {
		position: absolute;
		right: 0;
		top: 0;
		margin-left: 0;
	}
	
	.main-navigation {
		justify-content: center;
	}
}

/* ==========================================================================
   19. ARCHIVIO TIPOGRAFICO (Lista Essenziale)
   ========================================================================== */
.typographic-archive-container {
	padding-bottom: 120px;
}

.type-row {
	display: flex;
	align-items: baseline;
	border-bottom: 1px solid rgba(26, 43, 60, 0.1);
	padding: 25px 0;
	transition: background-color 0.3s ease;
}

.type-row:hover {
	background-color: rgba(197, 160, 89, 0.05);
}

.type-col-date {
	width: 120px;
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	color: #999;
	letter-spacing: 0.05em;
}

.type-col-title {
	flex-grow: 1;
	padding-right: 20px;
}

.type-entry-title {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 400;
	margin: 0;
	line-height: 1.2;
}

.type-entry-title a {
	color: var(--color-petrol);
	text-decoration: none;
}

.type-entry-title a:hover {
	color: var(--color-gold);
}

.type-col-cat {
	width: 150px;
	flex-shrink: 0;
	text-align: right;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--color-gold);
}

@media (max-width: 768px) {
	.type-row {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 0;
	}

	.type-col-date {
		margin-bottom: 5px;
		font-size: 11px;
	}

	.type-col-title {
		padding-right: 0;
		margin-bottom: 10px;
	}
	
	.type-entry-title {
		font-size: 22px;
	}

	.type-col-cat {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}
}

/* ==========================================================================
   20. CHIUSURE & FOOTER SYSTEM (Protocollo Agapais)
   ========================================================================== */

/* --- LIVELLO 1: FIRMA NARRATIVA --- */
.signature-level-1 {
	text-align: center;
	margin-top: 120px;      /* MODIFICA: Aumentato da 80px per abbassare la linea */
	margin-bottom: 40px;   /* Pre-footer: compatto */
}

.signature-line-gold {
	width: 100px;
	height: 1px;
	background-color: var(--color-gold);
	margin: 0 auto 20px auto;
	opacity: 0.6;
}

.signature-name {
	font-family: var(--font-serif);
	font-size: 16px;
	font-variant: small-caps; /* Maiuscoletto */
	color: var(--color-petrol);
	margin-bottom: 10px;
	letter-spacing: 0.1em;
	display: block;
}

.signature-social-cta {
	font-family: var(--font-serif);
	font-size: 13px;
	font-style: italic;
	color: var(--color-petrol);
	opacity: 0.7;
}

.signature-social-cta a {
	color: var(--color-petrol);
	text-decoration: none;
	margin: 0 5px;
	transition: color 0.3s ease;
}

.signature-social-cta a:hover {
	color: var(--color-gold);
}

/* --- LIVELLO 2: FOOTER GLOBALE (BASE TECNICA) --- */
.site-footer {
	/* Resetta padding/margini vecchi se presenti */
	padding: 0;
	margin-top: 0;
	background-color: var(--color-silk);
}

/* 1. Architettura */
.footer-separator-line {
	width: 100%;
	height: 1px;
	background-color: var(--color-gold);
	opacity: 0.4;
	margin-bottom: 90px; /* MODIFICA: Aumentato da 60 a 90px per allontanare i testi dalla linea */
}

/* 2. Sigillo Centrale */
.footer-seal {
	text-align: center;
	margin-bottom: 40px;
}

.footer-seal-text {
	font-family: var(--font-serif);
	font-size: 14px;
	font-variant: small-caps;
	letter-spacing: 0.15em;
	color: var(--color-petrol);
}

/* 3. Layout Equo (Barra di Base) - MODIFICATO PER 2 RIGHE CENTRALI + SOCIAL DESTRA */
.footer-base-layout {
	display: flex;
	justify-content: center; /* Centrato generale */
	align-items: flex-end;   /* Allinea al fondo */
	padding-bottom: 60px;
	position: relative;      /* Per posizionare i social in absolute */
}

/* Blocco Centrale (Link + Copyright) */
.footer-center-block {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 30px; /* MODIFICA: Aumentato da 15 a 30px per distanziare il copyright dai link */
}

/* Riga 1: Link */
.footer-links-row {
	display: flex;
	/* MODIFICA: Aumentato il gap a 40px */
	gap: 80px; 
	justify-content: center;
	flex-wrap: wrap;
}

.footer-links-row a {
	font-family: var(--font-sans);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-petrol);
	opacity: 0.6;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.footer-links-row a:hover {
	opacity: 1;
	color: var(--color-gold);
}

/* Riga 2: Copyright */
.footer-copyright-row {
	font-family: var(--font-sans);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-petrol);
	opacity: 0.5;
}

/* Blocco Social (Destra) */
.footer-social-right {
	position: absolute;
	right: 0;
	bottom: 60px; /* Allineato col padding bottom del container */
}

.footer-social-link {
	font-family: var(--font-serif); /* Cormorant */
	font-size: 14px;
	font-style: italic;
	text-transform: lowercase;
	color: var(--color-petrol);
	opacity: 1; /* 100% Opacity */
	text-decoration: none;
	margin-left: 15px;
}

.footer-social-link:hover {
	color: var(--color-gold);
}

/* Responsive per Mobile */
@media (max-width: 768px) {
	.footer-base-layout {
		flex-direction: column;
		gap: 30px;
		align-items: center;
	}
	
	.footer-social-right {
		position: static; /* Torna nel flusso normale */
		margin-top: 10px;
	}
	
	.footer-links-row {
		flex-direction: column;
		gap: 10px;
	}
}

/* ==========================================================================
   21. PAGINE SPECIALI: ABOUT & CONTATTI
   ========================================================================== */

/* --- 21a. ABOUT PAGE (Layout Rigido Hardcoded) --- */
.about-page-container {
	padding-bottom: 80px;
	padding-top: 100px;
}

.about-hardcoded-layout {
	max-width: 1080px;
	margin: 0 auto;
}

.about-header {
	text-align: center;
}

.about-header-left {
	text-align: left;
	margin-bottom: 20px;
}

.about-title {
	font-family: var(--font-serif);
	font-size: 36px;
	color: var(--color-gold);
	font-weight: 400;
	margin: 0;
	font-variant: small-caps;
	text-transform: lowercase;
}

.about-title::first-letter {
	text-transform: uppercase;
}

.about-subtitle {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--color-gold);
	font-weight: 400;
	margin: 0;
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.1em;
}

.about-subtitle::first-letter {
	text-transform: uppercase;
}

.about-separator-line {
	width: 60px;
	height: 1px;
	background-color: var(--color-gold);
	margin: 50px auto;
	opacity: 0.5;
}

.about-intro-text p,
.about-split-text p,
.about-text-part-1 p,
.about-text-part-2 p {
	font-family: var(--font-serif);
	font-size: 18px;
	color: var(--color-smoke);
	line-height: 1.8;
	margin-bottom: 25px;
	text-align: justify;
}

.about-formation-text p {
	font-family: var(--font-serif);
	font-size: 16px;
	color: var(--color-smoke);
	line-height: 1.8;
	margin-bottom: 25px;
	text-align: justify;
}

.about-horizontal-image {
	width: 100%;
	margin: 0 auto;
}

.about-horizontal-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

.about-split-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px;
	grid-template-areas:
		"text1"
		"visual"
		"text2";
	align-items: start;
}

.about-text-part-1 {
	grid-area: text1;
}

.about-text-part-2 {
	grid-area: text2;
}

.about-split-visual {
	grid-area: visual;
	display: flex;
	justify-content: center;
}

@media (min-width: 992px) {
	.about-split-section {
		grid-template-columns: 1fr 0.8fr;
		grid-template-areas:
			"text1 visual"
			"text2 visual";
		align-items: start;
	}
}

.about-vertical-image-wrapper {
	width: 85%;
	margin: 0 auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	position: relative;
}

.about-vertical-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- 21b. CONTACT PAGE (Layout Asimmetrico) --- */
.contact-page-container {
	padding-bottom: 80px;
	/* MODIFICA: Aumentato spazio dall'header */
	padding-top: 100px;
}

.contact-grid-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px;
	/* MODIFICA: Allargato il contenitore del 20% (da 900 a 1080px) */
	max-width: 1080px; 
	margin: 0 auto;
}

@media (min-width: 992px) {
	.contact-grid-layout {
		/* MODIFICA: Ridotta la colonna sinistra (da 1.2fr a 0.9fr) per compattare il "box" visivo */
		grid-template-columns: 0.9fr 0.8fr;
		/* MODIFICA: Cambiato center -> start per allineare top del titolo e della foto */
		align-items: start; 
	}
}

/* Colonna Form */
.contact-header {
	margin-bottom: 30px;
}

.contact-title {
	font-family: var(--font-serif);
	font-size: 36px;
	color: var(--color-gold);
	font-weight: 400;
	margin: 0;
	font-variant: small-caps; /* Maiuscoletto se supportato, o lowercase */
	text-transform: lowercase; /* Base minuscola */
}
.contact-title::first-letter {
	text-transform: uppercase;
}

.contact-intro-text p {
	font-family: var(--font-serif);
	font-size: 18px;
	color: var(--color-smoke);
	line-height: 1.8;
	margin-bottom: 40px;
	/* MODIFICA: Testo Giustificato */
	text-align: justify;
}

/* STILE FORM MINIMAL (Override CF7 / WPForms) */

/* MODIFICA: Aggiunto stile per le Label (Nome, Email...) */
.contact-form-wrapper label {
	font-family: var(--font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-petrol);
	opacity: 0.7;
	margin-bottom: 5px; /* Spazio tra label e riga */
	display: block;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea {
	width: 100%;
	background: transparent;
	border: none;
	/* Linea orizzontale 1px Grigio seta scuro (approx #ccc o rgba) */
	border-bottom: 1px solid rgba(26, 43, 60, 0.2); 
	/* MODIFICA: Padding ridotto a 5px (era 15) */
	padding: 5px 0;
	/* MODIFICA: Margine inferiore ridotto a 10px (era 30) */
	margin-bottom: 10px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-petrol);
	outline: none;
	transition: border-color 0.3s ease;
	border-radius: 0;
	-webkit-appearance: none;
}

.contact-form-wrapper textarea {
	/* MODIFICA: Disabilita il ridimensionamento manuale e imposta altezza fissa ridotta */
	resize: none;
	height: 90px;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
	border-bottom-color: var(--color-gold); /* Hover/Focus Oro */
}

/* Bottone "Galleggiante" (MODIFICA: Design Solo Testo) */
.contact-form-wrapper input[type="submit"],
.contact-form-wrapper button[type="submit"] {
	background: transparent;
	border: none;
	/* Sottolineatura dorata */
	border-bottom: 1px solid rgba(197, 160, 89, 0.5); 
	color: var(--color-petrol);
	font-family: var(--font-serif);
	font-size: 16px;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	
	/* Reset box */
	padding: 0 0 5px 0; /* Padding solo sotto per staccare la linea dal testo */
	margin-top: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.contact-form-wrapper input[type="submit"]:hover,
.contact-form-wrapper button[type="submit"]:hover {
	color: var(--color-gold);
	border-bottom-color: var(--color-gold);
}

/* Colonna Visiva (Foto Verticale) */
.contact-col-visual {
	display: flex;
	justify-content: center; /* Centrato nella sua colonna */
}

/* MODIFICA: Image Wrapper fluido per adattarsi al 100% della colonna ma con Aspect Ratio 3:4 fisso */
.contact-image-wrapper {
	/* MODIFICA: Ridotta la foto del 15% (da 100% a 85%) */
	width: 85%; 
	margin: 32px auto 0 auto; /* Centrata nel blocco destro + 32px Top per allineamento baseline */
	/* aspect-ratio nativo 1080/1440 = 0.75 (3:4) */
	aspect-ratio: 3 / 4; 
	overflow: hidden;
	position: relative;
}

.contact-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   22. BACK TO TOP BUTTON (Torna Su)
   ========================================================================== */
.back-to-top-btn {
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 45px;
	height: 45px;
	background-color: transparent; 
	color: var(--color-smoke); 
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 9999;
	
	opacity: 0.6;
	
	/* Stato iniziale */
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.4s ease;
	
	box-shadow: none;
}

/* Classe aggiunta via JS allo scroll */
.back-to-top-btn.visible {
	visibility: visible;
	transform: translateY(0);
}

/* Hover State */
.back-to-top-btn:hover {
	opacity: 1;
	background-color: transparent;
	color: var(--color-gold); 
	transform: translateY(-5px); 
	box-shadow: none;
}

/* Icona SVG interna */
.back-to-top-btn svg {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
}

.back-to-top-btn:hover svg {
	transform: scale(1.1);
}

/* TOOLTIP CSS */
.back-to-top-btn[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: auto;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	margin-top: 10px; /* Spazio dal bottone */
	
	background-color: var(--color-white);
	color: var(--color-petrol);
	font-family: var(--font-sans);
	font-size: 10px;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
	
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	pointer-events: none;
}

/* Mostra tooltip al hover */
.back-to-top-btn:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
	.back-to-top-btn {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		opacity: 0.5; /* Più visibile su mobile dove non c'è hover */
	}
}

/* ==========================================================================
   MOBILE: Hamburger overlay, tipografia base, container (blocco unico in coda)
   ========================================================================== */
@media (max-width: 768px) {

	/* --- Container: respiro laterale --- */
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* --- Hero home (mobile): altezza −20%, testo più vicino alla piega --- */
	.hero-visual {
		height: 56vh;
	}

	.hero-img-element {
		object-fit: cover;
	}

	.hero-text-block {
		margin-top: 40px;
	}

	/* --- Tipografia principale (mobile) --- */
	.hero-message {
		font-size: 22px;
		letter-spacing: 0.12em;
		margin-bottom: 40px;
	}

	.entry-title-single {
		font-size: 30px;
	}

	.archive-title-gold {
		font-size: 26px;
		letter-spacing: 0.14em;
	}

	.header-room-style .archive-title-gold {
		font-size: 22px;
		letter-spacing: 0.1em;
	}

	/* --- Mobile: header statico, bianco (disattiva sticky + glass del desktop) --- */
	.site-header {
		position: relative !important;
		background-color: var(--color-white) !important;
		padding-top: 15px;
		padding-bottom: 15px;
		z-index: 100050;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-bottom: 1px solid #eee;
	}

	.site-header.header-hidden {
		transform: none !important;
	}

	.site-header.header-scrolled {
		background-color: var(--color-white) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-bottom: 1px solid #eee;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	/* --- Barra controlli: hamburger a sinistra, ricerca a destra --- */
	.main-navigation {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		margin-left: auto;
		margin-right: auto;
		gap: 16px;
	}

	.main-navigation .menu-toggle {
		order: 1;
		flex: 0 0 auto;
	}

	.main-navigation .search-icon-btn {
		position: relative;
		top: auto;
		right: auto;
		order: 3;
		flex: 0 0 auto;
		margin-left: 0;
	}

	/* --- Pulsante hamburger (3 linee, flexbox) --- */
	.menu-toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.menu-toggle-bar {
		display: block;
		width: 22px;
		height: 2px;
		background-color: var(--color-petrol);
		border-radius: 1px;
		transform-origin: center;
		transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
	}

	.main-navigation.active .menu-toggle-bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.main-navigation.active .menu-toggle-bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.main-navigation.active .menu-toggle-bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* --- Menu: pannello sotto la barra nav (ancorato a .main-navigation) --- */
	.main-navigation > ul {
		order: 2;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: calc(100vh - 70px);
		max-height: none;
		margin: 0;
		padding: 20px 24px 120px;
		box-sizing: border-box;
		display: block;
		text-align: center;
		background-color: var(--color-silk);
		z-index: 10;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		list-style: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.35s ease, visibility 0.35s ease;
	}

	.main-navigation.active > ul {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.main-navigation.active > ul > li > a {
		font-size: 18px;
		padding: 16px 20px;
		letter-spacing: 0.12em;
	}

	.main-navigation > ul > li {
		width: 100%;
		max-width: 360px;
		text-align: center;
	}

	.main-navigation > ul > li > a {
		display: block;
	}

	/* Sottomenu nel overlay mobile */
	.main-navigation.active ul ul {
		position: static;
		visibility: visible;
		opacity: 1;
		margin-top: 8px;
		margin-bottom: 8px;
		padding: 0 0 0 0;
		min-width: 0;
		background: transparent;
		box-shadow: none;
		border: none;
		transition: none;
	}

	.main-navigation.active ul ul li {
		text-align: center;
	}

	.main-navigation.active ul ul a {
		white-space: normal;
		font-size: 15px;
		padding: 10px 16px;
	}

	.main-navigation.active li:hover > ul {
		visibility: visible;
		opacity: 1;
		margin-top: 8px;
	}

	body.nav-menu-open {
		overflow: hidden;
	}

	.archive-grid-wrapper .post-grid-item {
		max-width: 280px;
		margin: 0 auto;
	}

	/* --- Riduzione spaziature finali contenitori (Mobile) --- */
	.archive-grid-wrapper,
	.archive-layout-room,
	.navigation-tiles {
		margin-bottom: 60px !important;
	}

	.posts-layout-wrapper,
	.typographic-archive-container,
	.about-page-container,
	.contact-page-container {
		padding-bottom: 60px !important;
	}

	.pagination-wrapper {
		margin-bottom: 40px !important; /* Override dell'inline style 80px in archive.php */
	}

	/* --- Fix Tipografico: Rimuove il trattino orfano dopo "Danza" solo nella stanza Pratica --- */
	body.category-pratica .archive-filter-nav li:nth-child(3)::after {
		content: none !important;
		display: none !important;
	}

	.signature-level-1 {
		margin-top: 60px;
		margin-bottom: 15px;
	}

	.footer-separator-line {
		margin-bottom: 40px;
	}

	.footer-base-layout {
		padding-bottom: 40px;
	}
}