/*
 Theme Name:   Bösenberg Stiftung
 Theme URI:    http://www.boesenberg-stiftung.de/
 Description:  Neues Theme
 Author:       Marcus Morczinietz
 Author URI:   https://marcuus.de
 Version:      1.0
*/

/********* FONTS *********/

@font-face {
	font-display: swap;
	font-family: 'DM Serif Display';
	font-style: italic;
	font-weight: 400;
	font-feature-settings: normal;
	src: url('assets/fonts/dm-serif-display-v15-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/raleway-v34-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/raleway-v34-latin-700.woff2') format('woff2');
}

/********* VARIABLES *********/

:root,
.editor-styles-wrapper :root {
	--royal-blue: #0B283D;
	
	--blue: #01508A;
	--blue-25: #bfd3e2;
	--blue-10: #E6EEF3;

	/* Other Colors */
	--black: #121212;
	--white: #FFFFFF;
	--grey: #757575;

	/* Überschriften */
	--hero-size: 5rem;
	--h1-size: 4rem;
	--h2-size: 2.5rem;
	--h3-size: 1.5rem;
	--h4-size: 1.25rem;

	/* Schriftfamilie */
	--font-family-body: 'Raleway', sans-serif;
	--font-family-headline: 'DM Serif Display', sans-serif;
}


@media (max-width: 768px) {
	:root,
	.editor-styles-wrapper :root {
		--hero-size: 4rem;
		--h1-size: 2.5rem;
		--h2-size: 1.75rem;
		--h3-size: 1.25rem;
		--h4-size: 1rem;
	}
}
/********* GLOBAL *********/

* {
  box-sizing: border-box;
}

html, body {
	margin: 0 !important;
	padding: 0 !important;
	font-stretch: normal;
	font-optical-sizing: auto;
	font-kerning: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html :where(.wp-block) {
	max-width: 1140px;
}

body:not(.wp-admin) {
	background-color: var(--blue-10);
	font-family: var(--font-family-body);
	line-height: 1.4;
	font-size: 100%;
	font-size: 18px;
}

.editor-styles-wrapper {
	font-family: var(--font-family-body) !important;
	background-color: var(--blue-10);
}

.editor-visual-editor__post-title-wrapper h1 {
	font-family: var(--font-family-body);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
}

.editor-visual-editor__post-title-wrapper h1:before {
	content: "Titel: ";
	font-weight: 700;
}

h1, .h1, .hero {
	font-family: var(--font-family-headline);
	font-weight: normal;
	font-style: italic;
	font-variant: normal;
	font-variation-settings: normal;
	font-variation-settings: "xhgt" 0.7;
	letter-spacing: 1px;
}

/* Headings */
.hero {
	font-size: var(--hero-size);
	line-height: 1.05;
	font-weight: 700;
	margin: 0;
	color: var(--royal-blue);
}

h1,
.h1 {
	font-size: var(--h1-size);
	line-height: 1.25;
	font-weight: 700;
	color: var(--royal-blue);
}

h2,
.h2 {
	font-size: var(--h2-size);
	line-height: 1.3;
	font-weight: 700;
	color: var(--royal-blue);
}

h3,
.h3 {
	font-size: var(--h3-size);
	line-height: 1.35;
	font-weight: 700;
	color: var(--royal-blue);
}

h4,
.h4 {
	font-size: var(--h4-size);
	line-height: 1.4;
	font-weight: 700;
	color: var(--royal-blue);
}

.text-center {
	text-align: center;
}

.white-on-dark h1 {
	color: var(--white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

address {
	font-style: normal;
}

.wp-block-heading {
	margin: 0 0 1rem 0;
}

.wp-block-column p,
.post-content p {
	line-height: 1.6;
	margin: 0 0 2rem 0;
}

.wp-block-column .wp-block-buttons {
	margin-bottom: 1rem;
}

.icon {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.wp-block-spacer {
	width: 100%;
}

/* Link Styles */
a {
	color: var(--black);
}
p a:any-link {
	text-decoration: underline;
	text-decoration-color: rgba(1, 80, 138, 1);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: all 300ms;
}

p a:hover, p a:focus {
	cursor: pointer;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(191, 211, 226, 1);
}


/* BUTTONS */
:where(.editor-styles-wrapper) .wp-block-button__link {
	padding: 0.5rem 1.5rem !important;
	font-size: 1rem !important;
}

button, .button,
.wp-block-button__link,
input[type="button"],
input[type="submit"] {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	font-family: var(--font-family-body);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 100px;
	box-sizing: border-box;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}

/* BUTTON: Primary */
.button.is-style-primary,
.is-style-primary .wp-block-button__link {
	background-color: var(--blue);
	color: var(--white);
	border: 2px solid var(--blue);
}

.button.is-style-primary:hover,
.is-style-primary .wp-block-button__link:hover {
	background-color: var(--royal-blue); /* Dunklere Variante */
	border-color: var(--royal-blue);
}

/* BUTTON: Secondary */
.button.is-style-secondary,
.is-style-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--blue);
	border: 2px solid var(--blue);
}

.button.is-style-secondary:hover,
.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--blue);
	color: var(--white);
}

/* BUTTON: Inverted */
.button.is-style-inverted,
.is-style-inverted .wp-block-button__link {
	background-color: var(--white);
	color: var(--blue);
	border: 2px solid var(--white);
}

.button.is-style-inverted:hover,
.is-style-inverted .wp-block-button__link:hover {
	background-color: var(--blue-10);
	color: var(--blue);
	border: 2px solid var(--blue-25);
}

/* BUTTON: Focus */
a:focus,
button:focus,
.wp-block-button__link:focus {
	outline: 3px solid var(--blue-25);
	outline-offset: 2px;
}

.button.is-style-primary:focus,
.button.is-style-secondary:focus,
.is-style-primary .wp-block-button__link:focus,
.is-style-secondary .wp-block-button__link:focus {
	outline: 3px solid var(--blue);
}


/* Navigation */
header {
	background: var(--royal-blue);
	color: var(--white);
}

header.g-container {
	gap: 1.5rem;
}
.header-navigation {
	padding: 3rem 0 1rem 0;
}
.header-intro h1 {
	margin: 1rem 0 0.5rem 0;
}
.header-intro p {
	font-size: 1.5rem;
	margin: 0.5rem 0 2rem 0;
}
.header-intro hr {
	width: 70px;
	border-top: 3px solid var(--white);
	margin: 2rem 0;
}
nav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-items: flex-end;
	justify-content: flex-end;
	flex: 1 1 100%;
}

nav ul.navigation {
	margin-right: -0.75rem;
}

nav ul.navigation li {
	display: flex;
	padding: 0 1rem;
}

nav ul li a {
	color: var(--white);
	padding: 0.5rem 0;
	font-size: 1.25rem;
	transition: background-size 0.6s;
	background-image: linear-gradient(var(--blue), var(--blue));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 3px;
	text-decoration: none;
}

nav ul li a:hover,
nav ul li a:focus {
	background-size: 100% 3px;
}

nav ul li.current-menu-item a {
	background-size: 100% 3px;
}

/* Mobile Menu - Default Hidden */
.menu-toggle.button {
	display: none;
}

/* Footer Styles */
footer {
	border-top: 1px solid var(--black);
}

.footer-info p {
	margin-top: 0px;
}

.footer-navigation {
	gap: 2rem;
}

.footer-navigation a {
	color: var(--black);
}

footer .footer-right {
	text-align: right;
}

.copyright {
	margin: 4rem 0 0 0;
}

@media (max-width: 768px) {
	.footer-navigation {
		justify-items: start;
		justify-content: start;
	}

	footer .footer-right {
		text-align: left;
	}

	.copyright {
		margin-top: 1rem;
		display: block;
	}
}


/* Mobile Styles */
@media (max-width: 1024px) {

	html,
	body {
		font-size: 100%;
		font-size: 18px;
	}

	body {
		margin: 0;
	}

	header {
		padding: 1rem;
	}
	.header-navigation {
		padding: 0;
	}
	header .logo.g-col {
		display: flex;
		flex-basis: calc(60% - 1.5rem);
	}

	header .menu.g-col {
		display: flex;
		flex-basis: calc(30% - 1.5rem);
		justify-content: end;
	}

	.g-container {
		gap: 1rem;
	}

	main {
		margin-top: 1rem;
		padding: 0 1rem;
	}

	.logo img {
		width: auto;
	}

	.navigation {
		display: none;
	}

	.navigation.open {
		display: block;
		z-index: 9999;
		position: fixed;
		left: 0px;
		top: 90px;
		width: 100vw;
		height: auto;
		background: var(--white);
		padding: 3rem 2rem;
	}

	.navigation.open li {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 1rem;
		padding: 0;
	}

	.navigation.open li a {
		font-size: 1.25rem;
		color: var(--black);
		display: inline-block;
		padding: 0.5rem 0;
	}

	.menu-toggle.button {
		font-size: 1rem;
		display: flex;
		padding: 0.5rem 1rem;
		gap: 6px;
		align-items: center;
	}
	
	footer {
		padding: 1rem;
	}

	footer .g-col {
		justify-content: flex-start
	}

	.footer-navigation {
		flex-direction: column;
		gap: 1rem;
	}

	.footer-navigation li {
		display: block;
	}
}