/* vim:set foldmethod=marker: */

:root {
	--color-blue: #2150A8;
	--color-highlight: var(--color-blue);
	--color-light-grey: #E7E7E7;
	--color-pii-toggle-background: var(--color-highlight);

	--color-form-button-text: white;
	--color-form-button-background: var(--color-highlight);
}

/* {{{ Element styling */

body {
	/* finnish has really long words, this alleviates the problem a little */
	overflow-wrap: break-word;
	hyphens: auto;
}


a {
	color: var(--color-highlight);
	font-weight: bold;
}

video {
	width: 100%;
	height: auto;
}

/* }}} */
/* {{{ Global styling */

.block-inner {
	margin: 0 0.5em;
}

.no-block-margin > .block-inner {
	margin: 0;
}

.layout--twocol {
	gap: 0 1em;
}

.layout--twocol > .layout__region--first,
.layout--twocol > .layout__region--second {
	flex: 0 1 calc(50% - 1em);
}


/* }}} */
/* {{{ Main menu */

.menu--main ul.menu ul.menu {
	color: white;
	background-color: var(--color-highlight);

	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.25);
}

.menu--main ul.menu li a,
.menu--main ul.menu li span {
	text-transform: uppercase;

	padding: 0.5em;

	font-weight: bold;

	cursor: pointer;

	color: inherit;
}

.menu--main ul.menu li {
	color: white;
	background-color: var(--color-highlight);

	transition: all .2s ease-in-out;
}

.menu--main ul.menu li.menu-item--active-trail {
	color: var(--color-highlight);
	background-color: white;
}

/* }}} */
/* {{{ Responsivemenu toggle */

.responsivemenu-fold-toggle {
	font-size: 80%;
	vertical-align: middle;
}

.responsivemenu-fold-toggle-inner,
.responsivemenu-wrapper > .responsivemenu-fold-toggle:before,
.responsivemenu-wrapper > .responsivemenu-fold-toggle:after {
	border-width: 0 0 0.25em 0;
}

.responsivemenu-wrapper > .responsivemenu-fold-toggle:before {
	top: 0.4em;
}

.responsivemenu-wrapper > .responsivemenu-fold-toggle:after {
	bottom: 0.4em;
}

/* ...and on sub-items, see also navigation/menu.html.twig */

.responsivemenu-item-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.responsivemenu-item-wrapper > span,
.responsivemenu-item-wrapper > a {
	display: block;
	white-space: nowrap;

	flex-grow: 1;

	text-overflow: ellipsis;
	overflow: hidden;
}

.responsivemenu-item-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.responsivemenu-item-wrapper > a,
.responsivemenu-item-wrapper > span {
	display: block;
	white-space: nowrap;

	flex-grow: 1;

	text-overflow: ellipsis;
	overflow: hidden;
}

.responsivemenu-item-wrapper > span.responsivemenu-fold-toggle {
	display: block;

	margin-top: -0.25em;

	flex-grow: 0;
	flex-shrink: 0;

	text-align: center;
}

.responsivemenu-item-wrapper > span.responsivemenu-fold-toggle::before {
	display: inline-block;
	vertical-align: middle;

	content: '';

	width: 0.5em;
	height: 0.5em;

	border-width: 2px;
	border-style: solid;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: inherit;
	border-bottom-color: inherit;

	transition: .2s ease-in-out;
	transform-origin: 0.5em 0.5em;
	transform: rotate(45deg);
}

/* }}} */
/* {{{ Language switcher */

.block-language ul.links,
.block-language ul.links li {
	display: inline-block;

	list-style-type: none;
	margin: 0;
	padding: 0;
}

.block-language ul.links li a,
.block-language ul.links li span {
	display: block;
	padding: 0.5em 1em;
}

.block-language ul.links li span {
	cursor: not-allowed;
}

/* }}} */
/* {{{ Regions */

.layout-container {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

header#header {
	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	z-index: 5;

	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

.region-header {
	display: flex;

	padding: 1.5rem 0;
}

.region-header .block-system-branding-block {
	flex-shrink: 1;
	flex-grow: 1;
}

.region-fp-content > * {
	margin: 6em 0;
}

#menu {
	color: white;
	background-color: var(--color-highlight);

	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.25);
}

.region-banner {
	min-height: 20rem;
}

.region-banner .node--view-mode-banner > .node__content {
	height: 25vh;
	min-height: 20rem;
}

.front .region-banner .node--view-mode-banner > .node__content {
	height: 100vh;
}

main {
	flex-grow: 1;
	margin: 3em 0;
}

footer {
	color: white;
	background-color: var(--color-highlight);

	padding: 1em 0;

	overflow: hidden;
}

footer a {
	color: inherit;
	background-color: inherit;
}

/* }}} */
/* {{{ Fields */

.field__label::after {
	content: ':';
	margin-right: 0.5rem;
}

.field--label-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.field--name-field-form .field__item form {
	margin: 1em auto;
	padding: 1em;

	border-width: 1px;
	border-style: solid;
	border-color: var(--color-light-grey);
}

.flex-fields .field--name-body.field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex-fields .field--name-body.field__items .field__item {
	padding: 1em;
}

/* }}} */
/* {{{ Nodes (and term cards) */
/* {{{ cards */

.term--view-mode-card,
.node--view-mode-card .node__content {
	display: flex;
	flex-direction: column;

	color: white;
	background-color: var(--color-highlight);
}

.term--view-mode-card a,
.node--view-mode-card a {
	color: white;
}

.term--view-mode-card .field--name-field-image img,
.node--view-mode-card .field--name-field-image img {
	width: 100%;
}

.term--view-mode-card .field--name-name,
.term--view-mode-card .group-content,
.node--view-mode-card .field--name-title,
.node--view-mode-card .group-content {
	padding: 1em;
}

.term--view-mode-card .group-content,
.node--view-mode-card .group-content {
	display: flex;
	flex-direction: column;

	flex-grow: 1;
}

.term--view-mode-card .group-content > .field--name-body,
.node--view-mode-card .group-content > .field--name-body {
	flex-grow: 1;
}

.term--view-mode-card .field--name-field-image-links {
	flex-grow: 1;
}

.term--view-mode-card .field--name-field-image-links img {
	display: block;
}

/* XXX */
.term--view-mode-card .field--name-name,
.node--view-mode-card .field--name-title {
	font-size: 75%;
	line-height: 1.5em;
	min-height: 3em;
}

.term--view-mode-card .field--name-name .field__item > *,
.node--view-mode-card .field--name-title .field__item > * {
	margin: 0;

	overflow-wrap: normal;
	hyphens: none;
}
/* }}} */
/* {{{ Banner */

.node--type-banner.node--view-mode-banner .node__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	min-height: 60rem;

	padding: 0 1em 5em 1em;
	box-sizing: border-box;
}

.node--type-banner.node--view-mode-banner .group-container {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 1em;
	box-sizing: border-box;

	background-color: rgba(0,0,0,0.25);
	backdrop-filter: blur(0.25rem);
}

/* }}} */
/* {{{ page */

.node--type-page.node--view-mode-banner {
	position: relative;
}

.node--type-page.node--view-mode-banner .simple-video {
	position: absolute;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.node--type-page.node--view-mode-banner .simple-video video {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}

/* read more */

.node--type-page.node--view-mode-card .field--name-read-more {
	margin: 0.5em 0;
	text-align: center;
}

.node--type-page.node--view-mode-card .field--name-read-more a {
	font-size: 0;
}

.node--type-page.node--view-mode-card .field--name-read-more a::before {
	content: url(images/arrow.svg);
}

/* }}} */
/* {{{ Product */

.node--type-product.node--view-mode-full .field--name-field-order-form {
	max-width: 45em;
	margin: 2em auto;
	padding: 1em;

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

/* }}} */
/* }}} */