/* Ritocchi del sito apinano.app sul template OLMO: logo (icona + nome) e piccoli adattamenti. */

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.brand img {
	height: 34px;
	width: 34px;
	display: block;
}

.brand-text {
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.2px;
	color: #1e1e2f;
}

.brand-white .brand-text {
	color: #fff;
}

.smllogo .brand img {
	height: 30px;
	width: 30px;
}

.footer-brand {
	display: inline-block;
	margin-bottom: 20px;
}

/* Immagine dell'app nella pagina: bordo e ombra leggeri, come una finestra. */
.app-shot {
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(20, 20, 50, 0.22);
}

/* Screenshot cliccabili: aprono l'ingrandimento (magnific popup). */
a.image-link {
	display: block;
	cursor: zoom-in;
}

/* Elenchi dei testi legali. */
.terms-box h5 {
	margin-top: 34px;
}

.terms-box .p-lg b {
	font-weight: 500;
}

/* Pulsante non ancora disponibile. */
.btn.disabled-soon {
	opacity: 0.6;
	pointer-events: none;
}

/* Logo nell'intestazione: centrato in verticale rispetto alle voci del menu (alte 70 px: line-height 50 + padding 10+10).
   Non si cambia il "display" del link: il template mostra e nasconde il logo chiaro e quello scuro con display
   (none / block) in base allo scorrimento della pagina, e una regola con display:flex veniva annullata proprio
   quando l'intestazione si fissa in alto. Il logo sta sulla riga alta 70 px e si allinea con vertical-align. */
.desktoplogo > a {
	line-height: 70px;
}

.desktoplogo .brand {
	vertical-align: middle;
}

/* Logo nell'intestazione mobile: centrato nella barra. */
.wsmobileheader .smllogo {
	display: flex;
	align-items: center;
	height: 100%;
}

.wsmobileheader .smllogo a {
	display: flex;
	align-items: center;
}

/* ---- Schermi piccoli (menu mobile del template, sotto i 992 px) ---- */
@media only screen and (max-width: 991px) {

	/* Logo e nome nella barra mobile (alta 80 px): centrati in verticale. Il template li abbassa con un
	   margin-top diverso per ogni larghezza; qui si annulla e si centra nella barra. */
	.wsmobileheader .smllogo {
		display: flex !important;
		align-items: center;
		height: 100%;
		margin-top: 0 !important;
	}

	.wsmobileheader .smllogo .brand img {
		height: 30px;
		width: 30px;
	}

	/* Menu mobile: cassetto sopra la pagina. Il template spinge la pagina di lato di 300 px mentre il menu
	   è largo 350 px, e il contenuto restava in parte sotto il menu: ora la pagina resta ferma, scurita, e il
	   menu le sta sopra a destra, sotto la barra con il pulsante di chiusura. */
	.wsactive .wsmenucontainer,
	.wsactive .wsmobileheader {
		margin-right: 0 !important;
	}

	/* Le voci partono sotto la barra mobile, alta 80 px nei css responsive del template (54 px solo nel css base):
	   con meno spazio la prima voce restava sotto la barra, a metà nascosta. */
	.wsmenu > .wsmenu-list {
		padding-top: 80px;
		/* Sopra lo strato scuro che copre la pagina. */
		position: relative;
		z-index: 9000;
	}

	/* Lo strato scuro copre tutta la pagina e finisce esattamente dove inizia il menu, qualunque sia la larghezza
	   del menu (350, 345, 290 o 250 px a seconda dello schermo): il template la calcolava con valori diversi e a
	   volte restava sopra il bordo del menu. Il menu gli sta sopra. */
	.overlapblackbg {
		width: 100% !important;
		left: 0;
	}
}

/* ---- Selettore della lingua nell'intestazione ---- */
.lang-flag {
	width: 22px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Elenco lungo (31 lingue): sotto il pulsante, con scorrimento. */
.wsmenu > .wsmenu-list > li.lang-menu > .sub-menu.lang-list {
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
}

.lang-list li.active-lang > a {
	font-weight: 700;
}

/* Quando c'è il menu mobile (sotto i 992 px) l'elenco si apre dentro il menu. */
@media only screen and (max-width: 991px) {
	.wsmenu > .wsmenu-list > li.lang-menu > .sub-menu.lang-list {
		max-height: none;
		overflow-y: visible;
	}
}

/* Icona del sistema operativo accanto al nome nella pagina Download (Windows e macOS). */
.os-title {
	display: flex;
	align-items: center;
}

.os-title-icon {
	width: 28px;
	height: 28px;
	margin-right: 12px;
	object-fit: contain;
}