/*** MastheadComponent ***/

.som.masthead-component {
	display: box;
	layout-direction: horizontal;
}

.som.masthead-component > .brand-component {
	font-size: var(--som-font-size-3);
	emissive: var(--som-primary-color);
}

.som.masthead-component > .menu-component {
	margin: 0 0 0 1cm;
}

.dom.masthead-component {
	display: block;
	position: relative;
	border-bottom: dashed 1px var(--dom-secondary-color);
	z-index: 6;
}

.dom.masthead-component > .heading-component {
	display: inline-block;
	margin-top: 0;
	padding: var(--dom-outer-container-padding);
	padding-bottom: calc(var(--dom-outer-container-padding) - 8px);
	emissive: var(--dom-primary-color);
	background-color: var(--dom-background-color);
}

.dom.masthead-component > .menu-component {
	display: inline-block;
	vertical-align: top;
	position: absolute;
	top: 18px;
	right: var(--dom-outer-container-padding);
}

.dom.masthead-component > .mode-switcher-component {
	text-align: right;
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translate(0, -3px);
}

.portal-dom.heading-component.brand-component {
	background-color: inherit;
	border-bottom: dashed var(--dom-container-border-width);
}