/*
 * ochsen-style.css
 *
 * Local styles for Roter Ochsen
 *
 * Author: Andreas Prieß - www.metaphysis.de
 */

:root {
	--color-primary:     #981117; /* Blutrot */
	--color-secondary:   #9aafa0; /* Salbeigrün */

	--color-font-light:  #9aafa0; /* Salbeigrün */
	--color-font-medium: #6c7a70; /* Salbeigrün dunkel */
	--color-font-dark:   #4a544d; /* Salbeigrün dunkler */

	--color-link:        #385441; /* Salbeigrün dunkler + 22% saturation */
	--color-link-focus:  #527a5d; /* Salbeigrün dunkel + 22% saturation */
	--color-link-known:  #335c48;

	--color-background-light: #fcf6e8; /* Melisse heller*/
	--color-background:       #f9f3e5; /* Melisse */
	--color-background-old:   #fceecf; /* Melisse vergilbt */
	--color-background-dark:  #f2d080; /* Melisse kräftig */

	--color-backdrop:    #9aafa0; /* Salbeigrün */
	--color-shadow:      #6c7a70; /* Salbeigrün dunkel */
}

body {
	color: var(--color-font-dark);
	background-color: var(--color-backdrop);
	background-image: url("../graphics/wall-pattern-floral.grey.jpg");
	background-repeat: repeat;
	background-blend-mode: color-burn;

	margin: 0 5vw 0 5vw;
}

a:link {
	color: var(--color-link);
}

a:hover, a:active {
	color: var(--color-link-focus);
}

a:visited {
	color: var(--color-link-known);
}

h1 {
	color: var(--color-primary);
	font-size: 3rem;
}
h2 { font-size: 2.5rem; }
h3 { font-size: 2.0rem; }

header, main > section, footer {
	background-color: var(--color-background-light); /* background if gradient fails */
	box-shadow: 0.1em 0.1em 0.05em 0.02em var(--color-shadow);

	padding: 1rem;
}

header {
	background-image: linear-gradient(110deg, var(--color-background-light), var(--color-background));
}

main > section {
	display: flex;
	align-items: center;

	background-image: linear-gradient(160deg, var(--color-background-light), var(--color-background-old));

	min-height: 90vh;
	margin-top: 5vh;
	margin-bottom: 5vh;
}

footer {
	text-align: center;
	background-image: linear-gradient(170deg, var(--color-background-old), var(--color-background-dark));
}

/* Flex elements of main > section */
main > section > div {
	max-width: 30em;
	margin: 0 auto;
}

section {
	font-size: 1.5rem;
}

address {
	font-style: normal;
}

figure {
	margin: 1em 0;
}

figure > img {
	box-sizing: border-box;
}

figcaption {
	font-size: initial;
	text-align: right;
}

.double-border {
	border-color: var(--color-secondary);
	border-width: 5px;
	border-style: double;
	border-radius: 0.25rem;
}

/* Hide visually to replace with image, but keep technically visible for screen readers. */
.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

a.gallery-home {
	align-self: center;
	z-index: 5;
	margin: 1rem;
}

a.gallery-home img {
	width: 20rem;
}

#header-pic-2 img {
	width: 22rem;
}

#roter-ochsen-image img {
	width: 24rem;
}

a.map-image {
	display: inline-block;
}

/* Snap to sections when scrolling the page - disable for now */
/*
html.scroll-snap {
	scroll-snap-type: y proximity;
}

.scroll-snap header,
.scroll-snap section,
.scroll-snap footer {
	scroll-snap-align: start;
}
*/

/*******/
/* More specific styles for classes and pages. */
/*******/

header.fullpage {
	min-height: 90vh;
	margin-top: 5vh;
	margin-bottom: 5vh;
}

#headline {
	color: var(--color-primary);
	background-image: url("../graphics/Ochsen_Schriftzug.2048.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#small-headline {
	margin: 0;
}

#tagline, .notice {
	font-size: 1.5rem;
}

.notice {
	font-weight: bold;
}

#logo > img {
	min-width: 12rem;
	width: 16rem;
}

.logo-icon {
	min-width: 1.2em;
	width: 1.8em;
	vertical-align: bottom;
	margin-right: 0.5em;
}

img.instagram {
	width: 1.5rem;
	vertical-align: middle;
}

#contact-summary img.instagram {
	margin-right: 0.5em;
}

header.fullpage {
	display: grid;
	grid-template-columns: [all-start] repeat(7, 1fr) [all-end];
	grid-template-rows: repeat(3, auto);
	grid-gap: 1rem;
}

.fullpage #logo {
	grid-column: all;
	grid-row: 1/2;
	align-self: center;
}

.fullpage .instagram-short-link {
	grid-column: 1/2;
	grid-row: 1/2;
	text-align: left;
}

.instagram-short-link img {
	width: 100%;
	max-width: 3rem;
}

.fullpage .multi-headline {
	grid-column: all;
	grid-row: 2/3;
	align-self: center;
	max-width: 100%;
}

.header-picture {
	transform: rotate(-2deg);
}

#header-pic-left {
	grid-column: 1/4;
	grid-row: 3/4;
	justify-self: left;

	z-index: 8; /* just for Pride label */
}

#header-pic-2 {
	grid-column: 2/5;
	grid-row: 3/4;
	justify-self: center;
}

#roter-ochsen-image {
	grid-column: 3/6;
	grid-row: 3/4;
	justify-self: center;

	z-index: 10;
}

#header-pic-4 {
	grid-column: 4/7;
	grid-row: 3/4;
	justify-self: center;
}

#header-pic-right {
	grid-column: 5/8;
	grid-row: 3/4;
	justify-self: right;
}

.timetable td {
	vertical-align: top;
}

.timetable th {
	text-align: left;
}

time {
	white-space: nowrap;
}

#imprint, #privacy {
	hyphens: auto;
}

.map-image img {
	width: 100%;
}

@media screen and (width < 30em) {
	h1 {
	/*	font-size: 2.5rem; */
		font-size: calc(1.5rem + 2vw);
	}
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.5rem; }

	.timetable {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 90em) {
	h1 {
	/*	font-size: 3rem; */
		font-size: calc(3.0rem + 1vw);
	}
	h2 { font-size: 2rem; }
	h3 { font-size: 2rem; }

	#tagline, .notice { font-size: 2rem; }
	section { font-size: 2rem; }

	.fullpage #logo {
		grid-column: 1/3;
		grid-row: 1/3;
		/* align-self: center; */
	}

	.fullpage .multi-headline {
		grid-column: 3/8;
		grid-row: 1/3;
		text-align: left;
	}

	#headline {
		background-position: left;
	}

	#header-pic-left {
		justify-self: center;
	}

	#header-pic-right {
		justify-self: center;
	}
}
