/**
 * Shot Pay nav menu.
 *
 * Structure ported from Colt Optics' co-nav-menu.css; the styling is Shot Pay's
 * own and reads from the theme tokens, so the menu tracks the brand rather than
 * pinning colours.
 *
 * Colour is NOT set here for the desktop bar. The header's per-page modes
 * (.sp-header--dark / --mixed / --light) and the scrolled state own that, in
 * assets/css/header.css, so this file handles structure, motion and layout and
 * lets the theming layer decide black or white.
 *
 * The mobile overlay is always dark, whatever the page mode, because it covers
 * the viewport with its own near-black surface.
 */

/* ---------------------------------------------------------------------------
   Wrapper
   --------------------------------------------------------------------------- */

.sp-nav-menu-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.sp-nav-menu-wrapper *,
.sp-mobile-overlay * {
	-webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   Desktop nav
   --------------------------------------------------------------------------- */

.sp-nav-menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav-menu > li {
	position: relative;
}

.sp-nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	font-family: var( --sp-font, "Poppins", sans-serif );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var( --sp-ease, ease );
}

.sp-nav-menu .sp-arrow {
	transition: transform 0.25s var( --sp-ease, ease );
}

.sp-nav-menu > li.sp-dropdown-open .sp-arrow,
.sp-nav-menu > li:focus-within .sp-arrow {
	transform: rotate( 180deg );
}

/* Underline on hover, drawn from the accent. */
.sp-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var( --sp-color-accent, #FF3400 );
	transition: width 0.25s var( --sp-ease, ease );
}

.sp-nav-menu > li > a:hover::after,
.sp-nav-menu > li.sp-dropdown-open > a::after,
.sp-nav-menu > li:focus-within > a::after {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Desktop dropdowns
   --------------------------------------------------------------------------- */

.sp-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var( --sp-color-ink-soft, #141414 );
	border-radius: var( --sp-radius-md, 10px );
	box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.28 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 0.2s ease, transform 0.2s var( --sp-ease, ease ), visibility 0.2s;
	z-index: 1000;
}

.sp-nav-menu > li.sp-dropdown-open > .sp-sub-menu,
.sp-nav-menu > li:focus-within > .sp-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* Keep the last item's dropdown inside the viewport. */
.sp-nav-menu > li:last-child > .sp-sub-menu {
	left: auto;
	right: 0;
}

.sp-sub-menu li a {
	display: block;
	padding: 10px 20px;
	font-family: var( --sp-font, "Poppins", sans-serif );
	font-size: 14px;
	font-weight: 500;
	color: var( --sp-color-surface, #FFFFFF );
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-sub-menu li a:hover,
.sp-sub-menu li a:focus-visible {
	background: rgba( 255, 255, 255, 0.07 );
	color: var( --sp-color-accent, #FF3400 );
}

.sp-sub-menu--deep {
	position: static;
	box-shadow: none;
	background: transparent;
	padding: 0 0 0 12px;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Hamburger
   --------------------------------------------------------------------------- */

/* The padding override is load-bearing, not defensive tidiness. Both Hello
   Elementor's reset and the Elementor kit style bare <button> elements, and
   they win on specificity: the button inherits 18px of vertical padding, which
   with border-box leaves an 8px content box inside the 44px button. Three 2px
   bars plus two 5px gaps need 16px, so flex shrinks them to zero height and
   the hamburger renders as an empty accent square. The flex-basis on the bars
   is the second guard, so they cannot collapse even if padding creeps back. */
.sp-nav-menu-wrapper .sp-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;   /* 44px keeps the touch target at the accessible minimum */
	height: 44px;
	padding: 0 !important;
	background: var( --sp-color-accent, #FF3400 );
	border: 0;
	border-radius: var( --sp-radius-sm, 4px );
	cursor: pointer;
	position: relative;
	z-index: 1010;
	transition: background-color 0.2s ease;
}

.sp-hamburger span {
	display: block;
	flex: 0 0 2px;
	width: 20px;
	height: 2px;
	background-color: var( --sp-color-surface, #FFFFFF );
	transform-origin: center;
	transition: transform 0.32s cubic-bezier( 0.4, 0, 0.2, 1 ),
		opacity 0.22s ease,
		width 0.22s ease;
}

.sp-hamburger.is-active span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.sp-hamburger.is-active span:nth-child( 2 ) {
	opacity: 0;
	width: 0;
}

.sp-hamburger.is-active span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ---------------------------------------------------------------------------
   Mobile mode

   sp-mobile-mode is applied by the JS. The media query below repeats the same
   layout so it is correct on first paint even if the script has not run yet.
   Colt hit exactly this: with the responsive switch JS-only, a deferred script
   left the desktop nav showing and the hamburger hidden until the user
   scrolled. Keep the max-width in sync with the widget's breakpoint control.
   --------------------------------------------------------------------------- */

.sp-nav-menu-wrapper.sp-mobile-mode .sp-desktop-nav {
	display: none;
}

.sp-nav-menu-wrapper.sp-mobile-mode .sp-hamburger {
	display: flex;
}

@media ( max-width: 1024px ) {
	.sp-nav-menu-wrapper .sp-desktop-nav {
		display: none;
	}

	.sp-nav-menu-wrapper .sp-hamburger {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
   Mobile overlay
   --------------------------------------------------------------------------- */

.sp-mobile-overlay {
	display: flex;
	position: fixed;
	inset: 0;
	flex-direction: column;
	justify-content: center;
	padding: 96px 32px 48px;
	background-color: var( --sp-color-primary, #000000 );
	overflow-y: auto;
	z-index: 1000;

	/* Hidden by default; opacity and visibility rather than display so it can animate. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s;
}

.sp-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.sp-mobile-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-mobile-item {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );

	/* Items stagger in behind the overlay fade. */
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.3s ease, transform 0.3s var( --sp-ease, ease );
	transition-delay: calc( var( --item-index, 0 ) * 45ms + 120ms );
}

.sp-mobile-overlay.is-open .sp-mobile-item {
	opacity: 1;
	transform: translateY( 0 );
}

.sp-mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sp-mobile-row > a {
	flex: 1;
	padding: 18px 0;
	font-family: var( --sp-font, "Poppins", sans-serif );
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --sp-color-surface, #FFFFFF );
	text-decoration: none;
	transition: color 0.2s ease;
}

.sp-mobile-row > a:hover,
.sp-mobile-row > a:focus-visible {
	color: var( --sp-color-accent, #FF3400 );
}

/* Same theme button padding applies here, so the override is repeated. */
.sp-mobile-overlay .sp-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	background: transparent !important;
	border: 0;
	color: var( --sp-color-surface, #FFFFFF );
	cursor: pointer;
	transition: color 0.2s ease;
}

.sp-mobile-toggle:hover {
	color: var( --sp-color-accent, #FF3400 );
}

/* Plus turns into a minus when its section is open. */
.sp-mobile-toggle .sp-plus-v {
	transform-origin: center;
	transition: transform 0.25s var( --sp-ease, ease ), opacity 0.25s ease;
}

.sp-mobile-toggle.is-open .sp-plus-v {
	transform: rotate( 90deg );
	opacity: 0;
}

.sp-mobile-sub {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.32s var( --sp-ease, ease );
}

.sp-mobile-sub.is-open {
	max-height: 60vh;
}

.sp-mobile-sub li a {
	display: block;
	margin-bottom: 2px;
	padding: 12px 0 12px 16px;
	border-left: 2px solid rgba( 255, 255, 255, 0.2 );
	font-family: var( --sp-font, "Poppins", sans-serif );
	font-size: 15px;
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.72 );
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sp-mobile-sub li a:hover,
.sp-mobile-sub li a:focus-visible {
	color: var( --sp-color-surface, #FFFFFF );
	border-left-color: var( --sp-color-accent, #FF3400 );
}

/* ---------------------------------------------------------------------------
   Focus visibility
   --------------------------------------------------------------------------- */

.sp-nav-menu a:focus-visible,
.sp-mobile-row > a:focus-visible,
.sp-mobile-sub a:focus-visible,
.sp-mobile-toggle:focus-visible,
.sp-hamburger:focus-visible {
	outline: 2px solid var( --sp-color-accent, #FF3400 );
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.sp-nav-menu-wrapper *,
	.sp-mobile-overlay * {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-duration: 0.01ms !important;
	}
}