/* ==========================================================================
   Unicorn Elementor Blocks — Navigation Menu
   Horizontal desktop category navigation bar (store header menu).
   Items with children get a chevron + hover dropdown; `.is-highlight` items
   render in the highlight color. Hand-written, theme-independent plain CSS.

   All selectors scoped under .ueb-nav.

   Custom properties (--ueb-nav-*) are set INLINE on .ueb-nav by Elementor
   controls. This stylesheet only CONSUMES them via var() with fallbacks —
   it never redefines them. Likewise `gap`/`justify-content` on the menu and
   typography on the link are owned by Elementor; only safe defaults here.
   ========================================================================== */

.ueb-nav {
	display: block;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 22.5px;
}

.ueb-nav *,
.ueb-nav *::before,
.ueb-nav *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Menu — horizontal flex row
   `gap` and `justify-content` are also targeted by Elementor selectors,
   so the values below are merely sane defaults that Elementor overrides.
   -------------------------------------------------------------------------- */
.ueb-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px; /* Elementor override */
}

.ueb-nav__menu > li::before,
.ueb-nav__menu > li::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Top-level item — relative anchor for its dropdown
   -------------------------------------------------------------------------- */
.ueb-nav__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Link — label + optional chevron
   Typography is owned by Elementor; keep only structure + color here.
   The small vertical padding builds a hover bridge between the link bottom
   and the dropdown top so the menu doesn't drop when the pointer travels.
   -------------------------------------------------------------------------- */
.ueb-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	color: var(--ueb-nav-color, #1b1c19);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.16s ease;
}

.ueb-nav__item:hover > .ueb-nav__link,
.ueb-nav__item:focus-within > .ueb-nav__link,
.ueb-nav__link:hover,
.ueb-nav__link:focus,
.ueb-nav__link:focus-visible {
	color: var(--ueb-nav-hover, #3a124d);
	text-decoration: none;
}

.ueb-nav__link:focus-visible {
	outline: 2px solid var(--ueb-nav-hover, #3a124d);
	outline-offset: 3px;
	border-radius: 4px;
}

.ueb-nav__label {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Highlight item — stays in the highlight color, never the hover color.
   -------------------------------------------------------------------------- */
.ueb-nav__link--highlight,
.ueb-nav__item.is-highlight > .ueb-nav__link {
	color: var(--ueb-nav-highlight, #ff4b4b);
}

.ueb-nav__link--highlight:hover,
.ueb-nav__link--highlight:focus,
.ueb-nav__link--highlight:focus-visible,
.ueb-nav__item.is-highlight:hover > .ueb-nav__link,
.ueb-nav__item.is-highlight:focus-within > .ueb-nav__link {
	color: var(--ueb-nav-highlight, #ff4b4b);
	filter: brightness(0.9); /* a touch darker on hover, keep it red-ish */
}

.ueb-nav__link--highlight:focus-visible {
	outline-color: var(--ueb-nav-highlight, #ff4b4b);
}

/* --------------------------------------------------------------------------
   Chevron — ~10x6 down caret that flips when the item is open
   -------------------------------------------------------------------------- */
.ueb-nav__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ueb-nav-chevron, currentColor);
	transition: transform 0.16s ease;
}

.ueb-nav__chevron svg {
	display: block;
	width: 10px;
	height: 6px;
	fill: none;
	stroke: currentColor;
}

/* Open state — hover, keyboard (aria-expanded), or JS-toggled (.is-open). */
.ueb-nav__item:hover > .ueb-nav__link .ueb-nav__chevron,
.ueb-nav__item:focus-within > .ueb-nav__link .ueb-nav__chevron,
.ueb-nav__link[aria-expanded="true"] .ueb-nav__chevron,
.ueb-nav__item.is-open > .ueb-nav__link .ueb-nav__chevron {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Dropdown — absolutely positioned panel below the parent item
   Hidden via opacity/visibility (not display:none) so it animates and stays
   keyboard-accessible; revealed on hover, focus-within, or .is-open.
   -------------------------------------------------------------------------- */
.ueb-nav__sub {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	min-width: var(--ueb-nav-sub-width, 200px);
	background: var(--ueb-nav-sub-bg, #ffffff);
	border: 1px solid #edecef;
	border-radius: var(--ueb-nav-sub-radius, 10px);
	box-shadow: 0 12px 32px rgba(27, 28, 25, 0.12);
	/* Closed state. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.ueb-nav__item:hover > .ueb-nav__sub,
.ueb-nav__item:focus-within > .ueb-nav__sub,
.ueb-nav__item.is-open > .ueb-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}

.ueb-nav__subitem {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ueb-nav__subitem::before,
.ueb-nav__subitem::after {
	content: none;
}

/* Dropdown link */
.ueb-nav__sublink {
	display: block;
	width: 100%;
	padding: 8px 16px;
	color: var(--ueb-nav-sub-color, #1b1c19);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s ease, background 0.16s ease;
}

.ueb-nav__sublink:hover,
.ueb-nav__sublink:focus,
.ueb-nav__sublink:focus-visible {
	color: var(--ueb-nav-sub-hover-color, #3a124d);
	background: var(--ueb-nav-sub-hover-bg, #f5f3f7);
	text-decoration: none;
}

.ueb-nav__sublink:focus-visible {
	outline: 2px solid var(--ueb-nav-sub-hover-color, #3a124d);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Second-level nesting — fly out to the right of its parent subitem.
   -------------------------------------------------------------------------- */
.ueb-nav__sub .ueb-nav__sub {
	top: 0;
	left: 100%;
	transform: translateX(6px);
}

.ueb-nav__sub .ueb-nav__subitem:hover > .ueb-nav__sub,
.ueb-nav__sub .ueb-nav__subitem:focus-within > .ueb-nav__sub,
.ueb-nav__sub .ueb-nav__subitem.is-open > .ueb-nav__sub {
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Right-edge safety — JS may add this hook to items near the viewport edge
   so their dropdown anchors to the right instead of overflowing.
   -------------------------------------------------------------------------- */
.ueb-nav__item--align-right > .ueb-nav__sub {
	left: auto;
	right: 0;
}

/* A nested flyout on a right-aligned branch flips to the left side. */
.ueb-nav__item--align-right .ueb-nav__sub .ueb-nav__sub,
.ueb-nav__subitem--align-right > .ueb-nav__sub {
	left: auto;
	right: 100%;
	transform: translateX(-6px);
}

.ueb-nav__item--align-right .ueb-nav__sub .ueb-nav__subitem:hover > .ueb-nav__sub,
.ueb-nav__subitem--align-right:hover > .ueb-nav__sub,
.ueb-nav__subitem--align-right:focus-within > .ueb-nav__sub,
.ueb-nav__subitem--align-right.is-open > .ueb-nav__sub {
	transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Editor placeholder — muted helper text shown when no menu is selected.
   -------------------------------------------------------------------------- */
.ueb-nav.ueb-nav--empty {
	padding: 12px 16px;
	color: #9ca3af;
	font-style: italic;
	font-size: 14px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ueb-nav__link,
	.ueb-nav__chevron,
	.ueb-nav__sub,
	.ueb-nav__sublink {
		transition-duration: 0.01ms;
	}
}

/* --------------------------------------------------------------------------
   Mobile — this is a desktop-only widget; a separate mobile menu handles
   small screens. Keep this block last.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.ueb-nav {
		display: none;
	}
}