/*
 * Header e footer del builder di Kadence con l'aspetto del mockup v3 (header.site, .site-footer di pagine.css).
 * Struttura e contenuti: Customizer (wp/strumenti/imposta_testata.php); qui solo i dettagli che i controlli non coprono.
 * Solo variabili (token del mockup su --global-palette di Kadence), niente hex.
 */

/* Contenitore come la .wrap del mockup */
#masthead .site-container,
#colophon .site-container {
	max-width: none;
	width: min(1180px, 100% - 32px);
	margin-inline: auto;
	padding-inline: 0;
}

/* ---------- Header ---------- */
#masthead .site-main-header-wrap .site-header-row-container-inner {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
#masthead .site-branding a.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
#masthead .site-branding .logo-icon img {
	display: block;
	width: 49px;
	height: auto;
}
#masthead .site-branding .site-title {
	margin: 0;
	font-family: var(--f-head);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-heading);
}
#masthead .site-branding .site-description {
	margin: 0;
	font-family: var(--f-body);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--stone-700);
}

/* Voci di menu: pillola chiara al passaggio, linea sotto la pagina corrente */
#masthead .header-navigation .menu {
	gap: var(--space-1);
}
#masthead .header-navigation .menu > li > a {
	padding: var(--space-3) .7rem;
	border-radius: var(--radius-sm);
	font-size: 17px; /* come il testo del mockup (.menu a eredita da body) */
	font-weight: 600;
	line-height: 1.6;
	color: var(--color-text);
	text-decoration: none;
	transform: none; /* Kadence ne mette una neutra: il testo finisce su un livello a parte e si vede più sottile */
	transition: background-color var(--dur);
}
#masthead .header-navigation .menu > li > a:hover {
	background: var(--sea-100);
	color: var(--color-primary);
}
#masthead .header-navigation .menu > li.current-menu-item:not(.menu-item-type-custom) > a {
	color: var(--color-primary);
	box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* Pulsante Prenota */
#masthead .header-button {
	min-height: 0;
	padding: var(--space-3) 1.1rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--white);
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	text-decoration: none;
	transition: background-color var(--dur);
}
/* Nel mockup il pulsante è l'ultima voce del menu: 4px di spazio tra le voci + 8px di margine */
#masthead .site-header-main-section-right > .site-header-item {
	margin: 0;
}
#masthead .header-button {
	margin-left: calc(var(--space-1) + var(--space-2));
}
#masthead .header-button:hover {
	background: var(--color-primary-hover);
	color: var(--white);
}

/*
 * Menu mobile come nel mockup: pulsante .burger e tendina nav.menu-wrap sotto l'header (shortcode [paradiso_menu_mobile]
 * nell'elemento HTML dell'header mobile). Stessi stili di .burger, .menu e .menu-wrap di pagine.css del mockup;
 * soglia del mockup: 1100 px invece dei 1024 di Kadence.
 */
#mobile-header .site-main-header-inner-wrap {
	position: relative; /* come .nav: la tendina si apre a top: 100% */
}
#mobile-header .burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-surface);
	color: var(--color-heading);
	box-shadow: none;
	cursor: pointer;
}
#mobile-header .menu-wrap {
	display: none;
	position: absolute;
	left: -16px;
	right: -16px;
	top: 100%;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow);
}
#mobile-header .menu-wrap.open {
	display: block;
}
#mobile-header .menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-4);
	list-style: none;
}
#mobile-header .menu li {
	margin: 0;
}
#mobile-header .menu a {
	display: block;
	padding: var(--space-4) var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--f-body);
	font-size: inherit; /* come il body: 17px, 16px sotto i 600px */
	font-weight: 600;
	line-height: 1.6;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--dur);
}
#mobile-header .menu a:hover {
	background: var(--sea-100);
	color: var(--color-primary);
}
#mobile-header .menu a[aria-current="page"] {
	color: var(--color-primary);
	box-shadow: inset 0 -2px 0 var(--color-accent);
}
#mobile-header .menu .cta a {
	margin: var(--space-2) 0 0;
	padding: var(--space-3) 1.1rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--white);
	text-align: center;
}
#mobile-header .menu .cta a:hover {
	background: var(--color-primary-hover);
	color: var(--white);
}
@media (min-width: 1025px) and (max-width: 1100px) {
	#main-header {
		display: none;
	}
	#mobile-header {
		display: block;
	}
}

/* ---------- Footer ---------- */
#colophon .site-middle-footer-wrap,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container-inner {
	background: var(--color-inverse-bg);
	border: 0;
}
#colophon {
	color: var(--color-inverse-text);
	font-size: .95rem;
	line-height: 1.6;
}
#colophon .site-middle-footer-wrap .site-footer-row-container-inner {
	padding: var(--space-7) 0 0;
}
#colophon .site-middle-footer-inner-wrap {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-6);
	padding: 0;
}
#colophon .widget {
	margin: 0;
	padding: 0; /* i widget sono <section>: in home prenderebbero il padding di "section" di home.css */
}
#colophon .widget-title {
	margin: 0 0 var(--space-2);
	padding: 0;
	font-family: var(--f-head);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--white);
}
#colophon ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.6; /* Kadence mette 1.8 ai widget */
}
#colophon ul.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: inherit;
}
#colophon a {
	display: inline-block;
	padding: 6px 0;
	color: inherit;
	text-decoration: none;
}
#colophon a:hover {
	color: var(--white);
	text-decoration: none;
}

/* Contatti */
#colophon .paradiso-contatti p {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin: var(--space-2) 0 0;
}
#colophon .paradiso-contatti .ico {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Riga in basso: copyright e partner */
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner {
	padding: 0 0 var(--space-7);
}
#colophon .site-bottom-footer-inner-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-6);
	padding: var(--space-4) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--color-inverse-text) 20%, transparent);
}
#colophon .footer-html {
	margin: 0;
}
/* Nel mockup è un p come gli altri del footer (flex) */
#colophon .footer-html p {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	margin: 0;
	font-size: .85rem;
}
#colophon .partners {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-size: .85rem;
}
#colophon .partners a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 12px;
	background: var(--white);
	border-radius: var(--radius-sm);
}
#colophon .partners a:hover {
	box-shadow: 0 0 0 2px var(--sand-300);
}
#colophon .partners img {
	width: auto;
	height: 28px;
}

@media (max-width: 1024px) {
	#colophon .site-middle-footer-inner-wrap {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	#colophon .site-middle-footer-inner-wrap {
		grid-template-columns: 1fr;
	}
	#colophon .partners > span {
		flex-basis: 100%;
	}
}