/*
 * Hadof Focus V20.
 *
 * Establishes one primary action and one clear reading path per viewport.
 * The layer reduces competing controls without hiding server-rendered content.
 */

:root {
	--hf20-ink: #111c28;
	--hf20-copy: #526277;
	--hf20-muted: #718094;
	--hf20-line: #d7dfe6;
	--hf20-blue: #245ac4;
	--hf20-orange: #f59b1a;
	--hf20-soft: #f4f7f9;
}

/* Keep one visually dominant action; present the alternative as a text route. */
body.hadof-v2-content :is(
	.hx-hub-hero,
	.hx-packaging-catalog-hero,
	.hx-freeze-catalog-hero,
	.hx-section--white,
	.hadof-v2-section--white
) .hx-actions .hx-button--quiet {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--hf20-blue) !important;
	min-height: 44px;
	padding-inline: .35rem;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: .22em;
}

body.hadof-v2-content :is(
	.hx-hub-hero,
	.hx-packaging-catalog-hero,
	.hx-freeze-catalog-hero,
	.hx-section--white,
	.hadof-v2-section--white
) .hx-actions .hx-button--quiet::after {
	content: " →";
	margin-left: .2rem !important;
}

body.hadof-v2-content :is(
	.hx-hub-hero,
	.hx-packaging-catalog-hero,
	.hx-freeze-catalog-hero,
	.hx-section--white,
	.hadof-v2-section--white
) .hx-actions .hx-button--quiet:hover,
body.hadof-v2-content :is(
	.hx-hub-hero,
	.hx-packaging-catalog-hero,
	.hx-freeze-catalog-hero,
	.hx-section--white,
	.hadof-v2-section--white
) .hx-actions .hx-button--quiet:focus-visible {
	text-decoration-color: currentColor;
	transform: none;
}

body.hadof-v2-content .hadof-x3-home .hx-actions .hx-button--quiet {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	min-height: 44px;
	padding-inline: .35rem;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .52);
	text-underline-offset: .22em;
}

body.hadof-v2-content .hadof-x3-home .hx-actions .hx-button--quiet::after {
	content: " →";
	margin-left: .2rem !important;
}

body.hadof-v2-content :is(.hx-event-hero, .hx-freeze-line-hero, .hx-freeze-hero, .hx-freeze-model-hero) .hx-actions .hx-button--quiet {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	min-height: 44px;
	padding-inline: .35rem;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .52);
	text-underline-offset: .22em;
}

body.hadof-v2-content :is(.hx-event-hero, .hx-freeze-line-hero, .hx-freeze-hero, .hx-freeze-model-hero) .hx-actions .hx-button--quiet::after {
	content: " →";
	margin-left: .2rem !important;
}

body.hadof-v2-content .hx-actions .hx-button--quiet::after {
	flex: 0 0 auto !important;
	inset: auto !important;
	position: static !important;
}

/* Supporting facts remain useful, but no longer compete with the main action. */
body.hadof-v2-content .hadof-x3-home .hx-hero__basis {
	gap: clamp(.9rem, 2vw, 1.35rem);
	margin-top: 1.5rem;
}

body.hadof-v2-content .hadof-x3-home .hx-hero__basis > div {
	border-left-color: rgba(255, 255, 255, .28);
	padding-left: .75rem;
}

body.hadof-v2-content .hadof-x3-home .hx-hero__basis > div:first-child {
	border-left-color: var(--hf20-orange);
}

body.hadof-v2-content .hadof-x3-home .hx-hero__basis dt {
	font-size: .72rem;
	letter-spacing: .035em;
}

body.hadof-v2-content .hadof-x3-home .hx-hero__basis dd {
	font-size: .82rem;
	line-height: 1.45;
}

/* The project rail signals the current step; future steps recede. */
body.hadof-v2-content .hadof-x3-home .hx-decision-rail a {
	border-bottom: 3px solid transparent;
	color: var(--hf20-copy);
}

body.hadof-v2-content .hadof-x3-home .hx-decision-rail a:not([aria-current]) b {
	color: var(--hf20-copy);
	font-weight: 650;
}

body.hadof-v2-content .hadof-x3-home .hx-decision-rail a:not([aria-current]) small {
	color: var(--hf20-muted);
}

body.hadof-v2-content .hadof-x3-home .hx-decision-rail a[aria-current] {
	border-bottom-color: var(--hf20-orange);
	color: var(--hf20-blue);
}

/* Local navigation behaves as a quiet orientation aid, not a second header. */
body.hadof-v2-content :is(.hadof-x3, .hx-detail) :is(.hx-subnav, .hadof-v2-anchor, .hadof-anchor-nav) {
	border-bottom: 1px solid var(--hf20-line);
	box-shadow: none;
}

body.hadof-v2-content .hadof-x3 .hx-subnav a,
body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a {
	background: transparent;
	border: 0;
	color: var(--hf20-copy);
	font-weight: 650;
	position: relative;
}

body.hadof-v2-content .hadof-x3 .hx-subnav a::after,
body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a::after {
	background: transparent;
	bottom: -1px;
	content: "";
	height: 3px;
	left: .8rem;
	position: absolute;
	right: .8rem;
}

body.hadof-v2-content .hadof-x3 .hx-subnav a[aria-current="location"],
body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a[aria-current="location"] {
	background: var(--hf20-soft);
	color: var(--hf20-blue);
	font-weight: 750;
}

body.hadof-v2-content .hadof-x3 .hx-subnav a[aria-current="location"]::after,
body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a[aria-current="location"]::after {
	background: var(--hf20-orange);
}

/* Center focused reading modules inside otherwise full-width sections. */
body.hadof-v2-content section:has(> .hadof-faq) > :is(.hadof-kicker, .hadof-v2-kicker, .hx-eyebrow, h2, .hadof-faq) {
	margin-left: auto;
	margin-right: auto;
	max-width: 940px;
	width: 100%;
}

/* Calm interaction feedback: visible and accessible without jumping surfaces. */
body.hadof-v2-content :is(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--hf20-blue) 34%, transparent);
	outline-offset: 3px;
}

body.hadof-v2-content :is(.hx-button, .hadof-button, .hadof-v2-button):hover {
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	body.hadof-v2-content .hadof-x3-home .hx-decision-rail .hx-shell {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	body.hadof-v2-content .hadof-x3-home .hx-decision-rail .hx-shell::-webkit-scrollbar {
		display: none;
	}

	body.hadof-v2-content .hadof-x3-home .hx-decision-rail a {
		flex: 0 0 min(76vw, 280px);
		scroll-snap-align: start;
	}

	body.hadof-v2-content .hadof-x3 .hx-subnav .hx-shell,
	body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		white-space: nowrap;
	}

	body.hadof-v2-content .hadof-x3 .hx-subnav .hx-shell::-webkit-scrollbar,
	body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav)::-webkit-scrollbar {
		display: none;
	}

	body.hadof-v2-content .hadof-x3 .hx-subnav a,
	body.hadof-v2-content .hx-detail :is(.hadof-v2-anchor, .hadof-anchor-nav) a {
		flex: 0 0 auto;
		min-height: 46px;
		padding: .65rem .9rem;
		scroll-snap-align: start;
		white-space: nowrap;
	}
}

@media (max-width: 640px) {
	body.hadof-v2-content :is(.hx-hub-hero, .hx-packaging-catalog-hero, .hx-freeze-catalog-hero) .hx-actions {
		gap: .35rem;
	}

	body.hadof-v2-content :is(.hx-hub-hero, .hx-packaging-catalog-hero, .hx-freeze-catalog-hero) .hx-actions .hx-button--quiet,
	body.hadof-v2-content :is(.hx-event-hero, .hx-freeze-line-hero, .hx-freeze-hero, .hx-freeze-model-hero) .hx-actions .hx-button--quiet,
	body.hadof-v2-content .hadof-x3-home .hx-actions .hx-button--quiet {
		justify-content: flex-start;
		min-height: 42px;
		padding: .45rem 0;
		width: auto;
	}

	body.hadof-v2-content .hadof-x3-home .hx-hero__basis {
		margin-top: 1.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.hadof-v2-content :is(a, button) {
		transition: none !important;
	}
}