/*
 * Nahang Shell 0.4.2 — viewport-safe navigation, authoritative type binding
 * and a more disciplined premium header/icon system.
 */

body.nahang-font-vazirmatn {
	--font-ui: Vazirmatn, Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

body.nahang-font-system {
	--font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.nahang-font-tahoma {
	--font-ui: Tahoma, Arial, sans-serif !important;
}

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

.site-header {
	top: 0;
	margin: 0;
	border-bottom: 1px solid transparent;
	background: rgba(248, 250, 252, .84);
	box-shadow: 0 10px 34px rgba(13, 30, 54, .045);
	backdrop-filter: saturate(135%) blur(18px);
	-webkit-backdrop-filter: saturate(135%) blur(18px);
}

body[data-theme="dark"] .site-header {
	border-bottom-color: rgba(132, 156, 190, .13);
	background: rgba(5, 9, 15, .88);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

body.nahang-header-solid .site-header {
	background: #f8fafc;
	backdrop-filter: none;
}

body[data-theme="dark"].nahang-header-solid .site-header {
	background: #070b11;
}

body.nahang-header-minimal .site-header:not(.is-scrolled) {
	border-bottom-color: transparent;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

.site-header__inner {
	min-height: var(--header);
}

.site-header .icon-button,
.site-header .theme-switch,
.site-header .menu-toggle {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(119, 139, 168, .25);
	background: rgba(255, 255, 255, .64);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.site-header .icon-button:hover,
.site-header .theme-switch:hover,
.site-header .menu-toggle:hover {
	border-color: color-mix(in srgb, var(--accent), transparent 45%);
	transform: translateY(-1px);
}

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: rgba(132, 156, 190, .22);
	background: rgba(15, 24, 37, .78);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.site-header .icon-button svg,
.site-header .menu-toggle svg {
	width: 19px;
	height: 19px;
}

.mobile-menu {
	display: none;
}

.mobile-menu[hidden] {
	display: none !important;
}

@media (max-width: 1180px) {
	body.menu-open {
		overflow: hidden !important;
		touch-action: none;
	}

	.site-nav {
		display: none !important;
	}

	.mobile-menu:not([hidden]) {
		position: fixed;
		z-index: 5000;
		inset: 0;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: max(16px, env(safe-area-inset-top)) clamp(20px, 5vw, 56px) max(20px, env(safe-area-inset-bottom));
		overflow: hidden;
		color: #101827;
		background: radial-gradient(circle at 88% 7%, rgba(18,104,255,.14), transparent 26%), rgba(247,249,252,.985);
		backdrop-filter: blur(28px) saturate(120%);
		-webkit-backdrop-filter: blur(28px) saturate(120%);
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity .22s ease, transform .22s ease;
	}

	.mobile-menu.is-open {
		opacity: 1;
		transform: none;
	}

	body[data-theme="dark"] .mobile-menu:not([hidden]) {
		color: #f5f8fc;
		background: radial-gradient(circle at 88% 7%, rgba(18,104,255,.22), transparent 28%), rgba(4,8,14,.99);
	}

	.mobile-menu__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(126, 147, 176, .2);
	}

	.mobile-menu__top .brand {
		color: inherit;
		text-decoration: none;
	}

	.mobile-menu__top .brand__type small {
		color: #77869b;
	}

	.mobile-menu__close {
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
	}

	.mobile-menu__body {
		min-height: 0;
		padding: clamp(24px, 6vh, 54px) 0 22px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-menu__eyebrow {
		display: block;
		margin-bottom: 16px;
		color: var(--accent);
		font: 750 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace !important;
		letter-spacing: .13em;
	}

	.mobile-menu__list,
	.mobile-menu__list .sub-menu {
		display: grid;
		gap: 0;
		padding: 0;
		margin: 0;
		list-style: none;
		counter-reset: menu-item;
	}

	.mobile-menu__list > li {
		position: relative;
		counter-increment: menu-item;
	}

	.mobile-menu__list > li > a {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding: clamp(13px, 2vh, 20px) 2px;
		border-bottom: 1px solid rgba(126,147,176,.2);
		color: inherit;
		font-size: clamp(20px, 5.5vw, 32px);
		font-weight: 760;
		line-height: 1.35;
		letter-spacing: -.035em;
		text-decoration: none;
	}

	.mobile-menu__list > li > a::before {
		content: counter(menu-item, decimal-leading-zero);
		color: #75849a;
		font: 700 9px/1 ui-monospace, monospace !important;
		letter-spacing: .08em;
	}

	.mobile-menu__list > li > a::after {
		content: "↗";
		color: #75849a;
		font: 500 15px/1 system-ui !important;
	}

	.mobile-menu__list > li > a:hover,
	.mobile-menu__list > .current-menu-item > a {
		color: var(--accent);
	}

	.mobile-menu__list .sub-menu {
		padding: 8px 46px 14px 0;
	}

	.mobile-menu__list .sub-menu a {
		display: block;
		padding: 7px 0;
		color: #738197;
		font-size: 14px;
		text-decoration: none;
	}

	.mobile-menu__footer {
		display: grid;
		grid-template-columns: minmax(180px, 1fr) auto;
		align-items: center;
		gap: 18px;
		padding-top: 15px;
		border-top: 1px solid rgba(126,147,176,.2);
	}

	.mobile-menu__footer .button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 50px;
	}

	.mobile-menu__footer .button svg {
		width: 18px;
		height: 18px;
	}

	.mobile-menu__footer > div {
		display: flex;
		gap: 15px;
	}

	.mobile-menu__footer > div a {
		color: #7b899e;
		font-size: 11px;
		text-decoration: none;
	}
}

@media (max-width: 780px) {
	:root {
		--header: 70px;
	}

	.site-header__inner {
		min-height: 70px;
	}

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

	.mobile-menu__footer {
		grid-template-columns: 1fr;
	}

	.mobile-menu__footer > div {
		justify-content: center;
	}
}

@media (max-width: 520px) {
	.mobile-menu:not([hidden]) {
		padding-right: 18px;
		padding-left: 18px;
	}

	.mobile-menu__top .brand__type small {
		display: block;
	}

	.mobile-menu__list > li > a {
		font-size: clamp(19px, 7vw, 27px);
	}

	.site-header .commerce-link {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu:not([hidden]) {
		transition: none;
	}
}