/* ==========================================================================
   SUDAIR PHARMA — CAPABILITIES SUB-NAVIGATION
   The shared tab rail across Manufacture / Quality / Innovation.

   Three real pages, three real links. Styled as a segmented rail rather than a
   row of underlines: the benchmark corporate sites (AstraZeneca, Roche,
   Novartis) use a quiet rail for a *section* of a site, and a filled segment
   states "you are here" in a way an underline cannot at a glance.

   The active state is redundant by design — filled ground, white text, and a
   shadow that lifts the segment off the rail. Any one of the three alone would
   fail somebody: colour alone fails a monochrome print and anyone who cannot
   separate the greens.
   ========================================================================== */

.sud-subnav-section {
	/* Overrides the standard section rhythm: this rail belongs to the banner
	   above it, not to the content below. */
	padding-block: 0 !important;

	/* Rides just under the sticky site header. */
	position: sticky;
	inset-block-start: var(--sud-hd-h, 86px);
	z-index: 40;

	background: color-mix(in srgb, var(--sud-surface) 88%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-block-end: 1px solid var(--sud-line);
}

/* Fallback where color-mix is unavailable — an opaque bar beats an unreadable
   one, and the blur is decoration either way. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.sud-subnav-section { background: var(--sud-surface); }
}

.sud-subnav-wrap { margin: 0 !important; }

.sud-subnav__rail {
	display: flex;
	gap: .35rem;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	align-items: center;

	/* Never wraps to a second line. On a narrow screen the rail scrolls
	   instead — a sub-nav that reflows into two rows stops reading as one
	   control. */
	overflow-x: auto;
	scrollbar-width: none;
}

.sud-subnav__rail::-webkit-scrollbar { display: none; }

.sud-subnav__item { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   TAB
   -------------------------------------------------------------------------- */

.sud-subnav .sud-subnav__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;              /* full touch target */
	padding-inline: clamp(1rem, 2.2vw, 1.9rem);
	border-radius: 999px;

	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	color: var(--sud-muted);
	background: transparent;

	transition:
		color .35s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		background .35s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		box-shadow .35s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		transform .35s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

/* Inactive, hovered: a hint of the surface it would become. */
.sud-subnav .sud-subnav__tab:hover {
	color: var(--sud-green-700);
	background: var(--sud-surface-3);
	text-decoration: none;
}

.sud-subnav .sud-subnav__tab:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ACTIVE
   -------------------------------------------------------------------------- */

.sud-subnav .sud-subnav__tab.is-active,
.sud-subnav .sud-subnav__tab.is-active:hover {
	color: #fff;                        /* 8.7:1 on --sud-green-700 */
	background: var(--sud-green-700);
	box-shadow:
		0 1px 2px rgba(11, 31, 23, .10),
		0 8px 20px rgba(0, 99, 68, .22);
	transform: translateY(-1px);
}

/* Third signal: a marker beneath the active segment, keyed to the rail edge.
   Survives forced-colours mode, where backgrounds are replaced wholesale. */
.sud-subnav .sud-subnav__tab.is-active::after {
	content: '';
	position: absolute;
	inset-block-end: -.5rem;
	inset-inline: 22%;
	block-size: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--sud-green-500);
}

@media (forced-colors: active) {
	.sud-subnav .sud-subnav__tab.is-active {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-subnav-section { inset-block-start: var(--sud-hd-h-mobile, 68px); }

	.sud-subnav__rail {
		gap: .25rem;
		/* Bleed to the viewport edge so a scrolled rail reads as scrollable
		   rather than as a clipped box. */
		margin-inline: calc(var(--sud-gutter, 24px) * -1);
		padding-inline: var(--sud-gutter, 24px);
	}

	.sud-subnav .sud-subnav__tab {
		padding-inline: 1rem;
		font-size: var(--sud-text-xs);
		letter-spacing: .03em;
	}
}

/* --------------------------------------------------------------------------
   REDUCED MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-subnav .sud-subnav__tab { transition: none !important; }
	.sud-subnav .sud-subnav__tab.is-active { transform: none; }
}

@media print {
	.sud-subnav-section {
		position: static;
		background: none;
		backdrop-filter: none;
	}
	.sud-subnav .sud-subnav__tab { color: #000; background: none; box-shadow: none; }
	.sud-subnav .sud-subnav__tab.is-active { font-weight: 700; text-decoration: underline; }
}