/* ==========================================================================
   Forno Tofani — stile globale
   Palette: #3a302e (marrone), #92a5b3 (azzurro polvere), #a4b6c2 (azzurro
   chiaro), #21181f (hero), #333 testo. Font: Cinzel, Playball, Gantari,
   Open Sans (self-hosted, vedi fonts.css).
   ========================================================================== */

:root {
	--c-brown: #3a302e;
	--c-brown-deep: #21181f;
	--c-blue: #92a5b3;
	--c-blue-light: #a4b6c2;
	--c-text: #333333;
	--header-h: 120px;
	--header-h-scrolled: 60px;
	--container: 1100px;
	--container-wide: 1500px;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Cinzel', serif;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text);
	background: #fff;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--c-brown); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-blue); }
p { margin: 0 0 1em; font-size: 16px; line-height: 27px; color: var(--c-text); }
::selection { background: var(--c-blue-light); color: #fff; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 400; color: var(--c-text); }
h3 { font-size: 26px; line-height: 36px; text-transform: uppercase; letter-spacing: 4px; }
h4 { font-size: 19px; line-height: 29px; text-transform: uppercase; letter-spacing: 2px; }
h5 { font-size: 21px; line-height: 31px; text-transform: uppercase; font-weight: 200; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
	position: relative;
	z-index: 1000;
	background: var(--c-brown);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 45px;
	height: var(--header-h);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-img--main { width: 210px; height: auto; display: block; }
.site-header__logo-img--sticky { display: none; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 46px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	padding: 8px 0 4px;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.site-nav__list li.current-menu-item > a,
.site-nav__list a:hover { border-bottom-color: currentColor; }

/* Variante sticky (chiara) allo scroll */
.site-header.is-sticky {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	animation: tofani-slide-down .28s ease both;
}
.site-header.is-sticky .site-header__inner { height: var(--header-h-scrolled); }
.site-header.is-sticky .site-header__logo-img--main { display: none; }
.site-header.is-sticky .site-header__logo-img--sticky { display: block; width: 100px; }
.site-header.is-sticky .site-nav__list a { color: var(--c-blue); }
.site-header.is-sticky .site-nav__list a:hover,
.site-header.is-sticky .site-nav__list li.current-menu-item > a { color: var(--c-blue); }
body.has-sticky-header { padding-top: var(--header-h); }

@keyframes tofani-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Hamburger */
.site-header__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}
.site-header__toggle span {
	display: block;
	width: 24px; height: 2px;
	background: #fff;
	margin: 5px 0;
	transition: transform .2s ease, opacity .2s ease;
}
.site-header.is-sticky .site-header__toggle span { background: var(--c-blue); }
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { background: var(--c-brown); }
.mobile-nav__list { list-style: none; margin: 0; padding: 10px 30px 24px; }
.mobile-nav__list a {
	display: block;
	padding: 12px 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 1000px) {
	:root { --header-h: 80px; }
	.site-nav { display: none; }
	.site-header__toggle { display: block; }
	.site-header__inner { padding: 0 24px; }
	.site-header__logo-img--main { width: 150px; }
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--c-blue);
	padding: 78px 30px 90px;
	text-align: center;
}
.site-footer__copyright,
.site-footer__copyright a,
.site-footer__privacy a {
	font-family: 'Cinzel', serif;
	font-size: 16px;
	letter-spacing: 1px;
	color: #fff;
}
.site-footer__copyright a:hover,
.site-footer__privacy a:hover { color: var(--c-brown); }
.site-footer__privacy { margin-top: 10px; }
.site-footer__privacy a { text-transform: uppercase; font-size: 14px; letter-spacing: 2px; }

/* ---------- Back to top ---------- */
#back-to-top {
	position: fixed;
	right: 24px; bottom: 24px;
	width: 52px; height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	background: #fff;
	color: #b9b9b9;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 900;
}
#back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#back-to-top:hover { color: var(--c-brown); }

/* ---------- Blocco "Visita il nostro negozio" ----------
   Come l'originale: banda piena azzurra (#a4b6c2) larga fino a 1500px,
   card dello stesso colore larga banda-120px (max 1380) che sale di
   190px sopra la sezione precedente (mappa o banda fotografica). */
.shop-cta {
	position: relative;
	z-index: 5;
	display: flow-root; /* evita il collasso del margine negativo del box */
	background: var(--c-blue-light);
	padding-bottom: 58px;
}
.shop-cta__box {
	max-width: 1380px;
	width: calc(100% - 120px);
	margin: -190px auto 0;
	background: var(--c-blue-light);
	text-align: center;
	padding: 60px 40px 0;
}
.shop-cta__title {
	font-family: 'Cinzel', serif;
	font-size: 41px;
	line-height: 1.25;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 55px;
}
.shop-cta__line,
.shop-cta__line a {
	font-family: 'Cinzel', serif;
	font-size: 19px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--c-text);
}
.shop-cta__line { margin: 0 0 42px; }
.shop-cta__line a:hover { color: #fff; }
.shop-cta__social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 55px;
}
.shop-cta__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--c-blue);
	color: #fff;
	transition: background .2s ease, color .2s ease;
}
.shop-cta__social-link:hover { background: #fff; color: var(--c-blue); }

@media (max-width: 768px) {
	.shop-cta__box { padding: 40px 24px 0; width: calc(100% - 40px); margin-top: -120px; }
	.shop-cta__title { font-size: 26px; letter-spacing: 3px; }
	.shop-cta__line, .shop-cta__line a { font-size: 15px; letter-spacing: 2px; }
}

/* ---------- Mappa ---------- */
.site-map { position: relative; line-height: 0; }
.site-map iframe {
	width: 100%;
	height: 496px;
	border: 0;
	filter: grayscale(1);
}

/* ---------- Parallax band (effetto qode) ---------- */
.parallax-band {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
@media (min-width: 1025px) {
	.parallax-band { background-attachment: fixed; }
}
.parallax-band__spacer { display: block; }

/* Watermark logo fisso sopra il parallax */
.parallax-band__watermark {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 14% auto;
}
@media (min-width: 1025px) {
	.parallax-band__watermark { background-attachment: fixed; }
}
@media (max-width: 1024px) {
	.parallax-band__watermark { background-size: 34% auto; }
}

/* ---------- Animazioni reveal (IntersectionObserver + data-anim) ---------- */
[data-anim] { will-change: transform, opacity, clip-path; }

[data-anim="fade"] { opacity: 0; transition: opacity .9s ease; }
[data-anim="fade"].is-in { opacity: 1; }

[data-anim="drop"] { opacity: 0; transform: translateY(-150px); transition: transform 1.5s cubic-bezier(.23, 1, .32, 1), opacity .9s ease; }
[data-anim="drop"].is-in { opacity: 1; transform: none; }

[data-anim="rise"] { opacity: 0; transform: translateY(60px); transition: transform 1.1s cubic-bezier(.23, 1, .32, 1), opacity .8s ease; }
[data-anim="rise"].is-in { opacity: 1; transform: none; }

/* Reveal orizzontale con maschera (stile RevSlider mask) */
[data-anim="mask-right"], [data-anim="mask-left"] { overflow: hidden; }
[data-anim="mask-right"] > *, [data-anim="mask-left"] > * {
	display: inline-block;
	transition: transform 2s cubic-bezier(.165, .84, .44, 1);
}
[data-anim="mask-right"] > * { transform: translateX(110%); }
[data-anim="mask-left"] > * { transform: translateX(-110%); }
[data-anim="mask-right"].is-in > *, [data-anim="mask-left"].is-in > * { transform: none; }

/* Clip reveal dal centro verticale / dall'alto / da destra */
[data-anim="clip-cv"] { clip-path: inset(50% 0 50% 0); transition: clip-path 1.5s cubic-bezier(.23, 1, .32, 1); }
[data-anim="clip-cv"].is-in { clip-path: inset(0 0 0 0); }
[data-anim="clip-t"] { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.23, 1, .32, 1); }
[data-anim="clip-t"].is-in { clip-path: inset(0 0 0 0); }
[data-anim="clip-r"] { clip-path: inset(0 0 0 100%); transition: clip-path 2s cubic-bezier(.23, 1, .32, 1); }
[data-anim="clip-r"].is-in { clip-path: inset(0 0 0 0); }

[data-anim="slide-left"] { opacity: 0; transform: translateX(-150px); transition: transform 1s cubic-bezier(.23, 1, .32, 1), opacity .7s ease; }
[data-anim="slide-left"].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
	[data-anim] > * { transform: none !important; transition: none !important; }
}

/* ---------- Pagine senza template dedicato ---------- */
.page-plain__container { max-width: var(--container); margin: 0 auto; padding: 80px 30px; }
.page-plain__title { font-size: 34px; letter-spacing: 3px; text-transform: uppercase; }