/* vim:set foldmethod=marker: */
/*************************************************************************
 * Variables
 ************************************************************************/

:root {
	--color-light-blue: #8ABDD1;
	--color-almost-grey: #A8ABAC;

	--color-tabs-text: black;
	--color-tabs-background: var(--color-almost-grey);
	--color-tabs-active-background: var(--color-light-blue);

	--dim-block-margin: 1.5rem;

	--dim-hero-padding: 1rem var(--dim-block-margin) 6rem var(--dim-block-margin);
	--dim-hero-min-height: 650px; /* to leave space for the logo */

	--dim-teaser-min-height: 400px;

	--dim-card-title-vertical-offset: 2rem;
	--dim-card-title-horizontal-offset: 3rem;
	--dim-inbetween-padding: 1.5rem 0;

	--dim-slider-mobile-overflow: 1.5rem;

	--color-form-button-background: var(--color-light-blue);
	--color-highlight: var(--color-light-blue);

	--color-pii-toggle-background: var(--color-light-blue);
}

/*************************************************************************
 * Element style
 ************************************************************************/

html,
body {
	background: black;
	color: white;
}

a {
	color: var(--color-light-blue, inherit);
	text-decoration: none;
}

video {
	display: block;
	width: 100%;
}

/*************************************************************************
 * Global style
 ************************************************************************/

.block-inner {
	margin: 0 var(--dim-block-margin); 
}

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

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

/* {{{ Branding */

.block-system-branding-block {
	max-width: 100%;
}

.block-system-branding-block a {
	display: inline-block;
}

.block-system-branding-block svg {
	height: auto;
	max-width: 100%;
}

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

.block-language .block-inner {
	position: relative;
}

.block-language .checkbox-menu-popup {
	display: none;
}

.block-language ul.links {
	transition: all .2s ease-in-out;
}

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

.block-language label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: auto;
	padding: 1rem; /* carefully chosen */

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

.block-language label + ul.links {
	position: absolute;

	top: 100%;
	right: 0;

	min-width: 100%;

	pointer-events: none;
	opacity: 0;

	z-index: 100;
}

.block-language ul.links > li > * {
	display: block;
	padding: 0.5em;
}

.block-language .checkbox-menu-popup:checked + label,
.block-language .checkbox-menu-popup:checked + label + ul.links {
	color: black;
	background-color: white;
}

.block-language .checkbox-menu-popup:checked + label + ul.links {
	pointer-events: all;
	opacity: 1;
}

/* }}} */
/* {{{ News */

.block-views-blocknews-block-1 .block-label {
	text-transform: uppercase;
}

.block-views-blocknews-block-1 {
	position: absolute;

	top: 8.5em; /* juuust squeezes below the logo */
	left: auto;
	right: 1em;
	bottom: auto;

	z-index: 2;

	color: white;
	background-color: rgba(0,0,0,0.75);

	padding: 1em;
}

/* }}} */

/*************************************************************************
 * Content
 ************************************************************************/

.layout-container {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 100vh;

	box-sizing: border-box;
}

/*** Header shenanigans */

#header {
	position: absolute;

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

	z-index: 3;

}

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

.region-header a {
	color: inherit;
}

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

.region-header nav ul.menu a,
.region-header nav ul.menu span {
	cursor: pointer;
}

.front .region-header {
	color: black;
}

/*
 * On the front page, the logo needs to be huge, but also not break the centering
 * of the rest of the header elements.
 */
.front .region-header .block-system-branding-block {
	height: 2em;
	overflow: visible;
}

.front .region-header .block-system-branding-block svg {
	padding: 2em 1em 0 1em;
}

/*
 * When on any other page, show the logo in a line with the menu
 * button
 */
.not-front .region-header {
	background-color: black;
	opacity: 0.95; 
}

.not-front .region-header .block-system-branding-block svg {
	height: 2em;
	width: auto;

	padding: 0.5em;
}

/* The banner header is always output, but some pages don't have a hero or 
 * a banner displayed and because the header is absolutely positioned, we need
 * to reserve some space.
 *
 * 3rem of the logo and some padding. It's not necessary to be terribly precise
 */
#banner {
	min-height: 4rem;
}

main {
	flex-grow: 1;
	min-height: 500px;
}

.not-front main {
	padding-top: 2em;
}

footer::before {
	content: '';
	display: block;

	height: 33.3vw;
	max-height: 30rem;

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

footer > .footer-inner {
	overflow: hidden;
	background-color: black;
}

footer .block {
	margin: 1rem 0;
}

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

.node--type-news.node--view-mode-hero,
.node--type-page.node--view-mode-hero {
	height: 50vh;
}


/* general line/teaser layout, these are different for historical reasons */

.node--view-mode-line .group-padding,
.node--view-mode-teaser .group-padding {
	margin: 1em;
}

/* general hero layout */

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

	height: 100vh;
	min-height: var(--dim-hero-min-height);

	text-transform: uppercase;
}

.node--view-mode-hero .group-padding {
	margin: var(--dim-hero-padding);
}

/* general card view */

.node--view-mode-card {
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-almost-grey, inherit);

	min-height: 15em;

	position: relative;
}

.node--view-mode-card .node__content {
	display: flex;

	flex-direction: column;
	justify-content: center;
	align-items: center;

	text-transform: uppercase;
}

.node--view-mode-card .field--name-field-strapline {
	text-align: center;
}

.node--view-mode-card .field--name-title {
	position: absolute;

	top: var(--dim-card-title-vertical-offset, 0);
	right: var(--dim-card-title-horizontal-offset, 0);
}

.node--view-mode-card.card-title-bottom-right .field--name-title {
	top: auto;
	bottom: var(--dim-card-title-vertical-offset, 0);
}

.node--view-mode-card.card-title-bottom-left .field--name-title {
	top: auto;
	bottom: var(--dim-card-title-vertical-offset, 0);
	right: auto;
	left: var(--dim-card-title-horizontal-offset, 0);
}

.node--view-mode-card.card-title-top-left .field--name-title {
	right: auto;
	left: var(--dim-card-title-horizontal-offset, 0);
}

/* banner */

.node--type-banner {
	position: relative; /* absolute anchor */
}

.node--type-banner .node__content::before {
	content: '';

	position: absolute;

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

	z-index: 2;

	pointer-events: none;

	background-image: linear-gradient(-20deg, transparent 50%, white);
}

.node--type-banner.node--view-mode-hero .group-container {
	position: relative;
	z-index: 3;

	/* pass through clicks to video buttons below */
	pointer-events: none;
}

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

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

	z-index: 1;
}

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

/* Page */

.node--type-page.node--view-mode-line .node__content,
.node--type-page.node--view-mode-teaser .node__content {
	min-height: var(--dim-teaser-min-height);
	height: 50vh;

	display: flex;
	flex-direction: column;
	justify-content: center;

	text-align: center;
	hyphens: auto;
}

.node--type-page.node--view-mode-line .node__content .field--name-title,
.node--type-page.node--view-mode-teaser .node__content .field--name-title {
	text-transform: uppercase;
}

/*************************************************************************
 * Paragraphs
 ************************************************************************/

.paragraph--type--image-text {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	margin: 0.5rem 0;

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

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

.paragraph--type--image-text > * {
	flex-basis: 50%;
}

.paragraph--type--image-text .group-content {
	padding: 1em;
}

.paragraph--type--image-text .field--name-field-image {
	min-height: 25em;
}

.paragraph--type--person {
	padding: 1.5em;
}

.paragraph--type--person .field--name-field-image img {
	display: block;
	width: 100%;

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

.paragraph--type--person .group-content {
	padding: 0.5em;
}

.paragraph--type--image-gallery .field--name-field-images .field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	--dim-margin: 1em;

	margin-left: calc(-1 * var(--dim-margin));
	margin-right: calc(-1 * var(--dim-margin));
}

.paragraph--type--image-gallery .field--name-field-images .field__item {
	box-sizing: border-box;
	padding: var(--dim-margin);
	margin: 0;
}

.paragraph--type--image-gallery .field--name-field-images .field__item img {
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-almost-grey);
}