/**
 * Bagout — design system & homepage styles
 *
 * Diario di viaggio: mappe disegnate a mano e racconti lenti.
 * Palette salvia / crema / terracotta, serif Fraunces + sans Inter.
 *
 * @package getbagout
 */

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Surfaces */
	--bo-paper: #f6f7f4;
	--bo-paper-2: #f1f3ee;
	--bo-sage-50: #edf1e9;
	--bo-sage-100: #e5ebe0;
	--bo-sage-150: #dee6d8;
	--bo-sage-200: #ccd9c3;
	--bo-sage-300: #a7bea2;
	--bo-sage-500: #7d8f75; /* mid green — community section */
	--bo-sage-600: #6c7d64;
	--bo-forest-700: #454f3f;
	--bo-forest-800: #2b332d;
	--bo-forest-900: #232924; /* darkest — cards & CTA */

	/* Ink */
	--bo-ink: #232924;
	--bo-ink-soft: #4a534592;
	--bo-muted: #6f7a6b;
	--bo-muted-2: #8a938420;
	--bo-cream-text: #eef1ea;

	/* Accent */
	--bo-terracotta: #c88b6f;
	--bo-terracotta-soft: #d9c8b0;
	--bo-clay-card: #efe7de;

	/* Lines */
	--bo-line: #e2e4dd;
	--bo-line-strong: #d4d8cd;
	--bo-line-dark: #ffffff1f;

	/* Type */
	--bo-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--bo-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--bo-container: 1180px;
	--bo-gutter: clamp(1.25rem, 4vw, 3rem);
	--bo-radius: 22px;
	--bo-radius-lg: 30px;
	--bo-radius-pill: 999px;
	--bo-shadow-sm: 0 1px 2px rgba(35, 41, 36, 0.05);
	--bo-shadow-md: 0 18px 40px -24px rgba(35, 41, 36, 0.35);
	--bo-shadow-lg: 0 40px 80px -40px rgba(35, 41, 36, 0.45);
}

/*--------------------------------------------------------------
# Base overrides
--------------------------------------------------------------*/
body {
	font-family: var(--bo-sans);
	color: var(--bo-ink);
	background: var(--bo-paper);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.home #page,
body.page-template-front-page #page {
	max-width: none;
	margin: 0;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
	color: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--bo-serif);
	font-weight: 400;
	color: var(--bo-ink);
	letter-spacing: -0.015em;
	line-height: 1.08;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--bo-sage-300);
	color: var(--bo-forest-900);
}

.bo-container {
	width: 100%;
	max-width: var(--bo-container);
	margin-inline: auto;
	padding-inline: var(--bo-gutter);
}

.bo-serif { font-family: var(--bo-serif); }
.bo-italic { font-style: italic; }
.bo-accent { color: var(--bo-sage-500); font-style: italic; }

/*--------------------------------------------------------------
# Eyebrow / section heads
--------------------------------------------------------------*/
.bo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--bo-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bo-sage-600);
	margin: 0 0 1.1rem;
}

.bo-eyebrow::before {
	content: "";
	width: 1.8em;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.bo-eyebrow--center { justify-content: center; }
.bo-eyebrow--light { color: #dfe7d9; }

.bo-section {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

.bo-section-head {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: end;
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.bo-section-head h2 {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 3.15rem);
}

.bo-section-head p {
	margin: 0;
	color: var(--bo-muted);
	font-size: 1.05rem;
	max-width: 34ch;
}

.bo-section-head .bo-link {
	justify-self: start;
}

@media (max-width: 720px) {
	.bo-section-head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/*--------------------------------------------------------------
# Buttons & links
--------------------------------------------------------------*/
.bo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--bo-sans);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.95em 1.6em;
	border-radius: var(--bo-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.bo-btn:hover { transform: translateY(-2px); }
.bo-btn:active { transform: translateY(0); }

.bo-btn--dark,
.bo-btn--dark:visited {
	background: var(--bo-forest-900);
	color: var(--bo-cream-text);
	box-shadow: var(--bo-shadow-sm);
}
.bo-btn--dark:hover { background: #2f382f; color: var(--bo-cream-text); box-shadow: var(--bo-shadow-md); }

.bo-btn--green,
.bo-btn--green:visited {
	background: var(--bo-sage-500);
	color: #fbfcf9;
}
.bo-btn--green:hover { background: var(--bo-sage-600); color: #fbfcf9; }

.bo-btn--cream,
.bo-btn--cream:visited {
	background: var(--bo-paper);
	color: var(--bo-ink);
	box-shadow: var(--bo-shadow-sm);
}
.bo-btn--cream:hover { background: #fff; color: var(--bo-ink); box-shadow: var(--bo-shadow-md); }

.bo-btn--outline {
	background: transparent;
	color: var(--bo-ink);
	border-color: var(--bo-line-strong);
}
.bo-btn--outline:hover { border-color: var(--bo-sage-500); background: var(--bo-sage-50); }

.bo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	color: var(--bo-ink);
	border-bottom: 1px solid transparent;
	transition: gap 0.18s ease, border-color 0.18s ease;
}
.bo-link:hover { gap: 0.7em; border-bottom-color: currentColor; }
.bo-link--light { color: var(--bo-cream-text); }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header.bo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	background: color-mix(in srgb, var(--bo-paper) 82%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.bo-header.is-stuck {
	border-bottom-color: var(--bo-line);
	box-shadow: 0 10px 30px -26px rgba(35, 41, 36, 0.5);
}

.bo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
}

.bo-brand,
.bo-brand:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--bo-ink);
}

.bo-brand__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bo-sage-500);
	flex: none;
}
.bo-brand__mark span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bo-paper);
}

.bo-brand__name {
	font-family: var(--bo-serif);
	font-size: 1.55rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.bo-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.1rem);
}

.bo-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bo-nav__menu a {
	text-decoration: none;
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--bo-forest-700);
	padding-block: 0.3em;
	position: relative;
	transition: color 0.18s ease;
}
.bo-nav__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1.5px;
	background: var(--bo-sage-500);
	transition: width 0.22s ease;
}
.bo-nav__menu a:hover { color: var(--bo-ink); }
.bo-nav__menu a:hover::after,
.bo-nav__menu .current-menu-item > a::after { width: 100%; }

.bo-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bo-line-strong);
	border-radius: 12px;
	cursor: pointer;
}
.bo-nav__toggle span {
	display: block;
	width: 20px;
	height: 1.8px;
	margin-inline: auto;
	background: var(--bo-ink);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
	.bo-nav__toggle { display: flex; }
	.bo-header .bo-btn--dark { display: none; }
	.bo-nav__menu {
		position: fixed;
		inset: 78px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem var(--bo-gutter) 1.5rem;
		background: var(--bo-paper);
		border-bottom: 1px solid var(--bo-line);
		box-shadow: var(--bo-shadow-md);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.22s ease, opacity 0.22s ease;
	}
	.bo-nav__menu.is-open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.bo-nav__menu li { border-bottom: 1px solid var(--bo-line); }
	.bo-nav__menu a { display: block; padding: 1rem 0; font-size: 1.1rem; }
	.bo-nav__toggle.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
	.bo-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
	.bo-nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.bo-hero {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}

.bo-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.bo-hero__title {
	font-size: clamp(2.9rem, 6.6vw, 5.1rem);
	line-height: 1.0;
	letter-spacing: -0.025em;
	margin: 0 0 1.6rem;
}

.bo-hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	color: var(--bo-muted);
	max-width: 44ch;
	margin: 0 0 2rem;
}

.bo-hero__actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
}

/* Hero map visual */
.bo-hero__visual { position: relative; }

.bo-map-card {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--bo-radius-lg);
	overflow: hidden;
	background:
		repeating-linear-gradient(135deg, #e4ebe0 0 2px, transparent 2px 16px),
		linear-gradient(160deg, #eef2ea, #dfe7d9);
	border: 1px solid var(--bo-line);
	box-shadow: var(--bo-shadow-lg);
}

.bo-map-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.bo-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 0.95em;
	background: var(--bo-paper);
	border-radius: var(--bo-radius-pill);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--bo-forest-700);
	box-shadow: var(--bo-shadow-md);
}
.bo-chip--tl { top: 5%; right: 6%; }

.bo-itin-mini {
	position: absolute;
	left: 6%;
	bottom: 6%;
	padding: 0.85rem 1.1rem;
	background: var(--bo-paper);
	border-radius: 16px;
	box-shadow: var(--bo-shadow-md);
	min-width: 150px;
}
.bo-itin-mini__label {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bo-sage-600);
}
.bo-itin-mini__title {
	font-family: var(--bo-serif);
	font-size: 1.15rem;
	margin: 0.15rem 0 0.1rem;
}
.bo-itin-mini__meta {
	font-size: 0.78rem;
	color: var(--bo-muted);
}

.bo-pin { transition: transform 0.2s ease; }

/*--------------------------------------------------------------
# Stats
--------------------------------------------------------------*/
.bo-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--bo-line);
}
.bo-stat__num {
	font-family: var(--bo-serif);
	font-size: clamp(2.2rem, 4vw, 3rem);
	line-height: 1;
}
.bo-stat__label {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--bo-muted);
}

/*--------------------------------------------------------------
# Section: il cuore di Bagout (mappe)
--------------------------------------------------------------*/
.bo-cuore {
	background:
		radial-gradient(120% 90% at 80% 0%, #eef2ea 0%, transparent 55%),
		linear-gradient(180deg, var(--bo-sage-50), var(--bo-sage-100));
}

.bo-cuore__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

/* Interactive Italy map */
.bo-italy {
	position: relative;
	border-radius: var(--bo-radius);
	overflow: hidden;
	background:
		linear-gradient(0deg, rgba(125,143,117,0.10), rgba(125,143,117,0.10)),
		repeating-linear-gradient(0deg, transparent 0 39px, #c7d3bf60 39px 40px),
		repeating-linear-gradient(90deg, transparent 0 39px, #c7d3bf60 39px 40px),
		linear-gradient(150deg, #e7efe1, #dbe6d4);
	border: 1px solid var(--bo-sage-200);
	min-height: 420px;
}
.bo-italy__flag {
	position: absolute;
	top: 18px;
	left: 18px;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bo-sage-600);
	background: #ffffffb0;
	padding: 0.4em 0.7em;
	border-radius: var(--bo-radius-pill);
}
.bo-italy svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.bo-mappin {
	cursor: pointer;
	outline: none;
}
.bo-mappin circle { transition: r 0.2s ease, fill 0.2s ease; }
.bo-mappin:hover circle,
.bo-mappin:focus-visible circle,
.bo-mappin.is-active circle {
	fill: var(--bo-terracotta);
}
.bo-mappin__label {
	font-family: var(--bo-sans);
	font-size: 12px;
	font-weight: 600;
	fill: var(--bo-forest-800);
}

/* Featured itinerary card */
.bo-itin {
	display: flex;
	flex-direction: column;
	background: var(--bo-paper);
	border: 1px solid var(--bo-line);
	border-radius: var(--bo-radius);
	overflow: hidden;
	box-shadow: var(--bo-shadow-md);
}
.bo-itin__photo {
	aspect-ratio: 16 / 10;
	position: relative;
	background:
		repeating-linear-gradient(135deg, #e7ebe2 0 2px, transparent 2px 15px),
		linear-gradient(160deg, #eef1eb, #e4e9df);
	display: grid;
	place-items: center;
}
.bo-itin__photo-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 0.72rem;
	font-weight: 600;
	color: #fbf7f2;
	background: var(--bo-terracotta);
	padding: 0.35em 0.8em;
	border-radius: var(--bo-radius-pill);
}
.bo-itin__placeholder {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.75rem;
	color: #9aa596;
	letter-spacing: 0.05em;
}
.bo-itin__body {
	padding: clamp(1.3rem, 2.5vw, 1.8rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}
.bo-itin__title { font-size: 1.7rem; margin: 0; }
.bo-itin__meta { font-size: 0.9rem; color: var(--bo-muted); }
.bo-itin__desc { color: var(--bo-ink); opacity: 0.85; margin: 0; }
.bo-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.bo-tag {
	font-size: 0.82rem;
	color: var(--bo-forest-700);
	background: var(--bo-sage-100);
	border: 1px solid var(--bo-line-strong);
	padding: 0.35em 0.85em;
	border-radius: var(--bo-radius-pill);
}
.bo-itin .bo-btn { margin-top: auto; }

/*--------------------------------------------------------------
# Section: dal diario (racconti)
--------------------------------------------------------------*/
.bo-diario { background: var(--bo-paper); }

.bo-cards-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
}

.bo-article {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.bo-article__photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--bo-radius);
	display: grid;
	place-items: center;
	margin-bottom: 1.1rem;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bo-article:hover .bo-article__photo {
	transform: translateY(-4px);
	box-shadow: var(--bo-shadow-md);
}
.bo-article__photo--a {
	background:
		repeating-linear-gradient(135deg, #e2e6dd 0 2px, transparent 2px 15px),
		linear-gradient(160deg, #eaefe4, #dde4d6);
}
.bo-article__photo--b {
	background:
		repeating-linear-gradient(135deg, #ece0d6 0 2px, transparent 2px 15px),
		linear-gradient(160deg, #f2e8de, #e7d7c8);
}
.bo-article__photo--c {
	background:
		repeating-linear-gradient(135deg, #e4e8e3 0 2px, transparent 2px 15px),
		linear-gradient(160deg, #eef1ec, #e0e6df);
}
.bo-article__meta {
	font-size: 0.82rem;
	color: var(--bo-muted);
	margin-bottom: 0.4rem;
}
.bo-article__title {
	font-size: 1.4rem;
	margin: 0 0 0.5rem;
}
.bo-article:hover .bo-article__title { text-decoration: underline; text-underline-offset: 3px; }
.bo-article__excerpt {
	font-size: 0.98rem;
	color: var(--bo-muted);
	margin: 0;
}

/*--------------------------------------------------------------
# Section: community (Racconta la tua città)
--------------------------------------------------------------*/
.bo-community {
	background: var(--bo-sage-500);
	color: var(--bo-cream-text);
}
.bo-community__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.bo-community h2 {
	color: #fbfcf9;
	font-size: clamp(2.1rem, 4.6vw, 3.2rem);
	margin: 0 0 1.3rem;
}
.bo-community__lead {
	color: #e7ede2;
	font-size: 1.05rem;
	max-width: 42ch;
	margin: 0 0 1.8rem;
}
.bo-steps {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.bo-steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: center;
	color: #eef2e9;
}
.bo-steps__n {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #ffffff5c;
	font-size: 0.85rem;
	font-weight: 600;
}
.bo-community .bo-btn--cream { align-self: start; }

.bo-quotes { display: grid; gap: 1rem; }
.bo-quote {
	border: 1px solid var(--bo-line-dark);
	border-radius: var(--bo-radius);
	padding: 1.2rem 1.4rem;
	background: #ffffff0d;
}
.bo-quote__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.7rem;
}
.bo-quote__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: var(--bo-serif);
	font-size: 1.05rem;
	color: var(--bo-forest-900);
	flex: none;
}
.bo-quote__avatar--a { background: var(--bo-terracotta-soft); }
.bo-quote__avatar--b { background: var(--bo-sage-300); }
.bo-quote__avatar--c { background: #d3b3a4; }
.bo-quote__name { font-weight: 600; color: #fbfcf9; font-size: 0.98rem; }
.bo-quote__place { font-size: 0.8rem; color: #d6ddce; }
.bo-quote__text {
	font-family: var(--bo-serif);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.5;
	color: #f3f6ef;
	margin: 0;
}

/*--------------------------------------------------------------
# Section: manifesto
--------------------------------------------------------------*/
.bo-manifesto { background: var(--bo-paper); text-align: center; }
.bo-manifesto__inner { max-width: 24ch; margin-inline: auto; }
.bo-manifesto__text {
	font-family: var(--bo-serif);
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.28;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 20ch;
	margin-inline: auto;
}
.bo-manifesto__text .bo-accent { color: var(--bo-sage-500); }

/*--------------------------------------------------------------
# Newsletter CTA
--------------------------------------------------------------*/
.bo-news-wrap { background: var(--bo-paper); padding-bottom: clamp(3rem, 6vw, 5rem); }
.bo-news {
	background:
		radial-gradient(120% 140% at 100% 0%, #2f3a30 0%, transparent 60%),
		var(--bo-forest-900);
	color: var(--bo-cream-text);
	border-radius: var(--bo-radius-lg);
	padding: clamp(2rem, 4.5vw, 3.5rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.bo-news h2 {
	color: #f5f7f2;
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	margin: 0 0 0.8rem;
}
.bo-news p { color: #c3ccbd; margin: 0; max-width: 34ch; }
.bo-news__form {
	display: flex;
	gap: 0.7rem;
	background: #ffffff0f;
	border: 1px solid var(--bo-line-dark);
	border-radius: var(--bo-radius-pill);
	padding: 0.4rem 0.4rem 0.4rem 1.3rem;
}
.bo-news__form input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	color: #eef1ea;
	font-family: var(--bo-sans);
	font-size: 1rem;
	outline: none;
}
.bo-news__form input::placeholder { color: #9aa593; }

@media (max-width: 760px) {
	.bo-news { grid-template-columns: 1fr; }
	.bo-news__form { flex-direction: column; padding: 0.5rem; border-radius: var(--bo-radius); }
	.bo-news__form input { padding: 0.9rem 1rem; }
	.bo-news__form .bo-btn { width: 100%; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer.bo-footer {
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--bo-sage-100);
	border-top: 1px solid var(--bo-line);
	color: var(--bo-ink);
}
.bo-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.bo-footer__desc { color: var(--bo-muted); margin: 1rem 0 0; max-width: 32ch; }
.bo-footer__col h3 {
	font-family: var(--bo-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bo-sage-600);
	margin: 0 0 1rem;
}
.bo-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.bo-footer__col a {
	text-decoration: none;
	color: var(--bo-forest-700);
	transition: color 0.18s ease;
}
.bo-footer__col a:hover { color: var(--bo-ink); }
.bo-footer__bar {
	border-top: 1px solid var(--bo-line-strong);
	padding-block: 1.5rem;
	font-size: 0.86rem;
	color: var(--bo-muted);
}

@media (max-width: 720px) {
	.bo-footer__grid { grid-template-columns: 1fr 1fr; }
	.bo-footer__brand-col { grid-column: 1 / -1; }
}

/*--------------------------------------------------------------
# Page: Mappe (Travel Map)
--------------------------------------------------------------*/
.bo-mappe { background: var(--bo-paper); }

.bo-page-hero {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background:
		radial-gradient(120% 90% at 85% 0%, #eef2ea 0%, transparent 55%),
		linear-gradient(180deg, var(--bo-sage-50), var(--bo-paper));
	border-bottom: 1px solid var(--bo-line);
}
.bo-page-hero__title {
	font-size: clamp(2.4rem, 5.4vw, 4rem);
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}
.bo-page-hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	color: var(--bo-muted);
	max-width: 52ch;
	margin: 0;
}

.bo-mappe__body { padding-block: clamp(2rem, 4vw, 3rem); }
.bo-mappe__note {
	font-size: 0.9rem;
	color: var(--bo-muted);
	background: var(--bo-sage-50);
	border: 1px dashed var(--bo-line-strong);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
}

/* Match the Leaflet map card to the Bagout look (higher specificity wins). */
.bo-mappe .icon0a-travelmap {
	border-radius: var(--bo-radius);
	border: 1px solid var(--bo-sage-200);
	box-shadow: var(--bo-shadow-md);
	background: var(--bo-sage-50);
}
.bo-mappe .icon0a-travelmap .leaflet-popup-content {
	font-family: var(--bo-sans);
}
.bo-mappe .icon0a-travelmap .leaflet-popup-content h4 {
	font-family: var(--bo-serif);
	font-weight: 500;
	color: var(--bo-ink);
}

/* Category legend / valid keywords */
.bo-mappe__legend-wrap {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}
.bo-mappe__legend-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0 0 0.3rem;
}
.bo-mappe__legend-help {
	color: var(--bo-muted);
	font-size: 0.95rem;
	margin: 0 0 1.5rem;
}
.bo-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem 1.5rem;
}
.bo-legend__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--bo-line);
	border-radius: 12px;
	background: var(--bo-paper);
}
.bo-legend__emoji {
	font-size: 1.15rem;
	line-height: 1;
	flex: none;
}
.bo-legend__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}
.bo-legend__key {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.82rem;
	color: var(--bo-forest-800);
	background: var(--bo-sage-100);
	padding: 0.1em 0.45em;
	border-radius: 6px;
}
.bo-legend__label { font-size: 0.92rem; color: var(--bo-muted); }

/*--------------------------------------------------------------
# Archivio "Tutte le mappe"
--------------------------------------------------------------*/
.bo-archivio { background: var(--bo-paper); }
.bo-archivio__head {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: end;
}
.bo-archivio__head .bo-page-hero__lead { align-self: end; }

.bo-filters {
	position: sticky;
	top: 78px;
	z-index: 20;
	background: color-mix(in srgb, var(--bo-paper) 90%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-block: 1px solid var(--bo-line);
}
.bo-filters__inner {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.bo-filters__inner::-webkit-scrollbar { display: none; }
.bo-filters__label { font-size: 0.9rem; color: var(--bo-muted); flex: none; }
.bo-fchip {
	flex: none;
	font-family: var(--bo-sans);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--bo-forest-700);
	background: transparent;
	border: 1px solid var(--bo-line-strong);
	padding: 0.5em 1.1em;
	border-radius: var(--bo-radius-pill);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bo-fchip:hover { border-color: var(--bo-sage-500); }
.bo-fchip.is-active {
	background: var(--bo-forest-900);
	color: var(--bo-cream-text);
	border-color: var(--bo-forest-900);
}
.bo-filters__count { margin-left: auto; flex: none; font-size: 0.9rem; color: var(--bo-muted); padding-left: 1rem; }

.bo-archivio__grid { gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }

.bo-mapcard { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.bo-mapcard__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--bo-radius);
	overflow: hidden;
	margin-bottom: 1.1rem;
	background:
		repeating-linear-gradient(135deg, #e2e6dd 0 2px, transparent 2px 15px),
		linear-gradient(160deg, #eef1ea, #e2e8dd);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bo-mapcard:hover .bo-mapcard__thumb { transform: translateY(-4px); box-shadow: var(--bo-shadow-md); }
.bo-mapcard__thumb--b { background: repeating-linear-gradient(135deg, #ece0d6 0 2px, transparent 2px 15px), linear-gradient(160deg, #f2e8de, #e7d7c8); }
.bo-mapcard__thumb--c { background: repeating-linear-gradient(135deg, #e4e8e3 0 2px, transparent 2px 15px), linear-gradient(160deg, #eef1ec, #dfe6df); }
.bo-mapcard__thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-mapcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bo-mapcard__region {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bo-sage-600);
	background: #ffffffcc;
	padding: 0.35em 0.75em;
	border-radius: var(--bo-radius-pill);
}
.bo-mapcard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.bo-mapcard__title { font-size: 1.5rem; margin: 0; }
.bo-mapcard:hover .bo-mapcard__title { text-decoration: underline; text-underline-offset: 3px; }
.bo-mapcard__meta { flex: none; font-size: 0.85rem; color: var(--bo-muted); }
.bo-mapcard__desc { color: var(--bo-muted); margin: 0 0 0.9rem; font-size: 0.98rem; }

.bo-archivio__empty,
.bo-archivio__none { text-align: center; color: var(--bo-muted); padding: 2rem 0; }
.bo-archivio__none .bo-btn { margin-top: 1rem; }

/*--------------------------------------------------------------
# Itinerario singolo
--------------------------------------------------------------*/
.bo-itinerario { background: var(--bo-paper); }

.bo-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--bo-muted);
	margin-bottom: 1.5rem;
}
.bo-breadcrumb a { text-decoration: none; color: var(--bo-muted); }
.bo-breadcrumb a:hover { color: var(--bo-ink); }

.bo-itin-hero__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: end;
}
.bo-itin-hero__lead { font-size: 1.1rem; color: var(--bo-muted); margin: 0 0 1.5rem; }
.bo-itin-hero__stats { display: flex; gap: 2.5rem; }
.bo-itin-hero__tags { margin-top: 1.5rem; }

.bo-itin-map { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--bo-paper); }
.bo-map-legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 1.2rem 0 0;
	padding: 0;
}
.bo-map-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--bo-forest-700); }
.bo-map-legend__dot {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--bo-muted);
	font-size: 13px;
	box-shadow: var(--bo-shadow-sm);
}

.bo-itin-body__grid {
	display: grid;
	grid-template-columns: 1.6fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.bo-itin-racconto__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 1.2rem; }

/* Prose (post content) */
.bo-prose { color: var(--bo-ink); font-size: 1.06rem; line-height: 1.7; }
.bo-prose > * { margin-block: 0 1.1rem; }
.bo-prose p { color: #384037; }
.bo-prose h2 { font-size: 1.8rem; margin-top: 2rem; }
.bo-prose h3 { font-size: 1.4rem; margin-top: 1.6rem; }
.bo-prose a { color: var(--bo-sage-600); text-decoration: underline; text-underline-offset: 2px; }
.bo-prose img { border-radius: var(--bo-radius); }
.bo-prose ul, .bo-prose ol { padding-left: 1.3rem; }

/* Le tappe */
.bo-tappe__title { font-size: 1.7rem; margin: 2.5rem 0 0.5rem; }
.bo-tappe { list-style: none; margin: 0; padding: 0; }
.bo-tappa {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.2rem;
	padding: 1.2rem 0;
	border-top: 1px solid var(--bo-line);
}
.bo-tappa__n {
	font-family: var(--bo-serif);
	font-size: 1.15rem;
	color: var(--bo-sage-500);
	font-style: italic;
	min-width: 1.5rem;
}
.bo-tappa__name { font-family: var(--bo-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; }
.bo-tappa__desc { color: var(--bo-muted); margin: 0; }

/* Sidebar */
.bo-itin-aside { position: sticky; top: 100px; display: grid; gap: 1.25rem; }
.bo-tips {
	background: var(--bo-sage-50);
	border: 1px solid var(--bo-line);
	border-radius: var(--bo-radius);
	padding: 1.4rem 1.5rem;
}
.bo-tips__title { font-size: 1.2rem; margin: 0 0 1rem; }
.bo-tips ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.bo-tips li {
	position: relative;
	padding-left: 1.1rem;
	font-size: 0.96rem;
	color: #384037;
	line-height: 1.5;
}
.bo-tips li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--bo-sage-500); }

.bo-period {
	background:
		radial-gradient(120% 140% at 100% 0%, #2f3a30 0%, transparent 60%),
		var(--bo-forest-900);
	color: var(--bo-cream-text);
	border-radius: var(--bo-radius);
	padding: 1.4rem 1.5rem;
}
.bo-period__eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #9db08f; margin: 0 0 0.5rem; }
.bo-period__title { font-family: var(--bo-serif); font-size: 1.5rem; margin: 0 0 0.4rem; color: #f5f7f2; }
.bo-period__desc { font-size: 0.92rem; color: #c3ccbd; margin: 0; }

@media (max-width: 900px) {
	.bo-itin-body__grid,
	.bo-itin-hero__grid,
	.bo-archivio__head { grid-template-columns: 1fr; align-items: start; }
	.bo-itin-aside { position: static; }
	.bo-filters { top: 0; }
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 960px) {
	.bo-hero__grid,
	.bo-cuore__grid,
	.bo-community__grid { grid-template-columns: 1fr; }
	.bo-hero__visual { max-width: 460px; }
	.bo-cards-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.bo-cards-3 { grid-template-columns: 1fr; }
	.bo-hero__actions { gap: 1rem; }
	.bo-stats { gap: 1.8rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}