/* vim:set foldmethod=marker: */

:root {
	--color-blue: #13447E;
	--color-light-grey: #E6E6E6;
	--color-dark-grey: #666666;

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

	--color-form-button-background: var(--color-blue);
	--color-form-button-error: #FF0000;

	--color-form-highlight: var(--color-blue);
	--color-form-option-active: var(--color-blue);
	--color-form-option-selected: var(--color-blue);
}

/* {{{ Element styling */

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

/* }}} */
/* {{{ Global styles */

.group-content {
	box-sizing: border-box;
	padding: 1.5em;
}

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

/* reset */

.block-language ul.links,
.block-language ul.links li {
	list-style-type: none;
	margin: 0;
	padding: 0;

	white-space: nowrap;
}

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

	margin: 0.25em 0;

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

.block-language ul.links li:last-child {
	border-width: 0;
}

.block-language ul.links a {
	text-transform: uppercase;

	display: block;
	padding: 0 0.75em;
}
/* }}} */
/* {{{ Hamburger */

.responsivemenu-wrapper > .responsivemenu-fold-toggle {
	font-size: 75%;
}

.responsivemenu-fold-toggle::before,
.responsivemenu-fold-toggle-inner,
.responsivemenu-fold-toggle::after {
	color: var(--color-blue);
	background-color: var(--color-blue); /* :-( */
}

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

#header .responsivemenu-wrapper > ul.menu a {
	font-weight: normal;
	color: initial;
}

#header .responsivemenu-wrapper > ul.menu span {
	cursor: pointer;
}

#header .responsivemenu-wrapper > ul.menu > li > a.is-active,
#header .responsivemenu-wrapper > ul.menu > li.menu-item--active-trail > a,
#header .responsivemenu-wrapper > ul.menu > li.menu-item--active-trail > span {
	color: white;
	background-color: var(--color-dark-grey);
}

#header .responsivemenu-wrapper ul.menu ul.menu {
	background-color: var(--color-blue);
}

#header .responsivemenu-wrapper ul.menu ul.menu li.menu-item--active-trail {
	background-color: var(--color-dark-grey);
}
/* }}} */
/* {{{ Block */

.block.brands {
	color: initial;
	background: white;
}

.block.grey {
	background-color: var(--color-light-grey);
}

.block.brands .field--name-field-image {
	text-align: center;
}

.block.brands .field--name-field-image .field__item {
	display: inline-block;
	vertical-align: middle;
	margin: 0 2em;
}

.block.contact .block-content > .field,
.block.contact .block-content > .field__items,
.block.contact .block-content > .field__item {
	display: inline-block;
	margin: 0 0.5em;
}

.block--type-text-image .group-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.block--type-text-image.flex-reverse .group-container {
	flex-direction: row-reverse;
}

/* reset duck grid margin */
.block--type-text-image .group-container > * {
	margin: 0;
}

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

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

header#super_header .header-inner {
	display: block;
	color: white;
	background-color: var(--color-blue);
}

header#super_header .header-inner {
	top: -100%; /* used as the baseline for animating the header when scrolled */
	transition: top .5s ease-in-out;
	box-shadow: 0 0 rgba(0,0,0,0);
}

header#super_header.scrolled .header-inner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500; /* the drupal toolbar lives at 502 */

	box-shadow: var(--shadow);
}

header#super_header a {
	color: white;
}

.region-super-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

header#header {
	background-color: var(--color-light-grey);
}

.region-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
}

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

.block-system-branding-block .site-logo {
	display: block;
	padding: 0.5em 1em;
}

main {
	margin: 1em 0;
	flex-grow: 1; /* below layout-container */
}

.region-fp-content .block-inner {
	padding-top: 2em;
	padding-bottom: 2em;
}

.no-block-padding > .block-inner {
	padding-top: 0;
	padding-bottom: 0;
}

footer {
	padding: 0.25em 0;

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

/* decorative line */
footer::before {
	content: '';
	display: block;
	height: 0.125em;
	width: 100%;
	background-color: white;
}

footer a {
	color: white;
}

footer .block-inner {
	padding: 1em;
}

footer ul.menu ul.menu {
	padding: 0 0 0.5em 0.5em;
}
/* }}} */
/* {{{ Fields */

/* as tempting as this is, the only way I know of getting the color
 * automatically, is by using inline-svg.
 *
 * a[href^="tel:"]::before,a[href^="email:"] */

#super_header .field--name-field-telephone,
#super_header .field--name-field-e-mail {
	white-space: nowrap;
}

#super_header .field--name-field-telephone .field__item::before,
#super_header .field--name-field-e-mail .field__item::before {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.25em;
}

#super_header .field--name-field-telephone .field__item::before {
	content: url(images/telephone_m.svg);
}

#super_header .field--name-field-e-mail .field__item::before {
	content: url(images/email_m.svg);
}
/* }}} */
/* {{{ Nodes */

.node--view-mode-card {
	padding: 1em;
}

.node--view-mode-card .field--name-field-image {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}

.node--view-mode-card .field--name-field-image img {
	display: block;
	width: 100%;
	height: auto;
}

.node--view-mode-card .group-content {
	padding: 1em;
}

/* banner */

.node--type-banner .field--name-field-image img,
.node--type-banner .field--name-field-video video {
	width: 100%;
}

/* page */

.node--type-page.node--view-mode-hero .field--name-field-image img,
.node--type-page.node--view-mode-hero .field--name-field-video video {
	width: 100%;
}
/* }}} */
/* {{{ Taxonomy terms */

.term--type-promotion-types.term--view-mode-default {
	margin: 0 1em;
}

/* }}} */
/* {{{ Paragraphs */

.paragraph--type--text-image {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.paragraph--type--text-image.flex-reverse {
	flex-direction: row-reverse;
}

/* reset duck grid margin */
.paragraph--type--text-image > * {
	margin: 0;
}

/* }}} */