/*
 * ناوبری هدر (inc/header-nav.php + template-parts/header/nav.php + assets/js/zm-nav.js) — اکتبر ۲۰۲۶.
 * یک <nav>: از ۱۰۲۴px نوار + پنل بازشو، زیر ۱۰۲۴px کشوی مودال.
 *
 * Plain CSS, no build. Every selector starts at #site-header, so it beats Tailwind (main.css)
 * and the theme-settings inline CSS whatever the load order.
 *
 * Colours: GROWTH-TEAL (palette-judge.md); no rose anywhere in the nav. The theme prints
 * `#site-header a{color:#fff!important}` and `#site-header a:hover,a:focus{color:#f43f5e!important}`
 * (inc/theme-settings.php, wp_head 100), so link colours sit on inner <span>s and the <a> colour is
 * never what the reader sees (the same approach as article-toc.css).
 *
 * Type (memory/persian-typography.md): UI 16/1.75, captions 14/1.7, drawer title 20/1.7; nothing
 * under 14px, no letter-spacing. Vazirmatn (variant C, October 2026) has a real 500 face, so the
 * 500 labels are now genuinely medium; the hierarchy is still size + colour.
 * Colours re-toned to variant C «گرافیت»: panel/drawer #1c1d21, border #2c2e33, outline #80838a
 * (4.44:1 on the panel, 3.99:1 on the sticky header over white), focus gap = page #121316. `nav{font-size:14px!important}` / `#site-header nav a{… !important}` from the
 * theme settings are beaten by `#site-header .zm-nav a` (1,1,1) and by sizing text elements directly.
 *
 * States: :hover → :focus-visible → :active, no stacking. Focus: 2px #99f6e4 ring + 2px #121316 gap (WCAG C40).
 */

#site-header {
	--zm-surface: #1c1d21;
	--zm-border: #2c2e33;
	--zm-fg: #e6e7e9;
	--zm-fg-2: #d6d7da;
	--zm-muted: #b2b5bb;
	--zm-link: #5eead4;
	--zm-focus: #99f6e4;
	--zm-focus-gap: #121316;
	--zm-outline: #80838a;
	--zm-layer-hover: rgb(230 231 233 / 0.08);
	--zm-layer-focus: rgb(230 231 233 / 0.1);
	--zm-layer-pressed: rgb(230 231 233 / 0.1);
	--zm-active-bg: #134e4a;
	--zm-active-fg: #ccfbf1;
	--zm-active-border: #2dd4c6;
	--zm-active-bg-hover: #225c57;
	--zm-active-bg-focus: #265f5b;
	--zm-scrim: rgb(18 19 22 / 0.72);
}

/* ---------- shared: reset, type, colour, focus ---------- */

#site-header .zm-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#site-header .zm-nav li {
	margin: 0;
	padding: 0;
}

#site-header .zm-nav p {
	margin: 0;
}

/* theme settings force 14px/600 on `#site-header nav a` (1,0,2) */
#site-header .zm-nav a {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.75 !important;
	letter-spacing: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

#site-header .zm-nav a.zm-plain {
	font-weight: 400 !important;
}

#site-header .zm-trigger,
#site-header .zm-nav__close {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	background-image: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#site-header .zm-ico {
	display: block;
	flex: none;
	stroke: currentColor;
}

#site-header .zm-nav a:focus-visible,
#site-header .zm-nav button:focus-visible {
	outline: 2px solid var(--zm-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--zm-focus-gap);
}

#site-header .zm-nav a:focus:not(:focus-visible),
#site-header .zm-nav button:focus:not(:focus-visible) {
	outline: none;
}

/* coloured text spans (the <a> itself is forced white/rose by the theme) */
#site-header .zm-link__txt,
#site-header .zm-plain__txt {
	color: var(--zm-fg-2);
}

/* Persian name on the UI step (16/1.75). */
#site-header .zm-brand__name {
	display: block;
	color: var(--zm-fg);
	font-size: 16px;
	line-height: 1.75;
}

/* Deliberate Latin exception: the second line is only a Latin brand name (<bdi lang="en">), and
   Latin ink spans 0.96em against Persian 1.19em (persian-typography.md), so 1.4 leaves the same gap
   that 1.7 leaves for Persian. Keeps each row near 62px. */
#site-header .zm-brand__sub {
	display: block;
	color: var(--zm-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* visually hidden, still read by screen readers */
#site-header .zm-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

#site-header .zm-all__txt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--zm-link);
	text-underline-offset: 4px;
}

#site-header .zm-all:hover .zm-all__txt {
	text-decoration: underline;
}

#site-header .zm-link[aria-current="page"] .zm-link__txt,
#site-header .zm-plain[aria-current="page"] .zm-plain__txt,
#site-header .zm-brand[aria-current="page"] .zm-brand__name {
	color: var(--zm-link);
}

/* ---------- trigger «صرافی، بروکر، پراپ» ---------- */

#site-header .zm-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 40px;
	padding-block: 0;
	padding-inline: 14px 10px;
	border: 1px solid var(--zm-outline);
	border-radius: 9999px;
	background-color: transparent;
	color: var(--zm-fg);
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#site-header .zm-trigger:hover {
	background-color: var(--zm-layer-hover);
}

#site-header .zm-trigger:focus-visible {
	background-color: var(--zm-layer-focus);
}

#site-header .zm-trigger:active {
	background-color: var(--zm-layer-pressed);
}

#site-header .zm-trigger[data-current="1"] {
	border-color: var(--zm-active-border);
}

/* current section: a shape cue as well as the border colour (WCAG 1.4.1), the same 2px bar as the bar links */
#site-header .zm-trigger[data-current="1"]::after {
	content: "";
	position: absolute;
	inset-inline: 14px 10px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--zm-active-border);
}

#site-header .zm-trigger[aria-expanded="true"] {
	border-color: var(--zm-active-border);
	background-color: var(--zm-active-bg);
	color: var(--zm-active-fg);
}

#site-header .zm-trigger[aria-expanded="true"]:hover {
	background-color: var(--zm-active-bg-hover);
}

#site-header .zm-trigger[aria-expanded="true"]:focus-visible,
#site-header .zm-trigger[aria-expanded="true"]:active {
	background-color: var(--zm-active-bg-focus);
}

#site-header .zm-chev {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

#site-header .zm-trigger[aria-expanded="true"] .zm-chev {
	transform: rotate(180deg);
}

/* ---------- bar links ---------- */

#site-header .zm-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	background-color: transparent;
	white-space: nowrap;
}

#site-header .zm-link:hover {
	background-color: var(--zm-layer-hover);
}

#site-header .zm-link:focus-visible {
	background-color: var(--zm-layer-focus);
}

#site-header .zm-link:active {
	background-color: var(--zm-layer-pressed);
}

#site-header .zm-link[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-inline: 10px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--zm-active-border);
}

/* ---------- panel content (both modes) ---------- */

#site-header .zm-panel[hidden] {
	display: none !important;
}

#site-header .zm-col__title {
	padding: 0 10px 8px;
	margin: 0 0 8px;
	border-bottom: 1px solid var(--zm-border);
	color: var(--zm-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
}

#site-header .zm-col__list {
	display: grid;
	gap: 2px;
}

#site-header .zm-brand {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: transparent;
}

#site-header .zm-brand:hover {
	background-color: var(--zm-layer-hover);
}

#site-header .zm-brand:focus-visible {
	background-color: var(--zm-layer-focus);
}

#site-header .zm-brand:active {
	background-color: var(--zm-layer-pressed);
}

#site-header .zm-brand[aria-current="page"]::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 3px;
	background-color: var(--zm-active-border);
}

#site-header .zm-brand__logo {
	display: block;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	max-width: none;
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: 8px;
	background-color: var(--zm-border);
	object-fit: cover;
}

#site-header .zm-brand__logo--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--zm-muted);
	font-size: 14px;
	line-height: 1;
}

#site-header .zm-brand__txt {
	display: block;
	min-width: 0;
	overflow-wrap: break-word; /* names wrap, never truncate */
}

#site-header .zm-plain {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: 8px;
}

#site-header .zm-plain:hover {
	background-color: var(--zm-layer-hover);
}

#site-header .zm-plain:focus-visible {
	background-color: var(--zm-layer-focus);
}

#site-header .zm-plain:active {
	background-color: var(--zm-layer-pressed);
}

#site-header .zm-panel__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--zm-border);
}

#site-header .zm-panel__all {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

#site-header .zm-all {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	white-space: nowrap;
}

#site-header .zm-all:hover {
	background-color: var(--zm-layer-hover);
}

#site-header .zm-all:focus-visible {
	background-color: var(--zm-layer-focus);
}

#site-header .zm-all:active {
	background-color: var(--zm-layer-pressed);
}

#site-header .zm-panel__note {
	flex: 1 1 320px;
	max-width: 44em;
	padding-inline: 10px;
	color: var(--zm-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}

/* ================================================================
 * Desktop (≥1024px): bar + disclosure panel
 * ================================================================ */

@media (min-width: 1024px) {
	/* the panel is positioned against the header container, never against the trigger */
	#site-header .zm-hdr {
		position: relative;
	}

	/* overflow-x: clip — a longer admin label or user text spacing (WCAG 1.4.12) can never slide a link
	   under the search button; the panel is positioned against .zm-hdr (outside this box), so it is not
	   clipped, and overflow-y stays visible for the focus rings. `safe center` keeps an overflow on the
	   end side instead of spilling over the logo. */
	#site-header .zm-nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
		justify-content: safe center;
		min-width: 0;
		overflow-x: clip;
	}

	#site-header .zm-nav__scrim,
	#site-header .zm-nav__head {
		display: none;
	}

	#site-header .zm-nav__sheet {
		display: flex;
		min-width: 0;
	}

	#site-header .zm-nav__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0;
	}

	#site-header .zm-item--mega {
		margin-inline-end: 4px;
	}

	/* outer layer: transparent 16px band = hover bridge from the trigger; never clipped */
	#site-header .zm-panel {
		position: absolute;
		z-index: 1;
		top: calc(100% - 16px);
		inset-inline: 16px;
		box-sizing: border-box;
		max-width: 1120px;
		margin-inline: auto;
		padding-top: 16px;
	}

	#site-header .zm-panel__inner {
		box-sizing: border-box;
		max-height: calc(100vh - 88px);
		max-height: var(--zm-panel-max, calc(100vh - 88px));
		padding: 24px;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--zm-border);
		border-radius: 16px;
		background-color: var(--zm-surface);
		box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7);
		transition: opacity 0.15s ease-out, translate 0.15s ease-out;
	}

	@starting-style {
		#site-header .zm-panel:not([hidden]) .zm-panel__inner {
			opacity: 0;
			translate: 0 -4px;
		}
	}

	#site-header .zm-panel__grid {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#site-header .zm-panel__grid.zm-cols-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	#site-header .zm-panel__grid.zm-cols-2,
	#site-header .zm-panel__grid.zm-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* the panel sits above the LBank bar (#tbBanner, z 49) while open */
	html.zm-nav-open #site-header {
		z-index: 60;
	}

	/* no JS yet (LiteSpeed delay, failed load): hover/focus still reveal the panel */
	html:not(.zm-js) #site-header .zm-item--mega:hover > .zm-panel[hidden],
	html:not(.zm-js) #site-header .zm-item--mega:focus-within > .zm-panel[hidden] {
		display: block !important;
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
	/* keeps the bar on one line at 1024: 12px row gap + 8px link padding leave 17px of slack with the
	   five default labels (80 characters, measured October 2026). WCAG 1.4.12 text spacing (+0.12em
	   letters, +0.16em words) fits from ~1064px; below that the end of the last link is clipped. */
	#site-header .zm-hdr__desk {
		gap: 12px;
	}

	#site-header .zm-link {
		padding: 0 8px;
	}

	#site-header .zm-link[aria-current="page"]::after {
		inset-inline: 8px;
	}
}

@media (min-width: 1280px) {
	#site-header .zm-panel__grid.zm-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ================================================================
 * Mobile / tablet (<1024px): the same <nav> as a modal drawer
 * `hidden lg:flex` stays on the desktop row (critique #15): if this file
 * fails to load, the nav stays hidden instead of spilling into the header.
 * ================================================================ */

@media (max-width: 1023.98px) {
	#site-header .zm-hdr__desk {
		display: contents;
	}

	#site-header .zm-hdr__brand,
	#site-header .zm-hdr__tools {
		display: none;
	}

	#site-header .zm-nav {
		display: none;
	}

	#site-header .zm-nav.is-open {
		display: block;
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
		z-index: 20;
	}

	#site-header .zm-nav__scrim {
		position: absolute;
		inset: 0;
		background-color: var(--zm-scrim);
		transition: opacity 0.2s ease;
	}

	#site-header .zm-nav__sheet {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		box-sizing: border-box;
		width: min(360px, 88vw);
		padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-inline-end: 1px solid var(--zm-border);
		background-color: var(--zm-surface);
		color: var(--zm-fg);
		text-align: start;
		transition: translate 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@starting-style {
		#site-header .zm-nav.is-open .zm-nav__sheet {
			translate: 100% 0;
		}

		#site-header .zm-nav.is-open .zm-nav__scrim {
			opacity: 0;
		}
	}

	#site-header .zm-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--zm-border);
	}

	#site-header .zm-nav__title {
		color: var(--zm-fg);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.7;
	}

	#site-header .zm-nav__close {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--zm-outline);
		border-radius: 9999px;
		background-color: transparent;
		color: var(--zm-fg);
	}

	#site-header .zm-nav__close:hover {
		background-color: var(--zm-layer-hover);
	}

	#site-header .zm-nav__close:focus-visible {
		background-color: var(--zm-layer-focus);
	}

	#site-header .zm-nav__close:active {
		background-color: var(--zm-layer-pressed);
	}

	#site-header .zm-nav__list {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	/* trigger → full-width accordion row, chevron at inline-end, no pill */
	#site-header .zm-trigger {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 48px;
		padding: 0 12px;
		border: 0;
		border-radius: 10px;
	}

	#site-header .zm-trigger[aria-expanded="true"],
	#site-header .zm-trigger[aria-expanded="true"]:hover,
	#site-header .zm-trigger[aria-expanded="true"]:focus-visible,
	#site-header .zm-trigger[aria-expanded="true"]:active {
		color: var(--zm-link);
	}

	#site-header .zm-trigger[aria-expanded="true"] {
		background-color: transparent;
	}

	#site-header .zm-trigger[aria-expanded="true"]:hover {
		background-color: var(--zm-layer-hover);
	}

	#site-header .zm-trigger[aria-expanded="true"]:focus-visible {
		background-color: var(--zm-layer-focus);
	}

	#site-header .zm-trigger[aria-expanded="true"]:active {
		background-color: var(--zm-layer-pressed);
	}

	#site-header .zm-link {
		display: flex;
		width: 100%;
		height: 48px;
		padding: 0 12px;
		border-radius: 10px;
	}

	#site-header .zm-link[aria-current="page"]::after,
	#site-header .zm-trigger[data-current="1"]::after {
		inset-inline: auto;
		inset-inline-start: 0;
		top: 12px;
		bottom: 12px;
		width: 3px;
		height: auto;
		border-radius: 3px;
	}

	/* panel → static, inline under its row; no shell */
	#site-header .zm-panel {
		position: static;
		padding: 4px 0 12px;
	}

	#site-header .zm-panel__inner {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	#site-header .zm-panel__grid {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* one row per brand, the same 56px rows as desktop: names never truncate at 375px (critique #2) */
	#site-header .zm-col__list {
		gap: 8px;
	}

	#site-header .zm-brand {
		border-color: var(--zm-border);
		border-radius: 12px;
	}

	#site-header .zm-panel__foot {
		flex-direction: column;
		align-items: stretch;
		margin-top: 16px;
	}

	#site-header .zm-all {
		min-height: 44px;
	}

	#site-header .zm-panel__note {
		flex: none;
		max-width: none;
	}

	/* drawer open: the header stops being the containing block for fixed children and sits above the LBank bar */
	html.zm-nav-locked #site-header {
		z-index: 60;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		transition: none !important; /* beats the header's inline transition */
	}

	html.zm-nav-locked,
	html.zm-nav-locked body {
		overflow: hidden;
	}

	html.zm-nav-locked {
		scrollbar-gutter: stable;
	}
}

@media (prefers-reduced-motion: reduce) {
	#site-header .zm-trigger,
	#site-header .zm-chev,
	#site-header .zm-panel__inner,
	#site-header .zm-nav__sheet,
	#site-header .zm-nav__scrim {
		transition: none !important;
	}
}