/* =========================================================
   Schembri Rivera — design system
   Colori e font sono variabili: si cambiano qui in un punto solo.
   In Elementor gli stessi valori vanno inseriti come "Global Colors"
   e "Global Fonts" (Site Settings), vedi wordpress/GUIDA-PROPRIETARIO.md
   ========================================================= */
:root {
	--sr-ink: #0e0e0d;
	--sr-charcoal: #1b1b19;
	--sr-line-dark: #2e2d2a;
	--sr-stone: #8e897e;
	--sr-stone-lt: #b9b4a8;
	--sr-paper: #f4f3f0;
	--sr-white: #ffffff;
	--sr-champagne: #c8b58a;
	--sr-champagne-d: #a8956a;
	--sr-font-display: "Cinzel", Georgia, serif;
	--sr-font-body: "Lato", system-ui, sans-serif;
}

/* Etichetta piccola sopra i titoli (classe: sr-eyebrow) */
.sr-eyebrow .elementor-heading-title,
.sr-eyebrow {
	font-family: var(--sr-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--sr-champagne-d);
}
.sr-on-dark .sr-eyebrow .elementor-heading-title,
.sr-on-dark .sr-eyebrow { color: var(--sr-champagne); }

/* Titoli Cinzel (classe: sr-display) */
.sr-display .elementor-heading-title,
.sr-display { font-family: var(--sr-font-display); font-weight: 400; letter-spacing: 0.04em; line-height: 1.12; }

/* Pulsanti (classe sul widget Pulsante: sr-btn-gold / sr-btn-outline-light / sr-btn-outline-dark) */
.sr-btn-gold .elementor-button,
.sr-btn-outline-light .elementor-button,
.sr-btn-outline-dark .elementor-button {
	border-radius: 0;
	font-family: var(--sr-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	padding: 17px 34px;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.sr-btn-gold .elementor-button { background: var(--sr-champagne); color: var(--sr-ink); border: 1px solid var(--sr-champagne); }
.sr-btn-gold .elementor-button:hover { background: transparent; color: var(--sr-champagne); }
.sr-btn-outline-light .elementor-button { background: transparent; color: var(--sr-white); border: 1px solid var(--sr-white); }
.sr-btn-outline-light .elementor-button:hover { background: var(--sr-white); color: var(--sr-ink); }
.sr-btn-outline-dark .elementor-button { background: transparent; color: var(--sr-ink); border: 1px solid var(--sr-ink); }
.sr-btn-outline-dark .elementor-button:hover { background: var(--sr-ink); color: var(--sr-white); }

/* Immagini che scalano lentamente al passaggio del mouse (classe sul contenitore: sr-zoom) */
.sr-zoom { overflow: hidden; }
.sr-zoom img { transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.sr-zoom:hover img { transform: scale(1.05); }

/* Velo scuro sopra le foto di sfondo: aggiungere la classe sr-overlay al contenitore */
.sr-overlay { position: relative; }
.sr-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(14, 14, 13, 0.55), rgba(14, 14, 13, 0.15) 40%, rgba(14, 14, 13, 0.78));
	z-index: 0;
	pointer-events: none;
}
.sr-overlay > * { position: relative; z-index: 1; }

/* Menu trasparente sulla home (si attiva con la classe body sr-transparent-header) */
body.sr-transparent-header .site-header,
body.sr-transparent-header .ast-primary-header-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 50;
	background: transparent !important;
	border: 0 !important;
	transition: background 0.5s ease;
}
body.sr-transparent-header.sr-header-solid .site-header,
body.sr-transparent-header.sr-header-solid .ast-primary-header-bar {
	background: rgba(14, 14, 13, 0.94) !important;
}
/* Voci di menu e logo bianchi sopra la foto. !important perche' Astra scrive i colori del menu
   con selettori molto specifici (dal Personalizzatore): senza, il testo resta grigio scuro e non si legge. */
body.sr-transparent-header .main-header-menu .menu-link,
body.sr-transparent-header .ast-builder-menu .menu-link,
body.sr-transparent-header .site-title a,
body.sr-transparent-header .ast-site-identity a,
body.sr-transparent-header .ast-header-html-inner a { color: var(--sr-white) !important; }
body.sr-transparent-header .main-header-menu .menu-link:hover,
body.sr-transparent-header .ast-builder-menu .menu-link:hover { color: var(--sr-champagne) !important; }
body.sr-transparent-header .ast-button-wrap .menu-toggle,
body.sr-transparent-header .ast-button-wrap .menu-toggle .ast-mobile-svg,
body.sr-transparent-header .ast-mobile-menu-buttons .menu-toggle,
body.sr-transparent-header .menu-toggle .mobile-menu-toggle-icon { color: var(--sr-white) !important; fill: var(--sr-white) !important; }
/* Voci di menu: Lato maiuscolo spaziato, come da direzione grafica */
.main-header-menu .menu-link {
	font-family: var(--sr-font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.sr-zoom img, .sr-btn-gold .elementor-button { transition: none; }
}

/* The previous dummy Astra starter-site footer contains invented contact details.
   Keep the reviewed copyright row and remove those legacy widgets. */
#colophon .footer-widget-area,
#colophon .ast-builder-footer-grid-columns,
#colophon .ast-footer-social-1 { display: none !important; }

/* Estatik: ricerca e pulsanti nei colori del brand (Estatik usa un corallo predefinito).
   !important perche' i suoi colori sono scritti in linea dalle impostazioni del plugin. */
.es-btn--primary,
.es-btn--primary.es-btn--search,
.sr-search .es-btn--primary {
	background: var(--sr-champagne) !important;
	border-color: var(--sr-champagne) !important;
	color: var(--sr-ink) !important;
	border-radius: 0 !important;
}
.es-btn--primary:hover,
.sr-search .es-btn--primary:hover {
	background: var(--sr-white) !important;
	border-color: var(--sr-white) !important;
}
.es-btn--primary .es-icon, .es-btn--primary svg { color: var(--sr-ink) !important; fill: var(--sr-ink) !important; }
.es-search .es-field__label, .es-search select, .es-search .es-field { font-family: var(--sr-font-body); }

/* Icona del menu (telefono) sulle pagine interne: nera come i testi, non il blu predefinito di Astra */
.ast-button-wrap .menu-toggle,
.ast-button-wrap .menu-toggle .ast-mobile-svg { color: var(--sr-ink); fill: var(--sr-ink); }