/* responsivemenu styling */

/* We have an additional indicator on links, add the same padding as the fold
 * toggle so things line up nicely.
 */
.responsivemenu-link-indicator {
	padding: 0.5em;
}

/* remove margin, the width of the element is set by the min-width of the
 * responsivemenu wrapper, see block-language
 */
.region-header > nav .block-inner {
	margin: 0;
}

/* 100% height of the contents so that it can be the height of the header,
 * and flex center the contents (the menu toggle) */
.region-header > nav .block-inner,
.region-header > nav .responsivemenu-wrapper {
	height: 100%;
}

.region-header > nav .responsivemenu-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: var(--dim-header-block-min-width);
}

/* remove the unseemly space below svg icons */
.region-header > nav .responsivemenu-wrapper svg {
	display: block;
}

/* color and a width */
.region-header > nav .responsivemenu-wrapper > ul.menu {
	background-color: var(--color-dark-blue);
	padding: 0 1em 1em 1em;
}

.region-header > nav .responsivemenu-wrapper > ul.menu ul.menu {
	padding: 0 0 1em 1em;
}

/* wrap with a flex */
.region-header > nav .responsivemenu-item-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

/* item styling, padding and text transformation */
.region-header > nav .responsivemenu-item-wrapper > .responsivemenu-item {
	display: block;
	padding: 0.5em 1em;

	flex-grow: 1;

	line-height: 2;
	text-transform: uppercase;
}

/* use the default cursor for non-link items */
.region-header > nav .responsivemenu-item-wrapper > span.responsivemenu-item {
	cursor: default;
}

/* submenu indicators below the open (active) submenu parent  */
.region-header > nav li.menu-item--expanded > .responsivemenu-item-wrapper > .responsivemenu-item:after {
	content: '';
	display: block;

	width: 0;
	height: 0;

	border-width: 0 0 1px 0;
	border-style: solid;

	transition: all 1s ease-in-out;
	opacity: 0;
}

.region-header > nav li.menu-item--expanded > .responsivemenu-item-wrapper > .responsivemenu-item.responsivemenu-fold-toggle-active:after {
	width: 100%;
	opacity: 1;
}

/* animate away the vertical bit of the plus */
.region-header > nav .responsivemenu-item-wrapper .responsivemenu-fold-toggle .submenu-vertical {
	opacity: 1;
	transition: all .2s ease-in-out;
	transform-origin: 50% 50%;
}

.region-header > nav .responsivemenu-item-wrapper .responsivemenu-fold-toggle.responsivemenu-fold-toggle-active .submenu-vertical {
	opacity: 0;
	transform: rotate(90deg);
}

/* main menu toggle, overrides default styling */

/* always show middle dot */
ul.menu.responsivemenu-unfolded + .responsivemenu-fold-toggle .responsivemenu-fold-middle {
	opacity: 1;
}

/* reset transform origin or the bits will slide around weirdly */
ul.menu + .responsivemenu-fold-toggle .responsivemenu-fold-top,
ul.menu + .responsivemenu-fold-toggle .responsivemenu-fold-bottom {
	transform-origin: 50px 50px;
}

ul.menu.responsivemenu-unfolded + .responsivemenu-fold-toggle .responsivemenu-fold-top,
ul.menu.responsivemenu-unfolded + .responsivemenu-fold-toggle .responsivemenu-fold-bottom {
	transform-origin: 50px 50px;
	transform: rotate(-90deg);
}

/* hero overlay font size */
.node--view-mode-hero .group-overlay .field--name-field-hero-text .field__item > *,
.node--view-mode-hero .group-overlay .field--name-body .field__item > * {
	font-size: 5vw;
}