/* Salient Custom Menu — alignment + container only.
 *
 * The menu's appearance (typography, spacing, dropdown panels) and the
 * dropdown behaviour are inherited from Salient's own ".sf-menu" CSS and its
 * superfish initialisation, so this file deliberately styles almost nothing.
 * It only positions the menu left / center / right inside the Global Section.
 */

.scm-menu {
	display: block;
	/* Grow to fill available space when the menu shares a flex container (for
	   example a column that also holds a button), rather than forcing 100%
	   width — which squeezed sibling elements down to their minimum width and
	   wrapped their text. In a normal block column the menu still fills the
	   width as a block element does. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Lay the top level out with flexbox so it can be aligned. Salient floats the
 * top-level items by default; flex overrides that cleanly. Sub-menus are
 * absolutely positioned by the theme, so they are unaffected by this. */
.scm-menu > .sf-menu {
	display: flex;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scm-menu > .sf-menu > li {
	float: none;
}

.scm-align-left   > .sf-menu { justify-content: flex-start; }
.scm-align-center > .sf-menu { justify-content: center; }
.scm-align-right  > .sf-menu { justify-content: flex-end; }

/* Editor-only notice shown when no menu is found. */
.scm-menu-empty {
	padding: 12px 16px;
	border: 1px dashed #cc0000;
	color: #cc0000;
	font-size: 13px;
	border-radius: 4px;
}

/* --- Logo element ------------------------------------------------------ */

.scm-logo {
	display: block;
	width: 100%;
	line-height: 0;
}

.scm-logo.scm-align-left   { text-align: left; }
.scm-logo.scm-align-center { text-align: center; }
.scm-logo.scm-align-right  { text-align: right; }

.scm-logo-link {
	display: inline-block;
	line-height: 0;
}

.scm-logo-img,
.scm-logo-img-mobile {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

.scm-logo-img-mobile {
	display: none;
}

.scm-logo-text {
	display: inline-block;
	line-height: normal;
}

@media (max-width: 999px) {
	/* Swap to the dedicated mobile logo when present (heights are set by the
	   element's own scoped <style> block). */
	.scm-logo.scm-has-mobile .scm-logo-img {
		display: none;
	}
	.scm-logo.scm-has-mobile .scm-logo-img-mobile {
		display: inline-block;
	}
}