/*
 * Nahang Shell 0.4.4
 * Unified surface tokens, dark-mode repair, accessible motion and mobile chrome.
 */

:root {
	--canvas: var(--managed-light-bg, #f5f7fb);
	--canvas-subtle: #eef2f7;
	--surface-1: var(--managed-light-surface, #ffffff);
	--surface-2: #f7f9fc;
	--surface-3: #edf2f8;
	--surface-glass: rgba(255, 255, 255, .84);
	--text-1: var(--managed-light-text, #08101d);
	--text-2: #445166;
	--text-3: #68768a;
	--border-1: rgba(59, 77, 103, .16);
	--border-2: rgba(45, 66, 96, .26);
	--shadow-color: rgba(10, 25, 48, .13);
	--shadow-card: 0 22px 60px var(--shadow-color);
	--focus-color: color-mix(in srgb, var(--accent) 72%, #ffffff);
	--ambient-opacity: .7;
	--motion-distance: 18px;
	color-scheme: light;
}

body[data-theme="dark"] {
	--canvas: var(--managed-dark-bg, #05070b);
	--canvas-subtle: #08101a;
	--surface-1: var(--managed-dark-surface, #0d1420);
	--surface-2: color-mix(in srgb, var(--managed-dark-surface, #0d1420) 82%, #172337);
	--surface-3: color-mix(in srgb, var(--managed-dark-surface, #0d1420) 68%, #23334a);
	--surface-glass: color-mix(in srgb, var(--managed-dark-surface, #0d1420) 88%, transparent);
	--text-1: var(--managed-dark-text, #f5f7fb);
	--text-2: #bdc8d8;
	--text-3: #8998ad;
	--border-1: rgba(141, 166, 201, .17);
	--border-2: rgba(143, 173, 214, .29);
	--shadow-color: rgba(0, 0, 0, .36);
	--focus-color: color-mix(in srgb, var(--accent) 72%, #ffffff);
	--ambient-opacity: .9;
	color-scheme: dark;
}

body {
	background: var(--canvas);
	color: var(--text-1);
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-ui) !important;
}

body[data-theme="dark"] .surface-light,
body[data-theme="dark"] .surface-neutral,
body[data-theme="dark"] .surface-ice,
body[data-theme="dark"] .surface-warm {
	background: var(--canvas-subtle);
	color: var(--text-1);
}

body[data-theme="dark"] .surface-light,
body[data-theme="dark"] .surface-ice {
	background: var(--canvas);
}

.chapter-heading > p,
.chapter-copy > p,
.digital__head > p,
.entry-content,
.hero__lead {
	color: var(--text-2);
}

.site-main :where(a, button, input, textarea, select):focus-visible,
.site-header :where(a, button, input):focus-visible,
.deep-dock a:focus-visible {
	outline: 3px solid var(--focus-color);
	outline-offset: 3px;
}

[id] {
	scroll-margin-top: calc(var(--header) + 20px);
}

/* Header stays flush with the real viewport; old cascade layers cannot move it. */
.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background: color-mix(in srgb, var(--surface-1) 90%, transparent);
	color: var(--text-1);
}

body:not(.nahang-sticky-header) .site-header {
	position: absolute;
}

.site-header.is-scrolled {
	background: color-mix(in srgb, var(--surface-1) 96%, transparent);
	box-shadow: 0 12px 38px var(--shadow-color);
}

.site-nav__list {
	direction: rtl;
	flex-direction: row;
}

html[dir="ltr"] .site-nav__list {
	direction: ltr;
}

.site-nav__list > li > a,
.site-header .brand__type strong {
	color: var(--text-1);
}

.site-header .brand__type small {
	color: var(--text-3);
}

.site-header .icon-button,
.site-header .theme-switch,
.site-header .menu-toggle {
	border-color: var(--border-1);
	background: var(--surface-glass);
	color: var(--text-1);
}

.site-header .icon-button:hover,
.site-header .theme-switch:hover,
.site-header .menu-toggle:hover {
	border-color: color-mix(in srgb, var(--accent) 50%, var(--border-2));
	background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
}

/* Match the specificity of older dark layers so configured tokens always win. */
body[data-theme="dark"] .site-header,
body[data-theme="dark"] .site-header.is-scrolled {
	border-bottom-color: var(--border-1);
	background: color-mix(in srgb, var(--surface-1) 94%, transparent);
	color: var(--text-1);
	box-shadow: 0 12px 38px var(--shadow-color);
}

body[data-theme="dark"] .site-header .icon-button,
body[data-theme="dark"] .site-header .theme-switch,
body[data-theme="dark"] .site-header .menu-toggle {
	border-color: var(--border-1);
	background: var(--surface-glass);
	color: var(--text-1);
}

.site-nav__list .sub-menu {
	border-color: var(--border-1);
	background: var(--surface-1);
	box-shadow: var(--shadow-card);
}

/* Hero typography and controlled brand gradient. */
.hero {
	background:
		radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 29%),
		radial-gradient(circle at 86% 64%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 31%),
		linear-gradient(180deg, var(--canvas), var(--canvas-subtle));
}

.hero__copy,
.hero__visual {
	position: relative;
	z-index: 2;
}

.hero h1 {
	letter-spacing: clamp(-.025em, var(--heading-letter-spacing), .01em);
}

.hero-title__accent {
	display: inline;
	color: var(--accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero-title__accent {
		background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 86%, #ffffff), var(--accent-2), color-mix(in srgb, var(--accent) 72%, #6b8cff));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.hero-ambient {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: var(--ambient-opacity);
}

.hero-ambient i {
	position: absolute;
	display: block;
	width: clamp(220px, 31vw, 520px);
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
	border-radius: 42% 58% 55% 45% / 46% 40% 60% 54%;
	background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
	transform: translate3d(0, 0, 0);
}

.hero-ambient i:first-child {
	top: 8%;
	left: -9%;
}

.hero-ambient i:last-child {
	right: 34%;
	bottom: -34%;
	width: clamp(280px, 42vw, 720px);
	opacity: .55;
}

/* The diagnostic visual is now dark-mode native instead of a bright card. */
.hero-system {
	border-color: var(--border-2);
	background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 95%, #ffffff), var(--surface-1));
	box-shadow: 0 38px 88px var(--shadow-color);
}

.hero-system__top,
.hero-system__metrics small {
	color: var(--text-3);
}

.hero-system__top strong {
	color: var(--text-1);
}

.hero-system__core {
	border-color: var(--border-1);
	background: color-mix(in srgb, var(--canvas) 82%, #061426);
}

.hero-system__metrics > span {
	border-color: var(--border-1);
	background: var(--surface-2);
}

.floating-note {
	border-color: var(--border-2);
	background: var(--surface-glass);
	color: var(--text-1);
	box-shadow: 0 18px 48px var(--shadow-color);
}

.floating-note span {
	color: var(--text-3);
}

body[data-theme="dark"] .hero-system {
	border-color: var(--border-2);
	background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
	box-shadow: 0 38px 88px var(--shadow-color);
}

body[data-theme="dark"] .hero-system__top,
body[data-theme="dark"] .hero-system__metrics small {
	color: var(--text-3);
}

body[data-theme="dark"] .hero-system__top strong {
	color: var(--text-1);
}

body[data-theme="dark"] .hero-system__metrics > span {
	border-color: var(--border-1);
	background: var(--surface-2);
}

body[data-theme="dark"] .floating-note {
	border-color: var(--border-2);
	background: var(--surface-glass);
	color: var(--text-1);
	box-shadow: 0 18px 48px var(--shadow-color);
}

body[data-theme="dark"] .floating-note span {
	color: var(--text-3);
}

/* Shared card surfaces: one source of truth for both display modes. */
.service-layer,
.knowledge-card,
.request-card,
.request-summary,
.intent-list button,
.process-list li > span,
.woocommerce ul.products li.product,
.post-list .knowledge-card {
	border-color: var(--border-1);
	background: var(--surface-1);
	color: var(--text-1);
}

.service-layer:hover,
.knowledge-card:hover,
.intent-list button:hover,
.intent-list button.is-selected,
.woocommerce ul.products li.product:hover {
	border-color: var(--border-2);
	background: var(--surface-2);
	box-shadow: var(--shadow-card);
}

.service-layer p,
.knowledge-card p,
.intent-list button small,
.request-summary span,
.request-summary small,
.process-list p,
.woocommerce ul.products li.product .price {
	color: var(--text-2);
}

.intent-list,
.intent-list button,
.process-list::before {
	border-color: var(--border-1);
}

.service-layer > b {
	color: color-mix(in srgb, var(--text-3) 36%, transparent);
}

.choice-grid span,
.form-field input,
.form-field textarea,
.form-field select {
	border-color: var(--border-1);
	background: var(--surface-2);
	color: var(--text-1);
}

.choice-grid input:checked + span {
	border-color: color-mix(in srgb, var(--accent) 68%, var(--border-2));
	background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
}

.form-progress > i,
.meter {
	background: var(--surface-3);
}

.network-map {
	border-color: var(--border-1);
	background:
		linear-gradient(color-mix(in srgb, var(--text-3) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--text-3) 7%, transparent) 1px, transparent 1px),
		var(--surface-1);
	background-size: 34px 34px;
}

.network-map__hub,
.network-node,
.proof-row span {
	border-color: var(--border-1);
	background: var(--surface-2);
	color: var(--text-1);
}

.woocommerce ul.products li.product a:not(.button),
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--text-1);
}

.woocommerce ul.products li.product a img {
	background: #f7f9fc;
}

body[data-theme="dark"] .service-layer,
body[data-theme="dark"] .knowledge-card,
body[data-theme="dark"] .request-card,
body[data-theme="dark"] .request-summary,
body[data-theme="dark"] .intent-list button,
body[data-theme="dark"] .woocommerce ul.products li.product {
	border-color: var(--border-1);
	background: var(--surface-1);
	color: var(--text-1);
}

body[data-theme="dark"] .intent-list button:hover,
body[data-theme="dark"] .intent-list button.is-selected,
body[data-theme="dark"] .service-layer:hover,
body[data-theme="dark"] .knowledge-card:hover,
body[data-theme="dark"] .woocommerce ul.products li.product:hover {
	border-color: var(--border-2);
	background: var(--surface-2);
}

body[data-theme="dark"] .choice-grid span,
body[data-theme="dark"] .form-field input,
body[data-theme="dark"] .form-field textarea,
body[data-theme="dark"] .form-field select {
	border-color: var(--border-1);
	background: var(--surface-2);
	color: var(--text-1);
}

/* Motion is transform/opacity only; user preference always wins. */
.nahang-motion-off .reveal,
.nahang-motion-off .hero__copy,
.nahang-motion-off .hero__visual {
	opacity: 1;
	transform: none;
	transition: none;
	animation: none;
}

.nahang-motion-subtle .hero__copy.is-visible,
.nahang-motion-subtle .hero__visual.is-visible,
.nahang-motion-enhanced .hero__copy.is-visible,
.nahang-motion-enhanced .hero__visual.is-visible {
	animation: nahang-intro .72s var(--ease) both;
}

.nahang-motion-subtle .hero__visual.is-visible,
.nahang-motion-enhanced .hero__visual.is-visible {
	animation-delay: .1s;
}

.nahang-motion-enhanced .hero-ambient i:first-child {
	animation: nahang-float-a 16s ease-in-out infinite alternate;
}

.nahang-motion-enhanced .hero-ambient i:last-child {
	animation: nahang-float-b 20s ease-in-out infinite alternate;
}

.nahang-motion-guarded .hero-ambient i,
.nahang-motion-guarded .scroll-cue span::after {
	animation: none !important;
}

@keyframes nahang-intro {
	from { opacity: 0; transform: translate3d(0, var(--motion-distance), 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes nahang-float-a {
	to { transform: translate3d(24px, -18px, 0) rotate(5deg); }
}

@keyframes nahang-float-b {
	to { transform: translate3d(-30px, -22px, 0) rotate(-4deg); }
}

/* Mobile hierarchy and chrome. */
@media (max-width: 780px) {
	:root {
		--motion-distance: 12px;
	}

	.hero h1 {
		font-size: clamp(36px, 10vw, 48px);
		line-height: 1.2;
	}

	.chapter-heading h2,
	.chapter-copy h2,
	.digital__head h2,
	.footer-cta h2 {
		font-size: clamp(30px, 8.4vw, 42px);
		line-height: 1.25;
	}

	.hero__lead,
	.chapter-heading > p,
	.chapter-copy > p,
	.digital__head > p {
		font-size: max(15px, var(--base-font-size));
		line-height: min(2, var(--base-line-height));
	}

	.site-header__inner {
		grid-template-columns: minmax(46px, auto) 1fr auto;
	}

	.site-header__actions {
		grid-column: 3;
	}

	.mobile-menu:not([hidden]) {
		position: fixed;
		z-index: 1200;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border: 0;
		border-radius: 0;
		background: var(--canvas);
		color: var(--text-1);
	}

	.mobile-menu__top {
		border-bottom: 1px solid var(--border-1);
	}

	.mobile-menu__body {
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mobile-menu__list > li > a {
		border-color: var(--border-1);
		color: var(--text-1);
	}

	.deep-dock {
		right: 10px;
		bottom: calc(8px + env(safe-area-inset-bottom));
		left: 10px;
		height: 64px;
		padding: 6px;
		border-color: var(--border-2);
		border-radius: 18px;
		background: color-mix(in srgb, var(--surface-1) 94%, transparent);
		box-shadow: 0 16px 46px var(--shadow-color);
	}

	body[data-theme="dark"] .deep-dock {
		border-color: var(--border-2);
		background: color-mix(in srgb, var(--surface-1) 94%, transparent);
		box-shadow: 0 16px 46px var(--shadow-color);
	}

	.deep-dock a {
		min-height: 50px;
		border-radius: 13px;
		color: var(--text-3);
		font-size: 9px;
	}

	.deep-dock a.is-active {
		transform: none;
		background: color-mix(in srgb, var(--accent) 13%, transparent);
		color: var(--accent);
	}

	.deep-dock a.is-active::before {
		display: none;
	}

	.deep-dock__primary,
	.deep-dock__primary.is-active {
		transform: none !important;
		background: var(--accent);
		color: #ffffff;
	}

	.deep-dock__primary svg {
		width: 20px;
		height: 20px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.hero-ambient i:last-child {
		display: none;
	}

	.hero-system {
		transform: none;
	}
}

/* WordPress admin toolbar is not fixed below 600px; do not leave a phantom gap. */
@media screen and (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}

	body.admin-bar .header-search,
	body.admin-bar .site-header.is-scrolled ~ .header-search {
		top: var(--header-mobile, var(--header));
	}
}

@media (max-width: 430px) {
	.site-header__inner {
		width: calc(100% - 20px);
	}

	.site-header .brand__symbol {
		width: 43px;
		height: 31px;
		flex-basis: 43px;
	}

	.site-header .icon-button,
	.site-header .theme-switch,
	.site-header .menu-toggle {
		width: 39px;
		height: 39px;
		flex-basis: 39px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.reveal,
	.hero__copy,
	.hero__visual {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (forced-colors: active) {
	.hero-title__accent {
		background: none;
		color: LinkText;
		-webkit-text-fill-color: currentColor;
	}

	.site-main :where(a, button, input, textarea, select):focus-visible {
		outline: 3px solid Highlight;
	}
}