/**
 * Sub Navigation widget styles.
 *
 * Figma reference:
 * https://www.figma.com/design/UFbyQSXqjJ3fkYXo3ORgO7/Wellenreiten-2026-Handoff-Ext--Copy-?node-id=70-14166
 */
.wrsn {
	--wrsn-body-font: var(--font-family, 'Source Sans 3'), Arial, Helvetica, sans-serif;
	--wrsn-text: #525252;
	--wrsn-active: #0f4c81;
	--wrsn-border: #e5e5e5;

	background: #ffffff;
	padding-top: 16px;
}

/* Sticky: `position: sticky` only sticks within its parent's box, and
   the widget's own Elementor wrappers are exactly as tall as the bar —
   so it's the bar's top-level Elementor section (marked by
   sub-navigation.js) that sticks, within the full-height page. */
.wrsn-sticky-host {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #ffffff;
	/* Extend the white background to the full viewport width while the
	   section itself stays boxed — otherwise full-width section
	   backgrounds scroll past visibly on either side of the stuck bar. */
	box-shadow: 0 0 0 100vmax #ffffff;
	clip-path: inset(0 -100vmax);
}

/* Logged-in admins: keep it below the WordPress admin bar. */
.admin-bar .wrsn-sticky-host {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wrsn-sticky-host {
		top: 46px;
	}
}

/* Figma "Horizontal tabs" + "Tabs": 1px grey baseline, 32px between tabs.
   Overflows sideways on narrow screens instead of wrapping. */
.wrsn__tabs {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wrsn-border);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wrsn__tabs::-webkit-scrollbar {
	display: none;
}

/* The theme's global `body ul li` rule adds an 8px vertical margin. */
.wrsn__item {
	flex: 0 0 auto;
	margin: 0;
}

/* Figma "_Tab button base": 36px tall, 12px bottom padding, 18/28 medium.
   The transparent 2px border reserves the active underline's space so
   tabs don't shift when it appears. */
.wrsn__tab {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 2px 12px;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
	font: 500 18px/28px var(--wrsn-body-font);
	color: var(--wrsn-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wrsn .wrsn__tab:hover,
.wrsn .wrsn__tab:focus-visible {
	color: var(--wrsn-active);
	text-decoration: none;
}

.wrsn .wrsn__tab.is-active {
	color: var(--wrsn-active);
	border-bottom-color: var(--wrsn-active);
}

@media (max-width: 640px) {
	.wrsn__tabs {
		gap: 24px;
	}

	.wrsn__tab {
		font-size: 16px;
		line-height: 24px;
	}
}