/* vim:set foldmethod=marker: */

:root {
	--color-light-grey: #eeeeee;
	--color-medium-grey: #cccccc;
	--color-dark-grey: #555555;

	--color-light-red: #d12026;
	--color-red: #b5241d;
	--color-yellow: #ffe98a;

	--color-form-button-text: white;
	--color-form-button-background: var(--color-red);
	--color-form-button-error: #ff0000;

	--color-highlight: var(--color-red);
	--color-form-highlight: var(--color-red);
	--color-form-option-selected: var(--color-red);

	--shadow: 0 0.125em 0.25em rgba(0,0,0,0.5);
	--inset-shadow: inset 0 0 0.5em rgba(0,0,0,0.5);

	--dim-hero-min-height: 800px;
	--dim-hero-height: 50vh;

	--dim-hero-min-height-not-front: auto;
	--dim-hero-height-not-front: 300px;
}

body {
	hyphens: auto;
}

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

.parallax {
	box-shadow: var(--inset-shadow);
}

.responsivemenu-fold-toggle {
	display: block;
}

/* {{{ Animation */
/* {{{ wheel */

@keyframes wheel-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.wheel-wheels {
	transform-origin: 50px 50px;
	animation-name: wheel-spin;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes wheel-fade {
	0% { opacity: 0; }
	33.33% { opacity: 1; }
	66.66% { opacity: 0; }
	100% { opacity: 0; }
}

.wheel-rim1,
.wheel-rim2,
.wheel-rim3 {
	opacity: 0;
	animation-name: wheel-fade;
	animation-duration: 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.wheel-rim2 {
	animation-delay: 2s;
}

.wheel-rim3 {
	animation-delay: 4s;
}
/* }}} */
/* {{{ checkboard */

@keyframes checkboard-ping {
	0%    { transform: scale(0.1); opacity: 0; }
	12.5% { opacity: 1; }
	25%   { transform: scale(1); opacity: 0; }
	100%  { transform: scale(1); opacity: 0; }
}

.checkboard-board .checkboard-ping {
	transform-origin: 50px 50px;
	animation-name: checkboard-ping;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: forwards;
}

@keyframes checkboard-checkmark {
	0% { opacity: 0; }
	12.5% { opacity: 1; }
	100% { opacity: 0; }
}

.checkboard-board .checkboard-checkmark {
	transform-origin: 50px 50px;
	animation-name: checkboard-checkmark;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: forwards;
}

/* }}} */
/* {{{ hotel */

@keyframes hotel-shuffle {
	0% { transform: translateX(-10px); opacity: 0; }
	25% { transform: translateX(0); opacity: 1; }
	75% { transform: translateX(0); opacity: 1; }
	100% { transform: translateX(-10px); opacity: 0; }
}

.hotel .hotel-tire {
	transform-origin: 50px 50px;
	animation-name: hotel-shuffle;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

/* }}} */
/* }}} */
/* {{{ Logo block */

.block-system-branding-block img,
.block-system-branding-block svg {
	display: inline-block;

	width: 100%;
	height: auto;
	max-width: 150px;
}

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

/* see mobile_tablet.css & desktop.css */

.block-language input {
	display: none;
}

.block-language ul.links a.is-active {
	color: inherit;
}

/* }}} */
/* {{{ Parallax image block */

.block--type-image {
	height: var(--dim-hero-height);
	min-height: var(--dim-hero-min-height);
}

/* }}} */
/* {{{ Region layout */

.layout-container {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 100vh;
}

main {
	flex-grow: 1;
}

.not-front main {
	padding: 4rem 0;
}

#header {
	position: absolute;

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

	z-index: 10;

	background-image: linear-gradient(to bottom, black, rgba(0,0,0,0.5));

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

/* This ::after is only here so that the header element itself doesn't become
 * a containing block for fixed elements because it has backdrop-filter set.
 * See the insanity at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
 */
#header::after {
	content: '';

	position: absolute;

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

	z-index: -1;

	backdrop-filter: blur(0.125em);
}

.region-header {
	display: flex;

	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;

	padding: 0.5rem 0;

	--color-logo-outline: transparent;
	--color-logo-text: white;
}

.region-header > :nth-child(2) .block-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.region-header .block-language {
	order: 0;
}

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

.region-header .block-menu {
	order: 2;
}

.region-header .block-menu a {
	color: inherit;
}

.region-header .block-menu .responsivemenu-wrapper {
	position: relative;
}

.region-header .block-menu .responsivemenu-wrapper > ul.menu {
	color: black;
	background-color: white;
	min-width: 10rem;
}

.region-header .block-menu .responsivemenu-wrapper > ul.menu ul.menu {
	color: white;
	background-color: var(--color-red);
	padding-left: 0.25em;
}

.region-header .block-menu ul.menu li a,
.region-header .block-menu ul.menu li span {
	display: block;
	padding: 0.5em 1em;
	box-sizing: border-box;

	font-weight: bold; /* mirrors a, but for span as well */
}

#banner {
	height: var(--dim-hero-height);
	min-height: var(--dim-hero-min-height);
}

.not-front #banner {
	height: var(--dim-hero-height-not-front);
	min-height: var(--dim-hero-min-height-not-front);
}

.front .region-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	height: 100%;
}

.region-fp-content > .block {
	box-sizing: border-box;
	padding: 4em 0;
}

.region-fp-content > .block > .block-inner > .block-label {
	text-align: center;
}

.block.parallax {
	height: var(--dim-hero-height);
	min-height: var(--dim-hero-min-height);
}

footer {
	--color-logo-tire: var(--color-medium-grey);
	background-color: var(--color-light-grey);

	padding: 1em 1em 5em 1em;
}

.region-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* reset duck margin */
.region-footer > .block {
	margin: 0;
}

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

.field--name-field-paragraphs > .field__items > .field__item {
	margin: 2em 0;
}


/* }}} */
/* {{{ Nodes */
/* {{{ Card */
.node--view-mode-card {
	height: 100%;
	box-shadow: var(--shadow);
}

.node--view-mode-card .node__content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.node--view-mode-card .field--name-field-icon {
	width: 50%;
	align-self: center;
	color: var(--color-red);
}

.node--view-mode-card .field--name-title {
	padding: 1em 1em 0 1em;
	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: var(--color-red);
}

.node--view-mode-card .group-content {
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;

	flex-grow: 1;
}

.node--view-mode-card .field--name-body {
	flex-grow: 1;
}
/* }}} */
/* {{{ News */

.node--type-news.node--view-mode-teaser {
	padding: 3em 1em;
	text-shadow: var(--shadow);
}

/* }}} */
/* }}} */
/* {{{ Paragraphs */
/* {{{ Container 4-wide & 3-wide */

.paragraph--type--container-3-wide > .field--name-field-paragraphs > .field__items,
.paragraph--type--container-4-wide > .field--name-field-paragraphs > .field__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

.paragraph--type--container-3-wide > .field--name-field-paragraphs > .field__items > .field__item,
.paragraph--type--container-4-wide > .field--name-field-paragraphs > .field__items > .field__item {
	margin: 0;
	box-sizing: border-box;
	padding: 0.5rem;
}

/* }}} */
/* {{{ Image | Text */

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

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

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

.paragraph--type--image-text .group-content {
	box-sizing: border-box;
	padding: 2em;
}

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