/*
 Theme Name: Thanatos Child 2
 Template: twentysixteen
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("../twentysixteen/style.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap");

/* ── Allgemein ── */

html {
	margin-top: 0 !important;
}

body {
	margin-top: 0 !important;
	background-color: #ffffff;
}

.site {
	background-color: transparent;
}

/* ── Header ── */

.site-header {
	position: sticky;
	top: 0;
	background: transparent;
	padding: calc(1.2rem + env(safe-area-inset-top)) 7.6923% 3rem;
	z-index: 100;
}

.custom-logo-link {
	display: none;
}

/* ── Branding ── */

.site-header-main {
	flex-wrap: wrap;
	align-items: flex-start;
}

.site-branding {
	text-align: left;
	margin: 0;
	background: none !important;
	position: relative;
	z-index: 1;
	flex: 1;
	order: 1;
}

/* Burger: order 2 (wird in Burger-Block gesetzt) */

.site-description {
	flex-basis: 100%;
	order: 3;
}

#site-header-menu {
	flex-basis: 100%;
	order: 4;
}

.wp-custom-logo .site-title {
	margin-top: 0;
}

.site-title,
.site-title a,
#masthead .site-description,
.site-branding .site-description {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
}

.site-title,
.site-branding .site-title,
#masthead .site-title {
	font-size: 2rem !important;
}

.site-branding .site-title a,
.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: #2c1a0e;
}

.site-description {
	display: block;
	color: #bf8d20;
	margin-top: 0.2rem;
	line-height: 1.3;
	text-align: left;
	position: relative;
	z-index: 1;
}

#masthead .site-description,
.site-branding .site-description {
	font-size: 1.3rem !important;
}

/* Telefonnummer-Styling durch Browser verhindern */
.site-description a[href^="tel"],
.site-description a[x-apple-data-detectors] {
	color: inherit !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
}

/* ── Inhalt ── */

.site-content,
.site-footer {
	position: relative;
	z-index: 1;
}

.site-footer .social-navigation,
.site-footer .main-navigation {
	display: none;
}

h1, h2, h3, h4, h5, h6 {
	color: #bf8d20;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
}

hr {
	background-color: #d4a898;
}

/* Versteckten SEO-Text ausblenden */
.entry-content span[style*="color: #ffffff"][style*="xx-small"],
.entry-content span[style*="color: #ffffff"] span[style*="caret-color"] {
	display: none;
}

/* ── Scroll-Driven Animations ── */

@keyframes fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes burger-bg {
	from { background: transparent; padding: 0.7rem; }
	to   { background: rgba(255, 255, 255, 0.9); padding: 0.7rem; border-radius: 50%; }
}

.site-description,
.site-branding {
	animation: fade-out linear both;
	animation-timeline: scroll(root);
	animation-range: 20px 80px;
}

/* Menü geöffnet: Header weiß, Branding sichtbar */
.site-header:has(.menu-toggle.toggled-on) {
	background: #fff;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.site-header:has(.menu-toggle.toggled-on) .site-branding,
.site-header:has(.menu-toggle.toggled-on) .site-description {
	opacity: 1 !important;
}

/* ── Burger-Button ── */

.menu-toggle {
	margin: 0;
	padding: 0.7rem;
	border: none;
	background: transparent;
	line-height: 0;
	color: #584300;
	flex-shrink: 0;
	align-self: flex-start;
	order: 2;
	touch-action: manipulation;
	animation: burger-bg linear both;
	animation-timeline: scroll(root);
	animation-range: 20px 80px;
}

.menu-toggle svg {
	color: inherit;
}

.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active {
	border: none;
	background: transparent;
	outline: none;
	color: #584300;
}

.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background: transparent;
	color: #1a1a1a;
}

/* Burger ↔ Close umschalten */
.menu-toggle .close-icon {
	display: none;
}

.menu-toggle.toggled-on .burger-icon {
	display: none;
}

.menu-toggle.toggled-on .close-icon {
	display: block;
}

/* ── Navigation ── */

.main-navigation a,
.social-navigation a {
	color: #584300;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1rem;
	letter-spacing: 0.04em;
	padding: 0.6em 0;
	text-decoration: none;
	border: none;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
	color: #584300;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
	border-left-color: #bf8d20;
	text-decoration: none;
	color: #584300;
}

.main-navigation ul ul .current-menu-item > a,
.main-navigation ul ul .current-menu-ancestor > a {
	border-left-color: #bf8d20;
	color: #584300;
}

.main-navigation li,
.main-navigation .primary-menu {
	border: none;
}

.main-navigation ul ul {
	margin-left: 0;
	border: none !important;
	background: #fff;
}

.main-navigation ul ul li {
	border-bottom: 1px solid #f0ebe3;
}

.main-navigation ul ul li:last-child {
	border-bottom: none;
}

.main-navigation ul ul a {
	font-size: 0.9rem;
	padding: 0.7em 1.5em;
	border-left: 2px solid transparent;
	opacity: 1;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: #584300 !important;
	font-weight: 600;
}

.main-navigation li.focus > a {
	color: #584300 !important;
}

.dropdown-toggle {
	color: #584300;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
	color: #584300;
}

.dropdown-toggle::after {
	border-left-width: 0;
}

.main-navigation .menu-item-has-children > a {
	cursor: pointer;
}

/* ── Breakpoint: Tablet (44.375em / 710px) ── */

@media screen and (min-width: 44.375em) {
	body:not(.custom-background-image)::before,
	body:not(.custom-background-image)::after {
		display: none;
	}

	.site {
		margin: 0;
	}

	.site-header {
		padding: 1.5rem 7.6923% 2.5rem;
	}

	.site-title,
	.site-branding .site-title,
	#masthead .site-title {
		font-size: 2.2rem !important;
	}
}

/* ── Breakpoint: Desktop (56.875em / 910px) ── */

@media screen and (min-width: 56.875em) {
	.site-header {
		position: relative;
		top: auto;
		padding: 3.236rem 3.5rem 0;
	}

	.site-branding {
		flex: none;
		flex-basis: 100%;
		order: 0;
	}

	.menu-toggle {
		order: 0;
	}

	.site-description {
		order: 0;
		flex-basis: 100%;
		margin-top: 0.3rem;
		margin-bottom: 0;
	}

	#site-header-menu {
		order: 0;
	}

	.site-content {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}

	.main-navigation {
		margin-left: 0;
	}

	.main-navigation li:hover > a,
	.main-navigation li.focus > a {
		color: #584300 !important;
	}

	.main-navigation ul ul {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		border-bottom: 1px solid #d1d1d1 !important;
	}

	.main-navigation ul ul li {
		border-bottom: 1px solid #f0ebe3 !important;
	}

	.main-navigation ul ul li:last-child {
		border-bottom: none !important;
	}
}