/* ============================================================
   UHC Laupen — Fullscreen Navigation Menu
   Single-container approach: the menu container IS the button.
   It starts at 140×140px in the top-right corner and expands
   to fill the entire viewport on click.
   ============================================================ */

/* ── Arrow SVG hover indicator ───────────────────────────────
   Absolutely positioned just OUTSIDE the link box, so the link
   text stays flush-left with the column title above it. */
.uhc-nav-arrow {
	position: absolute;
	/* em-based so the arrow scales with the now-fluid link font size
	   (23px tall / 21px inset at the reference 27px link size) */
	left: -0.78em;
	top: 50%;
	transform: translateY( -50% );
	width: auto;
	height: 0.85em;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* ── The single container — button state ────────────────────── */
/*
 * This element is both the MENÜ button and the fullscreen overlay.
 * Collapsed: 140×140px, top-right corner, black, shows "MENÜ".
 * Expanded:  100vw×100vh, top-left origin, white, shows nav content.
 *
 * We animate: width, height, top, right, background-color.
 * overflow:hidden keeps content clipped while animating.
 */
.uhc-menu-container {
	/* Button footprint: 140px at the 1920px reference viewport, fluid below
	   (140 / 1920 = 7.29vw) so it shrinks on 13" laptops. Shared with the
	   MENÜ label so both stay in sync. */
	--uhc-menu-btn-size: clamp( 112px, 7.29vw, 140px );

	position: fixed;
	top: clamp( 40px, 5vw, 96px );
	right: clamp( 36px, 4.375vw, 84px );
	width: var( --uhc-menu-btn-size );
	height: var( --uhc-menu-btn-size );
	background: #000;
	z-index: 9999;
	overflow: hidden;
	cursor: pointer;

	/* Smooth expansion */
	transition:
		width    0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		height   0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		top      0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		right    0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		background-color 0.5s ease;
}

/* Expanded state */
.uhc-menu-container.is-open {
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: #fff;
	cursor: default;
	overflow: hidden;
}

/* ── MENÜ label inside the container ────────────────────────── */
.uhc-menu-label {
	position: absolute;
	top: 0;
	/* Anchored to the top-right 140px box (the collapsed button footprint) so
	   that while the container expands/collapses the label always sits in the
	   top-right corner — it reappears from the top-right, never from the middle. */
	left: auto;
	right: 0;
	width: var( --uhc-menu-btn-size, 140px );
	height: var( --uhc-menu-btn-size, 140px );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'League Gothic', sans-serif;
	font-size: clamp( 30px, 1.875vw, 36px ); /* 36px @ 1920, fluid below */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	pointer-events: none;
	user-select: none;

	/* Fade out as the container expands */
	opacity: 1;
	transition:
		opacity 0.2s ease 0s,
		background-color 0.2s ease,
		color 0.2s ease;
}

.uhc-menu-container.is-open .uhc-menu-label {
	opacity: 0;
	transition: opacity 0.15s ease 0s;
}

/*
 * Hover — same yellow-on-black flip as the ZURÜCK button under a post
 * (.post-back in global.css).
 *
 * The colour change sits on the LABEL, not on the container: the label
 * covers exactly the collapsed button footprint, so filling it yellow looks
 * identical to recolouring the button, while leaving the container's own
 * background transition (black → white over 0.5s as the menu expands)
 * untouched.
 */
.uhc-menu-container:not( .is-open ):hover .uhc-menu-label,
.uhc-menu-container:not( .is-open ):focus-visible .uhc-menu-label {
	background-color: #DEDC00;
	color: #000;
}

/* ── Nav content inside the container ───────────────────────── */
.uhc-nav-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 140px sides / 100px bottom at 1920, fluid below so the 6 columns
	   keep as much room as possible on 13" laptops */
	padding: clamp( 56px, 7.29vw, 140px ) clamp( 56px, 7.29vw, 140px ) clamp( 48px, 5.2vw, 100px );
	box-sizing: border-box;

	/* Column flow so the quick-links row can be pulled above the big
	   menu columns on desktop (see .uhc-nav-bottom). */
	display: flex;
	flex-direction: column;

	/* Hidden while collapsed, fades in after expansion */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease 0s;
}

.uhc-menu-container.is-open .uhc-nav-content {
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.3s ease 0.75s;
}


/* ── Quick links row — above the big menu columns on desktop ─── */
.uhc-nav-bottom {
	order: -1;
	flex: 0 0 auto;
	/* 100px at 1920, fluid below — same rhythm as the menu padding */
	margin-bottom: clamp( 48px, 5.2vw, 100px );
}

/* ── 5 columns ──────────────────────────────────────────────── */
.uhc-nav-columns {
	display: grid;
	/* auto instead of 1fr: each column gets at least the width of its
	   longest entry (no wrapping, e.g. Breitensport), and only the
	   REMAINING space is shared equally between the columns */
	grid-template-columns: repeat( 5, auto );
	gap: clamp( 20px, 1.67vw, 32px ); /* 32px @ 1920, fluid below */
	align-items: start;
}

/* ── Column structure ───────────────────────────────────────── */
.uhc-nav-column {
	display: flex;
	flex-direction: column;
}

.uhc-nav-column__title {
	font-family: 'League Gothic', sans-serif;
	/* 46px @ 1920 (46 / 1920 = 2.4vw), fluid below so the 6 columns keep
	   fitting side by side on 13" laptops */
	font-size: clamp( 30px, 2.4vw, 46px );
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #000;
	margin: 0 0 clamp( 12px, 1.04vw, 20px );
	border: none;
	padding: 0;
}

/* ── Menu items ─────────────────────────────────────────────── */
.uhc-nav-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uhc-nav-column ul li {
	margin: 0;
}

.uhc-nav-column ul li a {
	font-family: 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	/* 27px @ 1920 (27 / 1920 = 1.41vw), fluid below */
	font-size: clamp( 19px, 1.41vw, 27px );
	font-weight: 400;
	color: #000;
	text-decoration: none;
	line-height: 1.2;
	display: flex;
	align-items: center;
	position: relative; /* anchor for the outside hover arrow */
	transition: color 0.12s ease;
}

/* Active: ExtraCondensed Bold */
.uhc-nav-column ul li.current-menu-item > a,
.uhc-nav-column ul li.current_page_item > a,
.uhc-nav-column ul li.uhc-current-team > a {
	font-weight: 700;
}

/* Hover: show yellow arrow */
.uhc-nav-column ul li a:hover .uhc-nav-arrow,
.uhc-nav-column ul li a:focus .uhc-nav-arrow {
	opacity: 1;
}

/* No focus outline on menu links — the yellow arrow is the focus indicator.
   (The menu opens by focusing its first link, which otherwise shows the
   browser's default outline.) */
.uhc-nav-content a:focus,
.uhc-nav-content a:focus-visible {
	outline: none;
}

/* ── Bottom row menu items ──────────────────────────────────── */

.uhc-nav-bottom ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.uhc-nav-bottom ul li a {
	font-family: 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	/* 31px @ 2200+, fluid below */
	font-size: clamp( 19px, 1.41vw, 31px );
	font-weight: 400;
	color: #000;
	text-decoration: none;
	display: flex;
	align-items: center;
	position: relative; /* anchor for the outside hover arrow */
}

.uhc-nav-bottom ul li.current-menu-item > a {
	font-weight: 700;
}

.uhc-nav-bottom ul li a:hover .uhc-nav-arrow,
.uhc-nav-bottom ul li a:focus .uhc-nav-arrow {
	opacity: 1;
}


/* ── ZURÜCK button — inside the container, bottom-right ─────── */
.uhc-nav-close {
	position: fixed;
	bottom: clamp( 36px, 4.375vw, 84px );
	right: clamp( 36px, 4.375vw, 84px );
	background: #000;
	color: #fff;
	border: none;
	cursor: pointer;
	font-family: 'League Gothic', sans-serif;
	font-size: clamp( 30px, 1.875vw, 36px ); /* 36px @ 1920, fluid below */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: clamp( 27px, 1.875vw, 36px ) clamp( 20px, 1.41vw, 27px );
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s ease 0s,
		background 0.2s ease,
		color 0.2s ease;
}

.uhc-menu-container.is-open ~ .uhc-nav-close {
	opacity: 1;
	pointer-events: all;
	/* Only the opacity is delayed (it waits for the menu to finish
	   expanding) — the hover colours must still react instantly. */
	transition:
		opacity 0.2s ease 0.8s,
		background 0.2s ease,
		color 0.2s ease;
}

/* Same hover as the ZURÜCK button under a post (.post-back). */
.uhc-nav-close:hover,
.uhc-nav-close:focus {
	background: #DEDC00;
	color: #000;
}

.uhc-nav-close:focus-visible {
	outline: 3px solid #DEDC00;
	outline-offset: 3px;
}

/* ============================================================
   Laptop and below (≤ 1600px)
   Menu columns use the SAME horizontal inset as the collapsed
   button and the footer: clamp( 36px, 4.375vw, 84px ).
   ============================================================ */
@media ( max-width: 1600px ) {
	.uhc-nav-content {
		padding-left: clamp( 36px, 4.375vw, 84px );
		padding-right: clamp( 36px, 4.375vw, 84px );
	}

}

/* ============================================================
   Mobile (≤ 768px)
   ============================================================ */
@media ( max-width: 768px ) {

	/*
	 * Button state: top-right with an EXPLICIT size — auto sizes can't
	 * animate, so fixed dimensions let the container grow smoothly from
	 * the top-right corner into the full screen (and shrink back).
	 * Anchored via top/right, so only width/height/offsets animate.
	 */
	.uhc-menu-container {
		top: 24px;
		bottom: auto;
		right: 24px;
		width: 95px;
		height: 95px; /* 1:1 square button, 10% smaller than before */
		min-width: 0;
		min-height: 0;

		transition:
			width    0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
			height   0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
			top      0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
			right    0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
			background-color 0.5s ease;
	}

	.uhc-menu-container.is-open {
		top: 0;
		bottom: auto;
		right: 0;
		width: 100vw;
		/* Absolute full height — dynamic viewport, follows the browser
		   controls as they show/hide (100vh fallback for old browsers). */
		height: 100vh;
		height: 100dvh;
	}

	/* MENÜ label — anchored to the top-right button footprint so it
	   stays in that corner while the container expands/collapses. */
	.uhc-menu-label {
		top: 0;
		left: auto;
		right: 0;
		bottom: auto;
		width: 95px;
		height: 95px;
		padding: 0;
		font-size: 28px;
		position: absolute;
	}

	/*
	 * Nav content padding — sides match the fluid content gutter (26px @
	 * 390px viewport). This is the scroll region: everything (menu columns
	 * AND the quick-links row) scrolls together, so expanding a section
	 * simply pushes the links further down. Only the ZURÜCK button is
	 * fixed, and the bottom padding keeps the last row clear of it.
	 */
	.uhc-nav-content {
		padding: 42px 6.667vw 120px 6.667vw;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain; /* don't scroll the page behind the menu */
	}

	/* Children keep their natural height so the container scrolls rather
	   than squashing them. */
	.uhc-nav-content > * {
		flex: 0 0 auto;
	}

	/* Columns stack vertically — no separator lines, 14px between the
	   top-level entries. align-content:start because a grid whose rows are
	   auto-sized otherwise stretches them to fill the container. */
	.uhc-nav-columns {
		grid-template-columns: 1fr;
		gap: 14px;
		align-content: start;
	}

	/* Title becomes accordion toggle */
	.uhc-nav-column__title {
		font-size: 43px;
		margin: 0;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		user-select: none;
	}

	/* Expand indicator: the yellow > chevron, pointing down when
	   collapsed and rotated 180° (up) when expanded. */
	.uhc-nav-column__title::after {
		content: '';
		width: 14px;
		height: 23px;
		flex-shrink: 0;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.095" height="22.251" viewBox="0 0 13.095 22.251"><path d="M22.095,4.969,20.126,3,9,14.126,20.126,25.251l1.969-1.969-9.156-9.156Z" transform="translate(22.095 25.251) rotate(180)" fill="%23dedc00"/></svg>') no-repeat center / contain;
		transform: rotate( 90deg );
		transition: transform 0.25s ease;
	}

	.uhc-nav-column.is-open .uhc-nav-column__title::after {
		transform: rotate( -90deg );
	}

	/* Items collapsed by default — 9px between entries, and 9px between
	   the top-level label and the first entry (padding-top when open). */
	.uhc-nav-column ul {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
		gap: 9px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Generous cap so the longest list (Breitensport) is never clipped —
	   the column area scrolls, so an over-large value costs nothing but a
	   slightly faster-feeling open animation. */
	.uhc-nav-column.is-open ul {
		max-height: 1200px;
		padding-top: 9px;
		padding-bottom: 18px;
	}

	.uhc-nav-column ul li a {
		font-size: 26px;
	}

	/* Bottom menu — in normal flow below the columns, so expanding a
	   section pushes it down instead of overlapping it. It scrolls with
	   the rest of the menu; only the ZURÜCK button stays fixed.
	   order:0 overrides the desktop order:-1 that lifts it to the top. */
	.uhc-nav-bottom {
		position: static;
		order: 0;
		margin-top: 42px;
		margin-bottom: 0;
	}

	.uhc-nav-bottom ul {
		flex-direction: column;
		gap: 4px;
	}

	.uhc-nav-bottom ul li a {
		font-size: 19px;
	}

	/* The hover arrow takes layout space and has no purpose on touch —
	   removing it keeps the links left-aligned with the column titles. */
	.uhc-nav-bottom .uhc-nav-arrow,
	.uhc-nav-column .uhc-nav-arrow {
		display: none;
	}

	/* ZURÜCK on mobile — kept above the browser controls (small viewport) */
	.uhc-nav-close {
		bottom: 24px;
		bottom: calc( 100dvh - 100svh + 24px );
		right: 24px;
		font-size: 31px;
		padding: 21px 16px;
	}
}