/* =========================================================================
 * QuoVadis Core v2 — Chrome (Header + Footer)
 * Header sticky, nav desktop + mobile panel, footer 4 colonne.
 * Dipende da qv-tokens.css.
 * ========================================================================= */

/* =========================================================================
 * Header
 * ========================================================================= */
.qv-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--qv-z-header);
	background: var(--qv-neutral-0);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--qv-tr-normal), border-color var(--qv-tr-normal);
}

/* Ombra quando si è scrollato — toggle via JS */
.qv-header.is-scrolled {
	box-shadow: var(--qv-shadow);
	border-bottom-color: var(--qv-border);
}

.qv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qv-sp-4);
	min-height: var(--qv-header-h);
	padding-block: var(--qv-sp-2);
}

/* --- Brand / logo --------------------------------------------------------- */
.qv-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--qv-sp-2);
	color: var(--qv-green-700);
	text-decoration: none;
	font-weight: var(--qv-fw-bold);
	font-size: var(--qv-fs-lg);
	flex-shrink: 0;
}

.qv-header__brand:hover,
.qv-header__brand:focus-visible {
	color: var(--qv-green-800);
	text-decoration: none;
}

.qv-header__logo {
	display: block;
	height: 32px;
	width: auto;
}

@media (min-width: 768px) {
	.qv-header__logo { height: 36px; }
}

/* --- Navigation desktop --------------------------------------------------- */
.qv-header__nav {
	display: none; /* nascosta su mobile */
}

.qv-header__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--qv-sp-2);
}

.qv-header__nav-link {
	display: inline-flex;
	align-items: center;
	padding: var(--qv-sp-2) var(--qv-sp-3);
	color: var(--qv-fg);
	font-size: var(--qv-fs-sm);
	font-weight: var(--qv-fw-semibold);
	text-decoration: none;
	border-radius: var(--qv-r-md);
	transition: background var(--qv-tr-fast), color var(--qv-tr-fast);
}

.qv-header__nav-link:hover,
.qv-header__nav-link:focus-visible {
	background: var(--qv-neutral-100);
	color: var(--qv-green-700);
	text-decoration: none;
}

.qv-header__nav-link.is-active,
.qv-header__nav-link[aria-current="page"] {
	color: var(--qv-green-700);
	background: var(--qv-green-50);
}

/* --- CTA --- */
.qv-header__cta {
	display: none;
	margin-left: var(--qv-sp-2);
}

/* --- Toggle mobile (hamburger) ------------------------------------------- */
.qv-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--qv-border);
	border-radius: var(--qv-r-md);
	cursor: pointer;
	color: var(--qv-fg);
	transition: background var(--qv-tr-fast), border-color var(--qv-tr-fast);
}

.qv-header__toggle:hover {
	background: var(--qv-neutral-100);
	border-color: var(--qv-border-strong);
}

.qv-header__toggle:focus-visible {
	outline: none;
	box-shadow: var(--qv-shadow-focus);
}

/* Icona hamburger — 3 barre che si trasformano in X */
.qv-header__toggle-bars {
	position: relative;
	width: 22px;
	height: 16px;
	display: inline-block;
}

.qv-header__toggle-bars::before,
.qv-header__toggle-bars::after,
.qv-header__toggle-bars span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--qv-tr-normal), opacity var(--qv-tr-normal), top var(--qv-tr-normal);
}

.qv-header__toggle-bars::before { top: 0; }
.qv-header__toggle-bars span    { top: 7px; }
.qv-header__toggle-bars::after  { top: 14px; }

/* Stato aperto */
.qv-header__toggle[aria-expanded="true"] .qv-header__toggle-bars::before {
	top: 7px;
	transform: rotate(45deg);
}

.qv-header__toggle[aria-expanded="true"] .qv-header__toggle-bars span {
	opacity: 0;
}

.qv-header__toggle[aria-expanded="true"] .qv-header__toggle-bars::after {
	top: 7px;
	transform: rotate(-45deg);
}

/* --- Mobile panel --------------------------------------------------------- */
.qv-header__mobile {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--qv-neutral-0);
	border-top: 1px solid var(--qv-border);
	box-shadow: var(--qv-shadow-md);
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height var(--qv-tr-normal), visibility 0s linear var(--qv-tr-normal);
}

.qv-header__mobile.is-open {
	max-height: calc(100vh - var(--qv-header-h));
	overflow-y: auto;
	visibility: visible;
	transition: max-height var(--qv-tr-normal), visibility 0s;
}

.qv-header__mobile-list {
	list-style: none;
	margin: 0;
	padding: var(--qv-sp-3) 0;
	display: flex;
	flex-direction: column;
}

.qv-header__mobile-link {
	display: block;
	padding: var(--qv-sp-3) var(--qv-sp-4);
	color: var(--qv-fg);
	font-size: var(--qv-fs-base);
	font-weight: var(--qv-fw-semibold);
	text-decoration: none;
	border-left: 3px solid transparent;
}

.qv-header__mobile-link:hover,
.qv-header__mobile-link:focus-visible {
	background: var(--qv-neutral-100);
	color: var(--qv-green-700);
	text-decoration: none;
}

.qv-header__mobile-link.is-active,
.qv-header__mobile-link[aria-current="page"] {
	color: var(--qv-green-700);
	background: var(--qv-green-50);
	border-left-color: var(--qv-green-600);
}

.qv-header__mobile-cta {
	padding: var(--qv-sp-3) var(--qv-sp-4) var(--qv-sp-4);
}

/* --- Breakpoint desktop --------------------------------------------------- */
@media (min-width: 1024px) {
	.qv-header__nav    { display: block; }
	.qv-header__cta    { display: inline-flex; }
	.qv-header__toggle { display: none; }
	.qv-header__mobile { display: none; }
}

/* =========================================================================
 * Footer
 * ========================================================================= */
.qv-footer {
	background: var(--qv-neutral-900);
	color: var(--qv-neutral-300);
	padding-top: var(--qv-sp-7);
	font-size: var(--qv-fs-sm);
	line-height: var(--qv-lh-relaxed);
}

.qv-footer a {
	color: var(--qv-neutral-300);
	text-decoration: none;
	transition: color var(--qv-tr-fast);
}

.qv-footer a:hover,
.qv-footer a:focus-visible {
	color: var(--qv-neutral-0);
	text-decoration: underline;
}

.qv-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qv-sp-6);
	padding-bottom: var(--qv-sp-6);
}

.qv-footer__col-title {
	font-size: var(--qv-fs-sm);
	font-weight: var(--qv-fw-bold);
	color: var(--qv-neutral-0);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--qv-sp-3);
}

.qv-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--qv-sp-2);
}

.qv-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--qv-sp-2);
	color: var(--qv-neutral-0);
	font-weight: var(--qv-fw-bold);
	font-size: var(--qv-fs-lg);
	margin-bottom: var(--qv-sp-3);
	text-decoration: none;
}

.qv-footer__brand:hover {
	color: var(--qv-green-300);
	text-decoration: none;
}

.qv-footer__about {
	color: var(--qv-neutral-400);
	max-width: 32ch;
	margin: 0;
}

.qv-footer__social {
	display: flex;
	gap: var(--qv-sp-2);
	margin-top: var(--qv-sp-3);
}

.qv-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--qv-r-full);
	background: var(--qv-neutral-800);
	color: var(--qv-neutral-200);
}

.qv-footer__social a:hover {
	background: var(--qv-green-600);
	color: var(--qv-neutral-0);
}

/* --- Bottom legal strip --------------------------------------------------- */
.qv-footer__legal {
	border-top: 1px solid var(--qv-neutral-800);
	padding-block: var(--qv-sp-4);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--qv-sp-2);
	font-size: var(--qv-fs-xs);
	color: var(--qv-neutral-400);
}

.qv-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qv-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 640px) {
	.qv-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.qv-footer__cols {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: var(--qv-sp-7);
	}

	.qv-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =========================================================================
 * Toast globale — feedback non bloccante (iniettato da qv-chrome.js)
 * ========================================================================= */
.qv-toast-container {
	position: fixed;
	left: 50%;
	bottom: calc(var(--qv-sp-5, 1.5rem) + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: var(--qv-z-toast, 1000);
	display: flex;
	flex-direction: column;
	gap: var(--qv-sp-2, 0.5rem);
	align-items: center;
	pointer-events: none;
	width: max-content;
	max-width: calc(100vw - 2rem);
}

.qv-toast {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--qv-sp-3, 0.75rem);
	padding: var(--qv-sp-3, 0.75rem) var(--qv-sp-4, 1rem);
	border-radius: var(--qv-r-lg, 16px);
	background: var(--qv-neutral-900, #171717);
	color: var(--qv-neutral-0, #fff);
	font-size: var(--qv-fs-sm, 0.875rem);
	font-weight: var(--qv-fw-medium, 500);
	box-shadow: var(--qv-shadow-lg, 0 12px 28px rgba(0,0,0,0.14));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--qv-tr-normal, 200ms ease), transform var(--qv-tr-normal, 200ms ease);
}

.qv-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.qv-toast__action {
	color: var(--qv-green-300, #86efac);
	font-weight: var(--qv-fw-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
}

.qv-toast__action:hover,
.qv-toast__action:focus-visible {
	color: var(--qv-green-200, #bbf7d0);
	text-decoration: underline;
}

/* Stato bottone pick attivo (card server-rendered) */
.qv-card__pick.is-picked {
	border-color: var(--qv-green-600, #16a34a);
	color: var(--qv-green-700, #15803d);
}

@media (prefers-reduced-motion: reduce) {
	.qv-toast { transition: opacity 0.01ms; transform: none; }
}