/* =====================================================================
 * Faragiri — Header redesign (desktop "header-v2" + handheld/off-canvas)
 * Reads the theme-switcher tokens (--fg-header, --fg-header-ink, --fg-accent,
 * --fg-accent-2, --fg-accent-soft, --fg-border, --fg-surface, --fg-card) so
 * every rule below repaints correctly across all 8 colour modes with no
 * per-mode duplication. Local --fgh-* tokens only exist for effects the
 * global tokens don't cover (shadows, glass tint) and are re-pointed once
 * for Light mode at the bottom of this file.
 * ===================================================================== */

:root {
	--fgh-shadow: 0 18px 40px -22px rgba(4, 8, 20, .65);
	--fgh-glass-line: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 14%, transparent);
	--fgh-glass-line-2: color-mix(in srgb, var(--fg-header-ink, #eef1f7) 7%, transparent);
	--fgh-hover: color-mix(in srgb, var(--fg-accent) 14%, transparent);
	--fgh-hover-strong: color-mix(in srgb, var(--fg-accent) 26%, transparent);
}

/* ------------------------------------------------------------------ *
 * 1) HEADER SHELL — desktop + handheld shared chrome
 * ------------------------------------------------------------------ */
.site-header.header-v2,
.handheld-header {
	/* .site-header already has position:relative + z-index:3, its own
	 * stacking context — no isolation needed for the ::before rule below. */
	border-bottom: 1px solid var(--fgh-glass-line);
	transition: box-shadow .35s ease, backdrop-filter .35s ease, padding .25s ease;
}

/* signature top rule — a slim animated gradient hairline unique to Faragiri */
.site-header.header-v2::before,
.handheld-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	z-index: 2;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--fg-accent) 20%,
		var(--fg-accent-2) 50%,
		var(--fg-accent) 80%,
		transparent 100%);
	background-size: 200% 100%;
	opacity: .9;
	animation: fgh-sheen 7s linear infinite;
}

@keyframes fgh-sheen {
	0%   { background-position: 0% 0; }
	100% { background-position: -200% 0; }
}

/* scrolled / sticky state — glass blur + deeper shadow */
.sticky-wrapper .stick-this.stuck.header-v2,
.sticky-wrapper .handheld-stick-this.stuck {
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	box-shadow: var(--fgh-shadow);
	background-color: color-mix(in srgb, var(--fg-header) 92%, transparent) !important;
}

.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). Center it now that
 * a real logo/wordmark exists (see fgh_logo() in the mu-plugin). */
.header-v2 .site-header__inner {
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * 2) LOGO / WORDMARK
 * ------------------------------------------------------------------ */
.fgh-logo__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.fgh-logo__mark {
	display: flex;
	flex: none;
	line-height: 0;
	filter: drop-shadow(0 4px 10px var(--fgh-hover-strong));
	transition: transform .3s ease;
}

.fgh-logo__link:hover .fgh-logo__mark {
	transform: rotate(-6deg) scale(1.05);
}

.fgh-logo--custom {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fgh-logo--custom .custom-logo-link {
	display: flex;
	align-items: center;
	max-width: none;
	filter: drop-shadow(0 4px 10px var(--fgh-hover-strong));
	transition: transform .3s ease;
}

.fgh-logo--custom .custom-logo-link:hover {
	transform: rotate(-6deg) scale(1.05);
}

.fgh-logo--custom img.custom-logo {
	max-height: 32px;
	width: auto;
	display: block;
	border-radius: 8px;
}

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

.fgh-logo__text {
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.01em;
	line-height: 1;
	background: linear-gradient(90deg, var(--fg-header-ink), var(--fg-accent-2) 130%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
}

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

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

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

/* ------------------------------------------------------------------ *
 * 3) DESKTOP PRIMARY NAV — pill hover + animated 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;
		transition: color .2s ease;
	}

	.site_header__primary-nav .nav > li > a::after {
		content: "";
		position: absolute;
		left: 18px;
		right: 18px;
		bottom: 10px;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--fg-accent), var(--fg-accent-2));
		transform: scaleX(0);
		opacity: 0;
		transition: transform .25s ease, opacity .25s ease;
	}

	.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 {
		transform: scaleX(1);
		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 and reaching it meant a diagonal across the
	 * neighbouring triggers (which swap the menu mid-travel). 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 the panel to the sum of its 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 the panel 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) MEGA-MENU / DROPDOWNS — floating glass cards
 *    (background-color is forced via theme-switcher-core.css !important —
 *    we only add background-image + shape/shadow/motion on top of it.)
 * ------------------------------------------------------------------ */
.site-header .sub-menu,
.site-header__user-account > .sub-menu {
	/* The 10px "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 border keeps the
	 * same visual offset but stays part of the submenu's hover hit area.
	 * background-clip stops the theme-switcher's forced background-color
	 * from painting into the transparent gap; the inset shadow re-draws the
	 * top hairline the transparent border-top swallows. Top radius is
	 * border-box: 26 - 10 gap = the same 16px visible corner as before. */
	margin-top: 0 !important;
	border: 1px solid var(--fgh-glass-line);
	border-top: 10px solid transparent;
	background-clip: padding-box !important;
	border-radius: 26px 26px 16px 16px !important;
	box-shadow: var(--fgh-shadow), inset 0 1px 0 var(--fgh-glass-line);
	background-image:
		radial-gradient(120% 160% at 100% -20%, var(--fgh-hover), transparent 60%) !important;
	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 as above, mega-menu proportions (34-14=20) */
	margin-top: 0 !important;
	border-top: 14px solid transparent;
	border-radius: 34px 34px 20px 20px !important;
}

.yamm-content h2.nav-title,
.yamm-content ul li.nav-title {
	position: relative;
	padding-right: 14px;
}

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

.site_header__primary-nav .sub-menu > li > a,
.site_header__user-account > .sub-menu > li > a {
	border-radius: 10px;
	margin: 2px 6px;
	width: calc(100% - 12px) !important;
	transition: background-color .18s ease, padding-right .18s ease;
}

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

/* ------------------------------------------------------------------ *
 * 5) SEARCH — premium glass pill (desktop + handheld 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
 * (0,3,1) — it used to beat this file's (0,3,0) gradient and left the
 * submit as a bare floating magnifier (the "unfinished" look). The
 * prefix lifts these rules to (0,4,1)+ 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 dropdown) in every mode.
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .site-header .search-form.masvideos-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: 46px;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--fg-header-ink) 10%, transparent),
			color-mix(in srgb, var(--fg-header-ink) 6%, transparent)) padding-box;
	border: 1px solid var(--fgh-glass-line);
	border-radius: 999px;
	padding: 4px;
	padding-inline-start: 6px;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg-header-ink) 8%, transparent);
	transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

html[data-fgri-theme] .site-header .search-form.masvideos-search:hover {
	border-color: color-mix(in srgb, var(--fg-header-ink) 24%, transparent);
}

html[data-fgri-theme] .site-header .search-form.masvideos-search:focus-within {
	border-color: color-mix(in srgb, var(--fg-accent) 60%, transparent);
	box-shadow:
		0 0 0 4px var(--fgh-hover),
		0 12px 30px -18px color-mix(in srgb, var(--fg-accent) 45%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--fg-header-ink) 8%, transparent);
}

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;
	box-shadow: none !important;
	outline: 0 !important;
	color: var(--fg-header-ink) !important;
	padding: 8px 14px !important;
	font-size: 15px;
	line-height: 1.4;
}

/* the native webkit "clear" X fights the custom pill — 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) 55%, transparent) !important;
}

/* gradient circular submit — resurrected from under core-css §18 */
html[data-fgri-theme] .site-header .search-form .search-submit {
	flex: none;
	width: 38px;
	height: 38px;
	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: 50% !important;
	background: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)) !important;
	color: var(--fg-accent-ink) !important;
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--fg-accent) 65%, transparent) !important;
	cursor: pointer;
	transition: transform .2s ease, filter .2s ease;
}

html[data-fgri-theme] .site-header .search-form .search-submit:hover,
html[data-fgri-theme] .site-header .search-form .search-submit:focus-visible {
	transform: scale(1.07);
	filter: brightness(1.08);
}

html[data-fgri-theme] .site-header .search-form .search-submit:active {
	transform: scale(.96);
}

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-center in a circle */
}

/* .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
 * (.site-header__search, .site_header__primary-nav) stacked on top of each
 * other 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 (it used to be a
	 * fixed 230px pill lost in the empty middle of the header).
	 * order:-1 puts the nav at the row start (right, RTL) so the search
	 * pill sits at the inline-end — LEFT of the menu — instead of wedged
	 * between the logo and 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: 520px;
	}

	.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 dropdown trigger → matches icon-chip language (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: 19px;
	height: 19px;
	fill: var(--fg-header-ink) !important;
}

/* HANDHELD SEARCH SHEET — the old Bootstrap dropdown was a ~220px box
 * glued to the icon, dark navy (child style.css hardcodes rgb(12,14,23) on
 * .search-mobileinner.show) in every mode incl. Light. Re-anchor it to the
 * header itself (.handheld-header IS .site-header → position:relative) as
 * a full-width glass sheet. !important on the box metrics also defeats the
 * Popper.js inline position/transform Bootstrap 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: 18px !important;
	border: 1px solid var(--fgh-glass-line) !important;
	background-color: var(--fg-header) !important;
	background-image: radial-gradient(140% 140% at 50% 0%, var(--fgh-hover), transparent 65%) !important;
	box-shadow: var(--fgh-shadow) !important;
	z-index: 70;
}

html[data-fgri-theme] .handheld-header ul.dropdown-menu.search-mobile.search-mobileinner.show {
	animation: fgh-search-panel-in .18s ease both;
}

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

/* sheet row = pill + 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 pill) */
.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 pill even though the results panel lands between
 * them in DOM order (enhanceSearch appends it to the li after the button) */
.fgh-sheet__row .fgh-sheet__close {
	order: 1;
}

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

.fgh-sheet__close {
	flex: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--fgh-glass-line);
	border-radius: 50%;
	background: color-mix(in srgb, var(--fg-header-ink) 8%, transparent);
	color: var(--fg-header-ink);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.fgh-sheet__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

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

/* 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: 50px;
}

/* live-search results render in-flow inside the sheet (a second 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;
	animation: 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 tiny icon (pill 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 — glass dropdown fed by header.js from
 *     the faragiri/v1/search REST route (thumbnails, type badges, a
 *     "view all results" footer, keyboard nav via .is-active).
 * ------------------------------------------------------------------ */
.fgh-search-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	z-index: 60;
	max-height: 70vh;
	overflow-y: auto;
	border-radius: 16px;
	border: 1px solid var(--fgh-glass-line);
	background-color: var(--fg-header);
	background-image: radial-gradient(120% 160% at 100% -20%, var(--fgh-hover), transparent 60%);
	box-shadow: var(--fgh-shadow);
	animation: fgh-search-panel-in .15s ease both;
}

@keyframes fgh-search-panel-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

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

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

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

.fgh-search-item:hover,
.fgh-search-item.is-active {
	background-color: var(--fgh-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: 46px !important;
	height: 46px !important;
	border-radius: 10px;
	object-fit: cover;
	background: color-mix(in srgb, var(--fg-header-ink) 12%, transparent);
}

span.fgh-search-item__thumb {
	display: block;
	background-image: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2));
	opacity: .5;
}

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

.fgh-search-item__title {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fgh-search-item__badge {
	align-self: flex-start;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--fgh-hover);
	color: var(--fg-accent);
}

.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-glass-line-2);
}

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

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

/* ------------------------------------------------------------------ *
 * 6) UPLOAD CTA — turn the plain text link into a gradient pill button
 * ------------------------------------------------------------------ */
.site-header__upload {
	margin: 0 6px;
}

.site-header__upload--link {
	align-items: center;
	gap: 8px;
	padding: 9px 18px !important;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)) !important;
	color: var(--fg-accent-ink) !important;
	font-weight: 600;
	box-shadow: 0 10px 24px -12px var(--fgh-hover-strong);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.site-header__upload--link:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 14px 28px -12px var(--fgh-hover-strong);
}

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

/* ------------------------------------------------------------------ *
 * 7) ICON CLUSTER — notification / account / theme-switcher orb
 *    unified into rounded "chip" buttons (doesn't restyle .fgts-trigger's
 *    own painted shape, only its spacing inside the cluster).
 * ------------------------------------------------------------------ */
.site-header__header-icons {
	display: flex;
	align-items: center;
	gap: 6px;
}

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

.site-header__notification--link,
.handheld-header .site-header__search .dropdown-toggle,
.site-header__user-account--link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background-color .2s ease, transform .2s ease;
}

.handheld-header .site-header__search .dropdown-toggle,
.handheld-header .site-header__user-account--link {
	width: 38px;
	height: 38px;
}

.site-header__notification--link:hover,
.handheld-header .site-header__search .dropdown-toggle:hover,
.site-header__user-account--link:hover {
	background-color: var(--fgh-hover);
	transform: translateY(-1px);
}

.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: 50%;
	border: 2px solid transparent;
	background:
		linear-gradient(var(--fg-header), var(--fg-header)) padding-box,
		linear-gradient(135deg, var(--fg-accent), var(--fg-accent-2)) border-box;
	transition: transform .2s ease;
}

.site-header__user-account--link:hover img.avatar {
	transform: scale(1.06);
}

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

.handheld-header .site-header__left,
.handheld-header .site-header__right {
	gap: 4px;
}

/* ------------------------------------------------------------------ *
 * 9) OFF-CANVAS TOGGLER — custom animated hamburger → X (CSS only,
 *    the parent theme's inline SVG is hidden and 3 bars are drawn with
 *    the button's own background + two pseudo-elements).
 * ------------------------------------------------------------------ */
.site-header__offcanvas--toggler {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease;
}

.site-header__offcanvas--toggler:hover {
	background-color: var(--fgh-hover);
}

.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 .28s ease, top .28s ease, bottom .28s ease, opacity .2s ease;
}

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

.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 .2s ease, transform .2s 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;
	transform: scaleX(0);
}

/* ------------------------------------------------------------------ *
 * 10) OFF-CANVAS DRAWER — full redesign, opens from the RTL start
 *     (right) edge to match the toggler's own position.
 * ------------------------------------------------------------------ */
.offcanvas-drawer {
	background: color-mix(in srgb, var(--fg-bg-2, #05060a) 78%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.offcanvas-collapse {
	left: auto !important;
	right: 0 !important;
	width: min(86vw, 340px);
	padding: 0 !important;
	transform: translate3d(min(86vw, 340px), 0, 0) !important;
	box-shadow: -30px 0 60px -30px rgba(4, 8, 20, .7);
	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: 18px 20px;
	border-bottom: 1px solid var(--fgh-glass-line);
	background: var(--fg-header);
	background-image: linear-gradient(135deg, var(--fgh-hover), transparent 70%);
}

.fgh-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	/* !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 grey circle. */
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fg-header-ink) 10%, transparent);
	color: var(--fg-header-ink);
	flex: none;
	transition: background-color .2s ease, transform .2s ease;
}

.fgh-drawer__close svg {
	flex: none;
}

.fgh-drawer__close:hover {
	background-color: var(--fgh-hover-strong);
	transform: rotate(90deg);
}

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

.site_header__offcanvas-nav {
	padding: 10px 24px 28px;
	flex: 1 1 auto;
}

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

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

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

.offcanvas-nav .menu-item > a {
	position: relative;
	padding: 14px 16px !important;
	border-radius: 12px;
	font-weight: 500;
	transition: background-color .2s ease, padding-right .2s ease, color .2s ease;
}

.offcanvas-nav .menu-item > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--fg-accent), var(--fg-accent-2));
	transform: scaleY(0);
	transition: transform .2s ease;
}

.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-hover);
	padding-right: 24px !important;
}

.offcanvas-nav .menu-item > a:hover::before,
.offcanvas-nav .menu-item > a:focus-visible::before,
.offcanvas-nav .menu-item.current-menu-item > a::before {
	transform: scaleY(1);
}

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

/* Real, confirmed root cause: SimpleBar.js wraps the offcanvas 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 (2 classes) as a bare ".offcanvas-nav .dropdown-menu"
 * rule, so on the cascade tie it wins by being later in source order: a
 * translucent WHITE box, with text forced light by theme-switcher-core.css
 * (.offcanvas-drawer a → var(--fg-header-ink)) — light-on-light, unreadable
 * in every dark-based 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-right: 10px !important;
	border-right: 1px dashed var(--fgh-glass-line);
	margin-right: 16px !important;
	background-color: color-mix(in srgb, var(--fg-header) 90%, var(--fg-header-ink) 10%) !important;
	/* style.css has "ul.dropdown-menu.show{border-radius:0!important}" at (0,2,1) —
	 * needs !important here too or the open submenu goes square-cornered. */
	border-radius: 10px !important;
}

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

/* staggered entrance for the visible items when the drawer opens */
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item {
	animation: fgh-item-in .38s ease both;
}

.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(1)  { animation-delay: .04s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(2)  { animation-delay: .08s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(3)  { animation-delay: .12s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(4)  { animation-delay: .16s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(5)  { animation-delay: .2s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(6)  { animation-delay: .24s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(7)  { animation-delay: .28s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(8)  { animation-delay: .32s; }
.site-header__offcanvas.toggled .offcanvas-nav > .menu-item:nth-child(n+9) { animation-delay: .36s; }

@keyframes fgh-item-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------------ *
 * 11) MOTION + ACCESSIBILITY SAFETY
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.site-header.header-v2::before,
	.handheld-header::before {
		animation: none;
	}

	.site-header__offcanvas--toggler::before,
	.site-header__offcanvas--toggler::after,
	.site-header__offcanvas--toggler span.fgh-bar-mid,
	.offcanvas-collapse,
	.offcanvas-nav > .menu-item,
	.site-header .sub-menu {
		animation: none !important;
		transition: none !important;
	}
}

.site-header a:focus-visible,
.offcanvas-nav a:focus-visible {
	outline: 2px solid var(--fg-accent);
	outline-offset: -2px;
	border-radius: 8px;
}

/* ------------------------------------------------------------------ *
 * 12) LIGHT MODE — softer, neutral shadow so glass panels read
 *     correctly against the white header (accent-tinted shadows read
 *     "muddy" on white; every other rule above already adapts via the
 *     shared tokens).
 * ------------------------------------------------------------------ */
html[data-fgri-theme="light"] {
	--fgh-shadow: 0 18px 40px -22px rgba(20, 32, 60, .28);
}

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

html[data-fgri-theme="light"] .offcanvas-collapse {
	box-shadow: -30px 0 60px -30px rgba(20, 32, 60, .28);
}

/* ------------------------------------------------------------------ *
 * 13) POLISH PASS (2026-07-02) — scroll glass, aurora bloom, springy
 *     micro-interactions. Token-driven (--fg-*) so all 8 colour modes
 *     keep working; everything motion-based is disabled again in the
 *     prefers-reduced-motion block at the end of this section.
 * ------------------------------------------------------------------ */

/* aurora bloom — two soft accent glows breathing behind the chrome.
 * inset:0 (no bleed: the header must NOT get overflow:hidden, the mega
 * menus hang out of it), opacity-only animation so the hit-testing and
 * paint area never move. Sits at z-index:0, content row is z-index:1. */
.site-header.header-v2::after,
.handheld-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(460px 150% at 12% -40%, color-mix(in srgb, var(--fg-accent) 14%, transparent), transparent 70%),
		radial-gradient(460px 150% at 88% 140%, color-mix(in srgb, var(--fg-accent-2) 11%, transparent), transparent 70%);
	animation: fgh-aurora 14s ease-in-out infinite alternate;
}

@keyframes fgh-aurora {
	from { opacity: .45; }
	to   { opacity: 1; }
}

/* the theme ships a stick-this/.stuck sticky mechanism that never engages
 * — own it with plain CSS sticky (verified: no overflow ancestors to break
 * it). 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). Deep glass: translucent tokenized bg
 * + blur + accent-tinted shadow + warmer hairline. Out-specifies the
 * core-css "background-color: var(--fg-header) !important" on classes.
 * DESKTOP ONLY gets backdrop-filter: any backdrop-filter creates a
 * containing block for position:fixed descendants, and the handheld
 * header contains the fixed offcanvas drawer — blurring it would break
 * the drawer. The handheld header keeps its solid skin + shadow. */
html.fgh-scrolled .site-header.header-v2 {
	backdrop-filter: saturate(170%) blur(18px);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
	background-color: color-mix(in srgb, var(--fg-header) 84%, transparent) !important;
}

html.fgh-scrolled .site-header.header-v2,
html.fgh-scrolled .handheld-header {
	box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--fg-accent) 45%, rgba(2, 6, 18, .6));
	border-bottom-color: color-mix(in srgb, var(--fg-accent) 28%, var(--fgh-glass-line));
}

/* nav links — tiny spring lift; the gradient underline gets a glow so the
 * hover cue reads instantly now that the pill background is gone */
@media (min-width: 1200px) {
	.site_header__primary-nav .nav > li > a {
		transition: color .2s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1);
	}

	.site_header__primary-nav .nav > li > a:hover,
	.site_header__primary-nav .nav > li > a:focus-visible {
		transform: translateY(-1px);
	}

	.site_header__primary-nav .nav > li > a::after {
		filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--fg-accent) 65%, transparent));
		transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .25s ease;
	}

	/* mega menu — pop-in from the trigger + per-column item cascade.
	 * translateY only (no scale): the hover hit box must stay predictable
	 * for the transparent-border bridge, and 8px < the 14px bridge. */
	.site_header__primary-nav .nav > li.menu-item-has-children > .sub-menu {
		transform-origin: top right;
		animation: fgh-menu-in .3s cubic-bezier(.22, .9, .3, 1) both;
	}

	.site-header .sub-menu .yamm-content li {
		animation: fgh-menu-item .34s ease both;
	}

	.site-header .sub-menu .yamm-content li:nth-child(1) { animation-delay: .04s; }
	.site-header .sub-menu .yamm-content li:nth-child(2) { animation-delay: .08s; }
	.site-header .sub-menu .yamm-content li:nth-child(3) { animation-delay: .12s; }
	.site-header .sub-menu .yamm-content li:nth-child(4) { animation-delay: .16s; }
	.site-header .sub-menu .yamm-content li:nth-child(n+5) { animation-delay: .2s; }
}

@keyframes fgh-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes fgh-menu-item {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: none; }
}

/* search pill — hover/focus lift (its results panel is positioned
 * against the form itself, so the transform carries it along) */
html[data-fgri-theme] .site-header .search-form.masvideos-search {
	transition: box-shadow .25s ease, border-color .25s ease,
		background-color .25s ease, transform .25s ease;
}

html[data-fgri-theme] .site-header .search-form.masvideos-search:hover,
html[data-fgri-theme] .site-header .search-form.masvideos-search:focus-within {
	transform: translateY(-1px);
}

html[data-fgri-theme] .site-header .search-form .search-field {
	caret-color: var(--fg-accent);
}

/* upload CTA — sheen sweep on hover */
.site-header__upload--link {
	position: relative;
	overflow: hidden;
}

.site-header__upload--link::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform: translateX(-140%) skewX(-18deg);
	background: linear-gradient(105deg,
		transparent 38%,
		color-mix(in srgb, var(--fg-accent-ink) 45%, transparent) 50%,
		transparent 62%);
	transition: transform .55s ease;
}

.site-header__upload--link:hover::after {
	transform: translateX(140%) skewX(-18deg);
}

/* icon cluster chips — springy pop */
.site-header__header-icons a,
.site-header__header-icons button {
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}

.site-header__header-icons a:hover,
.site-header__header-icons button:hover {
	transform: translateY(-2px);
}

/* wordmark — gradient slides toward the accent on hover */
.fgh-logo__text {
	background-size: 200% 100%;
	transition: background-position .5s ease;
}

.site-header__logo:hover .fgh-logo__text {
	background-position: 90% 0;
}

@media (prefers-reduced-motion: reduce) {
	.site-header.header-v2::after,
	.handheld-header::after,
	.site_header__primary-nav .nav > li.menu-item-has-children > .sub-menu,
	.site-header .sub-menu .yamm-content li,
	.site-header__upload--link::after {
		animation: none !important;
		transition: none !important;
	}

	.site_header__primary-nav .nav > li > a,
	.site-header__header-icons a,
	.site-header__header-icons button,
	html[data-fgri-theme] .site-header .search-form.masvideos-search {
		transition: none !important;
		transform: none !important;
	}
}