/**
 * Theme – Navigation: fixierte Bottom-Bar (Desktop) + Burger-Overlay (Mobile).
 *
 * Markup: header.php (.spnkt-nav mit Logo, WP-Menü .spnkt-nav__liste,
 * Trigger, Overlay .spnkt-nav__menu). Werte 1:1 aus dem Vorgänger-Theme,
 * auf das neue Markup gemappt. Desktop-first.
 *
 * JS-Kontrakt (assets/js/navigation.js):
 *   .spnkt-nav__menu.is-open / .spnkt-nav__trigger.is-open /
 *   html.spnkt-has-modal-open (Scroll-Lock in global.css)
 */

/* =========================================================================
   Bottom-Bar (alle Breakpoints)
   ========================================================================= */

.spnkt-header {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

.spnkt-nav {
	width: 100%;
	height: var(--spnkt-nav-height);
	background: var(--wp--preset--color--secondary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2.1875em 0.375em 2.1875em;
}

/* Logo: alle vier Saison-SVGs sind im Markup; season.css (.show-*) blendet
   das aktuelle ein. */
.spnkt-nav__logo svg.logo {
	width: 11.125rem;
	height: auto;
}

/* =========================================================================
   Menü (Desktop: inline — Mobile: Overlay)
   ========================================================================= */

.spnkt-nav__trigger {
	display: none;
}

.spnkt-nav__menu {
	display: flex;
	align-items: center;
}

ul.spnkt-nav__liste {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

ul.spnkt-nav__liste li {
	display: inline-block;
	font-family: var(--wp--preset--font-family--base);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2em;
	letter-spacing: 0.01em;
	margin: 0 1.25em;
}

.spnkt-nav a {
	color: var(--wp--preset--color--primary);
}

ul.spnkt-nav__liste a {
	display: inline-block;
	position: relative;
}

/* Unterstrich-Effekt beim Hover (Basis aus dem Alt-Theme). Tastatur-Fokus
   nutzt den globalen :focus-visible-Outline aus global.css. */
ul.spnkt-nav__liste a::before {
	content: "";
	position: absolute;
	bottom: -0.425em;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--primary);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 0.2s ease-out;
	will-change: transform;
}

ul.spnkt-nav__liste a:hover::before {
	transform: scaleX(1);
}

/* Sprachwahl: auf Desktop im Footer, im Overlay nur mobil. */
.spnkt-nav__lang {
	display: none;
}

/* =========================================================================
   Tablet & Mobile: Burger + Overlay
   ========================================================================= */

@media only screen and (max-width: 55em) {

	.spnkt-nav {
		padding: 1em;
	}

	.spnkt-nav__logo svg.logo {
		width: 9.5rem;
	}

	/* --- Trigger (Burger) */

	.spnkt-nav__trigger {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--spnkt-nav-height);
		height: var(--spnkt-nav-height);
		background: transparent;
		border: unset;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	.spnkt-nav__patty {
		--patty-distance: 0.5rem;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 3rem;
		height: 0.25rem;
		background: var(--wp--preset--color--primary);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.spnkt-nav__patty--1 {
		transform: translate3d(-50%, calc(-50% - var(--patty-distance)), 0);
	}

	.spnkt-nav__patty--2 {
		transform: translate3d(-50%, calc(-50% + var(--patty-distance)), 0);
	}

	.spnkt-nav__trigger.is-open .spnkt-nav__patty--1 {
		transform: translate3d(-50%, -50%, 0) rotate(45deg);
	}

	.spnkt-nav__trigger.is-open .spnkt-nav__patty--2 {
		transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	}

	/* --- Overlay über der Bar */

	.spnkt-nav__menu {
		position: fixed;
		bottom: var(--spnkt-nav-height);
		left: 0;
		width: 100vw;
		height: calc(100vh - var(--spnkt-nav-height));
		height: calc(100dvh - var(--spnkt-nav-height));
		background: var(--wp--preset--color--secondary);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 2.25em;
		overflow: hidden;

		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.spnkt-nav__menu.is-open {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		transition: opacity 0.3s ease;
	}

	ul.spnkt-nav__liste {
		display: block;
		height: auto;
		width: 100%;
	}

	ul.spnkt-nav__liste li {
		display: block;
		font-size: 3.5rem;
		margin: 0 0 0.25em 0;
		line-height: 1.4em;
	}

	ul.spnkt-nav__liste li:last-of-type {
		margin-bottom: 0.75em;
	}

	.spnkt-nav__lang {
		display: block;
		margin-top: 1.5em;
	}
}

@media only screen and (max-width: 36em) {

	.spnkt-nav__logo svg.logo {
		width: 6.5rem;
	}

	ul.spnkt-nav__liste li {
		font-size: 3rem;
	}

	.spnkt-nav__patty {
		--patty-distance: 0.4rem;
		width: 2.1875rem;
		height: 0.1875rem;
	}
}