/* vim:set foldmethod=marker: */

:root {
	--color-gray: #E6E6E6;
	--color-dark-gray: #838383;
	--color-darker-gray: #333333;

	--color-text: white;
	--color-headings: var(--color-text);

	--color-tabs-background: var(--color-background);

	--color-footer-text: var(--color-gray);
	--color-footer-background: var(--color-darker-gray);

	--color-shade: rgba(0,0,0,0.25);
	--color-light: rgba(255,255,255,0.25);

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

	--dim-radius: 0.5rem;
}

body {
	color: var(--color-text);
	background-color: var(--color-background);
}

/* {{{ icon buttons */

.button.key::before,
.button.taxi::before {
	display: inline-block;
	vertical-align: middle;

	line-height: 0;

	width: 1em;
	height: 1em;

	margin-right: 0.25em;
	transform-origin: 50% 10%;
}

@keyframes key-swing {
	0% { transform: rotate(0deg); animation-timing-function: ease-out; }
	10% { transform: rotate(30deg); }
	40% { transform: rotate(-30deg); }
	60% { transform: rotate(10deg); }
	80% { transform: rotate(-10deg); }
}

.button.key::before {
	content: url(images/key.svg);
}

.button.key:hover::before {
	animation-name: key-swing;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
}

@keyframes bounce {
	0% { transform: rotate(0deg) translateY(0); }
	35% { transform: rotate(5deg) translateY(-0.5rem); }
	50% { transform: rotate(-5deg) translateY(-0.5rem); }
	65% { transform: rotate(5deg) translateY(-0.5rem); }
	100% { transform: rotate(0deg) translateY(0); }
}

.button.taxi::before {
	content: url(images/taxi.svg);
}

.button.taxi:hover::before {
	animation-name: bounce;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
}

/* }}} */

/* Block */

.block.shaded {
	background-color: var(--color-shade);
}

.block.black {
	background-color: black;
}

.block.desaturate {
	filter: saturate(0);
}

/* {{{ Branding block */

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

/* }}} */
/* {{{ Text | icons */

.block--type-text-icons .block-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.block--type-text-icons .block-content > * {
	margin: 0;
}

.block--type-text-icons .field--name-field-paragraphs {
	box-sizing: border-box;
	padding: 0 1em 0 3em;
}

/* }}} */
/* {{{ Map */

.block--type-map {
	position: relative;
	color: black;
}

.block--type-map::before {
	position: absolute;
	content: '';

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

	z-index: 1;

	pointer-events: none;
	box-shadow: inset 0 0.5rem 0.5rem -0.25rem rgba(0,0,0,0.25);
}

/* }}} */

/* Regions */

.layout-container {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 100vh;
}

main {
	flex-grow: 1;

	box-sizing: border-box;
	padding-top: 3em;
}

main a {
	color: var(--color-main-links);
}

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

/* {{{ Header */

#header {
	position: absolute;
	z-index: 100;

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

	--dim-header-transition-time: .2s;
}

#header > .sticky-wrapper {
	position: static;

	color: white;

	background-color: rgba(0,0,0,0);
	backdrop-filter: blur(0em);
	box-shadow: var(--no-shadow);

	transition: all var(--dim-header-transition-time) ease-in-out;
}

#header > .sticky-wrapper.stuck {
	position: fixed;

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

	z-index: 10;

	background-color: rgba(0,0,0,0.75);
	backdrop-filter: blur(2em);
	box-shadow: var(--shadow);

	transition: all var(--dim-header-transition-time) ease-in-out;
}

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

/* branding */

.region-header .block-system-branding-block {
	display: block; 
	align-self: flex-start;
	margin-bottom: -1.5em;
	background-color: black;
	transition: all var(--dim-header-transition-time) ease-in-out;
	clip-path: polygon(0% 0%,100% 0%,100% 90%,50% 100%,0% 90%);
}

.region-header .block-system-branding-block a {
	display: block;
	box-sizing: border-box;
	padding: 1.5em;
	transition: all var(--dim-header-transition-time) ease-in-out;
}

.region-header .block-system-branding-block svg {
	max-height: 80px;

	transition: all var(--dim-header-transition-time) ease-in-out;
}

.stuck .region-header .block-system-branding-block {
	margin-bottom: 0;

	background-color: transparent;
}

.stuck .region-header .block-system-branding-block a {
	padding: 0.5em;
}

.stuck .region-header .block-system-branding-block svg {
	max-height: 40px;
}

/* {{{ language switcher */

.region-header .block-language .block-content {
	position: relative;
}

.region-header .block-language svg {
	display: block;
}

.region-header .block-language ul.links {
	position: absolute;
	top: 90%;
	right: 0;

	pointer-events: none;
	opacity: 0;

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

	color: black;
	background-color: white;
	box-shadow: var(--shadow);

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

.region-header .block-language ul.links a,
.region-header .block-language ul.links span {
	display: block;
	padding: 0.5em 0.75em;
}

.region-header .block-language ul.links a:hover,
.region-header .block-language ul.links span:hover {
	background-color: var(--color-gray);
}

.region-header .block-language input:checked + label + ul.links {
	pointer-events: all;
	top: 100%;
	opacity: 1;
}
/* }}} */
/* {{{ menu */

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

.region-header nav .responsivemenu-wrapper > ul.menu {
	top: 90%;
	left: 0;
	right: auto;

	padding: 0.25em;

	color: black;
	background-color: white;
	box-shadow: var(--shadow);

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

.region-header nav .responsivemenu-wrapper > ul.menu.responsivemenu-unfolded {
	top: 100%;
}

/* Remove default padding around the fold toggle to even out the header's flex.
 * It's not perfect, but it's close. */
.region-header nav .responsivemenu-wrapper .responsivemenu-fold-toggle {
	padding: 0;
}

.region-header nav .menu-item > a,
.region-header nav .menu-item > span {
	display: block;
	padding: 0.5em 0.75em;
	white-space: nowrap;
}

.region-header nav .menu-item > a:hover,
.region-header nav .menu-item > span:hover {
	background-color: var(--color-gray);
}
/* }}} */
/* }}} */
/* {{{ Banner */

#banner {
	min-height: 6em;
	background-color: var(--color-darker-gray);
}

.region-banner {
	position: relative;
}

.region-banner .cover {
	position: absolute;

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

	z-index: 1;

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

.region-banner .block-views-blocknews-latest {
	position: absolute;

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

	margin-bottom: -3em; /* see main for top padding */
}

/* }}} */
/* {{{ Front page content */

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

.region-fp-content > .block.no-block-padding {
	padding: 0;
}

/* }}} */
/* {{{ Footer */

footer {
	color: var(--color-footer-text);
	background-color: var(--color-footer-background);

	padding: 2em 0 3em 0;
}

.region-footer .block-inner {
	margin: 1rem;
}

.region-footer .block-system-branding-block .block-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.region-footer .block-system-branding-block svg {
	max-height: 100px;
}

/* }}} */

/* Content */

.node--view-mode-full .layout__region--content > .field--name-title {
	text-align: center;
	margin-bottom: 3em;
}

/* {{{ Hero */

.node--view-mode-hero {
	height: 75vh;
	min-height: 600px;
}

.not-front .node--view-mode-hero {
	height: 25vh;
	min-height: 200px;
}

.node--view-mode-hero {
	position: relative;
	overflow: hidden;
}

.node--view-mode-hero > .node__content {
	position: absolute;

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

/* }}} */
/* {{{ Card */

.node--view-mode-card {
	border-radius: var(--dim-radius);
	overflow: hidden;

	outline-width: 3px;
	outline-style: solid;
	outline-color: transparent;
	outline-offset: 0em;

	transition: all 0.5s ease-out;
}

.node--view-mode-card .node__content {
	position: relative;
}

.node--view-mode-card .field--name-field-image img {
	display: block;
	transform-origin: 50% 50%;
	transform: scale(1);
	transition: transform 0.75s ease-out;
}

.node--view-mode-card:hover {
	outline-color: white;
	outline-offset: 0.125em;
}

.node--view-mode-card h1,
.node--view-mode-card h2,
.node--view-mode-card h3,
.node--view-mode-card h4,
.node--view-mode-card h5 {
	color: inherit;
}

.node--view-mode-card:hover .field--name-field-image img {
	transform: scale(1.1);
}

.node--view-mode-card .group-content {
	position: absolute;

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

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

	padding: 1em;
	text-align: center;

	color: white;
	background-color: rgba(0,0,0,0.375);
}

/* }}} */
/* {{{ Large card */

.node--view-mode-large-card {
	color: white;
	background-color: var(--color-dark-gray);

	--color-form-button-text: var(--color-text);
	--color-form-button-background: var(--color-background);

	border-radius: var(--dim-radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.node--view-mode-large-card h1,
.node--view-mode-large-card h2,
.node--view-mode-large-card h3,
.node--view-mode-large-card h4,
.node--view-mode-large-card h5 {
	color: inherit;
}

.node--view-mode-large-card .node__content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
}

.node--view-mode-large-card .node__content > * {
	margin: 0;
}

.node--view-mode-large-card .group-first {
	box-sizing: border-box;
	padding: 1.5em;

	text-align: center;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2em;

}

.node--view-mode-large-card .field--name-field-image {
	height: 100%;
	min-height: 600px;
}

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

/* see large card above */
.node--type-news.node--view-mode-large-card {
	color: inherit;
	background-color: inherit;
	box-shadow: none; /* overrides default large card */
}

.node--type-news.node--view-mode-large-card .node__content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.node--type-news.node--view-mode-large-card .group-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
}

/* }}} */

/* Paragraphs */

/* {{{ Labeled icons */
.paragraph--type--labeled-icons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	gap: 0.5em;

	overflow: hidden;
	padding: 0.25em;
}

.paragraph--type--labeled-icons svg {
	display: block;
	width: 2em;
	height: 2em;
}

.paragraph--type--labeled-icons .field--name-field-title {
	hyphens: auto;
	overflow-wrap: wrap;
}
/* }}} */
/* {{{ Content row */

.paragraph--type--key-value {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
}

.paragraph--type--key-value.paragraph-top-margin {
	margin-top: 1em;
}

.paragraph--type--key-value.paragraph-bold {
	font-weight: bold;
}

.paragraph--type--key-value :first-child {
	order: 0;
}

.paragraph--type--key-value :last-child {
	order: 2;
}

.paragraph--type--key-value::after {
	content: '';
	order: 1;
	flex-grow: 1;

	margin: 0 0.5em 0.375em 0.5em;

	min-width: 1em;

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

/* }}} */
/* {{{ Content group */

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

/* }}} */
/* {{{ Lunch day */

.paragraph--type--lunch-day {
	text-align: center;
}

/* }}} */
/* {{{ Lunch menu */

.paragraph--type--lunch-menu {
	text-align: center;
}

.paragraph--type--lunch-menu .field__label {
	margin-bottom: 0.5rem;
}

.paragraph--type--lunch-menu .field {
	margin: 2rem 0;
}

/* }}} */
/* {{{ FAQ */

.paragraph--type--faq {
	margin: 0.25em 0;
}

.paragraph--type--faq .folder-toggle {
	border-radius: 0.25em;
	background-color: var(--color-light);
	padding: 0.25em 1em;
}

.paragraph--type--faq .field--name-field-title .field__item > * {
	margin: 0;
}

.paragraph--type--faq .field--name-field-text {
	padding: 0 1em;
}

/* }}} */