/* Itinerari in bicicletta in Irpinia
   Tutte le regole sono confinate dentro .pci-itinerari per non interferire
   con il tema o con Elementor. */

.pci-itinerari{
	/* --pci-base e --pci-altezza arrivano dallo shortcode.
	   Il colore di fondo va accordato alla sezione che ospita il modulo. */
	--pci-base:#2F7041;
	--pci-carta:#F4F1E8;
	--pci-ocra:#E3B23C;
	--pci-inchiostro:#241B18;
	--pci-altezza:620px;

	display:flex;
	flex-direction:row;
	height:var(--pci-altezza);
	margin:0 0 1.5em;
	background:transparent;
	font-family:inherit;
	color:var(--pci-carta);
	line-height:1.5;
}
.pci-itinerari *,
.pci-itinerari *::before,
.pci-itinerari *::after{box-sizing:border-box}

.pci-itinerari__pannello{
	width:320px;
	flex:0 0 320px;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	background:var(--pci-base);
	padding-right:18px;
}

.pci-itinerari__testata{padding:4px 4px 14px}
.pci-itinerari__titolo{
	font-family:Georgia,"Times New Roman",serif;
	font-size:25px;
	font-weight:400;
	line-height:1.12;
	letter-spacing:-.01em;
	margin:0;
	color:var(--pci-carta);
}
.pci-itinerari__intro{
	margin:9px 0 0;
	font-size:13.5px;
	color:rgba(255,255,255,.78);
	max-width:34ch;
}

.pci-itinerari__lista{
	flex:1;
	min-height:0;
	overflow-y:auto;
	padding:0 4px 13px 0;
}

.pci-itinerari__scheda{
	display:block;
	width:100%;
	margin:0 0 9px;
	padding:13px 14px;
	text-align:left;
	cursor:pointer;
	font:inherit;
	color:inherit;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.18);
	border-left:4px solid var(--pci-c);
	border-radius:3px;
	box-shadow:none;
	text-transform:none;
	letter-spacing:normal;
	transition:background .15s;
}
.pci-itinerari__scheda:hover{background:rgba(255,255,255,.1);color:inherit}
.pci-itinerari__scheda:focus-visible{outline:2px solid var(--pci-ocra);outline-offset:2px}
.pci-itinerari__scheda[aria-pressed="true"]{
	background:rgba(255,255,255,.13);
	border-color:rgba(255,255,255,.45);
	border-left-color:var(--pci-c);
}
.pci-itinerari__nome{display:block;margin:0;font-size:15px;font-weight:600;color:inherit;font-family:inherit;text-transform:none}
.pci-itinerari__via{display:block;margin:5px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66)}
.pci-itinerari__km{display:block;margin:7px 0 0;font-size:12px;color:var(--pci-ocra);font-variant-numeric:tabular-nums}

.pci-itinerari__comandi{
	padding:14px 0 4px;
	border-top:1px solid rgba(255,255,255,.18);
}
.pci-itinerari__riga{display:flex;gap:8px;align-items:center}
.pci-itinerari__riga + .pci-itinerari__riga{margin-top:10px}

.pci-itinerari__bottone{
	font:inherit;
	font-size:13px;
	line-height:1.2;
	cursor:pointer;
	padding:9px 12px;
	color:var(--pci-carta);
	background:transparent;
	border:1px solid rgba(255,255,255,.34);
	border-radius:3px;
	text-transform:none;
	letter-spacing:normal;
	box-shadow:none;
	transition:background .15s,border-color .15s;
}
.pci-itinerari__bottone:hover{background:rgba(255,255,255,.14);color:var(--pci-carta)}
.pci-itinerari__bottone:focus-visible{outline:2px solid var(--pci-ocra);outline-offset:2px}
.pci-itinerari__bottone--principale{
	flex:1;
	font-weight:600;
	color:rgba(0,0,0,.78);
	background:var(--pci-ocra);
	border-color:var(--pci-ocra);
}
.pci-itinerari__bottone--principale:hover{
	background:#F0C45C;
	border-color:#F0C45C;
	color:rgba(0,0,0,.78);
}
.pci-itinerari__bottone--vel.is-attivo{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.pci-itinerari__etichetta{font-size:12px;color:rgba(255,255,255,.66)}

.pci-itinerari__barra{
	height:3px;
	margin-top:12px;
	border-radius:2px;
	background:rgba(255,255,255,.2);
	overflow:hidden;
}
.pci-itinerari__barra i{
	display:block;
	height:100%;
	width:0;
	background:var(--pci-ocra);
	transition:width .12s linear;
}
.pci-itinerari__stato{
	margin:8px 0 0;
	min-height:17px;
	font-size:12px;
	color:rgba(255,255,255,.68);
}

.pci-itinerari__mappa{
	flex:1;
	min-width:0;
	height:100%;
	background:#e8e4da;
	border-radius:4px;
	overflow:hidden;
	box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.pci-itinerari__mappa.leaflet-container{font-family:inherit;font-size:13px}
.pci-itinerari__mappa img{max-width:none}

.pci-itinerari__mappa .leaflet-popup-content-wrapper{
	border-radius:3px;
	background:var(--pci-carta);
	color:var(--pci-inchiostro);
	box-shadow:0 6px 22px rgba(44,11,24,.28);
}
.pci-itinerari__mappa .leaflet-popup-tip{background:var(--pci-carta)}
.pci-itinerari__mappa .leaflet-popup-content{margin:13px 15px;font-size:13.5px;line-height:1.5}
.pci-itinerari__mappa .leaflet-popup-content p{margin:0}
.pci-itinerari__mappa .leaflet-popup-content .pci-popup__nome{
	margin:0 0 5px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:18px;
	font-weight:400;
	color:var(--pci-inchiostro);
}
.pci-itinerari__mappa .leaflet-popup-content .pci-popup__tappa{
	margin:0 0 7px;
	font-size:11.5px;
	color:#8a7a68;
	font-variant-numeric:tabular-nums;
}

.pci-punto{
	width:13px;
	height:13px;
	border-radius:50%;
	background:var(--pci-carta);
	border:3px solid var(--pci-c);
	box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.pci-punto__nome{
	position:absolute;
	left:18px;
	top:-3px;
	white-space:nowrap;
	font-size:11.5px;
	font-weight:600;
	color:#2b2119;
	text-shadow:0 0 3px #f6f2e8,0 0 3px #f6f2e8,0 0 6px #f6f2e8;
	pointer-events:none;
}

.pci-ciclista{width:74px;height:70px;pointer-events:none}
.pci-ciclista img{
	display:block;
	width:100%;
	height:100%;
	filter:drop-shadow(0 4px 5px rgba(44,11,24,.4));
	animation:pci-sobbalzo .5s ease-in-out infinite;
}
.pci-ciclista.is-destra img{
	transform:scaleX(-1);
	animation-name:pci-sobbalzo-destra;
}
.pci-ciclista.is-fermo img{animation:none}
@keyframes pci-sobbalzo{50%{transform:translateY(-2.5px)}}
@keyframes pci-sobbalzo-destra{
	0%,100%{transform:scaleX(-1)}
	50%{transform:scaleX(-1) translateY(-2.5px)}
}

@media (max-width:820px){
	.pci-itinerari{flex-direction:column;height:auto}
	.pci-itinerari__pannello{width:100%;flex:0 0 auto;order:2;padding:16px 0 0}
	.pci-itinerari__lista{overflow:visible;padding:0}
	.pci-itinerari__mappa{order:1;height:56vh;min-height:340px;flex:0 0 auto}
	.pci-itinerari__titolo{font-size:22px}
	.pci-ciclista{width:58px;height:55px}
}

@media (prefers-reduced-motion:reduce){
	.pci-ciclista img{animation:none}
	.pci-itinerari__barra i{transition:none}
}