/**
 * Aestetica Salvati — fondamenta di design
 * Palette e tipografia dal brand board + landing di riferimento.
 * Caricato dal child theme su tutte le pagine.
 */

/* ---------- Variabili di brand ----------
 *
 * Nota sui colori (revisione 28/07/2026 dopo l'audit di accessibilità).
 * L'oro del marchio #A8906C è bellissimo ma molto chiaro: come TESTO su fondo
 * avorio arriva a 2.8:1, quando lo standard WCAG AA ne chiede 4.5. Invece di
 * cambiare il colore del marchio abbiamo separato i ruoli:
 *
 *   --as-gold       resta l'oro del marchio, per fondi, bordi, linee e segni
 *                   grafici, dove il contrasto non è richiesto;
 *   --as-gold-mid   per i segni grafici su fondo chiaro che devono comunque
 *                   restare distinguibili (stelle, numeri grandi): 3.9:1;
 *   --as-gold-text  per il testo scritto in oro (occhielli, etichette, link
 *                   "Scopri di più"): 4.5:1 su tutti i fondi del sito.
 *
 * Il pulsante principale ha risolto in modo ancora più semplice: fondo oro del
 * marchio invariato, testo espresso invece che bianco. Rapporto 4.57:1, e il
 * colore del marchio non si tocca.
 */
:root {
	/* Palette principale (brief) */
	--as-espresso: #2E2C24;
	--as-gold: #A8906C;
	--as-ivory: #F7F3EC;

	/* Tonalità di supporto (landing di riferimento) */
	--as-ivory-light: #FAF6F0;
	--as-beige: #EDE3D6;
	--as-sand: #DAC9B2;
	--as-white: #FFFFFF;
	--as-line: #E4D8C7;

	/* Varianti accessibili — vedi nota sopra */
	--as-taupe: #71624D;      /* testo corpo    — 4.66:1 su beige, 5.48 su avorio */
	--as-gold-text: #7A6244;  /* testo in oro   — 4.53:1 su beige, 5.33 su avorio */
	--as-gold-mid: #8E7553;   /* grafica su chiaro — 3.94:1 su avorio            */
	--as-gold-dark: #7A6244;  /* fondo pulsante allo stato attivo — 5.74:1 col bianco */
	--as-sand-dim: #A2917A;   /* testo minore su fondo espresso — 4.57:1        */

	/* Tipografia */
	--as-font-serif: 'Cormorant Garamond', Georgia, serif;
	--as-font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	/* Layout */
	--as-wrap: 1180px;
	--as-header-h: 78px;
}

/* ---------- Tipografia di base ---------- */
body {
	font-family: var(--as-font-sans);
	font-weight: 300;
	line-height: 1.7;
	color: var(--as-espresso);
	background-color: var(--as-ivory-light);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--as-font-serif);
	font-weight: 500;
	line-height: 1.15;
	color: var(--as-espresso);
}

/* I titoli-link (es. titoli articolo) ereditano il colore del testo,
   niente rosso di default di Hello Elementor */
h1 a, h2 a, h3 a, h4 a {
	color: inherit;
	text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
	color: var(--as-gold-text);
}

/* Occhiello sopra i titoli (stile landing) */
.as-eyebrow {
	font-family: var(--as-font-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--as-gold-text);
}

/* ---------- Bottoni ---------- */
.as-btn {
	display: inline-block;
	padding: 15px 34px;
	border-radius: 40px;
	font-family: var(--as-font-sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Fondo oro del marchio + testo espresso: 4.57:1, passa lo standard AA senza
   toccare il colore del marchio. Prima era testo bianco, a 3.06:1: il pulsante
   più importante del sito era anche il meno leggibile. */
.as-btn--gold {
	background: var(--as-gold);
	color: var(--as-espresso);
	font-weight: 400;
}
.as-btn--gold:hover,
.as-btn--gold:focus {
	background: var(--as-gold-dark);
	color: var(--as-white);
}

.as-btn--outline {
	border: 1px solid var(--as-gold);
	color: var(--as-gold-text);
	background: transparent;
}
.as-btn--outline:hover,
.as-btn--outline:focus {
	background: var(--as-gold-dark);
	border-color: var(--as-gold-dark);
	color: var(--as-white);
}

/* ---------- Header ---------- */
.as-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 246, 240, .92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--as-line);
}

.as-header__inner {
	max-width: var(--as-wrap);
	margin: 0 auto;
	padding: 0 28px;
	height: var(--as-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.as-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.as-header__logo { height: 44px; width: auto; display: block; }

.as-header__nav { display: flex; align-items: center; }

.as-menu {
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.as-menu a {
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--as-espresso);
	transition: color .2s ease;
}
.as-menu a:hover,
.as-menu a:focus,
.as-menu .current-menu-item > a {
	color: var(--as-gold-text);
}
/* La pagina in cui ci si trova resta segnata anche graficamente, non solo a
   colore: chi non distingue bene i colori deve comunque capire dov'è. */
.as-menu .current-menu-item > a,
.as-menu .current-page-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* Instagram e CTA viaggiano insieme all'estremo destro dell'intestazione. */
.as-header__azioni {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.as-header__cta { padding: 12px 26px; font-size: 12px; flex-shrink: 0; }

/* Collegamento social: cerchio sottile, come i pulsanti in contorno, così
   accanto al bottone dorato legge come una seconda azione e non come un
   elemento estraneo. */
.as-social {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--as-line);
	border-radius: 50%;
	color: var(--as-espresso);
	flex-shrink: 0;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.as-social svg { width: 20px; height: 20px; display: block; }
.as-social:hover,
.as-social:focus-visible {
	color: var(--as-gold-text);
	border-color: var(--as-gold-mid);
	background: rgba(255, 255, 255, .55);
}

/* Hamburger (solo mobile) */
.as-header__toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
.as-header__toggle span:not(.screen-reader-text) {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--as-espresso);
	margin: 5px 0;
	transition: transform .25s ease, opacity .25s ease;
}

@media (max-width: 900px) {
	.as-header__toggle { display: block; }
	.as-header__cta { display: none; }

	/* Su telefono resta solo l'icona, e l'hamburger scivola all'estrema
	   destra: l'ordine letto da tastiera e da screen reader non cambia. */
	.as-header__toggle { order: 3; }
	.as-header__azioni { order: 2; margin-left: auto; }
	.as-header__social { width: 38px; height: 38px; }

	.as-header__nav {
		display: none;
		position: absolute;
		top: var(--as-header-h);
		left: 0;
		right: 0;
		background: var(--as-ivory-light);
		border-bottom: 1px solid var(--as-line);
		padding: 24px 28px;
	}
	.as-header__nav.is-open { display: block; }

	.as-menu { flex-direction: column; gap: 18px; }

	.as-header--open .as-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.as-header--open .as-header__toggle span:nth-child(2) { opacity: 0; }
	.as-header--open .as-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Footer ---------- */
.as-footer {
	background: var(--as-espresso);
	color: var(--as-ivory);
	padding: 64px 0 0;
	font-size: 15px;
}

.as-footer__inner {
	max-width: var(--as-wrap);
	margin: 0 auto;
	padding: 0 28px 48px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 48px;
}

.as-footer__logo { height: 40px; width: auto; margin-bottom: 18px; }

.as-footer h3 {
	color: var(--as-ivory);
	font-size: 20px;
	margin: 0 0 14px;
}

.as-footer p { margin: 0 0 10px; color: var(--as-sand); }
.as-footer address { font-style: normal; color: var(--as-sand); margin: 0 0 10px; }

.as-footer a { color: var(--as-ivory); text-decoration: none; transition: color .2s ease; }
.as-footer a:hover, .as-footer a:focus { color: var(--as-gold); }

.as-footer__trust {
	color: var(--as-gold);
	letter-spacing: .08em;
	font-size: 13px;
	text-transform: uppercase;
}

.as-footer__menu { list-style: none; margin: 0; padding: 0; }
.as-footer__menu li { margin-bottom: 10px; }

/* Era in taupe su fondo espresso: 2.67:1, praticamente illeggibile. */
.as-footer__bottom {
	border-top: 1px solid rgba(247, 243, 236, .15);
	padding: 18px 28px;
	text-align: center;
	font-size: 13px;
	color: var(--as-sand-dim);
}

@media (max-width: 900px) {
	.as-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Pulsante WhatsApp fisso ---------- */
.as-wa-btn {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366; /* verde ufficiale WhatsApp: riconoscibilità immediata */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(46, 44, 36, .3);
	transition: transform .2s ease, box-shadow .2s ease;
}
.as-wa-btn:hover,
.as-wa-btn:focus {
	transform: scale(1.08);
	box-shadow: 0 10px 28px rgba(46, 44, 36, .4);
}
.as-wa-btn svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 600px) {
	.as-wa-btn { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* ---------- Accessibilità ----------
 *
 * Chi naviga da tastiera deve sempre vedere dov'è il fuoco. Prima lo stile era
 * definito solo su pulsanti e voci di menu: sui link delle card, del footer e
 * dentro i testi restava quello predefinito del browser, che Hello Elementor in
 * certi punti attenua fino a farlo sparire.
 */
.as-header a:focus-visible,
.as-footer a:focus-visible,
main a:focus-visible,
main button:focus-visible,
main summary:focus-visible,
.as-btn:focus-visible,
.as-menu a:focus-visible,
.as-wa-btn:focus-visible,
.as-barra-mobile a:focus-visible,
.as-header__toggle:focus-visible {
	outline: 2px solid var(--as-gold-dark);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Sul fondo scuro un contorno bruno sparisce: lì serve chiaro. */
.as-sec--espresso a:focus-visible,
.as-footer a:focus-visible {
	outline-color: var(--as-sand);
}

/* ---------- Utilità di spaziatura ----------
 *
 * Sostituiscono gli attributi style="" che erano sparsi nei template: così la
 * spaziatura resta governata dal CSS e continua a rispondere ai media query.
 */
.as-sec--compatta { padding: 64px 0; }
.as-sec--media { padding: 72px 0; }
.as-sec--stretta { padding: 52px 0; }
.as-center--staccato { margin-top: 44px; }
.as-actions--staccate { margin-top: 24px; }
.as-nota--staccata { margin-top: 26px; }

@media (max-width: 900px) {
	.as-sec--compatta { padding: 48px 0; }
	.as-sec--media { padding: 52px 0; }
	.as-sec--stretta { padding: 40px 0; }
	.as-center--staccato { margin-top: 32px; }
}