/*
 * RahkarTheme — categories mega-menu (desktop "دسته‌بندی کالاها").
 *
 * Loaded only when the `categories` header component is active (see
 * inc/header-builder.php → rahkar_header_register_categories_assets).
 *
 * Interaction is PURE CSS :hover — opening the panel and switching panes
 * costs zero JS and zero network. assets/js/mega-categories.js is an optional
 * a11y layer (click toggle + Esc) layered on top via [data-open].
 *
 * Desktop-only by placement: the component lives in menu_row, which
 * assets/css/header.css already hides at/below 900px — so no media query is
 * needed here, and the panel never renders/opens on touch viewports.
 *
 * All colors/radii/shadows come from the header's --rh-* tokens and
 * theme.json presets — nothing is hard-coded (brand blue = --rh-primary).
 */

.rh-cats {
	position: relative;
	/* inline-flex so the wrapper is exactly button-sized: the absolutely
	 * positioned panel never adds to it, so the :hover target is only the
	 * visible button (not a wider invisible block). */
	display: inline-flex;
}

/* ----------------------------------------------------------------------
 *  Trigger button — brand-blue CTA (hamburger + label + chevron)
 * ---------------------------------------------------------------------- */
.rh-cats__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding-inline: 16px;
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--rh-primary);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap; /* never wrap "دسته‌بندی کالاها" to two lines */
	flex: none;          /* don't shrink/wrap when the row gets tight */
	cursor: pointer;
}
.rh-cats__btn .rh-icon {
	flex: none;
}
.rh-cats__chevron {
	transition: transform 150ms ease;
}
/* Open state → flip chevron + square the bottom corners so the button
 * visually joins the panel.
 *
 * Trigger is scoped tightly: hovering ONLY the button or the panel itself
 * (not the wrapper box), plus keyboard focus and the JS click toggle. This
 * is why the panel opens only when the pointer is actually ON the button,
 * not merely near it. :has() is fine here — desktop-only, evergreen. */
.rh-cats:has(> .rh-cats__btn:hover) .rh-cats__chevron,
.rh-cats:has(> .rh-cats__panel:hover) .rh-cats__chevron,
.rh-cats:focus-within .rh-cats__chevron,
.rh-cats[data-open] .rh-cats__chevron {
	transform: rotate(180deg);
}
.rh-cats:has(> .rh-cats__btn:hover) .rh-cats__btn,
.rh-cats:has(> .rh-cats__panel:hover) .rh-cats__btn,
.rh-cats:focus-within .rh-cats__btn,
.rh-cats[data-open] .rh-cats__btn {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* ----------------------------------------------------------------------
 *  Panel — anchored under the button. Sidebar (parents) on the inline-start
 *  (right, RTL); the hovered parent's pane fills the inline-end area.
 *
 *  Height comes from the parents list (normal flow); panes are absolutely
 *  positioned and fill that height, scrolling only if a single category has
 *  more children than fit. No layout shift: the panel is out of flow.
 * ---------------------------------------------------------------------- */
.rh-cats__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	width: min(880px, calc(100vw - 2 * var(--rh-pad-x, 24px)));
	min-height: 320px;
	background: var(--rh-bg);
	border: 1px solid var(--rh-border);
	/* Square only the corner that sits under the button (top inline-start);
	 * round the other three. Logical longhands so RTL/LTR both work. */
	border-start-start-radius: 0;
	border-start-end-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-end-start-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-end-end-radius: var(--wp--custom--radius--lg, 0.75rem);
	box-shadow: var(--wp--preset--shadow--lg, 0 16px 40px rgba(15, 17, 21, 0.14));
	overflow: hidden;
	z-index: var(--rh-z-mega, 100);

	/* Closed: invisible + non-interactive, but kept in flow-free layout so
	 * the :hover bridge from button to panel is seamless (no top gap). */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.rh-cats:has(> .rh-cats__btn:hover) .rh-cats__panel,
.rh-cats:has(> .rh-cats__panel:hover) .rh-cats__panel,
.rh-cats:focus-within .rh-cats__panel,
.rh-cats[data-open] .rh-cats__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/* ----------------------------------------------------------------------
 *  Parents sidebar (right). Defines the panel height.
 * ---------------------------------------------------------------------- */
.rh-cats__parents {
	width: 240px;
	padding-block: 8px;
}
.rh-cats__parent-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 18px;
	color: var(--rh-fg);
	font-size: 0.9rem;
	font-weight: 500;
}
.rh-cats__parent-link .rh-icon {
	flex: none;
	opacity: 0.45;
}
/* Active parent — on hover/focus, and the first one by default when the
 * pointer is not inside the sidebar (mirrors the reference design). */
.rh-cats__parent:hover > .rh-cats__parent-link,
.rh-cats__parent:focus-within > .rh-cats__parent-link,
.rh-cats__parents:not(:hover):not(:focus-within) > .rh-cats__parent:first-child > .rh-cats__parent-link {
	background: color-mix(in srgb, var(--rh-primary) 8%, transparent);
	color: var(--rh-primary);
}

/* ----------------------------------------------------------------------
 *  Pane (left) — children of the active parent. All panes stack in the same
 *  area; only the active one is shown.
 * ---------------------------------------------------------------------- */
.rh-cats__pane {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 240px; /* clears the 240px sidebar on the right */
	inset-inline-end: 0;
	padding: 18px 22px;
	overflow-y: auto;
	border-inline-start: 1px solid var(--rh-border);
	opacity: 0;
	visibility: hidden;
}
.rh-cats__parent:hover > .rh-cats__pane,
.rh-cats__parent:focus-within > .rh-cats__pane,
.rh-cats__parents:not(:hover):not(:focus-within) > .rh-cats__parent:first-child > .rh-cats__pane {
	opacity: 1;
	visibility: visible;
}

.rh-cats__viewall {
	display: inline-block;
	margin-block-end: 14px;
	color: var(--rh-primary);
	font-size: 0.9rem;
	font-weight: 700;
}
.rh-cats__children {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 4px 18px;
}
.rh-cats__children a {
	display: block;
	padding: 7px 6px;
	color: var(--rh-fg-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}
.rh-cats__children a:hover {
	color: var(--rh-primary);
}