/* ==========================================================================
   Omega Design — Site Navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hover underline (desktop + mobile)
   -------------------------------------------------------------------------- */

.site-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-bottom: 4px;
}

.site-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s ease;
}

.site-navigation .wp-block-navigation-item__content:hover::after,
.site-navigation .wp-block-navigation-item__content:focus-visible::after,
.site-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Injected mobile toggle button — hidden on desktop
   -------------------------------------------------------------------------- */

.omega-submenu-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   3. Mini cart — icon only, no price
   -------------------------------------------------------------------------- */

.wc-block-mini-cart__amount {
	display: none !important;
}

.wc-block-mini-cart__button {
	gap: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Mobile overlay
   -------------------------------------------------------------------------- */

@keyframes omega-slide-in-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@media (max-width: 781px) {

	/* --- header row: account + cart first, hamburger last ---------------- */
	.wp-block-group.is-horizontal.is-content-justification-left.is-layout-flex {
		justify-content: flex-end !important;
	}

	.wp-block-group.is-horizontal.is-content-justification-left.is-layout-flex
		> .wp-block-woocommerce-customer-account {
		order: 1;
	}

	.wp-block-group.is-horizontal.is-content-justification-left.is-layout-flex
		> .wp-block-woocommerce-mini-cart {
		order: 2;
	}

	.wp-block-group.is-horizontal.is-content-justification-left.is-layout-flex
		> nav.site-navigation {
		order: 3;
	}

	nav.site-navigation {
		justify-content: flex-end !important;
	}

	nav.site-navigation > .wp-block-navigation__responsive-container-open {
		margin-left: auto !important;
	}

	/* --- drawer slides in from the right --------------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: omega-slide-in-right 0.3s ease forwards !important;
		will-change: transform;
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-navigation__responsive-container.is-menu-open {
			animation: none !important;
		}
	}

	/* no underline animation inside the overlay */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content::after {
		display: none;
	}

	/* --- collapse all submenus by default ------------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		.wp-block-navigation-item
		.wp-block-navigation__submenu-container {
		display: none !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: 100%;
		min-width: 0;
		border: 0;
		padding-left: 0;
		background: transparent;
		box-shadow: none;
	}

	/* --- open only when toggled ----------------------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		.wp-block-navigation-item.omega-open
		> .wp-block-navigation__submenu-container {
		display: block !important;
	}

	/* --- parent row: label + arrow side by side -------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		.wp-block-navigation-item.has-child {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100%;
		gap: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		.wp-block-navigation-item.has-child
		> .wp-block-navigation-item__content {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none;
		display: inline-flex;
		align-items: center;
		order: 1;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		.wp-block-navigation-item.has-child
		> .wp-block-navigation__submenu-container {
		flex: 1 1 100% !important;
		order: 3;
		text-align: center;
	}

	/* --- the injected arrow is the tap target ---------------------------- */
	.omega-submenu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto !important;
		order: 2;
		width: 20px !important;
		height: 20px !important;
		margin: 0 0 0 2px !important;
		padding: 0;
		background: transparent;
		border: 0;
		color: inherit;
		line-height: 1;
		cursor: pointer;
		transition: transform 0.25s ease;
	}

	.wp-block-navigation-item.omega-open > .omega-submenu-toggle {
		transform: rotate(180deg);
	}

	/* --- hide WP's native arrow so there are not two ---------------------- */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   5. Dark mode — icons and drawer
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	/* --- icons: override hardcoded SVG fills ----------------------------- */
	.wc-block-mini-cart__icon,
	.wc-block-mini-cart__icon path,
	.wc-block-customer-account__account-icon,
	.wc-block-customer-account__account-icon path,
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-open svg path,
	.wp-block-navigation__responsive-container-close svg,
	.wp-block-navigation__responsive-container-close svg path {
		fill: #ffffff !important;
		color: #ffffff !important;
	}

	/* --- drawer background and text -------------------------------------- */
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		background-color: #0d1a0d !important;
		color: #ffffff !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container.is-menu-open
		.omega-submenu-toggle {
		color: #ffffff !important;
	}
}

/* --- class-based dark mode (keep only if your theme uses a body class) --- */

body.omega-dark .wc-block-mini-cart__icon,
body.omega-dark .wc-block-mini-cart__icon path,
body.omega-dark .wc-block-customer-account__account-icon,
body.omega-dark .wc-block-customer-account__account-icon path,
body.omega-dark .wp-block-navigation__responsive-container-open svg path,
body.omega-dark .wp-block-navigation__responsive-container-close svg path {
	fill: #ffffff !important;
}

body.omega-dark .wp-block-navigation__responsive-container.is-menu-open,
body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close,
body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog,
body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	background-color: #0d1a0d !important;
	color: #ffffff !important;
}

body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__label,
body.omega-dark .wp-block-navigation__responsive-container.is-menu-open
	.omega-submenu-toggle {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6. Auto-hiding header on scroll

   The JS stamps .omega-sticky-header onto the header and writes the
   position / top / z-index inline, so pinning cannot be overridden by the
   theme or by theme.json. Everything below is the motion and the spacer.

   Fixed rather than sticky on purpose: mysite.css sets
   html,body{overflow-x:hidden}, which makes the page a scroll container
   and quietly breaks position:sticky in several browsers.
   -------------------------------------------------------------------------- */

.omega-sticky-header {
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1);
	will-change: transform;
	backface-visibility: hidden;
}

/* the hidden state — slides straight up, out of the viewport.
   The JS also writes this transform inline as a belt-and-braces fallback. */
body.omega-header-hidden .omega-sticky-header {
	transform: translateY(-100%) !important;
}

/* the megamenu panels live inside the header, so keep them layered above
   the page content while the bar is pinned */
.omega-sticky-header .omega-megamenu-panels {
	z-index: 1;
}

/* placeholder the JS sizes to match the header, so the page does not jump
   when the bar leaves the normal flow */
.omega-header-spacer {
	display: block;
	width: 100%;
	flex: none;
	pointer-events: none;
}

/* IMPORTANT: position:fixed measures against the nearest ancestor that has
   a transform / filter / perspective / contain. These two wrappers are the
   usual offenders in block themes — neutralise them so the bar pins to the
   viewport instead of to a parent box. */
.wp-site-blocks,
header.wp-block-template-part {
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	contain: none !important;
	will-change: auto !important;
}

/* anchor links land below the bar instead of underneath it.
   --omega-header-h is written by initStickyHeader() on every resize. */
html {
	scroll-padding-top: var( --omega-header-h, 0px );
}

@media (prefers-reduced-motion: reduce) {
	.omega-sticky-header {
		transition: none;
	}
}
.has-omega-hover-color {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.has-omega-hover-color:hover {
    background-color: var(--omega-hover-bg-color);
}