/*
 * Floating glass header redesign for MediaFoundry child theme.
 * Scoped to regular top header layouts to avoid altering overlay/lateral panels.
 */

:root {
	--mf-header-max-width: 1200px;
	--mf-header-gutter: 16px;
	--mf-header-offset: 8px;
	--mf-header-radius: 20px;
	--mf-header-height: 76px;
	--mf-header-mobile-height: 62px;
	--mf-header-bg: rgba(0, 0, 0, 0.55);
	--mf-header-border: rgba(255, 255, 255, 0.08);
	--mf-header-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	--mf-header-fg: rgba(255, 255, 255, 0.9);
	--mf-header-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--vision-header-safe: calc(var(--mf-header-height) + var(--mf-header-offset) + 18px);
	--vision-header-safe-gap: var(--vision-header-safe);
}

/* Single work only: force immediate hero text render (no delayed reveal). */
body.single-work #hero :is(.wow, .animated, .aos-init, .aos-animate, .elementor-invisible) {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	animation-delay: 0s !important;
	transition: none !important;
	transition-delay: 0s !important;
}

/*
 * Parent theme delays hero reveal using .post-title/.post-meta-container transitions.
 * Neutralize this only on single work hero so H1 + intro are painted immediately.
 */
body.single-work #hero :is(
	h1,
	.entry-title,
	.post-title,
	.post-title > span,
	.post-meta-container,
	.post-secondary-meta-container,
	.post-meta-container p,
	.post-secondary-meta-container p,
	.subheading,
	.description,
	.work-excerpt-container,
	.entry-excerpt
) {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	transition-delay: 0s !important;
	animation: none !important;
	animation-delay: 0s !important;
}

body.single-work #hero #hero-scroll-down-arrow {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	transition-delay: 0s !important;
	animation: none !important;
	animation-delay: 0s !important;
}

html {
	scroll-padding-top: var(--vision-header-safe);
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #main.site-main {
	padding-top: var(--vision-header-safe-gap) !important;
	background: transparent !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #main.site-main > .site-content,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #main.site-main > .site-content > .content-inner {
	background: transparent !important;
}

/* Remove the full-width header strip so only the capsule is visible. */
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #masthead.site-header {
	height: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	overflow: visible !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #masthead.site-header::before,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #masthead.site-header::after,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #header-content::before,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #header-content::after {
	content: none !important;
	display: none !important;
}

/* Native theme hero: pull hero background upward into the safe zone. */
body.has-hero:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #hero {
	margin-top: calc(-1 * var(--vision-header-safe-gap));
}

body.home:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #hero {
	position: relative;
}

body.home:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: min(46vh, 420px);
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(116, 156, 138, 0.2) 0%,
		rgba(38, 54, 49, 0.1) 38%,
		rgba(6, 11, 14, 0) 100%
	);
}

/* Single portfolio (photo + video): same cinematic top glow as home, page-level. */
body.single-work {
	background-color: #000 !important;
	background-image:
		radial-gradient(
			125% 72% at 14% -14%,
			rgba(31, 51, 43, 0.36) 0%,
			rgba(31, 51, 43, 0.24) 36%,
			rgba(0, 0, 0, 0) 74%
		),
		linear-gradient(
			180deg,
			rgba(31, 51, 43, 0.48) 0%,
			rgba(5, 28, 29, 0.2) 34%,
			rgba(0, 0, 0, 0) 62%
		);
	background-repeat: no-repeat;
	background-position: top center, top center;
	background-size: 100% clamp(560px, 74vh, 760px), 100% clamp(520px, 70vh, 720px);
	background-attachment: fixed, fixed;
}

/* Keep scroll fluidity and avoid repaint jank on WebKit/mobile. */
@media (max-width: 980px) {
	body.single-work {
		background-attachment: scroll, scroll;
	}
}

@supports (-webkit-touch-callout: none) {
	body.single-work {
		background-attachment: scroll, scroll;
	}
}

body.single-work #hero,
body.single-work #hero-inner,
body.single-work #hero-content,
body.single-work #main.site-main,
body.single-work #main.site-main > .site-content,
body.single-work #main.site-main > .site-content > .content-inner {
	background: transparent !important;
}

/* Single project hero: keep title left and push intro/meta block to the right on desktop. */
body.single-work #hero-content {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
	column-gap: clamp(26px, 5vw, 88px);
	row-gap: 18px;
	align-items: end;
	padding-inline: clamp(16px, 4vw, 48px);
}

body.single-work #hero .post-title-container,
body.single-work #hero .post-title-container.hero-section {
	grid-column: 1;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

body.single-work #hero .post-meta-container,
body.single-work #hero .post-secondary-meta-container,
body.single-work #hero .post-meta-container.hero-section,
body.single-work #hero .post-secondary-meta-container.hero-section {
	grid-column: 2;
	width: 100%;
	max-width: 52ch;
	margin: 0 0 0 auto;
	padding: 0;
	text-align: left;
	justify-self: end;
	align-self: end;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #hero-content,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #hero-inner {
	position: relative;
	z-index: 3;
}

/* Home (Elementor hero/no native #hero): extend first block into safe zone with transparent offset. */
body.home:not(.has-hero):not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #main.site-main > .site-content > .content-inner > *:first-child {
	margin-top: calc(-1 * var(--vision-header-safe-gap));
	padding-top: calc(var(--vision-header-safe-gap) + 8px) !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #main.site-main :is(h1, h2, h3, h4, h5, h6, section[id], div[id]) {
	scroll-margin-top: calc(var(--vision-header-safe) + 10px);
}

/* Single portfolio bottom navigation / "View more works" cleanup. */
.single-work .single-post-pagination {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(22px, 4vw, 46px);
}

.single-work .single-post-pagination .nav-index {
	display: none !important;
}

.single-work .single-post-pagination .nav-previous,
.single-work .single-post-pagination .nav-next {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background: rgba(7, 12, 16, 0.62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	min-height: clamp(180px, 22vw, 250px);
}

.single-work .single-post-pagination .nav-previous.nav-has-bg .img-bg,
.single-work .single-post-pagination .nav-next.nav-has-bg .img-bg {
	background-position: center center !important;
	background-size: cover !important;
}

.single-work .single-post-pagination .nav-previous.nav-has-bg .img-bg > img,
.single-work .single-post-pagination .nav-next.nav-has-bg .img-bg > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

.single-work .single-post-pagination .nav-previous.nav-has-bg::after,
.single-work .single-post-pagination .nav-next.nav-has-bg::after {
	background: linear-gradient(180deg, rgba(2, 6, 9, 0.36) 0%, rgba(2, 6, 9, 0.58) 100%);
}

.single-work .single-post-pagination .nav-previous a,
.single-work .single-post-pagination .nav-next a {
	padding: clamp(18px, 2vw, 24px);
}

.single-work .single-post-pagination .nav-label {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

.single-work .single-post-pagination .nav-previous .meta-nav,
.single-work .single-post-pagination .nav-next .meta-nav {
	display: block;
	margin-top: 8px;
	line-height: 1.3;
}

.single-work .trigger-container.wvc-element {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
	margin-bottom: 12px;
}

.single-work .trigger-container.wvc-element .button {
	min-width: min(260px, 100%);
}

.single-work .items-grid-container,
.single-work .related-posts {
	margin-top: clamp(20px, 3.5vw, 40px);
}

/* Single work: bottom "View More Works" media must keep consistent ratios and never stretch. */
.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 7;
	background: rgba(7, 11, 15, 0.42);
}

.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media .entry-cover {
	position: relative;
	height: 100%;
	padding-bottom: 0 !important;
}

.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media .vision-work-preview-image,
.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media .img-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* Keep behavior robust if the section is configured with masonry items. */
.single-work #work-grid-container [data-post-type="work"] .entry-work-masonry .vision-work-entry-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 7;
	background: rgba(7, 11, 15, 0.42);
}

.single-work #work-grid-container [data-post-type="work"] .entry-work-masonry .vision-work-entry-media .vision-work-preview-image,
.single-work #work-grid-container [data-post-type="work"] .entry-work-masonry .vision-work-entry-media .img-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation .nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar {
	width: min(var(--mf-header-max-width), calc(100% - (var(--mf-header-gutter) * 2))) !important;
	max-width: var(--mf-header-max-width) !important;
	left: 50% !important;
	right: auto !important;
	top: var(--mf-header-offset) !important;
	margin: 0 !important;
	transform: translate3d(-50%, 0, 0) !important;
	border-radius: var(--mf-header-radius) !important;
	border: 1px solid var(--mf-header-border) !important;
	background: var(--mf-header-bg) !important;
	-webkit-backdrop-filter: blur(16px) saturate(145%);
	backdrop-filter: blur(16px) saturate(145%);
	box-shadow: var(--mf-header-shadow) !important;
	color: var(--mf-header-fg) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation .nav-bar {
	transition: transform 0.34s var(--mf-header-reveal-ease), opacity 0.28s ease,
		background 0.3s ease, box-shadow 0.3s ease;
}

body.admin-bar:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation .nav-bar,
body.admin-bar:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar {
	top: calc(var(--mf-header-offset) + 32px) !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation .nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar {
	height: auto !important;
	line-height: normal !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation #nav-bar *,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar * {
	max-height: none !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation #nav-bar .flex-wrap {
	min-height: var(--mf-header-height);
	padding: 0 20px !important;
	display: flex;
	align-items: center;
	gap: 18px;
}

/*
 * Keep an identical header capsule geometry in all theme scroll states
 * (attop/untop/sticking), so margins/width never jump after scroll-up.
 */
body.menu-layout-top-right-floating #desktop-navigation #nav-bar {
	width: min(var(--mf-header-max-width), calc(100% - (var(--mf-header-gutter) * 2))) !important;
	max-width: var(--mf-header-max-width) !important;
	min-height: var(--mf-header-height) !important;
	height: auto !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 0 !important;
	left: 50% !important;
	right: auto !important;
	top: var(--mf-header-offset) !important;
	transform: translate3d(-50%, 0, 0) !important;
}

body.admin-bar.menu-layout-top-right-floating #desktop-navigation #nav-bar {
	top: calc(var(--mf-header-offset) + 32px) !important;
}

body.menu-layout-top-right-floating #desktop-navigation #nav-bar .logo,
body.menu-layout-top-right-floating #desktop-navigation #nav-bar .hamburger-container,
body.menu-layout-top-right-floating #desktop-navigation #nav-bar .menu-container,
body.menu-layout-top-right-floating #desktop-navigation #nav-bar .cta-container {
	min-height: var(--mf-header-height) !important;
	height: auto !important;
	max-height: none !important;
	display: flex;
	align-items: center;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar .flex-mobile-wrap {
	min-height: var(--mf-header-mobile-height);
	width: 100% !important;
	margin: 0 !important;
	padding: 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-soft.untop #desktop-navigation .nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-none.untop #desktop-navigation .nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-soft.untop #mobile-navigation #mobile-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-none.untop #mobile-navigation #mobile-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-soft.sticking #desktop-navigation #nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-hard.sticking #desktop-navigation #nav-bar,
body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).menu-sticky-hard.untop #desktop-navigation #nav-bar {
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	line-height: normal !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay).mf-header-hidden #desktop-navigation .nav-bar {
	opacity: 0 !important;
	visibility: visible !important;
	pointer-events: none;
	transform: translate3d(-50%, -14px, 0) !important;
}

body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay):not(.mf-header-hidden) #desktop-navigation .nav-bar {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	transform: translate3d(-50%, 0, 0) !important;
}

body.menu-layout-top-right-floating:not(.sticking) #nav-bar,
body.menu-layout-top-right-floating.sticking #nav-bar {
	top: var(--mf-header-offset) !important;
	max-width: var(--mf-header-max-width) !important;
}

body.admin-bar.menu-layout-top-right-floating:not(.sticking) #nav-bar,
body.admin-bar.menu-layout-top-right-floating.sticking #nav-bar {
	top: calc(var(--mf-header-offset) + 32px) !important;
}

#desktop-navigation .nav-bar a:not(.logo-link),
#desktop-navigation .nav-bar strong,
#desktop-navigation .nav-bar b,
#desktop-navigation .nav-bar span,
#mobile-navigation #mobile-bar a:not(.logo-link),
#mobile-navigation #mobile-bar strong,
#mobile-navigation #mobile-bar b,
#mobile-navigation #mobile-bar span {
	color: var(--mf-header-fg) !important;
}

#desktop-navigation .nav-menu-desktop li:not(.menu-button-primary):not(.menu-button-secondary):not(.nav-button) .menu-item-text-container {
	opacity: 0.84;
	transition: opacity 0.2s ease;
}

#desktop-navigation .nav-menu-desktop li:not(.menu-button-primary):not(.menu-button-secondary):not(.nav-button) a:hover .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li:not(.menu-button-primary):not(.menu-button-secondary):not(.nav-button) a:focus-visible .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.current-menu-item .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.current-menu-parent .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.current-menu-ancestor .menu-item-text-container {
	opacity: 1;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child {
	cursor: pointer !important;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px !important;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	line-height: 1 !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner svg {
	color: #fff !important;
	fill: currentColor;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:focus-visible > .menu-item-inner {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.44) !important;
	color: #fff !important;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:hover > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:hover > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:hover > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:focus-visible > .menu-item-inner .menu-item-text-container,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:hover > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:hover > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:hover > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:focus-visible > .menu-item-inner i,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:hover > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:hover > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:hover > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner svg,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:focus-visible > .menu-item-inner svg {
	color: #fff !important;
	fill: currentColor;
}

#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child > .menu-item-inner {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px !important;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	font-weight: 600;
	line-height: 1 !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child:hover > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child:focus-visible > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child:focus-visible > .menu-item-inner {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.44) !important;
	color: #fff !important;
}

#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child > .menu-item-inner .menu-item-text-container,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child > .menu-item-inner i,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-primary > a:first-child > .menu-item-inner svg,
#mobile-menu-panel--inner .nav-menu-mobile li.menu-button-secondary > a:first-child > .menu-item-inner svg,
#mobile-menu-panel--inner .nav-menu-mobile li.nav-button > a:first-child > .menu-item-inner svg,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-primary > a:first-child > .menu-item-inner svg,
#mobile-menu-panel--inner .nav-menu-vertical li.menu-button-secondary > a:first-child > .menu-item-inner svg,
#mobile-menu-panel--inner .nav-menu-vertical li.nav-button > a:first-child > .menu-item-inner svg {
	color: #fff !important;
	fill: currentColor;
}

#desktop-navigation .logo .logo-img,
#mobile-navigation .logo .logo-img {
	opacity: 1 !important;
}

/* Fallback safety: if both logos are rendered, keep only one visible node. */
#desktop-navigation .logo .logo-light + .logo-dark,
#mobile-navigation .logo .logo-light + .logo-dark {
	display: none !important;
}

#desktop-navigation .logo img {
	max-height: 44px !important;
	width: auto;
}

#mobile-navigation #mobile-bar .logo img {
	max-height: 34px !important;
	width: auto;
}

#mobile-navigation #mobile-bar .cta-container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

#mobile-navigation #mobile-bar .hamburger-container {
	width: auto !important;
	height: auto !important;
	display: flex;
	align-items: center;
}

#mobile-navigation #mobile-bar .hamburger-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

#desktop-navigation .hamburger-icon .line,
#mobile-navigation .hamburger-icon .line,
#mobile-navigation .hamburger-btn__span {
	background-color: rgba(255, 255, 255, 0.92) !important;
}

#mobile-navigation #mobile-bar .hamburger-btn__span {
	display: none !important;
}

#mobile-navigation #mobile-bar .hamburger-btn__hamburger {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

#mobile-navigation #mobile-bar .hamburger-btn__hamburger::before,
#mobile-navigation #mobile-bar .hamburger-btn__hamburger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.92);
	transform-origin: center;
	transition: transform 0.22s ease, top 0.22s ease;
}

#mobile-navigation #mobile-bar .hamburger-btn__hamburger::before {
	top: 1px;
	box-shadow: 0 5px 0 rgba(255, 255, 255, 0.92);
}

#mobile-navigation #mobile-bar .hamburger-btn__hamburger::after {
	top: 11px;
}

body.mobile-menu-toggle #mobile-navigation #mobile-bar .hamburger-btn__hamburger::before {
	top: 6px;
	box-shadow: none;
	transform: rotate(45deg);
}

body.mobile-menu-toggle #mobile-navigation #mobile-bar .hamburger-btn__hamburger::after {
	top: 6px;
	transform: rotate(-45deg);
}

#desktop-navigation a:focus-visible,
#desktop-navigation button:focus-visible,
#mobile-navigation a:focus-visible,
#mobile-navigation button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
	border-radius: 12px;
}

/* Header CTA safety: prevent full-white hover fill and keep text/icons readable. */
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner,
#mobile-navigation #mobile-bar .cta-container a > .menu-item-inner,
#mobile-navigation #mobile-bar .cta-container .collab-btn,
#mobile-navigation #mobile-bar .cta-container a[class*="theme-button-"],
#mobile-navigation #mobile-bar .cta-container .button {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	box-shadow: none !important;
	color: #fff !important;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:hover > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child:focus-visible > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child:focus-visible > .menu-item-inner,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child:focus-visible > .menu-item-inner,
#mobile-navigation #mobile-bar .cta-container a:hover > .menu-item-inner,
#mobile-navigation #mobile-bar .cta-container a:focus-visible > .menu-item-inner,
#mobile-navigation #mobile-bar .cta-container .collab-btn:hover,
#mobile-navigation #mobile-bar .cta-container .collab-btn:focus-visible,
#mobile-navigation #mobile-bar .cta-container a[class*="theme-button-"]:hover,
#mobile-navigation #mobile-bar .cta-container a[class*="theme-button-"]:focus-visible,
#mobile-navigation #mobile-bar .cta-container .button:hover,
#mobile-navigation #mobile-bar .cta-container .button:focus-visible {
	background: rgba(255, 255, 255, 0.18) !important;
	border-color: rgba(255, 255, 255, 0.42) !important;
	color: #fff !important;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner :is(.menu-item-text-container, span, i, svg),
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner :is(.menu-item-text-container, span, i, svg),
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner :is(.menu-item-text-container, span, i, svg),
#mobile-navigation #mobile-bar .cta-container :is(.menu-item-text-container, .collab-text, span, i, svg) {
	color: #fff !important;
	fill: currentColor !important;
	stroke: currentColor;
}

#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner::before,
#desktop-navigation .nav-menu-desktop li.menu-button-primary > a:first-child > .menu-item-inner::after,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner::before,
#desktop-navigation .nav-menu-desktop li.menu-button-secondary > a:first-child > .menu-item-inner::after,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner::before,
#desktop-navigation .nav-menu-desktop li.nav-button > a:first-child > .menu-item-inner::after,
#mobile-navigation #mobile-bar .cta-container a > .menu-item-inner::before,
#mobile-navigation #mobile-bar .cta-container a > .menu-item-inner::after {
	display: none !important;
	background: transparent !important;
}

/* Header social shortcut (desktop): Instagram next to primary CTA. */
#desktop-navigation .cta-container .vision-header-instagram {
	display: inline-flex;
	align-items: center;
}

#desktop-navigation .cta-container .vision-header-instagram-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#desktop-navigation .cta-container .vision-header-instagram-link svg {
	width: 17px;
	height: 17px;
	display: block;
}

#desktop-navigation .cta-container .vision-header-instagram-link:hover,
#desktop-navigation .cta-container .vision-header-instagram-link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.48);
	transform: translateY(-1px);
}

@media screen and (max-width: 1024px) {
	:root {
		--mf-header-gutter: 12px;
		--mf-header-offset: 8px;
		--mf-header-radius: 18px;
	}

	body.single-work {
		background-size: 100% clamp(420px, 62vh, 580px), 100% clamp(390px, 58vh, 520px);
	}

	body.single-work #hero-content {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
		column-gap: clamp(20px, 3.2vw, 44px);
	}

	body:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation #nav-bar .flex-wrap {
		padding: 0 14px !important;
		gap: 12px;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #desktop-navigation .nav-bar,
	body.admin-bar:not(.menu-layout-lateral):not(.menu-layout-offcanvas):not(.menu-layout-overlay) #mobile-navigation #mobile-bar,
	body.admin-bar.menu-layout-top-right-floating:not(.sticking) #nav-bar,
	body.admin-bar.menu-layout-top-right-floating.sticking #nav-bar {
		top: calc(var(--mf-header-offset) + 46px) !important;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--mf-header-gutter: 10px;
		--mf-header-radius: 16px;
		--mf-header-mobile-height: 58px;
	}

	#mobile-navigation #mobile-bar .flex-mobile-wrap {
		padding: 0 10px;
	}

	.single-work .single-post-pagination {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-work .single-post-pagination .nav-previous,
	.single-work .single-post-pagination .nav-next {
		min-height: 168px;
	}
}

@media screen and (max-width: 980px) {
	body.single-work #hero-content {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
		padding-inline: 0;
	}

	body.single-work #hero .post-title-container,
	body.single-work #hero .post-meta-container,
	body.single-work #hero .post-secondary-meta-container {
		grid-column: 1;
		max-width: none;
		margin: 0;
		text-align: left;
	}
}