/*
 * Navigation Menu widget.
 *
 * Loaded only on pages that actually contain the widget — Elementor prints the
 * handle this file is registered under when a widget on the page declares it in
 * `get_style_depends()`.
 *
 * Colours are left almost entirely to the panel: every rule that a user can set
 * from the Style tab is absent here, so Elementor's generated CSS is the only
 * source and there is nothing to fight with specificity over.
 */

.vora-nav {
	position: relative;

	/*
	 * Every value the collapsed panel needs, declared once here so the Style
	 * tab has a single place to write to. The panel is only laid out by the
	 * generated breakpoint block (see the note further down), so setting these
	 * on a desktop-width nav changes nothing.
	 */
	--vora-nav-duration: 320ms;
	--vora-nav-panel-width: 100%;
	--vora-nav-panel-bg: #fff;
	--vora-nav-panel-padding: 22px 20px 32px;
	--vora-nav-submenu-indent: 16px;
	--vora-nav-submenu-offset: 0px; /* stylelint-disable-line length-zero-no-unit -- read inside calc(). */
	--vora-nav-row-height: 48px;
	--vora-nav-divider: rgba(0, 0, 0, 0.08);
}

/*
 * Where the closed panel sits, per side.
 *
 * These are plain custom properties rather than rules, so they can live outside
 * the breakpoint blocks — a `transform` written here would move the desktop
 * menu, a variable holding one cannot. The animation classes below override the
 * same two properties, which is the whole of the animation system: source order
 * decides, so `slide` leaves the side's transform alone while `fade` replaces
 * it.
 */
.vora-nav--side-right {
	--vora-nav-hidden: translateX(100%);
	--vora-nav-top: 0px; /* stylelint-disable-line length-zero-no-unit -- read inside calc(), where a bare 0 is invalid. */
	--vora-nav-right: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-bottom: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-left: auto;
}

.vora-nav--side-left {
	--vora-nav-hidden: translateX(-100%);
	--vora-nav-top: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-right: auto;
	--vora-nav-bottom: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-left: 0px; /* stylelint-disable-line length-zero-no-unit */
}

.vora-nav--side-top {
	--vora-nav-hidden: translateY(-100%);
	--vora-nav-top: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-right: 0px; /* stylelint-disable-line length-zero-no-unit */
	--vora-nav-bottom: auto;
	--vora-nav-left: 0px; /* stylelint-disable-line length-zero-no-unit */
}

/*
 * The admin bar is fixed at the top of the viewport with a z-index far above
 * anything a plugin should claim, so a panel pinned to `top: 0` opens *under*
 * it and loses its first 46px — which is exactly where the close button sits.
 * Logged-out visitors never see this, which is what makes it easy to ship.
 */
.admin-bar { --vora-nav-admin: 46px; }

@media (min-width: 783px) {
	.admin-bar { --vora-nav-admin: 32px; }
}

.vora-nav--anim-slide-fade { --vora-nav-hidden-opacity: 0; }

.vora-nav--anim-fade {
	--vora-nav-hidden: none;
	--vora-nav-hidden-opacity: 0;
}

.vora-nav--anim-scale {
	--vora-nav-hidden: scale(0.96);
	--vora-nav-hidden-opacity: 0;
}

.vora-nav--anim-none {
	--vora-nav-duration: 0ms;
	--vora-nav-hidden: none;
}

.vora-nav__list,
.vora-nav__submenu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The row's spacing and alignment come in as custom properties, so the
 * collapsed panel can simply not spend them. See the note on the controls.
 */
.vora-nav__list {
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--vora-nav-align, flex-start);
	gap: var(--vora-nav-gap, 28px);
}

.vora-nav--vertical .vora-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.vora-nav__list > li {
	position: relative;
}

.vora-nav__list a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: color 0.16s ease;
}

.vora-nav__list > li > a {
	padding: 6px 0;
}

/* Submenu ------------------------------------------------------------- */

/*
 * `--vora-nav-submenu-auto` is measured by the script when the dropdown is set
 * to open from the bottom of the header: the distance from the menu item to
 * the header's lower edge, which no stylesheet can know. The user's own
 * distance is added on top, so both controls stay meaningful together.
 */
.vora-nav__submenu {
	position: absolute;
	top: calc(100% + var(--vora-nav-submenu-auto, 0px) + var(--vora-nav-submenu-offset, 0px));
	left: 0;
	z-index: 60;
	flex-direction: column;
	min-width: 220px;
	padding: 10px 0;
	background: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/*
 * A transparent bridge across the offset.
 *
 * The dropdown opens on `li:hover`, and the gap the offset creates belongs to
 * neither the link nor the dropdown — so moving the pointer down from the menu
 * item crosses unhovered ground and the dropdown closes before it can be
 * reached. `:hover` matches DOM ancestors rather than visual ones, so a
 * pseudo-element on the dropdown covering that gap keeps the `li` hovered the
 * whole way down. It collapses to nothing at the default offset of zero.
 */
.vora-nav__submenu::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: calc(var(--vora-nav-submenu-auto, 0px) + var(--vora-nav-submenu-offset, 0px));
}

.vora-nav__list > li:hover > .vora-nav__submenu,
.vora-nav__list > li:focus-within > .vora-nav__submenu,
.vora-nav__list > li.is-open > .vora-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.vora-nav__submenu a {
	display: block;
	width: 100%;
	padding: 7px 18px;
}

/* Submenu toggle ------------------------------------------------------ */

.vora-nav__toggle {
	padding: 4px;
	margin-left: 4px;
	background: none;
	border: 0;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

.vora-nav:not(.vora-nav--arrows) .vora-nav__toggle {
	/* The arrow is off, but the control still has to exist for keyboard and
	   touch users — so it is hidden visually, not removed. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.vora-nav__chevron {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.16s ease;
}

.vora-nav__toggle[aria-expanded="true"] .vora-nav__chevron {
	transform: translateY(1px) rotate(-135deg);
}

/* Menu button --------------------------------------------------------- */

.vora-nav__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
}

.vora-nav__bars,
.vora-nav__bars::before,
.vora-nav__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.vora-nav__bars::before,
.vora-nav__bars::after {
	content: "";
	position: relative;
}

.vora-nav__bars::before { top: -6px; }
.vora-nav__bars::after { top: 4px; }

/*
 * The button morphs into a cross only for the dropdown, where it is also the
 * control that closes it.
 *
 * The slide-out panel covers the button and carries its own close button, so
 * morphing it there animates a cross nobody will ever see — except during the
 * moment before the panel arrives, where it reads as a flicker at the top of
 * the screen. The bars transition over 0.18s and the panel slides in over
 * 0.32s, so the cross is not only visible, it finishes first.
 */
.vora-nav--mobile-dropdown .vora-nav__burger[aria-expanded="true"] .vora-nav__bars { background: transparent; }
.vora-nav--mobile-dropdown .vora-nav__burger[aria-expanded="true"] .vora-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.vora-nav--mobile-dropdown .vora-nav__burger[aria-expanded="true"] .vora-nav__bars::after { transform: translateY(-4px) rotate(-45deg); }

/*
 * The tap highlight.
 *
 * This is the pale blue box that appears over the menu button on a phone for
 * a moment after it is tapped, while the panel is still sliding in. It is not
 * a background, a focus ring or an `:active` style — it is
 * `-webkit-tap-highlight-color`, painted by the browser *above* page content,
 * so it draws over the panel as well and no z-index reaches it. Only turning
 * it off removes it, and the button already has visible pressed and focus
 * states of its own.
 */
.vora-nav__burger,
.vora-nav__close,
.vora-nav__toggle,
.vora-nav__panel a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
 * The widget's controls are chrome, not page buttons.
 *
 * Every theme styles `button`, and these are buttons. Astra paints all of them
 * with the theme accent on hover and focus — so tapping the menu button turned
 * it into a solid blue box the moment it took focus, on top of a button shadow
 * it also supplies. A resting-state rule is not enough to hold that off,
 * because the theme's rules for the interaction states are more specific than
 * a single class: `button:hover` already beats `.vora-nav__burger`.
 *
 * Hence the state list, and `.vora-nav` in front of each one. The colour
 * controls in the panel still win — Elementor writes those through four
 * classes, which outranks this.
 */
.vora-nav .vora-nav__burger,
.vora-nav .vora-nav__burger:hover,
.vora-nav .vora-nav__burger:focus,
.vora-nav .vora-nav__burger:active,
.vora-nav .vora-nav__close,
.vora-nav .vora-nav__close:hover,
.vora-nav .vora-nav__close:focus,
.vora-nav .vora-nav__close:active,
.vora-nav .vora-nav__toggle,
.vora-nav .vora-nav__toggle:hover,
.vora-nav .vora-nav__toggle:focus,
.vora-nav .vora-nav__toggle:active {
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	color: inherit;
	outline: none;
}

/*
 * Focus rings.
 *
 * The script moves focus when the panel opens and closes, so a browser's
 * default ring appears for someone who tapped and never asked for one.
 * `:focus-visible` is exactly the distinction, and keyboard users keep a ring.
 * It follows the block above so that it wins the tie on source order.
 */
.vora-nav .vora-nav__burger:focus-visible,
.vora-nav .vora-nav__close:focus-visible,
.vora-nav .vora-nav__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Panel chrome --------------------------------------------------------- */

/*
 * The close button, the header holding it and the dimmer exist in the markup at
 * every width and are switched on by the generated breakpoint block. Their
 * styling lives out here so it is written once rather than once per breakpoint.
 */

.vora-nav__panel-head,
.vora-nav__overlay {
	display: none;
}

.vora-nav__panel-head {
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 6px;
}

/* With a logo beside it the close button moves to the far edge; on its own it
   stays there, which is why this is a class and not `space-between` throughout. */
.vora-nav__panel-head--brand { justify-content: space-between; }

.vora-nav__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.vora-nav__brand a {
	display: block;
	line-height: 0;
}

.vora-nav__brand img {
	display: block;
	max-height: 32px;
	width: auto;
}

/*
 * `a.vora-nav__brand-text`, not `.vora-nav__brand-text`. Elementor's Theme Style
 * writes `.elementor-kit-<id> a { color: … }` onto the body at (0,1,1), so a
 * plain class at (0,1,0) loses and the site name comes out in the global link
 * colour — accent green on a site whose header logo is near-black. Two classes
 * and an element take it back to what the panel actually inherits.
 */
.vora-nav__brand a.vora-nav__brand-text {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
}

/* `get_custom_logo()` wraps the image in this, and the theme may have given it
   margins meant for a site header. */
.vora-nav__brand .custom-logo-link {
	display: block;
	margin: 0;
}

.vora-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.vora-nav__cross {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
}

.vora-nav__cross::before,
.vora-nav__cross::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.vora-nav__cross::before { transform: translateY(-50%) rotate(45deg); }
.vora-nav__cross::after { transform: translateY(-50%) rotate(-45deg); }

/*
 * Page scroll lock.
 *
 * `overflow: hidden` on its own is ignored by iOS Safari, which scrolls the
 * page behind the panel and then loses the reader's place when it closes.
 * Pinning the body and offsetting it by the scroll position is what actually
 * holds; the script puts the offset in `top` and restores the scroll on close.
 */
.vora-nav-locked body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Collapsed state ----------------------------------------------------- */

/*
 * The collapsed rules are not here.
 *
 * They depend on a breakpoint width, and a media query cannot take one from a
 * custom property — so a stylesheet can only ever carry widths chosen in
 * advance. This file used to hold two near-identical copies, one per preset,
 * with a comment asking whoever came next to keep them in step. They are now
 * generated once per distinct width by `Vora_Elements_Widget_Nav_Menu::
 * collapsed_css()`, which also reads the real values out of Elementor rather
 * than assuming 767 and 1024, and lets a user name a width of their own.
 *
 * Everything above is breakpoint-independent and stays here, including the
 * panel chrome and the animation variables the generated block consumes.
 */

@media (prefers-reduced-motion: reduce) {
	.vora-nav * { transition: none !important; }
}