/* =====================================================================
 * Faragiri - Header (desktop "header-v2" + handheld + off-canvas drawer)
 *
 * FLAT / UNIFIED SYSTEM (2026-07-27 rewrite)
 * ------------------------------------------------------------------
 * Every control in the header - search pill, submit, nav links, icon
 * chips, hamburger, theme-switcher trigger, upload CTA, dropdowns,
 * drawer rows - is built from ONE small set of primitives declared in
 * §0 below: one control size, one radius scale, one hairline, one
 * fill, one hover fill, one accent. No gradients, no glass/blur, no
 * aurora glows, no sheen sweeps, no spring transforms, no staggered
 * entrances: surfaces are solid, edges are hairlines, and the only
 * motion left is a 140ms colour fade on interactive states.
 *
 * Colours all resolve through the theme-switcher's --fg-* tokens, so
 * the whole header repaints correctly across all 8 colour modes with
 * no per-mode duplication (§12 only re-points shadow strength for the
 * white Light header).
 * ===================================================================== */

/* ------------------------------------------------------------------ *
 * 0) THE PRIMITIVES - change these, the whole header follows.
 * ------------------------------------------------------------------ */
:root {
	--fgh-ctl: 40px;              /* every icon button / chip */
	--fgh-r-ctl: 10px;            /* controls */
	--fgh-r-field: 12px;          /* search field */
	--fgh-r-panel: 14px;          /* dropdowns, sheets, drawer cards */

	--fgh-line: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 13%, transparent);
	--fgh-line-soft: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 7%, transparent);

	--fgh-fill: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 6%, transparent);
	--fgh-fill-hover: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 11%, transparent);

	--fgh-accent-fill: color-mix(in srgb, var(--fg-accent) 14%, transparent);

	/* one flat elevation, used by every floating surface */
	--fgh-shadow: 0 10px 28px -18px rgba(4, 8, 20, .55);

	--fgh-fade: .14s ease;
}

/* ------------------------------------------------------------------ *
 * 1) HEADER SHELL
 *    Flat bar: solid tokenized background (forced by core css), one
 *    hairline underneath, nothing else. The previous build had an
 *    animated gradient hairline (::before) and two breathing radial
 *    "aurora" blooms (::after) - both removed; ::before/::after are
 *    explicitly neutralised in case a cached copy of the old file is
 *    still in play.
 * ------------------------------------------------------------------ */
.site-header.header-v2,
.handheld-header {
	/* .site-header already has position:relative + z-index:3 */
	border-bottom: 1px solid var(--fgh-line);
	transition: border-color var(--fgh-fade), box-shadow var(--fgh-fade);
}

.site-header.header-v2::before,
.site-header.header-v2::after,
.handheld-header::before,
.handheld-header::after {
	content: none;
}

/* Own the sticky behaviour with plain CSS - the theme ships a
 * stick-this/.stuck mechanism that never engages (verified: no overflow
 * ancestors to break position:sticky). The admin-bar var resolves to 0
 * for visitors. z-index above the page, below the drawer overlay. */
.site-header.header-v2,
header.handheld-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 120;
}

/* Scrolled state - header.js toggles html.fgh-scrolled (the theme's own
 * .stuck class proved unreliable). Flat: the bar stays fully opaque, it
 * just gains a hairline shadow so it detaches from the page. No blur - * backdrop-filter creates a containing block for position:fixed
 * descendants and the handheld header contains the fixed drawer. */
html.fgh-scrolled .site-header.header-v2,
html.fgh-scrolled .handheld-header {
	box-shadow: 0 1px 0 var(--fgh-line), var(--fgh-shadow);
}

.site-header__inner {
	position: relative;
	z-index: 1;
}

/* the parent theme top-aligns header-v2's row (tuned for a logo that
 * never actually rendered - vodi_header_logo() ships empty) */
.header-v2 .site-header__inner {
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * 2) LOGO / WORDMARK - flat solid ink, no gradient text-clip, no tilt.
 * ------------------------------------------------------------------ */
.fgh-logo,
.fgh-logo--custom {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fgh-logo__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.fgh-logo__mark {
	display: flex;
	flex: none;
	line-height: 0;
}

.fgh-logo--custom .custom-logo-link {
	display: flex;
	align-items: center;
	max-width: none;
}

.fgh-logo--custom img.custom-logo {
	max-height: 30px;
	width: auto;
	display: block;
	border-radius: var(--fgh-r-ctl);
}

.fgh-logo--custom .fgh-logo__text-link {
	text-decoration: none;
	line-height: 1;
}

.fgh-logo__text {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--fg-header-ink);
	white-space: nowrap;
	transition: color var(--fgh-fade);
}

.site-header__logo:hover .fgh-logo__text,
.fgh-logo__link:hover .fgh-logo__text {
	color: var(--fg-accent);
}

.header-v2 .fgh-logo {
	padding: 6px 0;
}

.handheld-header .fgh-logo {
	padding: 0;
}

.handheld-header .fgh-logo__text {
	font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * 3) DESKTOP PRIMARY NAV - flat links, one solid accent underline.
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
	.site_header__primary-nav .nav {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.site_header__primary-nav .nav > li {
		position: relative;
	}

	.site_header__primary-nav .nav > li > a {
		position: relative;
		display: flex;
		align-items: center;
		font-weight: 500;
		transition: color var(--fgh-fade);
	}

	.site_header__primary-nav .nav > li > a::after {
		content: "";
		position: absolute;
		left: 18px;
		right: 18px;
		bottom: 10px;
		height: 2px;
		border-radius: 2px;
		background: var(--fg-accent);
		opacity: 0;
		transition: opacity var(--fgh-fade);
	}

	.site_header__primary-nav .nav > li > a:hover::after,
	.site_header__primary-nav .nav > li > a:focus-visible::after,
	.site_header__primary-nav .nav > li.current-menu-item > a::after,
	.site_header__primary-nav .nav > li.current-menu-ancestor > a::after {
		opacity: 1;
	}

	.site_header__primary-nav .nav > li.current-menu-item > a,
	.site_header__primary-nav .nav > li.current-menu-ancestor > a {
		font-weight: 600;
	}

	.site_header__primary-nav .menu-item-has-children > a::after {
		/* the little caret the parent theme draws - keep it out of our underline */
		bottom: auto;
	}

	/* Mega menus anchor to their OWN item, not the whole header row.
	 * Vodi's yamm-fw stretches the panel left:0/right:0/width:70% across a
	 * wide positioned ancestor, so it opened as a huge board floating far
	 * from the hovered item. Anchored to the li (right edge, RTL) and sized
	 * to content, the pointer only has to drop straight down. The inner
	 * wp-block-columns are flex, so max-content sizes to the columns. */
	.site_header__primary-nav .nav > li.menu-item-has-children {
		position: relative !important;
	}

	/* right:-24px overhang: border-radius carves the rounded corner OUT of
	 * the hit area, so a straight drop from the item's right half used to
	 * slip through the carved top corner and break :hover (menu closed).
	 * Overhanging puts the carved corner outside the item's span - every
	 * drop lands on the flat transparent-border bridge. */
	.site_header__primary-nav .nav > li.menu-item-has-children > .sub-menu {
		left: auto !important;
		right: -24px !important;
		width: max-content !important;
		min-width: 260px;
		max-width: min(940px, calc(100vw - 48px));
	}
}

/* ------------------------------------------------------------------ *
 * 4) DROPDOWNS / MEGA MENU - flat solid cards
 *    (background-color is forced to --fg-header by theme-switcher-core
 *    §3 !important - we only add shape/edge/spacing on top of it.)
 * ------------------------------------------------------------------ */
.site-header .sub-menu,
.site-header__user-account > .sub-menu {
	/* The "floating card" gap used to be margin-top - a pointer dead zone
	 * between the trigger and the menu, so the parent theme's pure-CSS
	 * ":hover > .sub-menu" chain broke mid-travel and the submenu closed
	 * before anything in it could be clicked. A transparent-top border
	 * keeps the same visual offset but stays inside the hover hit area.
	 *
	 * background-clip is border-box (the default) ON PURPOSE: the card's
	 * background paints through the whole box INCLUDING the transparent
	 * border strip, so the gap is the same colour as the card body. Two
	 * earlier bugs came from NOT doing this - padding-box let the page
	 * behind bleed through as a coloured strip, and an opaque border-top
	 * read as a seam. */
	margin-top: 0 !important;
	border: 1px solid var(--fgh-line);
	border-top: 10px solid transparent;
	background-clip: border-box !important;
	background-image: none !important;
	border-radius: var(--fgh-r-panel) !important;
	box-shadow: var(--fgh-shadow);
	overflow: hidden;
}

.site-header .sub-menu::before,
.site-header .sub-menu::after,
.site-header__user-account > .sub-menu::before,
.site-header__user-account > .sub-menu::after {
	display: none !important;
	content: none !important;
}

.yamm .yamm-fw > .sub-menu,
.yamm .yamm-tfw > .sub-menu {
	/* same hover-bridge trick, mega-menu proportions */
	margin-top: 0 !important;
	border-top: 12px solid transparent;
	border-radius: var(--fgh-r-panel) !important;
}

/* mega-menu column headings - flat 2px accent rule, no gradient */
.yamm-content h2.nav-title,
.yamm-content ul li.nav-title {
	position: relative;
	padding-right: 12px;
}

[dir="rtl"] .yamm-content h2.nav-title::before,
.yamm-content h2.nav-title::before {
	content: "";
	position: absolute;
	right: 0;
	top: 3px;
	bottom: 3px;
	width: 2px;
	border-radius: 2px;
	background: var(--fg-accent);
}

.site_header__primary-nav .sub-menu > li > a,
.site_header__user-account > .sub-menu > li > a {
	border-radius: var(--fgh-r-ctl);
	margin: 2px 6px;
	width: calc(100% - 12px) !important;
	transition: background-color var(--fgh-fade), color var(--fgh-fade);
}

.site_header__primary-nav .sub-menu > li > a:hover,
.site-header__user-account > .sub-menu > li > a:hover {
	background-color: var(--fgh-fill-hover) !important;
}

/* ------------------------------------------------------------------ *
 * 4b) MEGA MENU INTERIOR - the three .yamm-fw panels
 *
 * The panel bodies are Gutenberg block markup stored in three
 * mas_static_content posts (language / design / business), so nothing
 * here may depend on classes we control: it all hangs off .yamm-content,
 * .wp-block-columns, .wp-block-column and .size-head-menu.
 *
 * THE BROKEN RULE UNDER EACH HEADING (what this section was written for)
 * ---------------------------------------------------------------------
 * The heading paragraphs carried, from the child style.css:
 *     border-bottom-style: groove; border-width: thin; text-align: center
 * Two separate faults stacked on top of each other:
 *
 *   1. `groove` is the 3D two-tone border style. At 1px it renders as a
 *      muddy half-light/half-dark hairline that reads as a rendering
 *      artefact, not as a designed rule.
 *   2. §3 sizes the panel with `width: max-content`, and Gutenberg gives
 *      every .wp-block-column `flex: 1 1 0`. Under a max-content parent
 *      a 0-basis flex item resolves to ITS OWN max-content contribution,
 *      and the column's widest child is the <ul> - not the heading, whose
 *      <a> is white-space:nowrap and simply overflows its box. Measured
 *      on /learning/: the "آموزش طراحی سایت" paragraph was 114.85px wide
 *      while its own text ran ~130px. So the border - which tracks the
 *      BOX, not the text - came out shorter than the title it underlined,
 *      centred text spilled out both ends, and every column produced a
 *      different stub length. That is the ragged set of lines in the
 *      panel.
 *
 * The fix is to stop sizing columns off the list alone: the columns
 * become a grid of `minmax(max-content, 1fr)` tracks, which (a) sizes
 * each track to its widest child INCLUDING the heading, so nothing
 * overflows, and (b) equalises the tracks against each other, so the
 * rules line up. groove is replaced by a real hairline (::after) plus a
 * short accent tick (::before) at the RTL start.
 *
 * Everything is html[data-fgri-theme]-prefixed for the same reason as
 * §5: the legacy `.sub-menu a { color: white !important }` in
 * vodi-child-style.min.css otherwise wins and the panel stays
 * white-on-white in the Light theme.
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .site-header .yamm-content {
	padding: 6px 6px 8px !important;
}

/* the trailing empty <p> each of the three posts ends with, and the two
 * empty "vip" columns in the language post - pure dead space */
html[data-fgri-theme] .site-header .yamm-content > p:not(.size-head-menu),
html[data-fgri-theme] .site-header .yamm-content .wp-block-columns.vip {
	display: none !important;
}

/* Equal, self-sizing tracks. grid-auto-flow:column + grid-auto-columns
 * means this works for both panel shapes without knowing the count:
 * design/business nest 2 groups of 2, language puts one heading above a
 * 2-column list group. Each nested grid equalises inside its group and
 * the outer grid equalises the groups, so all four columns land equal. */
html[data-fgri-theme] .site-header .yamm-content .wp-block-columns {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(max-content, 1fr);
	gap: 0 26px;
	margin: 0 !important;
	align-items: start;
}

html[data-fgri-theme] .site-header .yamm-content .wp-block-column .wp-block-columns {
	gap: 0 16px;
	margin-top: 8px !important;
}

html[data-fgri-theme] .site-header .yamm-content .wp-block-column {
	/* style.css ships 10px 50px 0 0 here - a 50px gutter baked into the
	 * column itself, which is why the old panel was ~200px wider than its
	 * content. Spacing is the grid's job now. */
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	min-width: 0;
}

/* --- column heading ------------------------------------------------ */
html[data-fgri-theme] .site-header .yamm-content .size-head-menu {
	position: relative;
	text-align: right !important;
	margin: 0 0 8px !important;
	padding: 4px 12px 10px !important;
	border: 0 !important; /* kills the groove */
	font-size: 15px;
}

/* the real rule: one flat hairline across the full (now correct) width */
html[data-fgri-theme] .site-header .yamm-content .size-head-menu::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--fgh-line);
}

/* accent tick riding on the hairline, aligned to where the title starts */
html[data-fgri-theme] .site-header .yamm-content .size-head-menu::before {
	content: "";
	position: absolute;
	inset-inline-start: 12px;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--fg-accent);
	z-index: 1;
	transition: width var(--fgh-fade);
}

html[data-fgri-theme] .site-header .yamm-content .size-head-menu:hover::before {
	width: 64px;
}

html[data-fgri-theme] .site-header .yamm-content .size-head-menu a {
	display: inline-block;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 15px !important; /* style.css forces 17px !important */
	font-weight: 700 !important;
	line-height: 1.5;
	color: var(--fg-header-ink) !important;
	opacity: 1 !important;
	white-space: nowrap;
}

html[data-fgri-theme] .site-header .yamm-content .size-head-menu a:hover {
	color: var(--fg-accent) !important;
	background: transparent !important;
}

/* The owner's Customizer Additional CSS carries a GLOBAL body-copy link
 * treatment - `p a::after { content:""; position:absolute; bottom:-3px;
 * width:100%; height:2px; background:linear-gradient(90deg,#4A90E2,
 * #73C2FB); transform:scaleX(0) }` plus a `p a:hover::after {
 * transform:scaleX(1) }`. These headings are literally `<p><a>`, so on
 * hover that gradient bar swept in 3px under the title - a SECOND line
 * stacked above the hairline this section draws. Killed here only; the
 * effect stays intact everywhere it belongs (article body copy, Link
 * Whisper's .wpil_keyword_link). */
html[data-fgri-theme] .site-header .yamm-content .size-head-menu a::after,
html[data-fgri-theme] .site-header .yamm-content .size-head-menu a::before {
	content: none !important;
	display: none !important;
}

/* --- list rows ------------------------------------------------------ */
html[data-fgri-theme] .site-header .yamm-content ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html[data-fgri-theme] .site-header .yamm-content ul li {
	/* style.css sets li{display:flex} and hangs a "\2022" ::before off it.
	 * The bullet was a sibling of the link, not part of it, so it sat
	 * outside the row's hit area and drifted away from short labels. */
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

html[data-fgri-theme] .site-header .yamm-content ul li::before {
	content: none !important;
	display: none !important;
}

html[data-fgri-theme] .site-header .yamm-content ul li > a {
	display: flex !important;
	align-items: center;
	/* the parent theme's .nav a carries justify-content:space-between,
	 * which shoved the dot and the label to opposite ends of the row */
	justify-content: flex-start !important;
	gap: 9px;
	padding: 6px 12px !important;
	margin: 1px 0 !important;
	border-radius: var(--fgh-r-ctl);
	font-size: 14px !important;
	line-height: 1.6;
	color: color-mix(in srgb, var(--fg-header-ink) 78%, transparent) !important;
	opacity: 1 !important;
	white-space: nowrap;
	transition: background-color var(--fgh-fade), color var(--fgh-fade);
}

/* the bullet, rebuilt as part of the link so it tracks the label */
html[data-fgri-theme] .site-header .yamm-content ul li > a::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	transition: background-color var(--fgh-fade), opacity var(--fgh-fade), transform var(--fgh-fade);
}

html[data-fgri-theme] .site-header .yamm-content ul li > a:hover,
html[data-fgri-theme] .site-header .yamm-content ul li > a:focus-visible {
	background: var(--fgh-fill-hover) !important;
	color: var(--fg-header-ink) !important;
}

html[data-fgri-theme] .site-header .yamm-content ul li > a:hover::before,
html[data-fgri-theme] .site-header .yamm-content ul li > a:focus-visible::before {
	background: var(--fg-accent);
	opacity: 1;
	transform: scale(1.4);
}

/* --- hub link footer ------------------------------------------------ *
 * Each panel's <li> already contains the hub link (/learn/language/ etc)
 * ahead of the .yamm-content div, and the parent theme hides it with
 * display:none - a live, crawlable link that no visitor could ever see.
 * Ordering the flex column puts it back as a footer row.
 * -------------------------------------------------------------------- */
html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li {
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
}

html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > .yamm-content {
	order: 1;
}

html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > a {
	order: 2;
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 8px;
	width: auto !important;
	margin: 6px 6px 2px !important;
	padding: 9px 12px !important;
	border-top: 1px solid var(--fgh-line-soft);
	border-radius: 0;
	font-size: 13px !important;
	color: color-mix(in srgb, var(--fg-header-ink) 62%, transparent) !important;
	opacity: 1 !important;
	white-space: nowrap;
	transition: color var(--fgh-fade);
}

/* the link's own text is just the category name ("آموزش زبان"), so the
 * verb is generated here rather than edited into the menu */
html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > a::before {
	content: "همه دوره های";
	opacity: .85;
}

/* CSS chevron pointing at the RTL forward direction (left) */
html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 0 1.5px 1.5px;
	transform: rotate(45deg);
	margin-inline-start: 2px;
	opacity: .8;
	transition: transform var(--fgh-fade);
}

html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > a:hover {
	color: var(--fg-accent) !important;
	background: transparent !important;
}

html[data-fgri-theme] .site-header .yamm-fw > .sub-menu > li > a:hover::after {
	transform: rotate(45deg) translate(1px, 1px);
}

/* Narrow desktops: the widest panel (language, ~860px) still clears a
 * 1200px viewport, but tighten the gutters so it never gets close to the
 * max-width clamp in §3 - a clamped max-content grid would clip against
 * the panel's overflow:hidden rather than reflow. */
@media (min-width: 1200px) and (max-width: 1440px) {
	html[data-fgri-theme] .site-header .yamm-content .wp-block-columns {
		gap: 0 18px;
	}

	html[data-fgri-theme] .site-header .yamm-content .wp-block-column .wp-block-columns {
		gap: 0 12px;
	}

	html[data-fgri-theme] .site-header .yamm-content ul li > a {
		padding: 6px 9px !important;
	}
}

/* ------------------------------------------------------------------ *
 * 5) SEARCH - flat field, flat accent submit (desktop + sheet + drawer)
 *
 * Selector note: everything load-bearing here is prefixed with
 * html[data-fgri-theme] on purpose. theme-switcher-core.css §18 forces
 * ".site-header .search-submit { background: transparent !important }"
 * at the same weight - it used to beat this file and left the submit as
 * a bare floating magnifier. The prefix lifts these rules so they win on
 * specificity, not on load-order luck. Same trick beats the child
 * style.css hardcodes (navy #131722 fields, rgb(12,14,23) mobile sheet).
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .site-header .search-form.masvideos-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: var(--fgh-ctl);
	background: var(--fgh-fill);
	border: 1px solid var(--fgh-line);
	border-radius: var(--fgh-r-field);
	padding: 3px;
	padding-inline-start: 6px;
	box-shadow: none;
	transition: border-color var(--fgh-fade), background-color var(--fgh-fade);
}

html[data-fgri-theme] .site-header .search-form.masvideos-search:hover {
	background: var(--fgh-fill-hover);
}

html[data-fgri-theme] .site-header .search-form.masvideos-search:focus-within {
	border-color: var(--fg-accent);
	background: var(--fgh-fill-hover);
	box-shadow: none;
}

/* The :not() chain below is not decoration - it is the whole point of this
 * selector. theme-switcher-core.css line 421 paints EVERY text input with
 *   html[data-fgri-theme] input:not([type="submit"]):not([type="button"])
 *   :not([type="checkbox"]):not([type="radio"]):not([type="range"])
 *   :not([type="color"]):not([type="image"]) { background-color:
 *   var(--fg-surface-2) !important }
 * Each :not([attr]) counts at class level, so that rule scores (0,8,2) - * it beat this file's old (0,4,1) chain *despite* both being !important,
 * and the header search field rendered as an opaque #191e2a (dark) /
 * #f4f6fb (light) rectangle sitting inside the pill: two nested surfaces
 * of slightly different tone, with the input's own 5px radius cutting
 * visible corners inside the pill's 12px one.
 *
 * Mirroring the chain here scores (0,11,2), so transparent wins and the
 * field fuses with the pill - ONE surface, one radius, one border.
 *
 * (The two `input#masvideos-search-field-0/-1` selectors that used to sit
 * here were dead: the ids were renamed to fgh-search-field-* when the
 * search-form.php override landed, so neither had matched anything since.) */
html[data-fgri-theme] .site-header .search-form input.search-field:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="image"]),
html[data-fgri-theme] .site-header .search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	background: transparent !important;
	border: 0 !important;
	/* a bare "input{border-radius:5px!important}" in the compiled theme css
	 * was carving 5px corners inside the pill - invisible now that the fill
	 * is transparent, but it would resurface behind any focus/selection
	 * paint, so neutralise it here too. */
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: var(--fg-header-ink) !important;
	padding: 7px 10px !important;
	font-size: 15px;
	line-height: 1.4;
	caret-color: var(--fg-accent);
}

/* the native webkit "clear" X fights the custom field - our own UI covers it */
html[data-fgri-theme] .site-header .search-form .search-field::-webkit-search-cancel-button,
html[data-fgri-theme] .site-header .search-form .search-field::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

html[data-fgri-theme] .site-header .search-form .search-field::placeholder {
	color: color-mix(in srgb, var(--fg-header-ink) 52%, transparent) !important;
}

/* flat accent submit - same square-with-10px-radius as every other chip */
html[data-fgri-theme] .site-header .search-form .search-submit {
	flex: none;
	width: 34px;
	height: 34px;
	margin: 0 !important;
	padding: 0 !important; /* parent theme ships margin-left:-52px + padding:0 16px */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: var(--fgh-r-ctl) !important;
	background: var(--fg-accent) !important;
	color: var(--fg-accent-ink) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color var(--fgh-fade);
}

html[data-fgri-theme] .site-header .search-form .search-submit:hover,
html[data-fgri-theme] .site-header .search-form .search-submit:focus-visible {
	background: var(--fg-accent-2) !important;
}

html[data-fgri-theme] .site-header .search-form .search-submit svg,
html[data-fgri-theme] .site-header .search-form .search-submit svg path {
	fill: var(--fg-accent-ink) !important;
	color: var(--fg-accent-ink) !important;
	margin: 0 !important; /* parent theme nudges the svg 3px up - off-centre */
	opacity: 1 !important;
}

/* .site-header__search-outer wraps BOTH the search box AND the primary
 * nav (vodi_header_search_menu_start...end straddles both hooks) - the
 * theme never makes it a flex row for header-v2, so the two block-level
 * children stacked instead of sitting side by side. Make it a real row. */
@media (min-width: 1200px) {
	.header-v2 .site-header__search-outer {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	/* nav hugs its content; the search absorbs the slack. order:-1 puts the
	 * nav at the row start (right, RTL) so the search sits at the
	 * inline-end - LEFT of the menu (DOM order is search-then-nav). */
	.header-v2 .site-header__search-outer .site_header__primary-nav {
		flex: 0 1 auto;
		min-width: 0;
		order: -1;
	}

	.header-v2 .site-header__search {
		flex: 1 1 300px;
		display: flex;
		min-width: 0;
		max-width: 460px;
	}

	.header-v2 .site-header__search .search-form.masvideos-search {
		width: 100%;
	}

	.header-v2 .site-header__search .search-form .search-field {
		min-width: 0;
		width: 100%;
	}
}

/* handheld search trigger → same chip as every other icon (see §7) */
.handheld-header .site-header__search .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
}

html[data-fgri-theme] .handheld-header .site-header__search .dropdown-toggle svg,
html[data-fgri-theme] .handheld-header .site-header__search .dropdown-toggle svg path {
	width: 18px;
	height: 18px;
	fill: var(--fg-header-ink) !important;
}

/* HANDHELD SEARCH SHEET - the stock Bootstrap dropdown is a ~220px box
 * glued to the icon and hardcoded navy in every mode (child style.css
 * forces rgb(12,14,23) on .search-mobileinner.show). Re-anchor it to the
 * header itself (.handheld-header IS .site-header → position:relative) as
 * a full-width flat sheet. !important on the box metrics also defeats the
 * inline position/transform Popper.js writes on .dropdown-menu. */
.handheld-header .site-header__search,
.handheld-header .site-header__search .dropdown {
	position: static;
}

html[data-fgri-theme] .handheld-header ul.dropdown-menu.search-mobile.search-mobileinner {
	position: absolute !important;
	top: 100% !important;
	left: 10px !important;
	right: 10px !important;
	transform: none !important;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 8px 0 0 !important;
	padding: 10px !important;
	border-radius: var(--fgh-r-panel) !important;
	border: 1px solid var(--fgh-line) !important;
	background-color: var(--fg-header) !important;
	background-image: none !important;
	box-shadow: var(--fgh-shadow) !important;
	z-index: 70;
}

.handheld-header ul.dropdown-menu.search-mobile li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* sheet row = field + X close chip (header.js adds the class + button;
 * the live-results panel is appended to this same li, so wrap and give
 * it the full row width or the flex row would squash it beside the
 * field) */
.handheld-header ul.dropdown-menu.search-mobile li.fgh-sheet__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

html[data-fgri-theme] .handheld-header li.fgh-sheet__row .search-form.masvideos-search {
	flex: 1 1 auto;
	min-width: 0;
	order: 0;
}

/* keep the X beside the field even though the results panel lands
 * between them in DOM order (enhanceSearch appends it to the li) */
.fgh-sheet__row .fgh-sheet__close {
	order: 1;
}

.fgh-sheet__row .fgh-search-panel {
	flex: 1 1 100%;
	width: 100%;
	order: 2;
}

/* roomier touch targets inside the sheet + drawer */
html[data-fgri-theme] .handheld-header .search-mobile .search-form.masvideos-search,
html[data-fgri-theme] .fgh-drawer__search .search-form.masvideos-search {
	min-height: 44px;
}

/* live-search results render in-flow inside the sheet (a floating card
 * under a floating card reads broken); same for the drawer search */
.handheld-header .search-mobile .fgh-search-panel,
.fgh-drawer__search .fgh-search-panel {
	position: static;
	margin-top: 10px;
	max-height: 48vh;
	box-shadow: none;
}

/* OFF-CANVAS DRAWER SEARCH - header.js clones the handheld form into the
 * drawer under its sticky head so mobile users get search without hunting
 * for the icon (field chrome comes from the shared rules above, since the
 * drawer lives inside .handheld-header.site-header). */
.fgh-drawer__search {
	flex: none;
	padding: 14px 18px 4px;
}

/* ------------------------------------------------------------------ *
 * 5b) LIVE-SEARCH RESULTS PANEL - flat card fed by header.js from the
 *     faragiri/v1/search REST route.
 * ------------------------------------------------------------------ */
.fgh-search-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 60;
	max-height: 70vh;
	overflow-y: auto;
	border-radius: var(--fgh-r-panel);
	border: 1px solid var(--fgh-line);
	background-color: var(--fg-header);
	box-shadow: var(--fgh-shadow);
}

.fgh-search-panel__state {
	padding: 18px 16px;
	text-align: center;
	font-size: 13px;
	color: color-mix(in srgb, var(--fg-header-ink) 62%, transparent);
}

.fgh-search-panel__list {
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fgh-search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--fgh-r-ctl);
	text-decoration: none;
	color: var(--fg-header-ink);
	transition: background-color var(--fgh-fade);
}

.fgh-search-item:hover,
.fgh-search-item.is-active {
	background-color: var(--fgh-fill-hover);
}

/* !important + the html[data-fgri-theme] prefix on purpose: the
 * Customizer "Additional CSS" (#wp-custom-css, loads last) has a GLOBAL
 * "img, figure { width:min(100%,600px)!important; height:auto!important }"
 * that blew these thumbs up to full panel width. */
html[data-fgri-theme] .fgh-search-panel .fgh-search-item__thumb {
	flex: none;
	width: 44px !important;
	height: 44px !important;
	border-radius: var(--fgh-r-ctl);
	object-fit: cover;
	background: var(--fgh-fill-hover);
}

span.fgh-search-item__thumb {
	display: block;
	background: var(--fgh-accent-fill);
}

.fgh-search-item__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Measured on the live site: something in the theme's compiled CSS paints
 * spans inside the header a flat rgba(255,255,255,.7) - the result titles
 * and type badges inherited it in EVERY mode, which is merely dim on the
 * dark header but white-on-white (invisible) once Light re-points
 * --fg-header to #ffffff. State the colours explicitly, prefixed +
 * !important so the panel is readable in all 8 modes. */
html[data-fgri-theme] .fgh-search-panel .fgh-search-item__title {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--fg-header-ink) !important;
}

html[data-fgri-theme] .fgh-search-panel .fgh-search-item__badge {
	align-self: flex-start;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--fgh-accent-fill);
	color: var(--fg-accent) !important;
}

.fgh-search-panel__all {
	display: block;
	text-align: center;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-accent);
	text-decoration: none;
	border-top: 1px solid var(--fgh-line-soft);
	transition: background-color var(--fgh-fade);
}

.fgh-search-panel__all:hover {
	background-color: var(--fgh-fill-hover);
}

/* The same Customizer-global "img{width:min(100%,600px)!important}" also
 * blows the 26px admin-bar avatar up to a giant square for logged-in
 * users - pin it back. */
#wpadminbar .avatar {
	width: 26px !important;
	height: 26px !important;
}

/* ------------------------------------------------------------------ *
 * 6) UPLOAD CTA - flat accent button, same radius as everything else.
 * ------------------------------------------------------------------ */
.site-header__upload {
	margin: 0 6px;
}

.site-header__upload--link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--fgh-ctl);
	padding: 0 16px !important;
	border-radius: var(--fgh-r-ctl);
	background: var(--fg-accent) !important;
	color: var(--fg-accent-ink) !important;
	font-weight: 600;
	box-shadow: none;
	transition: background-color var(--fgh-fade);
}

.site-header__upload--link::after {
	content: none;
}

.site-header__upload--link:hover {
	background: var(--fg-accent-2) !important;
}

.site-header__upload--icon svg,
.site-header__upload--icon svg path {
	fill: var(--fg-accent-ink) !important;
}

/* ------------------------------------------------------------------ *
 * 7) ICON CHIPS - the single shared control. Notification, account,
 *    handheld search toggle, hamburger and the theme-switcher trigger
 *    (styled in theme-switcher.css to the same spec) are all one size,
 *    one radius, one hover fill.
 * ------------------------------------------------------------------ */
.site-header__header-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-header__header-icons > .fgts-trigger {
	margin: 0;
}

/* Every chip wears the SAME resting skin as the search field - --fgh-fill
 * over a --fgh-line hairline, --fgh-r-ctl corners. That is what makes the
 * cluster and the search box read as one set instead of "an outlined box
 * plus some naked icons"; .fgts-trigger in theme-switcher.css copies these
 * exact three values. */
.site-header__notification--link,
.site-header__user-account--link,
.handheld-header .site-header__search .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fgh-ctl);
	height: var(--fgh-ctl);
	border-radius: var(--fgh-r-ctl);
	border: 1px solid var(--fgh-line);
	background-color: var(--fgh-fill);
	transition: background-color var(--fgh-fade), border-color var(--fgh-fade);
}

.site-header__notification--link:hover,
.site-header__user-account--link:hover,
.handheld-header .site-header__search .dropdown-toggle:hover,
.handheld-header .site-header__search .dropdown-toggle[aria-expanded="true"] {
	background-color: var(--fgh-fill-hover);
	border-color: color-mix(in srgb, var(--fg-header-ink) 24%, transparent);
}

.site-header__notification--icon svg,
.site-header__notification--icon svg path {
	fill: var(--fg-header-ink) !important;
}

.site-header__user-account--link img.avatar {
	border-radius: 8px;
	border: 1px solid var(--fgh-line);
}

/* ------------------------------------------------------------------ *
 * 8) HANDHELD HEADER LAYOUT
 * ------------------------------------------------------------------ */
.handheld-header .site-header__inner {
	min-height: 58px;
}

.handheld-header .site-header__left,
.handheld-header .site-header__right {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ------------------------------------------------------------------ *
 * 9) OFF-CANVAS TOGGLER - the same chip as §7, with a CSS hamburger
 *    that folds into an X (the theme's inline SVG is hidden; the outer
 *    two bars are ::before/::after, the middle one is .fgh-bar-mid,
 *    injected by header.js).
 * ------------------------------------------------------------------ */
.site-header__offcanvas--toggler {
	position: relative;
	width: var(--fgh-ctl);
	height: var(--fgh-ctl);
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--fgh-r-ctl);
	border: 1px solid var(--fgh-line);
	background-color: var(--fgh-fill);
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color var(--fgh-fade), border-color var(--fgh-fade);
}

.site-header__offcanvas--toggler:hover,
.site-header__offcanvas.toggled .site-header__offcanvas--toggler {
	background-color: var(--fgh-fill-hover);
	border-color: color-mix(in srgb, var(--fg-header-ink) 24%, transparent);
}

.site-header__offcanvas--toggler svg {
	display: none;
}

.site-header__offcanvas--toggler::before,
.site-header__offcanvas--toggler::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	height: 2px;
	border-radius: 2px;
	background: var(--fg-header-ink);
	transition: transform .2s ease, top .2s ease, bottom .2s ease;
}

.site-header__offcanvas--toggler::before { top: 13px; }
.site-header__offcanvas--toggler::after  { bottom: 13px; }

.site-header__offcanvas--toggler span.fgh-bar-mid {
	position: absolute;
	left: 11px;
	right: 11px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--fg-header-ink);
	transition: opacity .12s ease;
}

.site-header__offcanvas.toggled .site-header__offcanvas--toggler::before {
	top: 50%;
	transform: translateY(-1px) rotate(45deg);
}

.site-header__offcanvas.toggled .site-header__offcanvas--toggler::after {
	bottom: 50%;
	transform: translateY(1px) rotate(-45deg);
}

.site-header__offcanvas.toggled .site-header__offcanvas--toggler span.fgh-bar-mid {
	opacity: 0;
}

/* ------------------------------------------------------------------ *
 * 10) OFF-CANVAS DRAWER - flat panel opening from the RTL start (right)
 *     edge, to match the toggler's own position.
 * ------------------------------------------------------------------ */
.offcanvas-drawer {
	background: rgba(4, 8, 20, .55);
}

.offcanvas-collapse {
	left: auto !important;
	right: 0 !important;
	width: min(86vw, 340px);
	padding: 0 !important;
	transform: translate3d(min(86vw, 340px), 0, 0) !important;
	border-left: 1px solid var(--fgh-line);
	box-shadow: none;
	display: flex;
	flex-direction: column;
}

.site-header__offcanvas.toggled .offcanvas-collapse {
	transform: none !important;
}

@media (min-width: 768px) {
	.offcanvas-collapse {
		width: 360px;
		transform: translate3d(360px, 0, 0) !important;
	}
}

.fgh-drawer__head {
	position: sticky;
	top: 0;
	z-index: 2;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--fgh-line);
	background: var(--fg-header);
}

.fgh-drawer__close,
.fgh-sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	/* !important: the theme's generic button padding otherwise eats the
	 * whole 34px content box, and the X svg (a flex item with no intrinsic
	 * size) gets squeezed to 0 width - an empty circle. */
	padding: 0 !important;
	border: 1px solid var(--fgh-line);
	border-radius: var(--fgh-r-ctl);
	background: transparent;
	color: var(--fg-header-ink);
	cursor: pointer;
	transition: background-color var(--fgh-fade), color var(--fgh-fade);
}

.fgh-sheet__close {
	width: 44px;
	height: 44px;
}

.fgh-drawer__close:hover,
.fgh-drawer__close:focus-visible,
.fgh-sheet__close:hover,
.fgh-sheet__close:focus-visible {
	background-color: var(--fgh-fill-hover);
	color: var(--fg-accent);
}

.fgh-drawer__close svg,
.fgh-sheet__close svg {
	flex: none;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.fgh-sheet__close svg {
	width: 18px;
	height: 18px;
}

.site_header__offcanvas-nav {
	padding: 8px 16px 28px;
	flex: 1 1 auto;
}

.offcanvas-nav {
	margin: 0 !important;
}

.offcanvas-nav .menu-item {
	position: relative;
	border-bottom: 1px solid var(--fgh-line-soft);
}

.offcanvas-nav .menu-item:last-child {
	border-bottom: 0;
}

.offcanvas-nav .menu-item > a {
	position: relative;
	padding: 13px 14px !important;
	border-radius: var(--fgh-r-ctl);
	font-weight: 500;
	transition: background-color var(--fgh-fade), color var(--fgh-fade);
}

.offcanvas-nav .menu-item > a:hover,
.offcanvas-nav .menu-item > a:focus-visible,
.offcanvas-nav .menu-item.current-menu-item > a {
	background-color: var(--fgh-fill-hover);
}

.offcanvas-nav .dropdown-toggle::after {
	color: color-mix(in srgb, var(--fg-header-ink) 55%, transparent);
	transition: transform .2s ease;
}

/* Real, confirmed root cause: SimpleBar.js wraps the off-canvas nav in a
 * .simplebar-content div at runtime, and Faragiri-child/style.css
 * (compiled, pre-existing, loads AFTER this file) already has
 *   .simplebar-content .dropdown-menu{background-color:#ffffffc9!important}
 * - same specificity as a bare ".offcanvas-nav .dropdown-menu", so on the
 * cascade tie it wins by source order: a translucent WHITE box with text
 * forced light by theme-switcher-core.css → unreadable in every dark
 * mode. Out-specify it with a 3-class chain so this wins regardless of
 * stylesheet print order. */
.site-header__offcanvas .offcanvas-nav .dropdown-menu {
	padding: 4px !important;
	margin: 0 0 8px !important;
	border: 1px solid var(--fgh-line-soft);
	background-color: var(--fgh-fill) !important;
	/* style.css has "ul.dropdown-menu.show{border-radius:0!important}" - * needs !important here too or the open submenu goes square. */
	border-radius: var(--fgh-r-ctl) !important;
	box-shadow: none !important;
}

.site-header__offcanvas .offcanvas-nav .dropdown-menu,
.site-header__offcanvas .offcanvas-nav .dropdown-menu a {
	color: var(--fg-header-ink) !important;
}

.site-header__offcanvas .offcanvas-nav .dropdown-menu .menu-item {
	border-bottom: 0;
}

.site-header__offcanvas .offcanvas-nav .dropdown-menu a {
	padding: 10px 12px !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
}

/* the "مشاهده همه ..." hub row injected by mu-plugin faragiri-nav-seo.php
 * - the only real link to the category hub from this menu, so it reads
 * as the submenu's primary action */
.site-header__offcanvas .offcanvas-nav .dropdown-menu .fgnav-hub > a {
	font-weight: 600;
	color: var(--fg-accent) !important;
	background-color: var(--fgh-accent-fill);
	margin-bottom: 4px;
}

/* ------------------------------------------------------------------ *
 * 11) ACCESSIBILITY + MOTION SAFETY
 * ------------------------------------------------------------------ */
.site-header a:focus-visible,
.site-header button:focus-visible,
.offcanvas-nav a:focus-visible {
	outline: 2px solid var(--fg-accent);
	outline-offset: 2px;
	border-radius: var(--fgh-r-ctl);
}

@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.offcanvas-collapse,
	.offcanvas-nav .menu-item > a {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 12) LIGHT MODE - the header turns white, so the neutral-dark shadow
 *     above reads muddy. Everything else already adapts via the tokens.
 * ------------------------------------------------------------------ */
html[data-fgri-theme="light"] {
	--fgh-shadow: 0 10px 28px -18px rgba(20, 32, 60, .22);
}

html[data-fgri-theme="light"] .offcanvas-drawer {
	background: rgba(20, 32, 60, .3);
}