/*
 * Between Dots — stili dei soli componenti custom.
 *
 * Colori, font e spaziature delle pagine arrivano da Elementor (Impostazioni
 * sito + controlli dei widget). Qui c'è solo la struttura che Elementor non
 * può esprimere da sola: layout della mappa, menu a tendina, modulo contatti.
 * I colori indicati sotto sono ripieghi: i controlli di stile dei widget li
 * sovrascrivono.
 */

/* ------------------------------------------------------------ header/footer */

.bd-site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

.bd-site-footer .elementor-widget-text-editor a {
	color: inherit;
	text-decoration: none;
}

.bd-site-footer .elementor-widget-text-editor a:hover {
	opacity: .75;
}

/* Miniature delle card: ritaglio uniforme anche senza controlli Elementor.
 * La classe del widget entra nel selettore per battere `img{height:auto}`
 * dei fogli caricati dopo questo. */
.elementor-widget-image.bd-img-cover img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* ------------------------------------------------------------ menu
 * Aspetto fisso come nel design: dall'editor si scelgono solo il menu e i testi.
 */

.bd-nav {
	--bd-nav-navy: #114B7D;
	--bd-nav-red: #A20A0A;
	--bd-nav-cream: #FFFAF2;
	--bd-nav-line: #E6DDCD;

	position: relative;
}

.bd-nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-nav-list > li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* La classe radice entra nel selettore per battere il colore dei link dello
 * Stile del tema (Kit), che Elementor carica dopo questo foglio: senza di essa
 * tutte le voci del menu risultavano rosse. */
.bd-nav .bd-nav-list a {
	display: block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-nav-navy);
	text-decoration: none;
}

/* Rosso solo al passaggio del mouse (o da tastiera). */
.bd-nav .bd-nav-list a:hover,
.bd-nav .bd-nav-list a:focus-visible {
	color: var(--bd-nav-red);
}

/* La voce attiva resta blu: la posizione la segna il pallino qui sotto. */
.bd-nav .bd-nav-list > li.current-menu-item > a,
.bd-nav .bd-nav-list > li.current-menu-ancestor > a,
.bd-nav .bd-nav-list > li.current-page-ancestor > a {
	color: var(--bd-nav-navy);
}

.bd-nav-dot {
	display: block;
	width: 5px;
	height: 5px;
	margin-top: 6px;
	border-radius: 999px;
	background: transparent;
}

.bd-nav-list > li.current-menu-item > .bd-nav-dot,
.bd-nav-list > li.current-menu-ancestor > .bd-nav-dot,
.bd-nav-list > li.current-page-ancestor > .bd-nav-dot {
	background: var(--bd-nav-red);
}

.bd-nav--no-dots .bd-nav-dot {
	display: none;
}

.bd-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	display: none;
	flex-direction: column;
	gap: 12px;
	min-width: 170px;
	max-width: min(300px, 70vw);
	margin: 6px 0 0;
	padding: 20px;
	list-style: none;
	text-align: left;
	background: var(--bd-nav-cream);
	border: 1px solid var(--bd-nav-line);
	border-radius: 10px;
	box-shadow: 0 14px 30px rgba(17, 75, 125, .16);
}

/* `is-open-sub` la mette bd-nav.js: tiene aperto il pannello per un istante
 * dopo che il mouse esce, altrimenti attraversare lo spazio fra la voce e il
 * pannello lo fa sparire prima di poterlo cliccare. */
.bd-nav-list > li:hover > .sub-menu,
.bd-nav-list > li:focus-within > .sub-menu,
.bd-nav-list > li.is-open-sub > .sub-menu {
	display: flex;
}

/* Ponte invisibile sopra il pannello: copre i 6px di stacco dalla voce, così
 * il puntatore non esce mai dall'area sensibile. */
.bd-nav-list .sub-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px;
}

.bd-nav-list .sub-menu li {
	display: block;
	width: 100%;
}

@media (max-width: 1024px) {
	/* Come nel design sotto i 900px: crenatura piu` stretta, cosi` le voci
	 * stanno su una riga anche con il corpo piu` grande. */
	.bd-nav .bd-nav-list a {
		letter-spacing: .05em;
	}

	.bd-nav-list {
		gap: 16px;
	}
}

.bd-nav .bd-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	color: var(--bd-nav-navy);
	background: none;
	border: 0;
	cursor: pointer;
}

.bd-nav-burger {
	display: flex;
	align-items: center;
	gap: 3px;
}

.bd-nav-burger i {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: currentColor;
}

.bd-nav-empty {
	margin: 0;
	opacity: .7;
}

/* Menu compatto fino a 900px, non 767: sopra quella soglia logo e voci stanno
 * in riga (301 + 32 + 460 = 793px, contro 836px di contenuto a 900px), sotto
 * no, e l'header passava da 101 a 171px. */
@media (max-width: 900px) {
	.bd-nav .bd-nav-toggle {
		display: inline-flex;
	}

	.bd-nav-panel {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 20;
		display: none;
		min-width: 230px;
		max-width: 80vw;
		padding: 20px;
		background: var(--bd-nav-cream);
		border: 1px solid var(--bd-nav-line);
		border-radius: 10px;
		box-shadow: 0 14px 30px rgba(17, 75, 125, .16);
	}

	.bd-nav.is-open .bd-nav-panel {
		display: block;
	}

	.bd-nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.bd-nav-list > li {
		align-items: flex-start;
		width: 100%;
	}

	.bd-nav .bd-nav-list a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.bd-nav-list .sub-menu {
		position: static;
		display: flex;
		gap: 0;
		min-width: 0;
		margin: 0 0 8px;
		padding: 0 0 0 16px;
		background: none;
		border: 0;
		border-left: 2px solid var(--bd-nav-line);
		border-radius: 0;
		box-shadow: none;
	}

	.bd-nav-dot {
		display: none;
	}
}

/* ------------------------------------------------------------ mappa
 * Riproduce 1:1 la cartina del design (maps/country-map.html). L'aspetto è
 * fisso: i colori si cambiano da qui, non dall'editor.
 */

.bd-map {
	--bd-map-cream: #FFFAF2;
	--bd-map-land: #DCCBAF;
	--bd-map-neighbour: #FBF4E9;
	--bd-map-navy: #114B7D;
	--bd-map-navy-soft: #4B7BA5;
	--bd-map-red: #A20A0A;
	--bd-map-line: #E6DDCD;

	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	color: var(--bd-map-navy);
}

/* display:flex sui figli vincerebbe sullo stile utente-agente di [hidden]. */
.bd-map [hidden] {
	display: none !important;
}

.bd-map-panel {
	display: flex;
	flex: 2 1 420px;
	min-width: 0;
	flex-direction: column;
	gap: 12px;
}

.bd-map-side {
	display: flex;
	flex: 1 1 280px;
	min-width: 0;
	flex-direction: column;
	gap: 20px;
}

/* Il riquadro che nel design era l'iframe: cartina + didascalia + crediti. */
.bd-map-frame {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 400px;
	background: var(--bd-map-cream);
}

.bd-map-box {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--bd-map-line);
	border-radius: 4px;
}

.bd-map-box svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bd-map-neighbour {
	fill: var(--bd-map-neighbour);
	stroke: var(--bd-map-line);
	stroke-width: 1;
}

.bd-map-country {
	fill: var(--bd-map-land);
	stroke: var(--bd-map-navy);
	stroke-width: 1.4;
}

.bd-map-route {
	fill: none;
	stroke: var(--bd-map-red);
	stroke-width: 2;
	stroke-dasharray: 7 7;
	stroke-linejoin: round;
}

.bd-map-pin {
	cursor: pointer;
}

.bd-map-pin circle {
	fill: var(--bd-map-navy);
	stroke: var(--bd-map-cream);
	stroke-width: 2;
}

.bd-map-pin.is-active circle {
	fill: var(--bd-map-red);
	stroke-width: 3;
}

.bd-map-pin text {
	fill: var(--bd-map-cream);
	font-size: 13px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}

.bd-map-pin:focus {
	outline: none;
}

.bd-map-pin:focus-visible circle {
	stroke: var(--bd-map-red);
	stroke-width: 4;
}

.bd-map-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.bd-map-caption-k {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-map-red);
}

.bd-map-caption-v {
	font-size: 14px;
	color: var(--bd-map-navy);
}

.bd-map-credit {
	margin: 0;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--bd-map-navy-soft);
}

.bd-map-hint {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-map-navy);
}

/* Riquadro foto della tappa: come nel design, con l'etichetta in basso a
 * sinistra che cambia insieme alla tappa selezionata. */
.bd-map-photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 300px;
	margin: 0;
	padding: 12px;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--bd-map-cream);
	background-image: repeating-linear-gradient(135deg,
		rgba(17, 75, 125, .07) 0 6px, transparent 6px 14px);
}

.bd-map-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bd-map-photo-label {
	position: relative;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-map-navy-soft);
	background: var(--bd-map-cream);
	border-radius: 4px;
}

/* Cambio tappa percepibile senza spostare nulla. */
.bd-map-photo,
.bd-map-detail {
	animation: bd-map-fade .18s ease-out;
}

@keyframes bd-map-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-map-photo,
	.bd-map-detail {
		animation: none;
	}
}

.bd-map-detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--bd-map-cream);
	border: 1px solid var(--bd-map-line);
	border-radius: 10px;
}

.bd-map-detail p,
.bd-map-detail h3 {
	margin: 0;
}

.bd-map-detail-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-map-red);
}

.bd-map-detail-title {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bd-map-navy);
}

.bd-map-detail-when {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-map-navy);
}

.bd-map-detail-note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bd-map-navy);
}

.bd-map-stops {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-map-stops li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bd-map-stops li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--bd-map-red);
}

/* La classe radice entra nel selettore per battere lo stile dei pulsanti del
 * Kit, caricato dopo questo foglio: senza di essa ogni tappa dell'elenco si
 * ritrovava dentro una pillola con bordo. */
.bd-map .bd-map-stops button {
	min-height: 44px;
	padding: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bd-map-navy);
	text-align: left;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.bd-map .bd-map-stops button:hover {
	color: var(--bd-map-red);
}

.bd-map .bd-map-stops li.is-active button {
	font-weight: 700;
	color: var(--bd-map-red);
}

@media (max-width: 767px) {
	.bd-map-frame {
		height: 320px;
	}
}

/* ------------------------------------------------------------ modulo
 * Aspetto fisso come nel design: dall'editor si cambiano i campi e i testi.
 */

.bd-form {
	--bd-form-navy: #114B7D;
	--bd-form-red: #A20A0A;
	--bd-form-btn: #C63D4D;
	--bd-form-cream: #FFFAF2;
	--bd-form-line: #E6DDCD;
	--bd-form-tint: rgba(17, 75, 125, .07);

	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	color: var(--bd-form-navy);
}

.bd-form > * {
	flex: 1 1 100%;
}

.bd-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bd-form-field--50 {
	flex: 1 1 calc(50% - 10px);
	min-width: 220px;
}

.bd-form-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-form-navy);
}

.bd-form .bd-form-control {
	width: 100%;
	min-height: 48px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 16px;
	color: var(--bd-form-navy);
	background: #FFFFFF;
	border: 1px solid var(--bd-form-line);
	border-radius: 4px;
}

.bd-form .bd-form-control:focus {
	outline: 2px solid var(--bd-form-red);
	outline-offset: 1px;
}

/* Radice nel selettore anche qui: altrimenti `.bd-form .bd-form-control`
 * (due classi) batterebbe queste regole e la textarea tornerebbe alta 48px. */
.bd-form .bd-form-textarea {
	min-height: 130px;
	padding: 16px 20px;
	line-height: 1.6;
	resize: vertical;
}

.bd-form-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.bd-form-check input {
	margin-top: 3px;
}

.bd-form .bd-form-submit {
	flex: 0 0 auto;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 32px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-form-cream);
	background: var(--bd-form-btn);
	border: 1px solid var(--bd-form-btn);
	border-radius: 999px;
	cursor: pointer;
}

.bd-form .bd-form-submit:hover {
	background: var(--bd-form-navy);
	border-color: var(--bd-form-navy);
}

.bd-form-banner,
.bd-form-notice {
	margin: 0;
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-form-red);
	background: var(--bd-form-tint);
	border-radius: 4px;
}

.bd-form-notice--ok {
	color: var(--bd-form-navy);
	background: rgba(17, 75, 125, .12);
}

.bd-form-notice--ko {
	background: rgba(162, 10, 10, .1);
}

.bd-form-trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ larghezza di lettura
 * Ricalca i limiti del design (62 caratteri per riga sui paragrafi guida e in
 * copertina). Si tolgono cancellando la classe da Avanzate > Classi CSS.
 */

.bd-measure-lead {
	max-width: 755px;
}

.bd-hero-title {
	max-width: 605px;
}

.bd-hero-text {
	max-width: 560px;
}

/* ------------------------------------------------------------ pulsanti
 * Nel design l'altezza del pulsante viene da `min-height`, non dal padding
 * verticale: 48px per `.button-primary`/`.button-ghost`, 38px per
 * `.button-sm`, 36px per le pillole filtro. Il padding orizzontale, i colori
 * e il testo restano modificabili da Elementor.
 */

.bd-btn .elementor-button,
.bd-tag .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bd-btn .elementor-button {
	min-height: 48px;
}

.bd-btn-sm .elementor-button {
	min-height: 38px;
}

.bd-tag .elementor-button {
	min-height: 36px;
}

/* ------------------------------------------------------------ gruppi Chi siamo
 * `.chi-group*` e `.photo-slot-*` del design: la foto va sotto al testo oppure
 * di fianco, alta quanto il testo. Il widget immagine resta sostituibile
 * dall'editor: qui c'e` solo il ritaglio.
 */

/* foto a tutta larghezza sotto la coppia di paragrafi (.photo-slot-chi) */
.elementor-widget-image.bd-photo-chi img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

/* foto di fianco al testo, alta quanto la colonna (.photo-slot-side):
 * la colonna si stira all'altezza della riga, il widget riempie la colonna
 * e l'immagine riempie il widget. */
.bd-photo-side-col {
	align-self: stretch;
}

.bd-photo-side-col > .elementor-widget-image.bd-photo-side {
	display: flex;
	flex: 1 1 auto;
	min-height: 160px;
}

.elementor-widget-image.bd-photo-side img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}

@media (max-width: 767px) {
	.elementor-widget-image.bd-photo-chi img {
		height: 150px;
	}

	.elementor-widget-image.bd-photo-side img {
		height: 180px;
		min-height: 0;
	}
}

/* ------------------------------------------------------------ card destinazione
 * `.card-dest-body .stat-row{margin-top:auto}`: dentro le card la riga delle
 * statistiche scende in fondo, cosi` le card affiancate restano allineate.
 */

/* `.e-con` nel selettore: Elementor scrive il margine sui container con la
 * stessa specificita` e, caricato dopo, vincerebbe — la riga delle statistiche
 * restava attaccata al testo invece di scendere in fondo. */
.e-con.bd-push {
	margin-top: auto;
}

/* ------------------------------------------------------------ paragrafi
 * Il tema (Astra) da` ai <p> un margine di 1.75em, che si somma al `gap` dei
 * contenitori Elementor: ne uscivano buchi di ~48px dove il design ne vuole
 * 20. Nel design `.body` ha `margin:0` e la distanza la decide solo il
 * contenitore, quindi qui i margini si azzerano. Fra due paragrafi dello
 * stesso widget resta lo stacco di 12px (sp-2) del design.
 */

.elementor-widget-text-editor p {
	margin: 0;
	text-align: justify;
	hyphens: auto;
}

.elementor-widget-text-editor p + p {
	margin-top: 12px;
}

/* Titoli, occhielli e citazioni non si giustificano. */
.elementor-widget-text-editor blockquote p,
.bd-measure-lead p,
.bd-hero-text p {
	text-align: left;
	hyphens: manual;
}

/* ------------------------------------------------------------ menu di sezione
 * Il sommario a sinistra nella prima sezione delle pagine destinazione:
 * porta al blocco corrispondente e segna quello che si sta leggendo.
 * Le voci e i loro link si modificano dal widget elenco in Elementor.
 */

/* `.e-con` nel selettore: Elementor mette `position:relative` sui container
 * con la stessa specificita`, e vincerebbe essendo caricato dopo. */
.e-con.bd-secnav {
	position: sticky;
	top: 130px;
	align-self: flex-start;
}

.bd-secnav .elementor-icon-list-items {
	border-left: 2px solid var(--bd-nav-line, #E6DDCD);
}

.bd-secnav .elementor-icon-list-item {
	padding-left: 12px;
	border-left: 2px solid transparent;
	margin-left: -2px;
	transition: border-color .15s ease-out, color .15s ease-out;
}

.bd-secnav .elementor-icon-list-item > a {
	color: inherit;
	text-decoration: none;
}

.bd-secnav .elementor-icon-list-item:hover {
	border-left-color: #C63D4D;
}

.bd-secnav .elementor-icon-list-item:hover > a,
.bd-secnav .elementor-icon-list-item.is-current > a {
	color: #A20A0A;
}

.bd-secnav .elementor-icon-list-item.is-current {
	border-left-color: #A20A0A;
}

/* L'header è appiccicato in alto: lo stacco evita che copra il titolo
 * della sezione appena raggiunta. */
[id^="bd-"].e-con,
[id^="bd-"] {
	scroll-margin-top: 130px;
}

@media (max-width: 767px) {
	.e-con.bd-secnav {
		position: static;
	}

	[id^="bd-"].e-con,
	[id^="bd-"] {
		scroll-margin-top: 96px;
	}
}