/*
 * Riga superiore dell'header MediSuite.
 * I colori arrivano come custom properties inline su .msh-header, così questo
 * file resta statico e cacheabile.
 */

.msh-header {
	background: #fff;
}

.msh-inner {
	/* 1240px di contenuto (stessa larghezza di .bd-container del tema, per
	   incolonnare logo e menu) + 15px di gutter per lato. box-sizing:border-box
	   è esplicito e non affidato al reset del tema: con max-width:1270px il
	   box di contenuto resta 1240px solo se il padding vi rientra, quindi se il
	   tema cambiasse regola per questo elemento l'allineamento non si
	   romperebbe silenziosamente. A 1680px il logo comincia a x:220, identico
	   al bordo di .bd-container; sotto i 1240px il gutter di 15px evita che la
	   riga tocchi il bordo del viewport come fa .bd-container, che qui non ha
	   un padding proprio a differenza del contenuto del tema più in basso. */
	box-sizing: border-box;
	max-width: 1270px;
	margin: 0 auto;
	padding: 26px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.msh-logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.msh-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 96px;
}

.msh-claim {
	flex: 1 1 auto;
	min-width: 0;
	border-left: 3px solid var(--msh-accent, #f5a623);
	padding-left: 26px;
}

.msh-claim__title {
	margin: 0;
	color: var(--msh-claim, #1b4f9c);
	font-size: 24px;
	line-height: 1.15;
	font-weight: 700;
}

.msh-claim__sub {
	margin: 7px 0 0;
	color: var(--msh-text, #333);
	font-size: 14px;
	line-height: 1.35;
}

.msh-shortcuts {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msh-shortcut {
	margin: 0;
	padding: 0 14px;
}

.msh-shortcut + .msh-shortcut {
	border-left: 1px solid #e3e6ea;
}

.msh-shortcut__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 9px;
	text-decoration: none;
	color: var(--msh-claim, #1b4f9c);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.msh-shortcut__link:hover,
.msh-shortcut__link:focus {
	text-decoration: none;
	opacity: 0.75;
}

.msh-shortcut__icon,
.msh-shortcut__icon svg {
	display: block;
	width: 34px;
	height: 34px;
	color: var(--msh-accent, #f5a623);
}

/*
 * L'icona SVG di default (sopra) è markup nostro, sempre quadrato: dimensione
 * fissa. L'icona caricata dall'utente può avere qualunque proporzione, quindi
 * riceve un riquadro delimitato invece di un quadrato forzato, con
 * object-fit:contain per non deformarla.
 */
img.msh-shortcut__icon {
	display: block;
	width: auto;
	height: auto;
	max-width: 54px;
	max-height: 54px;
	object-fit: contain;
	border: 1px solid #e3e6ea;
	border-radius: 100px;
	corner-shape: squircle;
}

/*
 * Nasconde la riga logo del tema SOLO se la nostra riga è stata iniettata.
 * La condizione sta nel selettore, quindi è impossibile restare senza logo se
 * l'iniezione non è andata a buon fine.
 */
.header-wrapper:has(.msh-header) .header-container {
	display: none;
}

/* Menu del tema allineato a sinistra invece che centrato.
 * Il tema centra il menu con `text-align:center` sul <nav>, e .primary-menu è
 * un inline-block a cui il tema stesso applica già `text-align:left`: quel
 * `text-align` interno non può spostare un inline-block shrink-to-fit,
 * l'allineamento del blocco dipende dal <nav>. La regola va quindi sul <nav>,
 * non sul contenitore interno. Misurato a 1680px: logo a x=213,
 * #navigation .primary-menu passa da x=232 a x=213 con questa regola. */
body.msh-nav-left nav#navigation.center-item-menu {
	text-align: left;
}

/* Sotto la larghezza del contenitore le tre zone non stanno in riga. */
@media only screen and (max-width: 1239px) {
	.msh-shortcuts {
		display: none;
	}
	.msh-claim {
		flex: unset;
	}
}

/* Soglia con cui il tema stesso passa al menu hamburger. */
@media only screen and (max-width: 900px) {
	.msh-claim {
		display: none;
	}

	.msh-inner {
		justify-content: center;
		padding: 14px 15px;
	}

	.msh-logo__img {
		max-width: 200px;
	}
}