/*
Theme Name: DKG
Author: David Speyer Design
Author URI: https://davidspeyer.com
Version: 1.0
Text Domain: dkgblocktheme
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Link transition */
a {
	transition: all 300ms ease;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* Link Pseudoklassen */
a:focus {
	outline: none;
}

/* strong */
strong, b {
	font-weight: 700;
}

/* Versteckte Inhalte einblenden */
.zeigen-durch-button {
	display: none;
}

/* Animiertes Scrollen */
html {
	scroll-behavior: smooth;
}
:is(h1, h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 40px;
}

/* Header */

header.wp-block-template-part {
	position: fixed;
	top: 30px;
	left: 30px;
	right: 30px;
	background-color: #fff;
	z-index: 9999;
	border-radius: 12px;
	transition: all 0.3s ease;
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
	height: 84px; /* wichtig für Animation bei geöffnetem Mobile-Menu */
}
header.wp-block-template-part.hide {
	transform: translateY(calc(-100% - 40px));
}
header.wp-block-template-part.show {
	transform: translateY(0);
}

/* Externe Links im Menü */
nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern {
	position: relative;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
}
	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern .wp-block-navigation-item__content {
		flex-grow: initial;
		padding-right: 15px !important;
	}
	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern::after {
		content: '';
		background-image: url(assets/images/new-window.svg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 12px;
		height: 12px;
	}

/* Mobile menu */

body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

@media (min-width: 1815px) {

	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
	.mobile-buttons {
		display: none !important;
	}

	/* On page Navigation */

	main .wp-block-navigation__container {
		row-gap: var(--wp--preset--spacing--20);
	}

	/* Menü */

	nav[aria-label="Hauptmenü"] .current-menu-item a {
		color: color-mix(in srgb, currentColor 50%, transparent) !important;
	}

	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item {
		padding: 8px 16px;
	  border-radius: 12px;
	}
	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item:hover {
		background-color: #ededed;
	}

	/* Submenu */

	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		background-color: transparent !important;
		padding-top: calc(2 * var(--wp--preset--spacing--30)) !important;
		border: 0 !important;
		min-width: 300px !important;
	}
		nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
			margin: 0 !important;
			background-color: #ededed !important;
			padding-left: var(--wp--preset--spacing--40) !important;
			padding-right: var(--wp--preset--spacing--40) !important;
		}
		nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child {
			border-top-left-radius: 12px !important;
			border-top-right-radius: 12px !important;
			padding-top: var(--wp--preset--spacing--30) !important;
		}
		nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
			border-bottom-left-radius: 12px !important;
			border-bottom-right-radius: 12px !important;
			padding-bottom: var(--wp--preset--spacing--40) !important;
		}
			nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
				border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

	nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern {
		
	}
		nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern .wp-block-navigation-item__content {
		flex-grow: 1;
		padding-right: 30px !important;
	}
		nav[aria-label="Hauptmenü"] .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item.extern::after {
			width: 18px;
			height: 18px;
			position: absolute;
			right: var(--wp--preset--spacing--40);
		}

}

@media (max-width: 750px) {
	header.wp-block-template-part {
		height: 72px; /* wichtig für Animation bei geöffnetem Mobile-Menu */
	}
		.wp-block-site-logo img {
			width: 90px;
		}
		.desktop-buttons {
			display: none !important;
		}
}

.wp-block-navigation__responsive-container-open:focus {
	outline: none;
}

.has-modal-open header.wp-block-template-part {
	height: calc(100vh - 60px);
	left: 0;
	top: 0;
	right: 0;
	height: 100vh;
}

.has-modal-open header.wp-block-template-part .wp-block-navigation__responsive-container {
	padding: 30px !important;
}
	.has-modal-open header.wp-block-template-part .wp-block-navigation__responsive-container-content {
		padding-top: 0 !important;
	}

/* Main */

.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Akkordeon */

.akkordeon-titel {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  padding-right: 30px;
}

.akkordeon-titel::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.akkordeon.active .akkordeon-titel::after {
  content: "–";
}

.akkordeon.active .akkordeon-titel, .akkordeon .akkordeon-titel:hover {
	color: var(--wp--preset--color--accent-1);
}

.akkordeon-inhalt {
  display: none;
  animation: fadeIn 0.3s ease;
}

.akkordeon.active .akkordeon-inhalt {
  display: block;
}

/* Language Switcher */

.language-switcher {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
  gap: 8px;
}

/* Falls JavaScript zum anzeigen genutzt wird: */
/*.language-switcher .lang-item {
	display: none;
}*/
/*.language-switcher .lang-item.current-lang {
	display: block;
}*/
/* Wenn geöffnet: alle anzeigen */
/*.language-switcher.is-open .lang-item {
	display: block;
}*/

.language-switcher img {
	display: block;
	width: 22px;
	height: auto;
}

/* MetaSlider */
.metaslider .flexslider {
	margin: 0 !important;
}
	.metaslider.home .slides img {
		min-height: 400px;
		object-fit: cover;
	}
	.metaslider .flex-control-nav {
		bottom: 0 !important;
	}
		.metaslider .flex-control-nav li {
			position: relative !important;
			width: calc(100%/3) !important;
			text-align: center !important;
			color: #ffffff !important;
		}
			.metaslider .flex-control-nav li a {
				display: block !important;
				width: 100% !important;
				height: 240px !important;
				background: rgba(0, 0, 0, 0.4) !important;
				-o-box-shadow: none !important;
				box-shadow: none !important;
				border-radius: 0 !important;
				margin: 0 !important;
				box-sizing: border-box !important;
			}
			.metaslider .flex-control-nav li a.flex-active {
				background: rgba(227, 0, 11, 1.0) !important;
			}
			.metaslider .flex-control-nav li:nth-child(2) a {
				border-left: 1px solid #ffffff;
				border-right: 1px solid #ffffff;
			}
			.metaslider .flex-control-nav li div.page-link {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 240px;
				box-sizing: border-box;
				padding-top: 98px;
			}
			.metaslider .flex-control-nav li div.page-link:hover {
				cursor: pointer;
			}
				.metaslider .flex-control-nav li div.page-link span.title {
					font-family: var(--wp--preset--font-family--roboto);
					font-weight: bold;
					font-size: var(--wp--preset--font-size--large);
					letter-spacing: 0.05em;
					text-transform: uppercase;
					display: inline-block;
					margin-bottom: 26px;
				}
				.metaslider .flex-control-nav li div.page-link span.more {
					font-family: var(--wp--preset--font-family--cormorant-garamond);
					font-weight: 500;
					font-style: italic;
					letter-spacing: 0.05em;
				}
@media screen and (max-width: 1700px) {
	.metaslider .flex-control-nav li a {
		height: 210px !important;
	}
	.metaslider .flex-control-nav li div.page-link {
		height: 210px;
		padding-top: 84px;
	}
}
@media screen and (max-width: 1440px) {
	.metaslider .flex-control-nav li a {
		height: 180px !important;
	}
	.metaslider .flex-control-nav li div.page-link {
		height: 180px;
		padding-top: 69px;
	}
}
@media screen and (max-width: 1280px) {
	.metaslider .flex-control-nav li a {
		height: 140px !important;
	}
	.metaslider .flex-control-nav li div.page-link {
		height: 140px;
		padding-top: 52px;
	}
		.metaslider .flex-control-nav li div.page-link span.title {
			font-size: var(--wp--preset--font-size--medium);
			margin-bottom: 16px;
		}
}
@media screen and (max-width: 1024px) {
	.metaslider .flex-control-nav li a {
		height: 100px !important;
	}
	.metaslider .flex-control-nav li div.page-link {
		height: 100px;
		padding-top: 34px;
	}
		.metaslider .flex-control-nav li div.page-link span.title {
			/*font-size: 19px;
			font-size: 1.9rem;*/
			margin-bottom: 14px;
		}
}
@media screen and (max-width: 830px) {
	.metaslider .flex-control-nav li a {
		height: 70px !important;
	}
	.metaslider .flex-control-nav li div.page-link {
		height: 70px;
		padding-top: 17px;
	}
		.metaslider .flex-control-nav li div.page-link span.title {
			/*font-size: 16px;
			font-size: 1.6rem;*/
			margin-bottom: 12px;
		}
}
@media screen and (max-width: 720px) {
	.flex-control-nav {
		position: relative !important;
	}
		.metaslider .flex-control-nav li {
				width: 100% !important;
			}
				.metaslider .flex-control-nav li:nth-child(2) a {
					border: none !important;
					border-bottom: 1px solid #ffffff !important;
				}
				.metaslider .flex-control-nav li a {
					border-bottom: 1px solid #ffffff !important;
					background: #c1c1c1 !important;
				}
}

/* Maple News */

.maple-news em {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: calc(clamp(1.502rem, 1.502rem + ((1vw - 0.2rem) * 1.426), 2.5rem) * 1.2);
  white-space: nowrap;
}

/* Footer */

footer a {
	text-decoration: none !important;
}

/* Global Animations */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}