/**
 * Enorosei — layout: contenitori, sezioni, griglie, contenuti.
 * Header e footer: vedi sezioni dedicate in fondo (aggiunte nel Task 2).
 */

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.site-main {
	display: block;
	min-height: 40vh;
}

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

.section--tight {
	padding-block: var(--s-8);
}

.section--paper {
	background: var(--c-paper);
	border-top: 1px solid var(--c-line);
}

.section--sand {
	background: var(--c-sand);
}

.section--ink {
	background: var(--c-ink);
	color: var(--c-on-dark);
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4) var(--s-6);
	margin-bottom: var(--s-7);
}

.section__head h2 {
	margin: 0;
}

.stack > * + * {
	margin-top: var(--s-4);
}

.grid {
	display: grid;
	gap: var(--s-6);
}

@media (min-width: 600px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Contenuto editoriale (articoli, pagine standard, pagine legali) */
.entry-content {
	font-size: var(--fs-md);
	line-height: 1.75;
	color: var(--c-text-2);
}

.entry-content > * {
	max-width: var(--container-narrow);
}

.entry-content > .alignwide {
	max-width: var(--container);
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--s-7);
	color: var(--c-text);
}

.entry-content h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.entry-content h3 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); }

.entry-content ul,
.entry-content ol {
	padding-left: 1.25em;
	margin: 0 0 var(--s-4);
}

.entry-content li + li {
	margin-top: var(--s-2);
}

.entry-content img {
	border-radius: var(--radius);
}

/* Solo i link di testo: i bottoni (anche quelli dei blocchi WooCommerce) mantengono i loro colori. */
.entry-content a:not(.wp-element-button, .wp-block-button__link, .button, .btn, .wc-block-components-button) {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
}

.page-content-wide .entry-content > * {
	max-width: none;
}

/*
 * Pagine Carrello / Pagamento / Mio account: il vecchio contenuto (Elementor/editor a blocchi) può iniziare con un
 * blocco "Separatore" trasparente o altri blocchi vuoti usati come spaziatori. Il tema gestisce già gli spazi,
 * quindi quelli iniziali vengono nascosti (il separatore, con i suoi margini di 3 rem, creava un vuoto enorme).
 */
.page-content-wide .entry-content > .wp-block-separator:first-child,
.page-content-wide .entry-content > .wp-block-spacer:first-child {
	display: none;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.topbar {
	background: var(--c-ink);
	color: var(--c-on-dark);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 40px;
}

.topbar__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	margin: 0;
}

.topbar a {
	color: var(--c-on-dark);
	text-decoration: none;
}

.topbar a:hover {
	color: var(--c-gold);
}

.topbar__sep {
	color: var(--c-gold);
}

@media (max-width: 599px) {
	.topbar__info > span:first-child,
	.topbar__sep,
	.topbar .social {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
		min-height: 34px;
	}
}

/* Social */
.social {
	display: flex;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social--icons {
	gap: var(--s-2);
}

.social--icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #3A4466;
	border-radius: 999px;
	color: var(--c-on-dark);
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.social--icons a:hover {
	border-color: var(--c-gold);
	color: var(--c-gold);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 500;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow var(--t-base) var(--ease);
}

/* Sotto i 600 px la barra di amministrazione di WordPress scorre via con la pagina (non è fissa): niente spazio sopra l'header. */
@media screen and (max-width: 600px) {
	.site-header {
		top: 0;
	}
}

.site-header.is-stuck {
	box-shadow: 0 6px 24px rgba(13, 20, 39, 0.08);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: var(--s-3);
	min-height: var(--header-h);
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--c-ink);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease);
}

.icon-button:hover {
	background: var(--c-sand);
	color: var(--c-ink);
}

/* Branding */
.branding {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	gap: var(--s-3);
	color: var(--c-ink);
	text-decoration: none;
	min-width: 0;
}

.branding:hover {
	color: var(--c-ink);
}

.branding__logo {
	width: 52px;
	height: 52px;
	object-fit: contain;
}

.branding__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.branding__name {
	font-family: var(--f-serif);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
}

.branding__tagline {
	display: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-gold-text);
	white-space: nowrap;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

@media (max-width: 419px) {
	.site-header__inner {
		gap: var(--s-2);
	}

	.branding {
		gap: var(--s-2);
	}

	.branding__logo {
		width: 40px;
		height: 40px;
	}

	.branding__name {
		font-size: 1rem;
	}

	.site-header__actions {
		gap: 0;
	}
}

.site-header__search,
.account-link,
.primary-nav {
	display: none;
}

@media (min-width: 600px) {
	.account-link {
		display: inline-flex;
	}
}

/* Header più largo del contenuto (1360px) per far stare logo, menu e azioni. */
.topbar .container,
.site-header .container {
	max-width: calc(1360px + 2 * var(--gutter));
}

@media (min-width: 1100px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: var(--s-5);
	}

	.menu-toggle {
		display: none;
	}

	.branding {
		justify-self: start;
	}

	.branding__logo {
		width: 64px;
		height: 64px;
	}

	.branding__name {
		font-size: 1.3125rem;
	}

	.branding__tagline {
		display: block;
	}

	.primary-nav {
		display: block;
		justify-self: center;
	}
}

@media (min-width: 1380px) {
	.site-header__search {
		display: block;
		width: 220px;
		margin-right: var(--s-2);
	}

	.search-toggle {
		display: none;
	}
}

/* Menu principale desktop */
.primary-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.primary-nav__menu > li > a {
	display: block;
	padding: var(--s-3) 0;
	border-bottom: 2px solid transparent;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--c-ink);
	text-decoration: none;
	transition: border-color var(--t-fast) var(--ease);
}

.primary-nav__menu > li > a:hover,
.primary-nav__menu > .current-menu-item > a,
.primary-nav__menu > .current-menu-ancestor > a,
.primary-nav__menu > .current_page_parent > a {
	border-bottom-color: var(--c-gold);
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 44px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-ink);
	cursor: pointer;
}

.submenu-toggle .icon {
	transition: transform var(--t-fast) var(--ease);
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: -20px;
	z-index: 10;
	display: none;
	min-width: 280px;
	margin: 0;
	padding: var(--s-3) 0;
	list-style: none;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	columns: 2;
	column-gap: 0;
	width: max-content;
}

.primary-nav .sub-menu.is-open {
	display: block;
}

.primary-nav .sub-menu a {
	display: block;
	padding: 10px var(--s-5);
	font-size: 0.9375rem;
	color: var(--c-ink);
	text-decoration: none;
	break-inside: avoid;
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	background: var(--c-sand);
	color: var(--c-ink);
}

/* Form di ricerca (WooCommerce, WordPress) nell'header */
.woocommerce-product-search,
.search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.woocommerce-product-search .search-field,
.search-form .search-field {
	min-height: 44px;
	padding: 0 48px 0 18px;
	border-radius: 999px;
	background: var(--c-ivory);
	font-size: 0.875rem;
}

.woocommerce-product-search button,
.search-form .search-submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--c-ink);
	font-size: 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230D1427' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.woocommerce-product-search button:hover,
.search-form .search-submit:hover {
	background-color: var(--c-sand);
}

/* ==========================================================================
   Pannelli laterali .offcanvas (menu mobile, carrello) — non ".panel", usata da WooCommerce per le tab
   ========================================================================== */

.offcanvas {
	position: fixed;
	inset: 0;
	/* Sopra la barra di amministrazione di WordPress (z-index 99999), altrimenti ne copre titolo e "chiudi" */
	z-index: 100000;
}

.offcanvas[hidden] {
	display: none;
}

.offcanvas__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 20, 39, 0.55);
	opacity: 0;
	transition: opacity var(--t-base) var(--ease);
}

.offcanvas__dialog {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(88vw, 420px);
	background: var(--c-paper);
	box-shadow: var(--shadow-soft);
	transition: transform var(--t-base) var(--ease);
}

.offcanvas__dialog--left {
	left: 0;
	transform: translateX(-100%);
}

.offcanvas__dialog--right {
	right: 0;
	transform: translateX(100%);
}

.offcanvas.is-open .offcanvas__overlay {
	opacity: 1;
}

.offcanvas.is-open .offcanvas__dialog {
	transform: none;
}

.offcanvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 72px;
	padding: 0 var(--s-4) 0 var(--s-5);
	border-bottom: 1px solid var(--c-line);
}

.offcanvas__title {
	font-family: var(--f-serif);
	font-size: 1.5rem;
	line-height: 1.2;
}

.offcanvas__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--s-5);
	overscroll-behavior: contain;
}

.has-open-panel,
.has-open-panel body {
	overflow: hidden;
}

/* Menu mobile */
.mobile-menu__search {
	margin-bottom: var(--s-5);
}

.mobile-nav__menu,
.mobile-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--c-line);
}

.mobile-nav__menu > li > a {
	flex: 1;
	padding: var(--s-4) 0;
	font-family: var(--f-serif);
	font-size: 1.25rem;
	color: var(--c-ink);
	text-decoration: none;
}

.mobile-nav .submenu-toggle {
	width: 44px;
}

.mobile-nav .sub-menu {
	display: none;
	flex-basis: 100%;
	padding-bottom: var(--s-3);
}

.mobile-nav .sub-menu.is-open {
	display: block;
}

.mobile-nav .sub-menu a {
	display: block;
	padding: 10px var(--s-4);
	color: var(--c-text-2);
	text-decoration: none;
}

.mobile-nav .current-menu-item > a {
	color: var(--c-gold-text);
}

.mobile-menu__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-6);
	font-size: var(--fs-sm);
}

.mobile-menu__contacts a {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--c-text-2);
	text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--c-ink);
	color: var(--c-on-dark);
	padding-top: var(--s-9);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.site-footer a {
	color: var(--c-on-dark);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--c-gold);
}

.site-footer__top {
	display: grid;
	gap: var(--s-6);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--c-ink-line);
}

@media (min-width: 900px) {
	.site-footer__top {
		grid-template-columns: 1fr minmax(0, 520px);
		align-items: end;
		gap: var(--s-8);
	}
}

.site-footer__claim-text {
	margin: 0;
	font-family: var(--f-serif);
	font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	line-height: 1.1;
	color: var(--c-ivory);
}

.site-footer__claim-text em {
	color: var(--c-gold-soft);
}

.site-footer__columns {
	display: grid;
	gap: var(--s-7) var(--s-6);
	padding-block: var(--s-7);
}

@media (min-width: 600px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.site-footer__columns {
		grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
	}
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	align-items: flex-start;
}

.site-footer__logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.site-footer__name {
	font-family: var(--f-serif);
	font-size: 1.5rem;
	color: var(--c-ivory);
}

.site-footer__tagline {
	margin: 0;
	color: var(--c-muted-light);
}

.site-footer__heading {
	margin: 0 0 var(--s-4);
	font-family: var(--f-sans);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-gold);
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer address {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	font-style: normal;
}

.site-footer__bottom {
	border-top: 1px solid var(--c-ink-line);
	color: var(--c-muted-light);
	font-size: 0.8125rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-6);
	padding-block: var(--s-5);
}

.site-footer__bottom p {
	margin: 0;
}

/* Link legali (privacy, cookie, termini, recesso…): una riga discreta ma sempre visibile, anche "Recedi dal contratto qui". */
.site-footer__legal {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
}

.site-footer__legal a,
.site-footer__legal .enorosei-cc-manage {
	color: var(--c-on-dark, var(--c-ivory));
	font-weight: 400;
	text-decoration: none;
	opacity: 0.85;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__legal .enorosei-cc-manage:hover,
.site-footer__legal .enorosei-cc-manage:focus-visible {
	color: var(--c-gold-soft);
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Crediti: riga a sé, centrata, sotto copyright e avviso. */
.site-footer__credit {
	flex-basis: 100%;
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-ink-line);
	text-align: center;
}

.site-footer__credit a {
	color: var(--c-ivory);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
	color: var(--c-gold-soft);
}

.site-footer__heart {
	display: inline-block;
	margin-inline: 0.2em;
	vertical-align: -2px;
	color: #E25563;
}