/* =====================================================================
   SOGNI POSSIBILI — Spunti e Appunti
   Foglio di stile principale
   Palette estratta dal logo:
     blu petrolio  #0076a1   (testo logo, figure, panchina)
     teal medio    #6ec4c5   (paesaggio / sentiero)
     teal chiaro   #afdcde   (sfumatura paesaggio)
     oro           #fbba00   (sole — base)
     giallo        #ffed00   (sole — alto)
   ===================================================================== */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
	/* Colori brand */
	--sp-blue: #0076a1;
	--sp-blue-dark: #015a7c;
	--sp-blue-deep: #0e3a4a;        /* testi scuri, "inchiostro" */
	--sp-teal: #6ec4c5;
	--sp-teal-light: #afdcde;
	--sp-teal-pale: #dcf0f1;
	--sp-teal-mist: #eef7f8;        /* sfondo sezioni fresche */
	--sp-gold: #fbba00;
	--sp-yellow: #ffed00;

	/* Neutri */
	--sp-paper: #ffffff;
	--sp-cream: #fffdf6;            /* sfondo pagina, caldo */
	--sp-ink: #173a48;             /* testo principale */
	--sp-muted: #5b7682;           /* testo secondario */
	--sp-line: #e2eef0;            /* bordi sottili */

	/* Gradienti — transizione singola e fluida (niente linee/banding) */
	--sp-grad-sun: linear-gradient(135deg, #ffd02e 0%, #f8b000 100%);
	--sp-grad-sun-hover: linear-gradient(135deg, #ffda54 0%, #f6b81a 100%);
	--sp-grad-sky: linear-gradient(180deg, #fffdf3 0%, #fdf8ec 48%, #eef7f8 100%);
	--sp-grad-water: linear-gradient(125deg, var(--sp-teal-light) 0%, #92d0d1 50%, var(--sp-teal) 100%);
	--sp-grad-blue: linear-gradient(135deg, #008cbd 0%, var(--sp-blue) 45%, var(--sp-blue-dark) 100%);

	/* Tipografia */
	--sp-font-head: ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--sp-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Forma & profondità */
	--sp-radius: 18px;
	--sp-radius-lg: 28px;
	--sp-radius-pill: 999px;
	--sp-shadow-sm: 0 2px 10px rgba(14, 58, 74, 0.06);
	--sp-shadow: 0 12px 32px rgba(14, 58, 74, 0.10);
	--sp-shadow-lg: 0 24px 60px rgba(14, 58, 74, 0.16);

	/* Misure */
	--sp-container: 1160px;
	--sp-container-narrow: 760px;
	--sp-gap: clamp(1rem, 3vw, 2rem);
	--sp-section-y: clamp(3.5rem, 8vw, 6.5rem);
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--sp-font-body);
	font-size: clamp(1rem, 0.6vw + 0.9rem, 1.075rem);
	line-height: 1.7;
	color: var(--sp-ink);
	background: var(--sp-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--sp-blue);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover { color: var(--sp-blue-dark); }

h1, h2, h3, h4, h5 {
	font-family: var(--sp-font-head);
	color: var(--sp-blue-deep);
	line-height: 1.18;
	margin: 0 0 0.6em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
blockquote {
	margin: 1.6em 0;
	padding: 1.2rem 1.6rem;
	border-left: 5px solid var(--sp-teal);
	background: var(--sp-teal-mist);
	border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
	font-size: 1.15rem;
	color: var(--sp-blue-deep);
	font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; height: 1px; background: var(--sp-line); margin: 2.5rem 0; }

:focus-visible {
	outline: 3px solid var(--sp-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Accessibilità: skip link */
.sp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sp-blue);
	color: #fff;
	padding: 0.8rem 1.2rem;
	border-radius: 0 0 var(--sp-radius) 0;
	z-index: 9999;
}
.sp-skip-link:focus { left: 0; color: #fff; }

/* ----------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------- */
.sp-container {
	width: 100%;
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}
.sp-narrow { max-width: var(--sp-container-narrow); }

.sp-section { padding-block: var(--sp-section-y); position: relative; }
.sp-section--mist { background: var(--sp-teal-mist); }
.sp-section--paper { background: var(--sp-paper); }
.sp-section--blue {
	background: var(--sp-grad-blue);
	color: #eaf6fa;
}
.sp-section--blue h1,
.sp-section--blue h2,
.sp-section--blue h3 { color: #fff; }

.sp-section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3.2rem); }
.sp-section-head p { color: var(--sp-muted); font-size: 1.1rem; }
.sp-section--blue .sp-section-head p { color: #c3e4ef; }

/* Occhiello / eyebrow */
.sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-blue);
	margin-bottom: 0.9rem;
}
.sp-eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 3px;
	background: var(--sp-grad-sun);
}
.sp-section--blue .sp-eyebrow { color: var(--sp-gold); }

/* ----------------------------------------------------------------
   4. BOTTONI
   ---------------------------------------------------------------- */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 0.95rem 1.7rem;
	border-radius: var(--sp-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
	text-align: center;
}
.sp-btn:hover { transform: translateY(-2px); }

.sp-btn--primary {
	background: var(--sp-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 118, 161, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.sp-btn--primary:hover { background: var(--sp-blue-dark); color: #fff; box-shadow: 0 12px 26px rgba(0, 118, 161, 0.32); }

.sp-btn--sun {
	background: var(--sp-grad-sun);
	color: var(--sp-blue-deep);
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(251, 186, 0, 0.28);
}
.sp-btn--sun:hover { color: var(--sp-blue-deep); background: var(--sp-grad-sun-hover); }

.sp-btn--ghost {
	background: transparent;
	color: var(--sp-blue);
	border-color: var(--sp-teal);
}
.sp-btn--ghost:hover { background: var(--sp-teal-mist); color: var(--sp-blue-dark); }

.sp-section--blue .sp-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.sp-section--blue .sp-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }

.sp-btn--block { width: 100%; }

/* link freccia */
.sp-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sp-font-head);
	font-weight: 700;
	color: var(--sp-blue);
}
.sp-arrow-link span { transition: transform 0.2s ease; }
.sp-arrow-link:hover span { transform: translateX(4px); }

/* ----------------------------------------------------------------
   5. HEADER / NAVIGAZIONE
   ---------------------------------------------------------------- */
.sp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 253, 246, 0.92);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--sp-line);
}
.sp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
}
.sp-logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.sp-logo img { height: 56px; width: auto; }
.sp-logo__text {
	display: none;
	font-family: var(--sp-font-head);
	font-weight: 800;
	color: var(--sp-blue);
	line-height: 1.05;
	font-size: 1.05rem;
}
.sp-logo__text small {
	display: block;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--sp-teal);
	text-transform: uppercase;
}

/* Menu principale */
.sp-nav { display: flex; align-items: center; gap: 1rem; }
.sp-menu {
	display: flex;
	align-items: center;
	gap: 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sp-menu li { position: relative; }
.sp-menu a {
	display: block;
	font-family: var(--sp-font-head);
	font-weight: 600;
	color: var(--sp-blue-deep);
	padding: 0.5rem 0.7rem;
	border-radius: var(--sp-radius-pill);
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.sp-menu a:hover,
.sp-menu .current-menu-item > a,
.sp-menu .current_page_item > a {
	background: var(--sp-teal-mist);
	color: var(--sp-blue);
}

/* Sottomenu */
.sp-menu .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow);
	padding: 0.5rem;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s ease;
}
.sp-menu li:hover > .sub-menu,
.sp-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sp-menu .sub-menu a { padding: 0.6rem 0.9rem; }

/* Toggle mobile */
.sp-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 14px;
	background: var(--sp-teal-mist);
	cursor: pointer;
}
.sp-nav-toggle span {
	display: block;
	width: 22px;
	height: 2.5px;
	margin: 0 auto;
	background: var(--sp-blue);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.sp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
	.sp-nav-toggle { display: flex; }
	.sp-nav {
		position: fixed;
		inset: 78px 0 auto 0;
		background: var(--sp-cream);
		border-bottom: 1px solid var(--sp-line);
		box-shadow: var(--sp-shadow);
		padding: 1rem clamp(1.1rem, 4vw, 2.2rem) 1.6rem;
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		max-height: calc(100vh - 78px);
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: all 0.25s ease;
	}
	.sp-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
	.sp-menu { flex-direction: column; align-items: stretch; gap: 0.2rem; }
	.sp-menu a { padding: 0.8rem 1rem; }
	.sp-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: var(--sp-teal-mist);
		padding-left: 1rem;
	}
	.sp-nav .sp-btn { margin-top: 0.4rem; }
}

@media (min-width: 1280px) {
	.sp-logo__text { display: block; }
}

/* ----------------------------------------------------------------
   6. HERO (alba del logo)
   ---------------------------------------------------------------- */
.sp-hero {
	position: relative;
	background: var(--sp-grad-sky);
	overflow: hidden;
	/* Nessun padding sotto: l'onda resta a filo con la sezione successiva,
	   altrimenti il padding inferiore (celeste) crea una banda sotto l'onda. */
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
/* Sole decorativo — interamente in CSS, animato e leggero.
   Bagliore radiale "che respira" + raggi sottili in rotazione lenta. */
.sp-hero__sun {
	position: absolute;
	top: clamp(-220px, -16vw, -120px);
	right: clamp(-120px, -2vw, 0px);
	width: clamp(360px, 46vw, 680px);
	aspect-ratio: 1;
	z-index: 0;
	pointer-events: none;
}
.sp-hero__sun::before {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
		rgba(255, 237, 0, 0.50) 0%,
		rgba(253, 200, 0, 0.34) 38%,
		rgba(251, 186, 0, 0.12) 60%,
		rgba(251, 186, 0, 0) 75%);
	filter: blur(3px);
	transform-origin: center;
	animation: sp-sun-breathe 7s ease-in-out infinite;
}
.sp-hero__sun::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg,
		rgba(251, 186, 0, 0.13) 0deg 3deg,
		rgba(251, 186, 0, 0) 3deg 15deg);
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 33%, #000 39%, #000 56%, transparent 70%);
	        mask: radial-gradient(circle at 50% 50%, transparent 33%, #000 39%, #000 56%, transparent 70%);
	transform-origin: center;
	animation: sp-sun-rotate 80s linear infinite;
}
@keyframes sp-sun-breathe {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes sp-sun-rotate {
	to { transform: rotate(360deg); }
}
.sp-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}
.sp-hero__payoff {
	font-family: var(--sp-font-head);
	font-weight: 600;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.5;
	color: var(--sp-blue);
	margin-bottom: 1.2rem;
	max-width: 38ch;
}
.sp-hero h1 { margin-bottom: 0.6rem; }
.sp-hero h1 .accent {
	background: var(--sp-grad-sun);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sp-hero__lead {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: var(--sp-blue-deep);
	max-width: 36ch;
	margin-bottom: 1.8rem;
}
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.sp-hero__art {
	position: relative;
	display: flex;
	justify-content: center;
}
.sp-hero__art img {
	width: min(100%, 420px);
	filter: drop-shadow(0 24px 40px rgba(14, 58, 74, 0.18));
}

@media (max-width: 860px) {
	.sp-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.sp-hero__lead { margin-inline: auto; }
	.sp-hero__cta { justify-content: center; }
	.sp-hero__art { order: -1; }
	.sp-hero__art img { width: min(70%, 300px); }
}

/* ----------------------------------------------------------------
   7. ONDE / DIVISORI ORGANICI
   ---------------------------------------------------------------- */
.sp-wave {
	display: block;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	margin: 0;
	line-height: 0;
}
.sp-wave svg { width: 100%; height: 100%; display: block; }
.sp-wave--flip svg { transform: scaleY(-1); }

/* ----------------------------------------------------------------
   8. PILASTRI / FEATURE CARD
   ---------------------------------------------------------------- */
.sp-grid {
	display: grid;
	gap: clamp(1.2rem, 3vw, 1.8rem);
}
.sp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .sp-grid--4 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sp-grid--2, .sp-grid--3, .sp-grid--4 { grid-template-columns: 1fr; } }

.sp-pillar {
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: clamp(1.4rem, 3vw, 2rem);
	box-shadow: var(--sp-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sp-pillar:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow); }
.sp-pillar__icon {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	margin-bottom: 1.1rem;
	background: var(--sp-teal-mist);
	color: var(--sp-blue);
}
.sp-pillar__icon svg { width: 30px; height: 30px; }
.sp-pillar:nth-child(2) .sp-pillar__icon { background: #fff5d6; color: var(--sp-gold); }
.sp-pillar:nth-child(3) .sp-pillar__icon { background: var(--sp-teal-pale); color: var(--sp-blue-dark); }
.sp-pillar:nth-child(4) .sp-pillar__icon { background: #fff0d0; color: #d99800; }
.sp-pillar h3 { margin-bottom: 0.4rem; }
.sp-pillar p { color: var(--sp-muted); margin-bottom: 0; font-size: 0.98rem; }

/* ----------------------------------------------------------------
   9. CARD CONTENUTI (bandi / storie / spazi)
   ---------------------------------------------------------------- */
.sp-card {
	display: flex;
	flex-direction: column;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	box-shadow: var(--sp-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.sp-card:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow); }
.sp-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sp-grad-water);
}
.sp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sp-card:hover .sp-card__media img { transform: scale(1.05); }
.sp-card__media--placeholder { display: grid; place-items: center; color: rgba(255,255,255,0.85); }
.sp-card__media--placeholder svg { width: 64px; height: 64px; }
.sp-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.sp-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.sp-card__title a { color: var(--sp-blue-deep); }
.sp-card__title a:hover { color: var(--sp-blue); }
.sp-card__excerpt { color: var(--sp-muted); font-size: 0.97rem; margin-bottom: 1.1rem; }
.sp-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }

/* badge / pillole meta */
.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	padding: 0.35rem 0.8rem;
	border-radius: var(--sp-radius-pill);
	background: var(--sp-teal-mist);
	color: var(--sp-blue);
}
.sp-badge--sun { background: #fff3cf; color: #b98600; }
.sp-badge--open { background: #e3f6e9; color: #1f8a4c; }
.sp-badge--soon { background: #fff0d0; color: #c47b00; }
.sp-badge--closed { background: #f1e6e6; color: #9a5050; }

/* meta lista (single bando) */
.sp-meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sp-meta-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.sp-meta-list .label { font-family: var(--sp-font-head); font-weight: 700; color: var(--sp-blue); min-width: 120px; }

/* ----------------------------------------------------------------
   10. STORIA / CITAZIONE
   ---------------------------------------------------------------- */
.sp-quote-card {
	background: var(--sp-paper);
	border-radius: var(--sp-radius-lg);
	padding: 2rem 2.2rem;
	box-shadow: var(--sp-shadow-sm);
	border: 1px solid var(--sp-line);
	position: relative;
}
.sp-quote-card::before {
	content: "\201C";
	position: absolute;
	top: -0.2rem;
	left: 1.2rem;
	font-family: Georgia, serif;
	font-size: 5rem;
	color: var(--sp-teal-light);
	line-height: 1;
}
.sp-quote-card p { font-size: 1.15rem; color: var(--sp-blue-deep); font-style: italic; padding-top: 1.2rem; }
.sp-quote-card cite { display: block; margin-top: 0.6rem; font-style: normal; font-weight: 700; color: var(--sp-blue); font-family: var(--sp-font-head); }
.sp-quote-card cite small { display: block; font-weight: 500; color: var(--sp-muted); }

/* ----------------------------------------------------------------
   11. CTA FINALE (sezione blu/seme)
   ---------------------------------------------------------------- */
.sp-cta {
	text-align: center;
	position: relative;
	z-index: 2;
}
.sp-cta__lead { font-size: 1.2rem; max-width: 50ch; margin: 0 auto 1.8rem; }
.sp-cta .sp-hero__cta { justify-content: center; }

/* ----------------------------------------------------------------
   12. CONTATTI
   ---------------------------------------------------------------- */
.sp-contact {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
@media (max-width: 820px) { .sp-contact { grid-template-columns: 1fr; } }
.sp-contact__info { display: grid; gap: 1rem; }
.sp-contact__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: 1.1rem 1.3rem;
	box-shadow: var(--sp-shadow-sm);
}
.sp-contact__item .ico {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: var(--sp-teal-mist);
	color: var(--sp-blue);
}
.sp-contact__item strong { display: block; font-family: var(--sp-font-head); color: var(--sp-blue-deep); }
.sp-contact__item a { word-break: break-word; }
.sp-contact__form {
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	box-shadow: var(--sp-shadow);
}

/* Form generico + compatibilità Contact Form 7 */
.sp-form-field { margin-bottom: 1.1rem; }
label { font-family: var(--sp-font-head); font-weight: 600; color: var(--sp-blue-deep); display: block; margin-bottom: 0.4rem; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	font-family: var(--sp-font-body);
	font-size: 1rem;
	color: var(--sp-ink);
	background: var(--sp-cream);
	border: 1.5px solid var(--sp-line);
	border-radius: 14px;
	padding: 0.8rem 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--sp-teal);
	box-shadow: 0 0 0 4px rgba(110, 196, 197, 0.18);
}
.wpcf7-submit, input[type="submit"], button[type="submit"] {
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	background: var(--sp-blue);
	border: 0;
	border-radius: var(--sp-radius-pill);
	padding: 0.95rem 1.9rem;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(0, 118, 161, 0.28);
	transition: background 0.2s ease, transform 0.18s ease;
}
.wpcf7-submit:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--sp-blue-dark); transform: translateY(-2px); }

/* ---- Contact Form 7 (allineato allo stile del tema) ---- */
.wpcf7 .sp-form-field { margin-bottom: 1.1rem; }
.wpcf7 p { margin: 0 0 1.1rem; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 .sp-cf7-privacy { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--sp-muted); }
.wpcf7 .sp-cf7-privacy label { display: inline; font-weight: 500; color: var(--sp-muted); margin: 0; }
.wpcf7-list-item { margin: 0; }
.wpcf7-acceptance input[type="checkbox"] { width: auto; margin-top: 0.2rem; }
/* messaggi di esito */
.wpcf7-response-output {
	margin: 1.1rem 0 0 !important;
	padding: 0.9rem 1.1rem !important;
	border-radius: 14px !important;
	border: 1.5px solid var(--sp-line) !important;
	font-size: 0.95rem;
	background: var(--sp-teal-mist);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #9bd9b2 !important; background: #e8f7ee; color: #1f8a4c; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #e9b4b4 !important; background: #fbeeee; color: #a64545; }
/* validazione campi */
.wpcf7-not-valid { border-color: #d98a8a !important; box-shadow: 0 0 0 4px rgba(217, 138, 138, 0.15) !important; }
.wpcf7-not-valid-tip { color: #a64545; font-size: 0.85rem; margin-top: 0.35rem; }
/* spinner */
.wpcf7-spinner { margin: 0 0 0 0.6rem; }

/* ----------------------------------------------------------------
   13. ARTICOLO / PAGINA (contenuto editoriale)
   ---------------------------------------------------------------- */
.sp-page-header {
	/* Celeste in alto (dietro al titolo), sfuma verso il crema del contenuto:
	   niente fascia celeste vuota sotto il titolo. */
	background: linear-gradient(180deg, var(--sp-teal-mist) 0%, #f3f9f5 55%, var(--sp-cream) 100%);
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(0.5rem, 1.5vw, 1rem);
	text-align: center;
	position: relative;
}
.sp-page-header .sp-eyebrow { justify-content: center; }
.sp-page-header p { color: var(--sp-muted); max-width: 60ch; margin-inline: auto; }

/* Pagine interne: nessuna onda nell'header (resta su home, 404 e footer)
   e stacco ridotto verso il contenuto. */
.sp-page-header .sp-wave { display: none; }
.sp-page-header + section,
.sp-page-header + article {
	padding-top: clamp(1.25rem, 3vw, 2.25rem);
}

.sp-prose { font-size: 1.075rem; }
.sp-prose > * { max-width: var(--sp-container-narrow); margin-inline: auto; }
.sp-prose h2 { margin-top: 2.2em; }
.sp-prose h3 { margin-top: 1.8em; }
.sp-prose img,
.sp-prose .wp-block-image { border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-sm); }
.sp-prose .alignwide { max-width: var(--sp-container); }
.sp-prose .alignfull { max-width: 100%; }

.sp-featured {
	max-width: var(--sp-container);
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	box-shadow: var(--sp-shadow);
}
.sp-featured img { width: 100%; }

/* meta articolo */
.sp-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	color: var(--sp-muted);
	font-size: 0.92rem;
	justify-content: center;
	margin-top: 0.8rem;
}
.sp-entry-meta .sp-badge { margin: 0; }

/* taxonomy pills */
.sp-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ----------------------------------------------------------------
   14. PAGINAZIONE & ARCHIVI
   ---------------------------------------------------------------- */
.sp-pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: clamp(2rem, 5vw, 3rem);
	flex-wrap: wrap;
}
.sp-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.5rem;
	border-radius: var(--sp-radius-pill);
	font-family: var(--sp-font-head);
	font-weight: 700;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	color: var(--sp-blue);
}
.sp-pagination .page-numbers.current { background: var(--sp-blue); color: #fff; border-color: var(--sp-blue); }
.sp-pagination a.page-numbers:hover { background: var(--sp-teal-mist); }

.sp-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.sp-chip {
	font-family: var(--sp-font-head);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--sp-radius-pill);
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	color: var(--sp-blue-deep);
}
.sp-chip:hover, .sp-chip.is-active { background: var(--sp-blue); color: #fff; border-color: var(--sp-blue); }

/* empty state */
.sp-empty {
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3rem);
	background: var(--sp-paper);
	border: 1px dashed var(--sp-teal-light);
	border-radius: var(--sp-radius-lg);
	color: var(--sp-muted);
}
.sp-empty svg { width: 56px; height: 56px; margin: 0 auto 1rem; color: var(--sp-teal); }

/* ----------------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------------- */
.sp-footer {
	background: var(--sp-blue-deep);
	color: #c8e3ec;
	position: relative;
}
.sp-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(1.6rem, 4vw, 3rem);
	padding-block: clamp(2.8rem, 6vw, 4rem);
}
@media (max-width: 820px) { .sp-footer__top { grid-template-columns: 1fr; } }
.sp-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.sp-footer__brand img { height: 64px; background: #fff; padding: 8px 12px; border-radius: 16px; margin-bottom: 1rem; }
.sp-footer__brand p { color: #9fc6d4; font-size: 0.95rem; max-width: 38ch; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sp-footer a { color: #c8e3ec; }
.sp-footer a:hover { color: var(--sp-gold); }
.sp-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-block: 1.3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.88rem;
	color: #8fb6c4;
}
.sp-social { display: flex; gap: 0.6rem; }
.sp-social a {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: #fff;
	transition: background 0.2s ease, transform 0.2s ease;
}
.sp-social a:hover { background: var(--sp-gold); color: var(--sp-blue-deep); transform: translateY(-2px); }

/* ----------------------------------------------------------------
   16. UTILITY
   ---------------------------------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0;
	overflow: hidden; position: absolute; word-wrap: normal !important;
}
.sp-text-center { text-align: center; }
.sp-mt-2 { margin-top: 2rem; }
.sp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.sp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sp-reveal { opacity: 1; transform: none; transition: none; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------------
   17. SINGOLO CONTENUTO (bando / storia / spazio)
   ---------------------------------------------------------------- */
.sp-single {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: start;
}
.sp-single--reverse { grid-template-columns: 320px 1fr; }
@media (max-width: 900px) {
	.sp-single, .sp-single--reverse { grid-template-columns: 1fr; }
}
.sp-single__aside {
	position: sticky;
	top: 100px;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: 1.6rem 1.7rem;
	box-shadow: var(--sp-shadow-sm);
}
@media (max-width: 900px) { .sp-single__aside { position: static; } }
.sp-single__aside h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.sp-single__aside .sp-btn { margin-top: 1.2rem; }

.sp-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sp-font-head);
	font-weight: 700;
	color: var(--sp-blue);
	margin-bottom: 1rem;
}
.sp-back-link svg { transform: rotate(180deg); width: 18px; height: 18px; }

.sp-related { margin-top: 1rem; }

/* commenti */
.sp-comments { margin-top: 1rem; }
.sp-comments ol { list-style: none; padding: 0; }
.sp-comment { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.sp-comment .comment-author { font-family: var(--sp-font-head); font-weight: 700; color: var(--sp-blue-deep); }
.comment-respond { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); padding: 1.6rem; margin-top: 1.5rem; }

/* ----------------------------------------------------------------
   18. NOTE LEGALI + COOKIE BANNER
   ---------------------------------------------------------------- */
.sp-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.sp-legal a { color: #9fc6d4; }
.sp-legal a:hover { color: var(--sp-gold); }

/* Banner discreto in basso a sinistra */
.sp-cookie {
	position: fixed;
	left: clamp(0.8rem, 2vw, 1.4rem);
	bottom: clamp(0.8rem, 2vw, 1.4rem);
	z-index: 1000;
	max-width: 380px;
	width: calc(100% - 1.6rem);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.sp-cookie.is-visible { opacity: 1; transform: none; }
.sp-cookie__inner {
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-lg);
	padding: 1.05rem 1.15rem;
}
.sp-cookie__text {
	margin: 0 0 0.85rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--sp-ink);
}
.sp-cookie__text a { font-weight: 700; }
.sp-cookie__actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.sp-cookie__btn {
	font-family: var(--sp-font-head);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.6rem 1.1rem;
	border-radius: var(--sp-radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sp-cookie__btn--ghost { background: transparent; color: var(--sp-blue); border-color: var(--sp-line); }
.sp-cookie__btn--ghost:hover { background: var(--sp-teal-mist); border-color: var(--sp-teal); }
.sp-cookie__btn--accept { background: var(--sp-blue); color: #fff; }
.sp-cookie__btn--accept:hover { background: var(--sp-blue-dark); }
@media (max-width: 480px) {
	.sp-cookie__actions { flex-wrap: wrap; }
	.sp-cookie__btn { flex: 1; }
}

/* WordPress core helpers */
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .gallery-caption { font-size: 0.88rem; color: var(--sp-muted); text-align: center; }
.sticky, .bypostauthor { display: block; }
.admin-bar .sp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sp-header { top: 46px; } }