/* vim:set foldmethod=marker: */
/************************************************************************
 * Custom menu chevrons
 ***********************************************************************/

.dropdown-menu .responsivemenu-wrapper li.menu-item--expanded > .responsivemenu-item-wrapper > .responsivemenu-item::after {
	content: '';
	display: inline-block;

	margin: -0.3em 0 0 0.375em;

	width: 0.5em;
	height: 0.5em;

	border-width: 0 0 3px 3px;
	border-style: solid;
	border-color: inherit;

	transform: rotate(-45deg);

	transition: all .2s ease-in-out;
}

.dropdown-menu .responsivemenu-wrapper li.menu-item--expanded:hover > .responsivemenu-item-wrapper > .responsivemenu-item::after {
	transform: rotate(-225deg);
}

/************************************************************************
 * Block styling
 ***********************************************************************/

.block-language:hover .checkbox-menu-popup + label,
.block-language:hover .checkbox-menu-popup + label + ul.links {
	color: var(--color-dark-blue);
	background-color: white;
}

/* trigger showing the language selector on hover */

.block-language:hover .checkbox-menu-popup + label + ul.links {
	pointer-events: all;
	opacity: 1;
}

/************************************************************************
 * Expandable slider
 ***********************************************************************/

/* this expects the arrows to be 2rem wide */
.expandable-slider .expandable-arrows {
	left: -3rem;
	right: -3rem;
}

/************************************************************************
 * Layout styling
 ***********************************************************************/

.layout__region--2col-container > .layout__region--first {
	flex: 1 1 75%;
}

.layout__region--2col-container > .layout__region--second {
	flex: 1 1 25%;
}

/************************************************************************
 * Region styling
 ***********************************************************************/

/* header */

.region-header {
	align-items: stretch;
	flex-wrap: nowrap;
	margin: 0 3rem;
}

.region-header > nav {
	flex-grow: 1;
}

/* 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 {
	display: none;
}

.region-header > nav .responsivemenu-wrapper {
	height: 100%;
}

.region-header > nav .responsivemenu-wrapper > ul.menu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-end;

	height: 100%;
}

.region-header > nav .responsivemenu-wrapper > ul.menu > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	transition: all .2s ease-in-out;
}

.region-header > nav .responsivemenu-wrapper > ul.menu > li:hover {
	color: var(--color-dark-blue);
	background: white;
}

.region-header > nav .responsivemenu-item-wrapper > .responsivemenu-item {
	display: block;
	padding: 1em;
}

.region-header > nav .responsivemenu-item-wrapper > span.responsivemenu-item {
	cursor: default;
}

.region-header > nav .responsivemenu-wrapper ul.menu ul.menu {
	color: var(--color-dark-blue);
	background: white;

	min-width: 100%;

	box-shadow: 0.25rem 0.25rem 0 rgba(0,0,0,0.25);
}

/* footer */

.region-footer > .block {
	border-width: 0 1px 0 0;
	border-style: solid;
}

.region-footer > .block:last-child {
	border-width: 0;
}

/************************************************************************
 * Node styling
 ***********************************************************************/

/* {{{ News */

.node--type-news.node--view-mode-full .layout__region--content > .field--name-body {
	orphans: 4;
	widows: 4;
	column-count: 2;
	column-gap: 4rem;
}

/* }}} */

/************************************************************************
 * Paragraph styling
 ***********************************************************************/

/* {{{ View */


.paragraph--type--view {
	margin: 4rem 0 4rem 0;
}

/* }}} */
/* {{{ Text | Image */

.paragraph--type--text-image {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	--dim-margin-inset: 4rem;

	margin: 4rem 0 4rem 0;
}

.paragraph--type--text-image.flex-reverse {
	flex-direction: row-reverse;
}

.paragraph--type--text-image .field--name-field-image,
.paragraph--type--text-image .field--name-field-video {
	flex-basis: calc(50% + (var(--dim-margin-inset) / 2));
}

.paragraph--type--text-image > .group-content {
	flex-basis: calc(50% - (var(--dim-margin-inset) / 2));
}

.paragraph--type--text-image .field--name-field-image img,
.paragraph--type--text-image .field--name-field-video video {
	display: block;
	width: 100%;
	height: auto;
}

.paragraph--type--text-image .group-content {
	padding: 3rem;
	box-sizing: border-box;

	max-width: 35rem;
	margin: var(--dim-margin-inset);
	margin-left: calc(-1 * var(--dim-margin-inset, 0));
	margin-right: 0;
	background-color: white;

	z-index: 1;
}

.paragraph--type--text-image.flex-reverse .group-content {
	margin-left: 0;
	margin-right: calc(-1 * var(--dim-margin-inset, 0));
}

.paragraph--type--text-image .field--name-field-title .field__item > * {
	margin-top: 0;
}

/* }}} */
/* {{{ Infobox */

.paragraph--type--infobox .group-container {
	flex-direction: row;
}

.paragraph--type--infobox.flex-reverse .group-container {
	flex-direction: row-reverse;
}

/* }}} */

/************************************************************************
 * Views styling
 ***********************************************************************/

.view-references.view-display-id-cards .view-content {
	grid-template-columns: repeat(4, 1fr);
}

.view-references.view-display-id-cards_tagged .view-content {
	grid-template-columns: repeat(2, 1fr);
}
