/*
 * BuddyPilot — Navigation styles
 * Sticky top nav, logo, links, CTA, hamburger, mobile menu, dropdowns.
 */

/* ═══════════════════════════════════════════════════
   Site nav — sticky bar
   ═══════════════════════════════════════════════════ */

.site-nav {
	position:      sticky;
	top:           0;
	background:    var(--bp-navy);
	border-bottom: 1px solid rgba(147, 197, 253, .12);
	z-index:       300;
	padding:       0 clamp(1rem, 4vw, 2rem);
}

.nav-inner {
	max-width:       var(--bp-container);
	margin:          0 auto;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          68px;
	gap:             1.5rem;
}

/* ═══════════════════════════════════════════════════
   Logo
   ═══════════════════════════════════════════════════ */

.nav-logo {
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
	line-height:     1;
	flex-shrink:     0;
}

.nav-logo .b {
	font-size:      1.5rem;
	font-weight:    700;
	color:          var(--bp-tx-l1);
	letter-spacing: -.045em;
}

.nav-logo .p {
	font-size:      1.5rem;
	font-weight:    400;
	color:          var(--bp-tx-sky);
	letter-spacing: -.045em;
}

/* ═══════════════════════════════════════════════════
   Nav links list
   ═══════════════════════════════════════════════════ */

.nav-links {
	display:     flex;
	align-items: center;
	gap:         .25rem; /* items sit closer; spacing done via link padding */
	list-style:  none;
	margin:      0;
	padding:     0;
}

/* Regular nav links */
.nav-links > li > a:not(.nav-cta) {
	color:           var(--bp-tx-l2);
	text-decoration: none;
	font-size:       .875rem;
	font-weight:     500;
	transition:      color 150ms;
	padding:         .25rem .75rem;
	display:         inline-block;
	white-space:     nowrap;
}

.nav-links > li > a:not(.nav-cta):hover,
.nav-links > li > a[aria-current="true"] {
	color: var(--bp-tx-l1);
}

/* CTA button sits further right — extra left margin */
.nav-links > li:last-child {
	margin-left: .75rem;
}

/* ═══════════════════════════════════════════════════
   CTA button in nav
   ═══════════════════════════════════════════════════ */

.nav-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	background:      var(--bp-orange);
	color:           var(--bp-btn-orange-text);
	padding:         .625rem 1.75rem;
	border-radius:   8px;
	font-size:       .875rem;
	font-weight:     700;
	text-decoration: none;
	min-height:      44px; /* WCAG 2.5.5 */
	white-space:     nowrap;
	transition:      filter 150ms;
}

.nav-cta:hover {
	filter: brightness(1.06);
}

/* ═══════════════════════════════════════════════════
   Dropdown parent item
   ═══════════════════════════════════════════════════ */

.nav-links > li.menu-item-has-children {
	position:    relative;
	display:     inline-flex;
	align-items: center;
}

/* Sub-menu toggle button — injected by navigation.js */
.nav-sub-toggle {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	color:           var(--bp-tx-l2);
	padding:         .25rem .3rem;
	border-radius:   4px;
	transition:      color 150ms;
	line-height:     1;
	flex-shrink:     0;
	/* Tight spacing between link text and chevron */
	margin-left:     -0.4rem;
}

.nav-sub-toggle:hover {
	color: var(--bp-tx-l1);
}

.nav-sub-toggle svg {
	display:    block;
	transition: transform 200ms ease;
}

.menu-item-has-children.is-submenu-open > .nav-sub-toggle svg {
	transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════
   Dropdown panel (.sub-menu)
   ═══════════════════════════════════════════════════ */

.sub-menu {
	position:      absolute;
	top:           100%;
	left:          0;
	min-width:     210px;
	background:    var(--bp-dark, #0F1F3D);
	border:        1px solid rgba(147, 197, 253, .15);
	border-radius: var(--bp-r, 12px);
	box-shadow:    0 20px 48px rgba(10, 15, 30, .55), 0 4px 12px rgba(10, 15, 30, .3);
	list-style:    none;
	margin:        0;
	/* 12px transparent top padding bridges the gap between nav link and panel —
	   hover stays active while cursor crosses, menu never flickers. */
	padding:       calc(.375rem + 12px) 0 .375rem;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(-6px);
	transition:    opacity 160ms ease, visibility 160ms, transform 160ms ease;
	z-index:       301;
	pointer-events: none;
}

/* Show on hover, focus-within, or JS class */
.nav-links > li.menu-item-has-children:hover  > .sub-menu,
.nav-links > li.menu-item-has-children:focus-within > .sub-menu,
.nav-links > li.menu-item-has-children.is-submenu-open > .sub-menu {
	opacity:        1;
	visibility:     visible;
	transform:      translateY(0);
	pointer-events: auto;
}

/* Sub-menu items */
.sub-menu > li {
	list-style: none;
	margin:     0;
	padding:    0;
}

.sub-menu > li > a {
	display:         block;
	padding:         .65rem 1.25rem;
	color:           var(--bp-tx-l2);
	font-size:       .8125rem;
	font-weight:     500;
	text-decoration: none;
	white-space:     nowrap;
	transition:      color 160ms, background 160ms;
	border:          none;
}

.sub-menu > li > a:hover {
	color:      var(--bp-tx-l1);
	background: rgba(147, 197, 253, .07);
}

/* Active sub-item */
.sub-menu .current-menu-item > a,
.sub-menu .current_page_item > a {
	color: var(--bp-tx-sky);
}

/* Thin separator between sub-items */
.sub-menu > li + li {
	border-top: 1px solid rgba(255, 255, 255, .05);
}

/* ═══════════════════════════════════════════════════
   Hamburger button — hidden on desktop
   ═══════════════════════════════════════════════════ */

.nav-hamburger {
	display:         none;
	background:      transparent;
	border:          2px solid var(--bp-tx-l2);
	border-radius:   8px;
	padding:         .5rem .6rem;
	cursor:          pointer;
	color:           var(--bp-tx-l2);
	gap:             .35rem;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	min-width:       44px;
	min-height:      44px;
	transition:      border-color 150ms, color 150ms;
}

.nav-hamburger:hover {
	border-color: var(--bp-tx-l1);
	color:        var(--bp-tx-l1);
}

.hamburger-bar {
	display:       block;
	width:         20px;
	height:        2px;
	background:    currentColor;
	border-radius: 2px;
	transition:    transform 250ms, opacity 250ms;
}

/* Animated X when open */
.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
	opacity: 0;
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════
   Mobile nav — max-width: 900px
   ═══════════════════════════════════════════════════ */

@media (max-width: 900px) {

	.nav-hamburger {
		display: flex;
	}

	.site-nav .nav-links {
		display:        none;
		flex-direction: column;
		gap:            0;
	}

	.site-nav .nav-links.is-open {
		display:    flex;
		position:   fixed;
		inset:      68px 0 0 0;
		background: var(--bp-navy);
		padding:    1rem 1.5rem 2rem;
		z-index:    299;
		overflow-y: auto;
		gap:        0;
	}

	/* Every top-level item spans full width */
	.nav-links.is-open > li {
		width:       100%;
		display:     flex;
		flex-wrap:   wrap;
		align-items: center;
	}

	/* Top-level link fills available row (sub-toggle button stays right) */
	.nav-links.is-open > li > a:not(.nav-cta) {
		flex:          1 1 auto;
		font-size:     1.0625rem;
		padding:       .9rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		color:         var(--bp-tx-l2);
		display:       block;
		white-space:   normal;
	}

	/* Remove border when sub-menu is open (border moves to last sub-item) */
	.nav-links.is-open > li.menu-item-has-children.is-submenu-open > a:not(.nav-cta) {
		border-bottom-color: transparent;
	}

	/* Mobile sub-toggle: bigger tap target */
	.nav-links.is-open .nav-sub-toggle {
		flex:          0 0 auto;
		padding:       .9rem .5rem;
		margin-left:   0;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		border-radius: 0;
		color:         var(--bp-tx-l2);
	}

	.nav-links.is-open li.menu-item-has-children.is-submenu-open .nav-sub-toggle {
		border-bottom-color: transparent;
		color:               var(--bp-tx-l1);
	}

	/* CTA button */
	.nav-links.is-open > li > .nav-cta {
		margin-top:      1rem;
		width:           100%;
		flex:            1 1 100%;
		justify-content: center;
		font-size:       1rem;
	}

	/* Sub-menu: collapsed by default on mobile */
	.nav-links.is-open .sub-menu {
		/* Reset desktop absolute positioning */
		position:      static;
		opacity:       1;
		visibility:    visible;
		transform:     none;
		box-shadow:    none;
		border:        none;
		border-radius: 0;
		background:    transparent;
		padding:       0;
		min-width:     0;
		pointer-events: auto;
		transition:    none;

		/* Collapse */
		display:     none;
		width:       100%; /* wrap to full row */
		flex-basis:  100%;
	}

	/* Disable CSS hover/focus-within dropdown on mobile — JS class controls open state */
	.nav-links.is-open > li.menu-item-has-children:hover       > .sub-menu,
	.nav-links.is-open > li.menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	/* is-submenu-open has one extra class → higher specificity than :hover above */
	.nav-links.is-open > li.menu-item-has-children.is-submenu-open > .sub-menu {
		display: block;
	}

	/* Sub-menu links on mobile — .site-nav prefix raises specificity above desktop rules */
	.site-nav .nav-links.is-open .sub-menu > li > a {
		display:       block;
		padding:       .75rem 0 .75rem 1.25rem;
		font-size:     .9375rem;
		color:         var(--bp-tx-l2);
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		background:    transparent;
		white-space:   normal;
	}

	.site-nav .nav-links.is-open .sub-menu > li > a:hover {
		color:      var(--bp-tx-l1);
		background: transparent;
	}

	.nav-links.is-open .sub-menu > li + li {
		border-top: none;
	}

	.nav-links.is-open .sub-menu > li:last-child > a {
		margin-bottom: .5rem;
	}
}

/* ═══════════════════════════════════════════════════
   WordPress default menu item classes
   ═══════════════════════════════════════════════════ */

.nav-links .current-menu-item > a:not(.nav-cta),
.nav-links .current_page_item > a:not(.nav-cta),
.nav-links .current-menu-ancestor > a:not(.nav-cta) {
	color: var(--bp-tx-l1);
}