/*************************************************************************
 * Root
 ************************************************************************/

:root {
	--dim-separator-width: 1rem;
	--dim-hero-height: 80vh;
	--dim-hero-min-height: 25em;

	--color-red: #c00808;
	--color-grey: #b1b2b3;

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

/*************************************************************************
 * Element styling
 ************************************************************************/

a {
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0.5em 0 0.375em 0;
}

p {
	margin: 1em 0 0.5em 0;
}

h1 { font-size: 400%; }
h2 { font-size: 350%; }
h3 { font-size: 280%; }
h4 { font-size: 200%; }
h5 { font-size: 180%; }
h6 { font-size: 120%; }

main a,
footer a {
	font-weight: bold;
	color: var(--color-red);
}

/*************************************************************************
 * Global styling
 ************************************************************************/

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

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

.flex-grow {
	flex-grow: 1;
}

.hidden-desktop {
	display: none;
}

.button.holland {
	color: #fed500;
	background-color: #00377d;
}

/*************************************************************************
 * Mobile menu toggle
 ************************************************************************/

.responsivemenu-fold-toggle {
	font-size: 12pt;
}

/*************************************************************************
 * Main menu
 ************************************************************************/

.menu--main {
	padding: 0.5em 0;
}

/*************************************************************************
 * Language switcher
 ************************************************************************/

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

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

	line-height: 1;
	text-transform: uppercase;

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

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

.block-language ul.links li.is-active a,
.block-language ul.links li.is-active span {
	font-weight: bold;
}


/*************************************************************************
 * Regions
 ************************************************************************/

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

.region-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	padding: 0.5em 0;
}

/* uses the inner class to support a sticky menu */
header#navigation,
header#navigation .navigation-inner {
	color: white;
	background-color: black;
}

.region-banner {
	position: relative;

	border-width: 0 0 var(--dim-separator-width) 0;
	border-style: solid;
	border-color: var(--color-red);
}

main {
	flex-grow: 1;
	padding: 1em 0;
}

.region-fp-content > .block {
	padding: 3em 0;

	border-width: 0 0 2px 0;
	border-style: solid;
	border-color: var(--color-grey);
}

.region-fp-content > .block:last-child {
	border-width: 0;
}

.region-banner::before {
	content: '';

	position: absolute;

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

	height: 1.5em;

	z-index: 90; /* above a potential slider, but not above the mobile menu */

	background-image: linear-gradient(to bottom, black, transparent);
}

footer {
	/* see .pullup1 & .pullup2 */
	margin-top: 5rem;

	border-width: var(--dim-separator-width) 0 0 0;
	border-style: solid;
	border-color: black;
}

.region-footer {
	display: flex;
	flex-direction: row;
}

.region-footer .pullup1 {
	margin-top: -3rem;
}

.region-footer .pullup2 {
	margin-top: -5rem;
}

/*************************************************************************
 * Fields
 ************************************************************************/

.field--name-field-paragraphs {
	padding: 1em 0;
}

/*************************************************************************
 * Blocks
 ************************************************************************/

.block.paragraphs-block .block-content > .field--name-field-paragraphs > .field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/*************************************************************************
 * Nodes
 ************************************************************************/

.node--view-mode-hero h1,
.node--view-mode-hero h2,
.node--view-mode-hero h3,
.node--view-mode-hero h4,
.node--view-mode-hero h5,
.node--view-mode-hero h6,
.node--view-mode-hero p {
	display: inline-block;

	line-height: 1;

	margin: 0.25em 0;
	padding: 0.25em 0.5em;

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

.node--view-mode-hero h1 {
	background-color: var(--color-red);
}

/* page */

.node--type-page.node--view-mode-card {
	text-align: center;
	margin: 1em;
}

.node--type-page.node--view-mode-card .field--name-field-image {
	display: inline-block;
}

.node--type-page.node--view-mode-card .field--name-field-image img {
	display: block;

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

.node--type-page.node--view-mode-hero {
	height: var(--dim-hero-height);
	min-height: var(--dim-hero-min-height);
}

/* banner */

.node--type-banner.node--view-mode-hero {
	height: var(--dim-hero-height);
	min-height: var(--dim-hero-min-height);
}

.node--type-banner.node--view-mode-hero > .node__content {
	padding: 4em 3em;
}

.node--type-banner.node--view-mode-hero .field--name-body .field__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*************************************************************************
 * Paragrahps
 ************************************************************************/

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

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

.paragraph--type--image-text > * {
	margin: 0;

	flex-grow: 0;
	flex-shrink: 1;
}

.paragraph--type--image-text .field--type-text-long {
	padding: 0 2em;
}

/* image link */

.paragraph--type--image-link {
	text-align: center;
	padding: 1em;
}

.paragraph--type--image-link .field--name-field-image {
	display: inline-block;
}

.paragraph--type--image-link .field--name-field-image img {
	display: block;

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