/* =======================================================================
   Le Amalfitane — base stylesheet

   Colours are emitted as custom properties by inc/theme-options.php and
   are editable from wp-admin (Impostazioni Tema). The values below are
   the design-time fallback, converted from the OKLCH tokens the live site
   at living.leamalfitane.com ships: deep navy, warm gold, cream paper.
   ======================================================================= */

:root {
	--c-primary: #142650;
	--c-primary-dark: #0F1C3C;
	--c-ink: #111C34;
	--c-gold: #C69E58;
	--c-gold-dark: #A38148;
	--c-muted: #5B6375;
	--c-bg: #FCFAF4;
	--c-cream: #F7F1E3;
	--c-border: #DEDAD0;
	--c-secondary: #F2EEE3;
	--c-white: #FFFFFF;
	--c-danger: #CC2827;
	--c-success: #3E8E5A;
	--c-primary-rgb: 20, 38, 80;
	--c-gold-rgb: 198, 158, 88;

	--font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* living.leamalfitane.com declares "Cormorant Garamond, Georgia, serif"
	   but loads no webfont at all -- no @font-face, no Google Fonts link --
	   so every heading there actually renders in Georgia. Matching what the
	   live site shows means naming Georgia outright, which also costs one
	   fewer network request. */
	--font-display: Georgia, 'Times New Roman', Times, serif;

	--container: 1200px;
	--container-narrow: 820px;
	--radius: 8px;
	--radius-lg: 16px;
	--shadow-sm: 0 2px 10px rgba(var(--c-primary-rgb), 0.06);
	--shadow-md: 0 18px 44px rgba(var(--c-primary-rgb), 0.12);
	--transition: 0.25s ease;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-ink);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
dl, dd { margin: 0; }

/* Weight and tracking copied from the live site's own rule:
   h1..h6 { font-family: var(--font-display); letter-spacing: -.01em; font-weight: 500 } */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.4em;
	color: var(--c-primary);
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-primary); color: #fff; padding: 0.75em 1.5em; z-index: 10000; }
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--container-narrow); }

.icon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Shared type
   --------------------------------------------------------------------- */
.kicker {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin: 0 0 0.9em;
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); }
/* The display variant is the all-caps wide-tracked treatment the live
   site uses for LE ESPERIENZE and LA COSTIERA DA VIVERE. */
.section-title--display { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.subsection-title { font-size: 1.6rem; margin-top: 2rem; }
.section-lede { color: var(--c-muted); font-size: 1.05rem; max-width: 62ch; }
.section-head { margin-bottom: 2.8rem; }
.section-head--center { text-align: center; }
.section-head--center .section-lede { margin-left: auto; margin-right: auto; }
.section-cta { margin-top: 2.6rem; text-align: center; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.empty-state { color: var(--c-muted); text-align: center; padding: 3rem 0; }

.prose { font-size: 1.05rem; color: var(--c-ink); }
.prose h2 { font-size: 1.9rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.4rem; margin-top: 1.5em; }
.prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose blockquote {
	margin: 1.8em 0; padding: 0.4em 0 0.4em 1.4em;
	border-left: 2px solid var(--c-gold);
	font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--c-primary);
}

.link-arrow {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--c-primary);
	transition: gap var(--transition), color var(--transition);
}
.link-arrow:hover { gap: 0.9em; color: var(--c-gold-dark); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	padding: 0.95em 2.1em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.8rem; font-weight: 500; line-height: 1.2;
	letter-spacing: 0.14em; text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--gold { background: var(--c-gold); color: #fff; }
.btn--gold:hover { background: var(--c-gold-dark); }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }
/* Sits on photography, so it needs its own light-on-dark pair.
   Ghost follows the live hero: white/40 border that turns gold on hover,
   text always white -> gold. */
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost:hover { background: transparent; color: var(--c-gold); border-color: var(--c-gold); }
/* The live hero's primary CTA is cream-on-navy, not gold. */
.btn--cream { background: var(--c-cream); color: var(--c-primary); }
.btn--cream:hover { background: #fff; color: var(--c-primary); }
/* The header "Prenota" on the live site is a gold outline pill that
   fills in on hover. */
.btn--outline-gold { background: transparent; color: var(--c-gold); border-color: var(--c-gold); }
.btn--outline-gold:hover { background: var(--c-gold); color: var(--c-primary); }
/* The live hero CTAs are rounded-md rectangles, not pills. */
.hero__actions .btn { border-radius: 4px; }
.btn--sm { padding: 0.7em 1.5em; font-size: 0.72rem; }
.btn .icon { width: 1em; height: 1em; }

/* ---------------------------------------------------------------------
   Header

   The brand logo is white line art with no dark variant, so the header
   can never sit on the cream page background. It carries its own navy
   instead -- and over a photo hero it starts transparent and fills in on
   scroll, the way the live site does.
   --------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: var(--c-primary);
	border-bottom: 1px solid rgba(255,255,255,0.14);
	transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 86px; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.18); }

/* Floats over the hero photo: no background until the page moves. The
   header leaves the flow here, so the hero's own top padding is what
   keeps the title clear of it. */
.site-header--overlay {
	position: fixed; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
.site-header--overlay.is-scrolled {
	background: rgba(var(--c-primary-rgb), 0.95);
	backdrop-filter: blur(10px);
	border-bottom-color: rgba(255,255,255,0.14);
}

.site-logo { display: flex; align-items: center; }
/* The cropped wordmark is 845x182, so height drives the width: 42px tall
   lands it at ~195px, the proportion the live header uses. */
.site-logo img { max-height: 42px; width: auto; }
.site-logo__text { font-family: var(--font-display); font-size: 1.5rem; color: #fff; white-space: nowrap; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 2rem; }
.site-nav__list a {
	font-size: 0.88rem; font-weight: 400; letter-spacing: 0.03em; text-transform: none;
	color: rgba(255,255,255,0.85);
	padding: 0.4em 0;
	position: relative;
	transition: color var(--transition);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--c-gold); }
.site-nav__list .current-menu-item > a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-gold);
}
.site-nav__list ul {
	position: absolute; top: 100%; left: 0; min-width: 210px;
	background: var(--c-primary); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
	box-shadow: var(--shadow-md); padding: 0.4em 0;
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition);
}
.site-nav__list li { position: relative; }
.site-nav__list li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__list ul a { display: block; padding: 0.6em 1.2em; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

/* Language switcher, the "IT · EN" pair from the live site. The middot is
   a generated separator so both remain real links with their own hit
   area, instead of one string split by CSS. Sits on the navy header. */
.lang-switch { display: inline-flex; align-items: center; font-size: 0.72rem; letter-spacing: 0.14em; }
.lang-switch__item { color: rgba(255,255,255,0.6); padding: 0.4em 0.15em; transition: color var(--transition); }
.lang-switch__item + .lang-switch__item::before { content: '·'; margin: 0 0.5em 0 0.35em; color: rgba(255,255,255,0.35); }
.lang-switch__item:hover { color: var(--c-gold); }
.lang-switch__item.is-current { color: #fff; font-weight: 500; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 0.4em; }
.menu-toggle span { width: 24px; height: 1px; background: #fff; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
	position: relative;
	/* The live hero is a full viewport; svh keeps phones honest. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex; align-items: center;
	color: #fff;
	background: var(--c-primary) var(--hero-image, none) center / cover no-repeat;
}
/* The live overlay is a horizontal wash: heavy navy on the left where the
   type sits, opening to the bare photo on the right. */
.hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(var(--c-primary-rgb),0.85) 0%, rgba(var(--c-primary-rgb),0.55) 55%, rgba(var(--c-primary-rgb),0) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 6rem 24px 4rem; width: 100%; }
/* Live eyebrow: Jost, 12px, wide-tracked caps, gold. */
.hero__eyebrow {
	font-family: var(--font-sans); font-style: normal;
	font-size: 0.75rem; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase;
	color: var(--c-gold); margin-bottom: 1.4rem;
}
.hero__title {
	display: flex; flex-direction: column;
	font-size: clamp(2.6rem, 8vw, 6rem);
	font-weight: 500; line-height: 0.95;
	letter-spacing: 0.02em; text-transform: uppercase;
	color: #fff;
	margin: 0 0 2.4rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__stats {
	display: flex; flex-wrap: wrap; gap: 2.4rem;
	margin-top: 3.2rem; padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,0.28);
}
.hero__stats li { display: flex; flex-direction: column; gap: 0.35em; }
.hero__stat-icon { color: var(--c-gold); line-height: 1; }
.hero__stat-icon .icon { width: 22px; height: 22px; }
.hero__stats strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; color: #fff; line-height: 1; }
.hero__stats span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.78); }

/* ---------------------------------------------------------------------
   Page hero (inner pages)
   --------------------------------------------------------------------- */
.page-hero { padding: 5rem 0 3rem; text-align: center; }
.page-hero__title { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.page-hero__title--display { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.page-hero__lede { color: var(--c-muted); font-size: 1.08rem; max-width: 66ch; margin: 0.6em auto 0; }
.page-hero--image {
	position: relative; color: #fff;
	min-height: 52vh; display: flex; align-items: flex-end;
	padding: 6rem 0 3.5rem;
	background: var(--c-primary) var(--hero-image, none) center / cover no-repeat;
}
.page-hero--image::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--c-primary-rgb),0.3), rgba(var(--c-primary-rgb),0.8));
}
.page-hero--image .container { position: relative; z-index: 1; }
.page-hero--image .page-hero__title { color: #fff; }
.page-hero--image .page-hero__lede { color: rgba(255,255,255,0.86); }

.breadcrumbs { padding: 1.2rem 0 0; font-size: 0.78rem; color: var(--c-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.5em; color: var(--c-border); }
.breadcrumbs a:hover { color: var(--c-gold-dark); }

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.section { padding: 5.5rem 0; }
.section--cream { background: var(--c-cream); }
.section--center { text-align: center; }
/* The booking block used to sit on the same navy as the footer, so the
   two read as one dark slab and the form looked like part of the footer.
   Cream with white cards gives it its own ground -- and matches the live
   site. */
.section--booking { background: var(--c-cream); }

/* ---------------------------------------------------------------------
   Apartment cards

   Editorial full-bleed treatment from the live site's #alloggi: square
   photo frames, the unit name overlaid in display type, and a small
   tracked-caps "Scopri" link below. No visible section heading.
   --------------------------------------------------------------------- */
.unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.unit-card { display: flex; flex-direction: column; }
.unit-card__media {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px;
	/* Per-apartment loading backdrop, the way the live cards carry a
	   navy/gold tint while the photo streams in. */
	background: var(--unit-accent, var(--c-primary));
}
.unit-card__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s ease;
}
.unit-card:hover .unit-card__media img { transform: scale(1.05); }
.unit-card__media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.4) 100%);
}
.unit-card__overlay {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
	padding: 2rem; text-align: center;
	color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.unit-card__name {
	font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.8rem);
	line-height: 1; text-transform: uppercase; letter-spacing: 0.04em;
	color: #fff; margin: 0;
}
.unit-card__meta { font-size: 0.75rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
/* The navy "Scopri" link under the photo, gold on hover. */
.unit-card__link {
	display: inline-flex; align-items: center; gap: 0.6em;
	margin-top: 1.1rem;
	font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--c-primary);
	transition: color var(--transition);
}
.unit-card__link:hover { color: var(--c-gold-dark); }
.unit-card__link .icon { transition: transform var(--transition); }
.unit-card__link:hover .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   Experience cards
   --------------------------------------------------------------------- */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.exp-card__link { display: block; position: relative; height: 100%; }
.exp-card__media { display: block; overflow: hidden; border-radius: var(--radius); }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.exp-card:hover .exp-card__media img { transform: scale(1.05); }

/* Tile: title sits over the photo, as on the home page. */
.exp-card--tile .exp-card__media { aspect-ratio: 3 / 4; }
.exp-card--tile .exp-card__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(var(--c-primary-rgb),0) 45%, rgba(var(--c-primary-rgb),0.82) 100%);
	color: #fff;
}
.exp-card--tile .exp-card__title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; }
.exp-card__chevron {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex: 0 0 auto;
	border: 1px solid rgba(255,255,255,0.45); border-radius: 50%;
	opacity: 0; transform: translateX(-6px);
	transition: opacity var(--transition), transform var(--transition);
}
.exp-card:hover .exp-card__chevron { opacity: 1; transform: translateX(0); }

/* Listing: description under the photo, used on the archive. */
.exp-card--listing .exp-card__media { aspect-ratio: 4 / 3; }
.exp-card--listing .exp-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem 0 0; }
.exp-card--listing .exp-card__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--c-primary); }
.exp-card--listing .exp-card__text { color: var(--c-muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   Location

   One card holding the copy and the distance table on the left, the map
   on the right -- the arrangement the live site uses. The card sits a
   shade lighter than the cream section so it reads as a panel without
   needing a heavy border.
   --------------------------------------------------------------------- */
.section--location { background: var(--c-cream); }
.location {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	background: var(--c-bg);
	border-radius: var(--radius-lg);
	padding: 3.2rem;
}
.location__main .section-lede { margin-bottom: 2.2rem; }
.location__map { min-width: 0; }

/* The distance table: a bordered block with hairline rows, so the places
   read as a list of facts rather than loose paragraphs. */
.distance-list {
	display: flex; flex-direction: column;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.distance-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
	padding: 1em 1.3em;
	border-top: 1px solid var(--c-border);
}
.distance-list li:first-child { border-top: none; }
.distance-list__place { font-size: 1rem; color: var(--c-ink); }
.distance-list__meta { display: inline-flex; align-items: baseline; gap: 1.4em; color: var(--c-muted); font-size: 0.9rem; white-space: nowrap; }
.distance-list__meta em { font-style: normal; color: rgba(var(--c-primary-rgb), 0.6); }

/* Google Maps embed. The iframe has no intrinsic aspect ratio, so the
   height is set here; the rounded wrapper clips the map's own corners. */
.map-embed {
	border: 1px solid rgba(var(--c-primary-rgb), 0.15);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	background: var(--c-secondary);
}
.map-embed iframe { display: block; width: 100%; height: 480px; border: 0; }
/* Standalone on the Posizione page, where it follows the list. */
.container--narrow .map-embed { margin-top: 2rem; }
.container--narrow .map-embed iframe { height: 380px; }

/* ---------------------------------------------------------------------
   Fact sheet + single layouts
   --------------------------------------------------------------------- */
.exp-single__media, .unit-single__media { margin: 2rem 0 0; border-radius: var(--radius-lg); overflow: hidden; }
.exp-single__layout, .unit-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 3.5rem; align-items: start; }

.fact-sheet {
	position: sticky; top: 110px;
	background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
	padding: 1.8rem;
}
.fact-sheet__row { padding: 0.95em 0; border-bottom: 1px solid var(--c-border); }
.fact-sheet__row:last-of-type { border-bottom: none; }
.fact-sheet dt {
	font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--c-gold); margin-bottom: 0.3em;
}
.fact-sheet dd { font-size: 1rem; color: var(--c-ink); }
.fact-sheet__note { margin: 1.2em 0 0; padding-top: 1.2em; border-top: 1px solid var(--c-border); font-size: 0.82rem; color: var(--c-muted); }

.unit-facts { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--c-border); }
.unit-facts li { display: inline-flex; align-items: center; gap: 0.5em; color: var(--c-muted); }
.unit-facts .icon { color: var(--unit-accent, var(--c-gold)); }

/* ---------------------------------------------------------------------
   Apartment page

   Section order mirrors the live /casa/<slug>: cover hero, "La casa",
   the numbered spaces, the amenity grid, a gallery on navy, location,
   booking.
   --------------------------------------------------------------------- */
.unit-hero {
	position: relative;
	min-height: max(560px, 85vh);
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	color: #fff;
	background: var(--c-primary) var(--hero-image, none) center / cover no-repeat;
}
.unit-hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--c-primary-rgb),0.4) 0%, rgba(var(--c-primary-rgb),0.1) 45%, rgba(var(--c-primary-rgb),0.7) 100%);
}
.unit-hero__inner { position: relative; z-index: 1; padding: 7rem 24px 4rem; }
.kicker--light { color: var(--c-gold); }
.unit-hero__title {
	font-size: clamp(2.8rem, 8vw, 5.4rem);
	line-height: 0.9; text-transform: uppercase; letter-spacing: 0.02em;
	color: #fff; margin: 0;
}
/* The gold hairline the live hero uses to separate name from facts. */
.rule { display: block; width: 96px; height: 1px; margin: 1.6rem auto; background: rgba(var(--c-gold-rgb), 0.7); }
.unit-hero__subtitle { font-family: var(--font-display); font-size: 1.3rem; color: rgba(255,255,255,0.9); margin: 0; }
.unit-hero__facts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem;
	margin-top: 2.4rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.2);
	font-size: 0.9rem;
}
.unit-hero__facts li { display: inline-flex; align-items: center; gap: 0.55em; color: rgba(255,255,255,0.88); }
.unit-hero__facts .icon { color: var(--c-gold); }

.unit-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.unit-intro__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.unit-intro__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Numbered spaces: the count is decorative, so it is generated here
   rather than typed into the field. */
.space-list { display: grid; gap: 2.5rem; }
.space-list__item { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.space-list__num {
	font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 500;
	color: rgba(var(--c-gold-rgb), 0.7);
}
.space-list__title { font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3em; }
.space-list__body p { color: var(--c-muted); margin: 0; }

.amenity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
.amenity-grid li { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.amenity-grid__badge {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border: 1px solid rgba(var(--c-gold-rgb), 0.5); border-radius: 50%;
	color: var(--c-gold);
}
.amenity-grid__badge .icon { width: 22px; height: 22px; }
.amenity-grid__label { font-size: 0.92rem; color: var(--c-ink); }

/* Gallery sits on navy, so the headings invert. */
.section--dark { background: var(--c-primary); }
.section--dark .section-title,
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-lede { color: rgba(255,255,255,0.78); }

/* CSS columns rather than grid: photos keep their own aspect ratio and
   the column fills top to bottom, which is what a masonry wall wants. */
.masonry { columns: 1; column-gap: 1rem; }
.masonry figure { margin: 0 0 1rem; break-inside: avoid; border-radius: var(--radius); overflow: hidden; }
.masonry img { width: 100%; height: auto; display: block; }

.unit-grid--single { max-width: 520px; margin: 0 auto; }

.booking-box {
	position: sticky; top: 110px;
	background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
	padding: 1.8rem; box-shadow: var(--shadow-md);
}
.booking-box__title { font-size: 1.5rem; }
.booking-box__price { color: var(--unit-accent, var(--c-gold)); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.2em; }
.booking-box__note { display: flex; align-items: center; gap: 0.5em; margin: 1.2em 0 0; font-size: 0.8rem; color: var(--c-muted); }
.booking-box__note .icon { color: var(--c-success); }

@media (min-width: 640px) {
	.amenity-grid { grid-template-columns: repeat(3, 1fr); }
	.masonry { columns: 2; }
}
@media (min-width: 1024px) {
	.amenity-grid { grid-template-columns: repeat(4, 1fr); }
	.masonry { columns: 3; }
}

/* ---------------------------------------------------------------------
   Booking block: calendar left, form right
   --------------------------------------------------------------------- */
.booking__layout {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 1.8rem;
	align-items: start;
}
.booking__calendar,
.booking__panel {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.booking__calendar { padding: 1.5rem; }
.booking__panel { padding: 2.2rem; }
.booking__note { margin: 1.4em 0 0; text-align: center; font-size: 0.85rem; color: var(--c-muted); }

.date-picker__summary {
	margin: 1.1rem 0 0; padding-top: 1rem;
	border-top: 1px solid var(--c-border);
	font-size: 0.9rem; color: var(--c-muted);
}
.date-picker__summary.is-set { color: var(--c-primary); font-weight: 500; }

/* The form keeps its own date fields -- the availability Bridge reads
   them -- but inside this block the calendar is what the guest touches.
   Only the label and the control are hidden, never the whole row: those
   fields are required, so hiding the row would hide their validation
   message too and a guest who skipped the calendar would get a silent
   rejection with nothing on screen to explain it. On the experience and
   apartment pages, where there is no calendar, the fields stay visible. */
.booking__layout .lam-date-row .ff-el-input--label,
.booking__layout .lam-date-row .ff-el-form-control { display: none; }
.booking__layout .lam-date-row .ff-el-group { margin-bottom: 0; }
.booking__layout .lam-date-row .ff-t-cell { width: 100%; }
.booking__layout .lam-date-row .text-danger {
	display: block;
	margin: 0 0 0.9rem;
	padding: 0.75em 1em;
	background: rgba(204, 40, 39, 0.08);
	border: 1px solid rgba(204, 40, 39, 0.3);
	border-radius: var(--radius);
	font-size: 0.85rem;
	color: var(--c-danger);
}

/* Matching cue on the calendar itself, set by booking.js, so the guest
   looks where the problem actually is. */
.date-picker.has-error { outline: 1px solid var(--c-danger); outline-offset: 10px; border-radius: var(--radius); }
.date-picker.has-error .date-picker__summary { color: var(--c-danger); }

/* Nights is always derived from the dates by booking.js. */
.lam-field-hidden { display: none !important; }

/* Consent row: the label carries a full sentence, so it needs to wrap
   beside the box rather than push it off the line. */
.lam-consent .ff-el-input--label { display: none; }
.lam-consent .ff-el-form-check { margin: 0.4rem 0 0; }
.lam-consent .ff-el-form-check-label { align-items: flex-start; font-size: 0.88rem; line-height: 1.5; color: var(--c-muted); }
.lam-consent .ff-el-form-check input[type="checkbox"] { margin-top: 0.25em; }

/* The calculated total is output, not input: styled as a readout so it is
   never mistaken for a field waiting to be filled in. */
.lam-total .ff-el-form-control[readonly] {
	background: var(--c-cream);
	border-color: var(--c-gold);
	color: var(--c-primary);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 500;
	cursor: default;
}
.lam-total .ff-el-form-control[readonly]:focus { box-shadow: none; border-color: var(--c-gold); }

/* flatpickr ships a blue theme; these bring it onto the palette. */
.date-picker .flatpickr-calendar { width: 100%; max-width: none; box-shadow: none; font-family: var(--font-sans); }
.date-picker .flatpickr-calendar.inline { border: 0; }
.date-picker .flatpickr-innerContainer,
.date-picker .flatpickr-rContainer,
.date-picker .flatpickr-days,
.date-picker .dayContainer { width: 100%; max-width: none; min-width: 0; }
.date-picker .flatpickr-current-month { font-family: var(--font-display); font-size: 1.05rem; color: var(--c-primary); }
.date-picker .flatpickr-weekday { color: var(--c-muted); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.date-picker .flatpickr-day { color: var(--c-ink); border-radius: var(--radius); }
.date-picker .flatpickr-day:hover { background: var(--c-secondary); border-color: var(--c-secondary); }
.date-picker .flatpickr-day.today { border-color: var(--c-gold); }
.date-picker .flatpickr-day.selected,
.date-picker .flatpickr-day.startRange,
.date-picker .flatpickr-day.endRange {
	background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.date-picker .flatpickr-day.inRange {
	background: var(--c-cream); border-color: var(--c-cream); color: var(--c-primary);
	box-shadow: -5px 0 0 var(--c-cream), 5px 0 0 var(--c-cream);
}
.date-picker .flatpickr-day.flatpickr-disabled,
.date-picker .flatpickr-day.prevMonthDay,
.date-picker .flatpickr-day.nextMonthDay { color: rgba(var(--c-primary-rgb), 0.25); }
.date-picker .flatpickr-months .flatpickr-prev-month svg,
.date-picker .flatpickr-months .flatpickr-next-month svg { fill: var(--c-primary); }

.form-placeholder {
	border: 1px dashed var(--c-border); border-radius: var(--radius);
	padding: 2.4rem; text-align: center; color: var(--c-muted);
}
.form-placeholder p { margin: 0 0 0.3em; }
.form-placeholder__hint { font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   Blog cards, search
   --------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.post-card { display: flex; flex-direction: column; }
.post-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.2rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.post-card__title { font-size: 1.5rem; margin: 0; }
.post-card__text { color: var(--c-muted); font-size: 0.95rem; margin: 0; }

.search-form {
	display: flex; align-items: center; gap: 0.7em;
	max-width: 520px; margin: 2rem auto 0;
	background: #fff; border: 1px solid var(--c-border); border-radius: 999px;
	padding: 0.4em 0.5em 0.4em 1.2em;
}
.search-form .icon { color: var(--c-muted); }
.search-form input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 0.95rem; }

.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.6em; margin: 0 0.2em;
	border: 1px solid var(--c-border); border-radius: 999px; font-size: 0.85rem;
}
.pagination .page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--c-primary); color: rgba(255,255,255,0.8); padding: 4.5rem 0 2.5rem; text-align: center; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
/* The crest is nearly square; 140px gives it the presence it needs. */
.site-footer__logo { max-height: 140px; width: auto; }
/* A dark logo on a navy footer is invisible; when no light variant has
   been uploaded, knock the dark one out to white rather than hide it. */
.site-footer__logo--invert { filter: brightness(0) invert(1); }
.site-footer__wordmark { font-family: var(--font-display); font-size: 1.8rem; color: #fff; margin: 0; }
.site-footer__tagline { font-size: 0.9rem; margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 1.6em; font-size: 0.85rem; }
.site-footer__links a:hover { color: var(--c-gold); }
.site-footer__socials { display: flex; gap: 0.5em; }
.site-footer__socials a {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.site-footer__socials a:hover { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.site-footer__legal { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 1rem 0 0; }

/* ---------------------------------------------------------------------
   Fluent Forms
   Every form renders through the "Inherit Theme Style" preset, forced in
   inc/fluentform.php -- that strips the plugin's blue preset and its
   per-form inline button colour, leaving this block as the single source
   of truth for form styling.
   --------------------------------------------------------------------- */

/* The plugin's base stylesheet (always loaded, never scoped to a preset)
   drives the required asterisk, borders and radii off these variables. */
.fluentform {
	--fluentform-primary: var(--c-primary);
	--fluentform-secondary: var(--c-muted);
	--fluentform-danger: var(--c-danger);
	--fluentform-border-color: var(--c-border);
	--fluentform-border-radius: var(--radius);
	--fluentform-input-select-height: auto;
}

.fluentform .ff-el-group { margin-bottom: 1.1rem; }
.fluentform .ff-el-group:last-child { margin-bottom: 0; }
.fluentform .ff-el-input--label label {
	display: inline-block; margin-bottom: 0.45em;
	font-family: var(--font-sans);
	font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-muted);
}
.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.85em 1em;
	font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.5; font-weight: 300;
	color: var(--c-ink);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.fluentform .ff-el-form-control::placeholder { color: var(--c-muted); opacity: 1; }
.fluentform .ff-el-form-control:focus {
	outline: none; background: #fff;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.12);
}
.fluentform textarea.ff-el-form-control { min-height: 130px; resize: vertical; }

.fluentform .ff-el-form-check { margin-bottom: 0.45em; }
.fluentform .ff-el-form-check-label { display: inline-flex; align-items: flex-start; gap: 0.55em; font-size: 0.92rem; color: var(--c-ink); cursor: pointer; }
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"] { accent-color: var(--c-primary); width: 1.05em; height: 1.05em; margin-top: 0.2em; flex: 0 0 auto; }

.fluentform .ff-el-help-message { margin: 0.35em 0 0; font-size: 0.8rem; color: var(--c-muted); }
.fluentform .ff-el-section-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-primary); margin: 1.6rem 0 0.2rem; }

.fluentform .ff-el-form-control.error,
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--c-danger); }
.fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 3px rgba(204, 40, 39, 0.14); }
.fluentform .text-danger,
.fluentform .ff-errors-in-stack .error { margin-top: 0.35em; font-size: 0.8rem; color: var(--c-danger); }
.fluentform .ff-message-success {
	padding: 1.1em 1.3em;
	border: 1px solid rgba(62, 142, 90, 0.35); border-radius: var(--radius);
	background: rgba(62, 142, 90, 0.1); color: var(--c-success);
}

/* Submit reuses .btn--gold, so a form CTA and a page CTA are the same
   control; colours come from the palette set in Impostazioni Tema. */
.fluentform .ff-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	padding: 0.95em 2.1em;
	border: 1px solid transparent; border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.8rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
	background: var(--c-gold); color: #fff;
	cursor: pointer;
	transition: transform var(--transition), background var(--transition);
}
.fluentform .ff-btn-submit:hover { background: var(--c-gold-dark); transform: translateY(-2px); }
.fluentform .ff-btn-submit:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }
.fluentform .ff_submit_btn_wrapper { margin-bottom: 0; }
.booking-box .fluentform .ff-btn-submit { width: 100%; }

/* Multi-step navigation. The plugin's only styling for these lived in
   .ff-default, which the theme preset switches off. Flex on the container
   also neutralises the inline float:left/right the plugin prints on each
   button: floats are ignored on flex items, so no !important is needed. */
.fluentform .step-nav {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem;
	margin-top: 1.6rem; padding-top: 1.2rem;
	border-top: 1px solid var(--c-border);
}
.fluentform .step-nav .ff-float-right,
.fluentform .step-nav .ff-btn-next { margin-left: auto; }
.fluentform .ff-btn-prev,
.fluentform .ff-btn-next {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	padding: 0.8em 1.7em;
	border: 1px solid transparent; border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.75rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.fluentform .ff-btn-prev { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.fluentform .ff-btn-prev:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.fluentform .ff-btn-next { background: var(--c-primary); color: #fff; }
.fluentform .ff-btn-next:hover { background: var(--c-primary-dark); transform: translateY(-2px); }
.fluentform .ff-btn-prev:focus-visible,
.fluentform .ff-btn-next:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), 0.25); }
.fluentform .ff-btn.disabled,
.fluentform .ff-btn-prev:disabled,
.fluentform .ff-btn-next:disabled { opacity: 0.55; transform: none; cursor: not-allowed; }
.fluentform .ff-el-progress { background: var(--c-cream); border-radius: 999px; height: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.fluentform .ff-el-progress-bar { background: var(--c-gold); border-radius: inherit; }
.fluentform .ff-el-progress-bar span { display: none; }
.fluentform .ff-el-progress-status { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 1.2rem; }
.fluentform .fluentform-step { padding-top: 0.2rem; }
/* The sidebar box is ~360px: let the two step buttons split the row. */
.booking-box .fluentform .step-nav .ff-btn-prev,
.booking-box .fluentform .step-nav .ff-btn-next { flex: 1 1 0; padding-left: 1em; padding-right: 1em; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.exp-single__layout, .unit-single__layout { grid-template-columns: 1fr; }
	.fact-sheet, .booking-box { position: static; }
	.location { grid-template-columns: 1fr; gap: 2.4rem; padding: 2rem; }
	.booking__layout { grid-template-columns: 1fr; }
	.booking__calendar { max-width: 340px; }
	.map-embed iframe { height: 340px; }
}

@media (max-width: 960px) {
	.site-nav {
		position: fixed; top: 0; right: -100%;
		width: min(340px, 86vw); height: 100vh;
		background: var(--c-primary); box-shadow: var(--shadow-md);
		padding: 5.5rem 1.8rem 2rem;
		transition: right var(--transition);
		overflow-y: auto; z-index: 600;
	}
	.site-nav.is-open { right: 0; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.site-nav__list a { font-size: 0.9rem; }
	.site-nav__list ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 1em; display: none; }
	.site-nav__list li.is-open > ul { display: block; }
	.menu-toggle { display: flex; }
	.site-header__actions { margin-left: auto; }
	.site-header__actions .btn { display: none; }
	/* The CTA hides on small screens but the switcher must not: it is the
	   only route to the other language once the menu is collapsed. */
	.lang-switch { margin-right: 0.25rem; }
}

@media (max-width: 680px) {
	.section { padding: 3.5rem 0; }
	.hero { min-height: 74vh; }
	.hero__inner { padding: 4.5rem 20px 3rem; }
	.hero__stats { gap: 1.6rem; }
	.page-hero { padding: 3.2rem 0 2rem; }
	.site-logo img { max-height: 32px; }
	.site-header__inner { min-height: 68px; }
	.site-footer__logo { max-height: 104px; }
	.unit-grid, .exp-grid, .post-grid { grid-template-columns: 1fr; }
	.unit-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
	.space-list__item { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; }
	.space-list__num { font-size: 2.2rem; }
	.unit-hero { min-height: 70vh; }
	.unit-hero__inner { padding: 6rem 20px 3rem; }
	.exp-card--tile .exp-card__media { aspect-ratio: 4 / 3; }
	.booking__panel { padding: 1.5rem; }
	.distance-list li { flex-direction: column; align-items: flex-start; gap: 0.3em; }
	.map-embed iframe { height: 280px; }
	/* Comfortable ~44px targets on the controls guests actually tap. */
	.btn { min-height: 44px; }
	.site-footer__socials a { width: 44px; height: 44px; }
}

.home-calendar{padding:12px;width:248px;max-width:100%;background:var(--c-bg)}
.home-calendar__heading{height:32px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;margin-bottom:16px}
.home-calendar button{border:0;background:none;color:var(--c-primary);padding:0;font:inherit;border-radius:6px}
.home-calendar__heading button{width:32px;height:32px;font-size:24px}
.home-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:8px}
.home-calendar__grid button{height:32px;font-size:14px}
.home-calendar button:disabled{opacity:.25;cursor:default}
.home-calendar button.is-outside{color:var(--c-muted)}
.home-calendar button.is-today,.home-calendar button:hover:not(:disabled){background:var(--c-cream)}
.home-calendar button.is-selected{background:var(--c-primary);color:var(--c-bg)}
.home-calendar button.is-range{background:var(--c-cream);border-radius:0}
.home-calendar button:focus-visible{outline:2px solid var(--c-gold);outline-offset:1px}
.home-calendar{margin-inline:auto}
.home-calendar .is-occupied{text-decoration:line-through;color:#9b4343;background:#f8ece8}
.home-calendar .is-occupied:disabled{opacity:.65}
.lam-availability-status{font-size:14px;text-align:center;margin:12px 0;color:var(--c-muted)}

/* ---------------------------------------------------------------------
   Single articolo — layout a due colonne, sidebar, condivisione
   --------------------------------------------------------------------- */
.single-meta { color: var(--c-muted); font-size: 0.85rem; letter-spacing: 0.04em; margin-top: 0.6em; }
.single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; align-items: start; }
.single-cover { border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 2.4rem; box-shadow: var(--shadow-sm); }
.single-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.single-sidebar { display: flex; flex-direction: column; gap: 2.4rem; position: sticky; top: 110px; }
.sidebar-box { background: var(--c-cream); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.8rem; }
.sidebar-box__title { font-size: 1.1rem; margin: 0 0 1.2rem; }
.sidebar-list { display: flex; flex-direction: column; gap: 1.1rem; }
.sidebar-post { display: flex; align-items: center; gap: 0.9rem; }
.sidebar-post__media { flex: 0 0 auto; display: block; width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; }
.sidebar-post__media img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-post__title { font-size: 0.92rem; line-height: 1.35; color: var(--c-ink); }
.sidebar-post__title:hover { color: var(--c-gold-dark); }
.sidebar-box .link-arrow { display: inline-flex; margin-top: 1.4rem; font-size: 0.82rem; }

/* Condivisione: cerchi outline nei colori del tema (navy → oro all'hover),
   non i colori brand dei singoli social, per restare sobri e coerenti con
   .site-footer__socials. */
.share-bar { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.share-bar__label { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.share-bar__list { display: flex; gap: 0.6em; }
.share-bar__link {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--c-border); border-radius: 50%;
	color: var(--c-primary);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.share-bar__link:hover, .share-bar__link:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.share-bar__link .icon { width: 17px; height: 17px; }

@media (max-width: 960px) {
	.single-layout { grid-template-columns: 1fr; }
	.single-sidebar { position: static; }
}

/* ---------------------------------------------------------------------
   404 — testo centrato su un fondo con onde decorative in SVG
   --------------------------------------------------------------------- */
.error-404 {
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 0 9rem;
	background: var(--c-bg);
}
.error-404__inner {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
}
.error-404__inner .section-lede { margin-left: auto; margin-right: auto; }
.error-404__inner .section-cta { margin-top: 2.2rem; }
.error-404__inner .search-form { margin-top: 2.4rem; }
.error-404__waves {
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	width: 100%; height: 160px;
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 680px) {
	.error-404 { min-height: auto; padding: 4.5rem 0 7rem; }
	.error-404__waves { height: 110px; }
}