/*
 * RahkarTheme — desktop cascading mega-menu (LV-style).
 *
 * Opened by the desktop main row's "منو" button (header.js toggles
 * `data-state`/`inert` on #rh-desktop-menu, a SIBLING of #rh-mobile-nav — see
 * header.tpl). Desktop only (≥901px); the mobile hamburger opens the
 * separate drilldown drawer instead (header.css / .rh-mobile-nav).
 *
 * Columns are rendered as FLAT SIBLINGS under `.rh-dmenu__panel` (header.tpl's
 * rh_dmenu_column) — a deeper column is NEVER a DOM descendant of a shallower
 * one. That's deliberate: column 1 (and column 2) needs its own vertical
 * `overflow-y: auto` scrollbar for long lists, and CSS overflow clips ANY
 * descendant that's visually meant to extend past that box — regardless of
 * `position: absolute` / `fixed` tricks — once a column is nested INSIDE the
 * scrolling box. Being flat siblings sidesteps that entirely: each column is
 * `position: absolute` relative to `.rh-dmenu__panel` (which has no overflow
 * of its own) with an EXPLICIT pixel offset per depth (0, 360px, 660px), so
 * nothing is ever an ancestor of anything it needs to sit beside.
 *
 * Column reveal is CLICK-driven (assets/js/header-desktop-menu.js): a trigger
 * link carries `data-dmenu-id`, its column carries the matching
 * `data-dmenu-parent`; clicking toggles `.is-active` on the COLUMN (not the
 * link/li) via that lookup. A has-children link's default navigation is
 * prevented — the only way to actually reach that category's page is the
 * "مشاهده‌ی همه‌ی X" link at the end of the column it opens.
 *
 * RTL note: like `.rh-mobile-nav` (header.css), the panel is pinned with a
 * PHYSICAL `right: 0` + `transform: translateX(100%)` on purpose — logical
 * properties don't cover transforms, and mixing them with `inset-inline-end`
 * would be inconsistent. Everything else uses logical properties.
 */

@media (min-width: 901px) {
	.rh-dmenu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 17, 21, 0.45);
		z-index: 1200;
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms ease, visibility 0s linear 260ms;
	}
	.rh-dmenu-backdrop[data-state="open"] {
		opacity: 1;
		visibility: visible;
		transition: opacity 260ms ease, visibility 0s linear 0s;
	}

	.rh-dmenu {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: 360px;
		max-width: 90vw;
		background: var(--rh-bg, #fff);
		color: var(--rh-fg, #1a1d23);
		z-index: 1201;
		box-shadow: -8px 0 32px rgba(15, 17, 21, 0.14);
		transform: translateX(100%);
		transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
		will-change: transform;
		/* NO `contain: layout paint` here on purpose — `contain: paint` clips
		 * descendants to this box's own bounds, which would trap the nested
		 * flyout columns at exactly the width they're meant to escape past. */
		border: 0;
		padding: 0;
	}
	.rh-dmenu[data-state="open"] {
		transform: translateX(0);
	}

	.rh-dmenu__panel {
		position: relative;
		height: 100%;
	}

	.rh-dmenu__close {
		position: absolute;
		top: 14px;
		inset-inline-start: 14px;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rh-fg, #1a1d23);
		cursor: pointer;
	}
	.rh-dmenu__close:hover,
	.rh-dmenu__close:focus-visible {
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-primary, #0a66c2);
	}

	/* ---- Column 1 (always visible while the panel is open) -------------- */
	.rh-dmenu__col--1 {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 360px;
		box-sizing: border-box;
		padding: 64px 6px 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
	}

	.rh-dmenu__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.rh-dmenu__item {
		position: static;
	}
	.rh-dmenu__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 12px 14px;
		border-radius: 8px;
		color: var(--rh-fg, #1a1d23);
		font-weight: var(--rh-fw-base);
		font-size: 0.9375rem;
		transition: background-color 120ms linear, color 120ms linear;
	}
	.rh-dmenu__item:hover > .rh-dmenu__link,
	.rh-dmenu__item:focus-within > .rh-dmenu__link,
	.rh-dmenu__link[aria-expanded="true"] {
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-primary, #0a66c2);
	}
	.rh-dmenu__col--1 > .rh-dmenu__list > .rh-dmenu__item > .rh-dmenu__link {
		font-weight: var(--rh-fw-strong);
	}
	.rh-dmenu__caret {
		flex: 0 0 auto;
		color: var(--rh-fg-muted, #5b6271);
	}

	.rh-dmenu__col1-foot {
		margin-top: auto;
		padding: 16px 14px 4px;
		border-top: 1px solid var(--rh-border, #e2e4e9);
	}
	.rh-dmenu__col1-foot .rh-quick {
		display: flex;
		flex-direction: column;
	}
	.rh-dmenu__col1-foot .rh-quick__link {
		height: 40px;
		padding-inline: 4px;
	}

	/* ---- Flyout columns (2, 3) --------------------------------------------
	 * Shared base for every `.rh-dmenu__col` EXCEPT column 1 (excluded via
	 * :not so the same class can double as a generic "column" marker on col1
	 * too, per the Smarty markup). `position: absolute` relative to
	 * `.rh-dmenu__panel` — a flat sibling of column 1, never its descendant,
	 * so column 1's own `overflow-y: auto` can't clip it (see file header
	 * comment). Each depth gets its own EXPLICIT pixel start offset below. */
	.rh-dmenu__col:not(.rh-dmenu__col--1) {
		position: absolute;
		inset-block: 0;
		width: 300px;
		box-sizing: border-box;
		background: var(--rh-bg, #fff);
		border-inline-start: 1px solid var(--rh-border, #e2e4e9);
		padding: 64px 6px 16px;
		overflow-y: auto;
		overscroll-behavior: contain;

		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		pointer-events: none;
		transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
	}
	/* column 1 is 360px, each flyout after it is 300px. */
	.rh-dmenu__col--2 { inset-inline-start: 360px; }
	.rh-dmenu__col--3 { inset-inline-start: 660px; }
	.rh-dmenu__col.is-active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* "مشاهده‌ی همه‌ی X" — the only way to actually navigate to a has-children
	 * node's own category page (its row click just opens/closes this column). */
	.rh-dmenu__viewall {
		display: block;
		margin-top: 10px;
		padding: 10px 14px;
		border-top: 1px solid var(--rh-border, #e2e4e9);
		color: var(--rh-primary, #0a66c2);
		font-weight: var(--rh-fw-strong);
		font-size: 0.875rem;
	}
	.rh-dmenu__viewall:hover {
		text-decoration: underline;
	}

	/* Body scroll-lock while open — shared class with the mobile drawer. */
	html.rh-no-scroll,
	html.rh-no-scroll body {
		overflow: hidden;
	}
}

/* Below 901px the desktop panel/backdrop stay fully out of the layout (the
 * mobile hamburger opens .rh-mobile-nav instead) — no paint cost. */
@media (max-width: 900px) {
	.rh-dmenu,
	.rh-dmenu-backdrop {
		display: none;
	}
}