/*
 * Hooshi GameBato Cyber Containers
 * One-row black/red Elementor header skin.
 */

:where(
	.hgch-role-header-shell,
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) {
	--hgch-accent: #ff2238;
	--hgch-accent-2: #9f0016;
	--hgch-accent-soft: rgba(255, 34, 56, 0.12);
	--hgch-surface-1: #15171b;
	--hgch-surface-2: #050608;
	--hgch-line: #383b42;
	--hgch-text: #f4f5f7;
	--hgch-muted: #9da1a8;
	--hgch-glow-color: rgba(255, 34, 56, 0.55);
	--hgch-glow-size: 16px;
	--hgch-cut: 18px;
	--hgch-border: 1px;
	--hgch-gap: 8px;
	--hgch-menu-duration: 380ms;
	--hgch-menu-distance: 16px;
	--hgch-pointer-x: 50%;
	--hgch-pointer-y: 20%;
	box-sizing: border-box;
	color: var(--hgch-text);
}

:where(
	.hgch-role-header-shell,
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
),
:where(
	.hgch-role-header-shell,
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) *,
:where(
	.hgch-role-header-shell,
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) *::before,
:where(
	.hgch-role-header-shell,
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) *::after {
	box-sizing: border-box;
}

/* Main single-row shell */
.hgch-role-header-shell {
	position: relative !important;
	z-index: 10;
	isolation: isolate;
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: var(--hgch-gap) !important;
	width: 100%;
	min-height: var(--hgch-min-height, 108px);
	padding: 10px 12px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.hgch-role-header-shell::before,
.hgch-role-header-shell::after {
	content: "";
	position: absolute;
	pointer-events: none;
	clip-path: polygon(
		var(--hgch-cut) 0,
		calc(100% - var(--hgch-cut)) 0,
		100% var(--hgch-cut),
		100% calc(100% - var(--hgch-cut)),
		calc(100% - var(--hgch-cut)) 100%,
		var(--hgch-cut) 100%,
		0 calc(100% - var(--hgch-cut)),
		0 var(--hgch-cut)
	);
}

.hgch-role-header-shell::before {
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, transparent 0 2%, var(--hgch-accent) 12%, transparent 33%) top / 100% 2px no-repeat,
		linear-gradient(270deg, transparent 0 3%, var(--hgch-accent) 13%, transparent 38%) bottom / 100% 2px no-repeat,
		linear-gradient(135deg, var(--hgch-line) 0 18%, var(--hgch-accent-2) 31%, var(--hgch-accent) 44%, var(--hgch-line) 55% 100%);
	filter: drop-shadow(0 0 var(--hgch-glow-size) var(--hgch-glow-color));
	opacity: 0.96;
}

.hgch-role-header-shell::after {
	inset: var(--hgch-border);
	z-index: -1;
	background:
		radial-gradient(520px circle at var(--hgch-pointer-x) var(--hgch-pointer-y), var(--hgch-accent-soft), transparent 56%),
		linear-gradient(180deg, rgba(255,255,255,0.035), transparent 34%),
		linear-gradient(135deg, var(--hgch-surface-1), var(--hgch-surface-2) 64%, #020304);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.055),
		inset 0 -18px 40px rgba(0,0,0,0.38);
}

.hgch-role-header-shell > * {
	position: relative;
	z-index: 1;
	min-height: 0;
}

/* Reusable inner panels */
:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) {
	position: relative !important;
	z-index: 0;
	isolation: isolate;
	min-height: var(--hgch-min-height, 84px);
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	transition:
		translate 260ms cubic-bezier(.16,1,.3,1),
		filter 260ms ease;
}

:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
)::before,
:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
)::after {
	content: "";
	position: absolute;
	pointer-events: none;
	clip-path: polygon(
		var(--hgch-cut) 0,
		calc(100% - var(--hgch-cut)) 0,
		100% var(--hgch-cut),
		100% calc(100% - var(--hgch-cut)),
		calc(100% - var(--hgch-cut)) 100%,
		var(--hgch-cut) 100%,
		0 calc(100% - var(--hgch-cut)),
		0 var(--hgch-cut)
	);
}

:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
)::before {
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, transparent 3%, var(--hgch-accent) 18%, transparent 47%) top / 100% 1px no-repeat,
		linear-gradient(270deg, transparent 4%, var(--hgch-accent-2) 17%, transparent 46%) bottom / 100% 1px no-repeat,
		linear-gradient(135deg, var(--hgch-line), #202329 34%, var(--hgch-accent-2) 48%, var(--hgch-line) 59% 100%);
	filter: drop-shadow(0 0 var(--hgch-glow-size) var(--hgch-glow-color));
	opacity: 0.78;
}

:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
)::after {
	inset: var(--hgch-border);
	z-index: -1;
	background:
		radial-gradient(340px circle at var(--hgch-pointer-x) var(--hgch-pointer-y), var(--hgch-accent-soft), transparent 58%),
		linear-gradient(180deg, rgba(255,255,255,.035), transparent 35%),
		linear-gradient(135deg, var(--hgch-surface-1), var(--hgch-surface-2) 72%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.045),
		inset 0 -14px 30px rgba(0,0,0,.34);
}

:where(
	.hgch-role-logo,
	.hgch-role-menu,
	.hgch-role-utility,
	.hgch-role-icon,
	.hgch-role-panel,
	.hgch-role-mega
) > * {
	position: relative;
	z-index: 1;
}

/* Logo segment */
.hgch-role-logo {
	flex: 0 0 auto;
	min-width: 225px;
	padding: 16px 22px !important;
	align-items: center;
	justify-content: center;
}

.hgch-role-logo::after {
	background:
		linear-gradient(115deg, rgba(255,34,56,.13), transparent 42%),
		radial-gradient(280px circle at var(--hgch-pointer-x) var(--hgch-pointer-y), var(--hgch-accent-soft), transparent 58%),
		linear-gradient(135deg, #17191e, #060709 74%);
}

/* Menu host: accepts a separate menu widget/plugin */
.hgch-role-menu {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 18px !important;
	align-items: stretch;
	justify-content: center;
}

.hgch-role-menu > .elementor-element,
.hgch-role-menu > .elementor-widget,
.hgch-role-menu > nav,
.hgch-role-menu > .e-con-inner,
.hgch-role-menu .elementor-widget-container {
	width: 100%;
}

@media (min-width: 768px) {
	.hgch-role-menu :is(ul.menu, ul.elementor-nav-menu, ul.mega-menu) {
		flex-wrap: nowrap;
	}

	.hgch-role-menu :is(.elementor-nav-menu--main, nav) > :is(ul.menu, ul.elementor-nav-menu),
	.hgch-role-menu > :is(ul.menu, ul.elementor-nav-menu) {
		display: flex;
		align-items: stretch;
		justify-content: center;
		min-height: 100%;
	}
}

.hgch-role-menu :where(a, button) {
	color: var(--hgch-text);
	transition:
		color 220ms ease,
		background-color 220ms ease,
		box-shadow 220ms ease,
		text-shadow 220ms ease;
}

.hgch-role-menu :is(.menu-item > a, .elementor-item, .mega-menu-link) {
	position: relative;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding-inline: clamp(10px, 1.1vw, 20px);
	white-space: nowrap;
	border-radius: 4px;
}

.hgch-role-menu :is(
	.menu-item > a:hover,
	.menu-item > a:focus-visible,
	.current-menu-item > a,
	.current-menu-ancestor > a,
	.elementor-item:hover,
	.elementor-item:focus-visible,
	.elementor-item-active,
	.mega-current-menu-item > .mega-menu-link,
	.mega-menu-link:hover
) {
	color: var(--hgch-accent) !important;
	background: linear-gradient(180deg, rgba(255,34,56,.13), rgba(255,34,56,.035));
	box-shadow: inset 0 -2px 0 var(--hgch-accent);
	text-shadow: 0 0 14px rgba(255,34,56,.45);
}

/* Utility/search section */
.hgch-role-utility {
	flex: 0 0 auto;
	min-width: 320px;
	padding: 12px 14px !important;
	align-items: center;
}

.hgch-role-utility :is(
	.elementor-search-form__container,
	form[role="search"],
	.search-form,
	.woocommerce-product-search
) {
	position: relative;
	min-height: 50px;
	background: rgba(0,0,0,.32) !important;
	border: 1px solid rgba(255,255,255,.11) !important;
	border-radius: 5px !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.035),
		0 0 0 1px rgba(255,34,56,.035);
	transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.hgch-role-utility :is(
	.elementor-search-form__container,
	form[role="search"],
	.search-form,
	.woocommerce-product-search
):focus-within {
	background: rgba(5,5,7,.72) !important;
	border-color: var(--hgch-accent) !important;
	box-shadow: 0 0 0 3px rgba(255,34,56,.08), 0 0 18px rgba(255,34,56,.12);
}

.hgch-role-utility :is(
	input[type="search"],
	.elementor-search-form__input,
	.search-field
) {
	min-height: 48px;
	color: var(--hgch-text) !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.hgch-role-utility :is(
	input[type="search"],
	.elementor-search-form__input,
	.search-field
)::placeholder {
	color: var(--hgch-muted);
	opacity: .86;
}

.hgch-role-utility :is(
	.elementor-search-form__submit,
	button[type="submit"],
	.search-submit
) {
	color: var(--hgch-accent) !important;
	background: transparent !important;
	border: 0 !important;
}

/* Icon mini-container */
.hgch-role-icon {
	flex: 0 0 auto;
	min-width: 54px;
	min-height: 54px;
	aspect-ratio: 1;
	padding: 10px !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.hgch-role-icon :is(svg, i) {
	color: var(--hgch-text);
	fill: currentColor;
	transition: color 220ms ease, filter 220ms ease, scale 220ms cubic-bezier(.16,1,.3,1);
}

.hgch-role-icon:hover :is(svg, i) {
	color: var(--hgch-accent);
	filter: drop-shadow(0 0 7px var(--hgch-glow-color));
	scale: 1.08;
}

/* Standalone and mega panels */
.hgch-role-panel,
.hgch-role-mega {
	padding: clamp(16px, 2vw, 30px) !important;
}

.hgch-role-mega {
	--hgch-cut: 14px;
	z-index: 1000;
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
}

/* Generic submenu frame and animation. The top-level menu plugin remains responsible for positioning. */
.hgch-role-menu :is(
	.sub-menu,
	.elementskit-dropdown,
	.jet-sub-menu,
	.mega-sub-menu,
	.uael-sub-menu,
	.e-n-menu-content
) {
	color: var(--hgch-text);
	background:
		linear-gradient(180deg, rgba(255,255,255,.035), transparent 26%),
		linear-gradient(145deg, rgba(17,19,23,.98), rgba(3,4,6,.985)) !important;
	border: 1px solid rgba(255,34,56,.65) !important;
	border-radius: 5px !important;
	box-shadow:
		0 24px 70px rgba(0,0,0,.68),
		0 0 26px rgba(255,34,56,.14),
		inset 0 1px 0 rgba(255,255,255,.055) !important;
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
}

.hgch-role-menu :is(.sub-menu, .elementskit-dropdown, .jet-sub-menu, .mega-sub-menu) a {
	color: var(--hgch-text);
}

.hgch-role-menu :is(.sub-menu, .elementskit-dropdown, .jet-sub-menu, .mega-sub-menu) a:hover {
	color: var(--hgch-accent) !important;
	background: linear-gradient(90deg, rgba(255,34,56,.14), transparent 80%);
}

@media (min-width: 768px) {
	.hgch-role-menu.hgch-menuanim-yes :is(ul.menu, ul.elementor-nav-menu) > .menu-item-has-children > .sub-menu {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		translate: 0 var(--hgch-menu-distance);
		scale: .985;
		filter: blur(4px);
		transform-origin: top center;
		transition:
			opacity var(--hgch-menu-duration) cubic-bezier(.16,1,.3,1),
			translate var(--hgch-menu-duration) cubic-bezier(.16,1,.3,1),
			scale var(--hgch-menu-duration) cubic-bezier(.16,1,.3,1),
			filter var(--hgch-menu-duration) ease,
			visibility 0s linear var(--hgch-menu-duration);
	}

	.hgch-role-menu.hgch-menuanim-yes :is(ul.menu, ul.elementor-nav-menu) > .menu-item-has-children:is(:hover, :focus-within, .hgch-submenu-open) > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		translate: 0 0;
		scale: 1;
		filter: blur(0);
		transition-delay: 0s;
	}

	.hgch-role-menu.hgch-menuanim-yes :is(
		.elementskit-dropdown,
		.jet-sub-menu,
		.mega-sub-menu,
		.uael-sub-menu,
		.e-n-menu-content
	) {
		transition:
			opacity var(--hgch-menu-duration) cubic-bezier(.16,1,.3,1),
			translate var(--hgch-menu-duration) cubic-bezier(.16,1,.3,1),
			filter var(--hgch-menu-duration) ease;
	}
}

/* Motion */
.hgch-edge-yes::before {
	background-size: 100% 2px, 100% 2px, 220% 220%;
	animation: hgch-edge-flow 5.5s ease-in-out infinite alternate;
}

.hgch-lift-yes:hover {
	translate: 0 -2px;
	filter: brightness(1.055);
}

@keyframes hgch-edge-flow {
	0% {
		background-position: top left, bottom right, 0% 50%;
		filter: drop-shadow(0 0 var(--hgch-glow-size) var(--hgch-glow-color));
	}
	100% {
		background-position: top right, bottom left, 100% 50%;
		filter: drop-shadow(0 0 var(--hgch-glow-size) var(--hgch-glow-color));
	}
}

/* Keep the header in one row while reducing its footprint on smaller screens. */
@media (max-width: 1024px) {
	.hgch-role-header-shell {
		--hgch-gap: 6px;
		--hgch-cut: 14px;
		min-height: var(--hgch-min-height, 86px);
		padding: 7px 8px !important;
	}

	.hgch-role-logo {
		min-width: 155px;
		padding: 10px 14px !important;
	}

	.hgch-role-menu {
		padding: 8px 10px !important;
	}

	.hgch-role-utility {
		min-width: 245px;
		padding: 8px 10px !important;
	}
}

@media (max-width: 767px) {
	.hgch-role-header-shell {
		flex-wrap: nowrap !important;
		--hgch-gap: 4px;
		--hgch-cut: 10px;
		padding: 5px !important;
	}

	.hgch-role-header-shell.hgch-compact-yes {
		min-height: var(--hgch-min-height, 68px);
	}

	.hgch-role-header-shell.hgch-compact-yes > .hgch-role-logo {
		flex: 0 1 108px;
		min-width: 82px;
		padding: 7px 8px !important;
	}

	.hgch-role-header-shell.hgch-compact-yes > .hgch-role-menu {
		flex: 1 1 auto;
		min-width: 48px;
		padding: 6px !important;
	}

	.hgch-role-header-shell.hgch-compact-yes > .hgch-role-utility {
		flex: 0 1 auto;
		min-width: 0;
		padding: 6px !important;
	}

	.hgch-role-header-shell.hgch-compact-yes .hgch-role-icon {
		min-width: 42px;
		min-height: 42px;
		padding: 8px !important;
	}

	.hgch-role-menu :is(.menu-item > a, .elementor-item, .mega-menu-link) {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hgch-edge-yes::before {
		animation: none !important;
	}

	.hgch-role-menu *,
	.hgch-lift-yes,
	.hgch-role-icon :is(svg, i) {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}