/* =============================================
   Wetzlar Navigation Block – front-end styles
   ============================================= */

/* ── Base ── */
.wetzlar-nav {
	position: relative;
	display: flex;
	align-items: center;
}

/* ── Horizontal list ── */
.wetzlar-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wetzlar-nav__list--horizontal {
	display: flex;
	gap: 32px;
	flex-wrap: nowrap;
}

.wetzlar-nav__link {
	color: var(--wn-link-color, #e5e2e1);
	text-decoration: none;
	font-size: var(--wn-font-size, 12px);
	letter-spacing: var(--wn-letter-spacing, 0.16em);
	text-transform: var(--wn-text-transform, uppercase);
	font-family: var(--wp--preset--font-family--body);
	transition: color 0.2s ease;
}

.wetzlar-nav__link:hover,
.wetzlar-nav__link:focus-visible {
	color: var(--wn-link-hover, #ff535b);
}

/* ── Toggle button ── */
.wetzlar-nav__toggle {
	display: none;          /* hidden by default in horizontal mode */
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 100002;
	position: relative;
}

/* ── Hamburger icon ── */
.wetzlar-nav__hamburger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 24px;
}

.wetzlar-nav__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--wn-icon-color, #e5e2e1);
	border-radius: 1px;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

/* X morph */
.wetzlar-nav__toggle[aria-expanded="true"] .wetzlar-nav__hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.wetzlar-nav__toggle[aria-expanded="true"] .wetzlar-nav__hamburger span:nth-child(2) {
	opacity: 0;
}
.wetzlar-nav__toggle[aria-expanded="true"] .wetzlar-nav__hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Panel (fullscreen overlay) ── */
.wetzlar-nav__panel {
	position: fixed;
	inset: 0;
	z-index: 100001;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--wn-duration, 300ms);
}

.wetzlar-nav__panel.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* overlay backdrop */
.wetzlar-nav__panel-overlay {
	position: absolute;
	inset: 0;
	background: var(--wn-overlay-bg, #131313);
	opacity: 0;
	transition: opacity var(--wn-duration, 300ms) ease;
}

.wetzlar-nav__panel.is-open .wetzlar-nav__panel-overlay {
	opacity: var(--wn-overlay-opacity, 0.92);
}

/* panel content container */
.wetzlar-nav__panel-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	height: 100%;
	padding: 100px 48px 80px;
}

/* ── Vertical list (inside panel) ── */
.wetzlar-nav__list--vertical {
	text-align: right;
}

.wetzlar-nav__list--vertical .wetzlar-nav__item {
	margin-bottom: 16px;
}

.wetzlar-nav__list--vertical .wetzlar-nav__link {
	font-size: clamp(16px, 3vw, 24px);
	letter-spacing: 0.12em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
}

/* ── Display mode: hamburger (always) ── */
.wetzlar-nav--hamburger .wetzlar-nav__list--horizontal {
	display: none;
}

.wetzlar-nav--hamburger .wetzlar-nav__toggle {
	display: flex;
}

/* ── Display mode: horizontal ── */
.wetzlar-nav--horizontal .wetzlar-nav__toggle {
	display: none;
}

.wetzlar-nav--horizontal .wetzlar-nav__panel {
	display: none;
}

/* ── Responsive: .is-mobile override (JS-driven) ── */
.wetzlar-nav.is-mobile .wetzlar-nav__list--horizontal {
	display: none;
}

.wetzlar-nav.is-mobile .wetzlar-nav__toggle {
	display: flex;
}

.wetzlar-nav.is-mobile .wetzlar-nav__panel {
	display: block;
}

/* ── Animation: slide-down ── */
.wetzlar-nav__panel--slide-down .wetzlar-nav__panel-content {
	transform: translateY(-40px);
	opacity: 0;
	transition: transform var(--wn-duration, 300ms) ease,
	            opacity   var(--wn-duration, 300ms) ease;
}

.wetzlar-nav__panel--slide-down.is-open .wetzlar-nav__panel-content {
	transform: translateY(0);
	opacity: 1;
}

/* ── Animation: fade ── */
.wetzlar-nav__panel--fade .wetzlar-nav__panel-content {
	opacity: 0;
	transition: opacity var(--wn-duration, 300ms) ease;
}

.wetzlar-nav__panel--fade.is-open .wetzlar-nav__panel-content {
	opacity: 1;
}

/* ── Animation: slide-left (from right) ── */
.wetzlar-nav__panel--slide-left .wetzlar-nav__panel-content {
	transform: translateX(60px);
	opacity: 0;
	transition: transform var(--wn-duration, 300ms) ease,
	            opacity   var(--wn-duration, 300ms) ease;
}

.wetzlar-nav__panel--slide-left.is-open .wetzlar-nav__panel-content {
	transform: translateX(0);
	opacity: 1;
}

/* ── Escape header overflow:hidden so the fixed panel is visible ── */
.wetzlar-site-header,
.wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > header.wp-block-template-part:first-child {
	overflow: visible !important;
}