/* ==========================================================================
   FINBOX NETWORK — Header / Navigation / Mobile Menu redesign
   Child theme of Consulting Grove.

   Everything here targets STANDARD WordPress core Navigation-block
   classes (.wp-block-navigation*, .is-menu-open, etc). No core files,
   no plugin files, and no menu items are touched — only appearance.
   ========================================================================== */

/* --------------------------------------------------------------------
   1) Centralized brand variables — change colors here, nowhere else.
   -------------------------------------------------------------------- */
:root {
	--finbox-gold-dark:  #B8860B;
	--finbox-gold:        #FFD700;
	--finbox-gold-light:  #FFF2A6;
	--finbox-blue-dark:   #003B9A;
	--finbox-blue:        #0066FF;
	--finbox-blue-light:  #00D9FF;

	--finbox-gold-gradient: linear-gradient(135deg, var(--finbox-gold-dark) 0%, var(--finbox-gold) 35%, var(--finbox-gold-light) 50%, var(--finbox-gold) 65%, var(--finbox-gold-dark) 100%);
	--finbox-blue-gradient: linear-gradient(135deg, var(--finbox-blue-dark) 0%, var(--finbox-blue) 50%, var(--finbox-blue-light) 100%);

	--finbox-transition-fast: 250ms ease;
	--finbox-transition-menu: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------
   2) Desktop header shell — dark blue base, subtle glass/elevated look.
   -------------------------------------------------------------------- */
.finbox-header {
	background: linear-gradient(180deg, var(--finbox-blue-dark) 0%, #002a70 100%);
	box-shadow: 0 2px 18px rgba(0, 20, 60, 0.28);
	position: relative;
}

/* thin gold hairline under the whole header, premium accent */
.finbox-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--finbox-gold-gradient);
	opacity: 0.9;
}

/* --------------------------------------------------------------------
   3) Logo — keep proportions intact on every screen size.
   -------------------------------------------------------------------- */
.finbox-header .finbox-logo img,
.finbox-header .wp-block-site-logo img {
	height: auto;
	max-height: 52px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 600px) {
	.finbox-header .finbox-logo img,
	.finbox-header .wp-block-site-logo img {
		max-height: 38px;
	}
}

/* --------------------------------------------------------------------
   4) Desktop navigation — normal / hover / active states.
   -------------------------------------------------------------------- */
.finbox-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white-text-color, #FBFBFB);
	transition: color var(--finbox-transition-fast);
}

/* replace the parent theme's blue underline with a gold one */
.finbox-nav .wp-block-navigation-item__content::before {
	background: var(--finbox-gold-gradient) !important;
	height: 2px;
}

.finbox-nav .wp-block-navigation-item__content:hover,
.finbox-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--finbox-gold-light);
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.finbox-nav .current-menu-item > .wp-block-navigation-item__content,
.finbox-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--finbox-gold);
	font-weight: 700;
}

/* visible, accessible focus ring for keyboard users */
.finbox-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--finbox-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------
   5) Signup / Login — make them read as buttons, not plain links.
   Matches by URL first (works with zero extra setup on most sites);
   also supports optional manual CSS classes "finbox-nav-signup" /
   "finbox-nav-login" added via the Site Editor's Navigation link
   "Advanced > Additional CSS class(es)" field for a guaranteed match
   if your Signup/Login URLs don't contain those words.
   -------------------------------------------------------------------- */
.finbox-nav a[href*="signup" i] .wp-block-navigation-item__content,
.finbox-nav a[href*="register" i] .wp-block-navigation-item__content,
.finbox-nav .finbox-nav-signup .wp-block-navigation-item__content,
.finbox-nav li[class*="signup" i] > .wp-block-navigation-item__content {
	background: var(--finbox-gold-gradient);
	color: #1a1300;
	padding: 8px 20px !important;
	border-radius: 8px;
	font-weight: 700;
	box-shadow: 0 2px 10px rgba(255, 215, 0, 0.25);
}
.finbox-nav a[href*="signup" i] .wp-block-navigation-item__content::before,
.finbox-nav a[href*="register" i] .wp-block-navigation-item__content::before {
	display: none;
}
.finbox-nav a[href*="signup" i] .wp-block-navigation-item__content:hover,
.finbox-nav a[href*="register" i] .wp-block-navigation-item__content:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
	color: #1a1300;
}

.finbox-nav a[href*="login" i] .wp-block-navigation-item__content,
.finbox-nav .finbox-nav-login .wp-block-navigation-item__content,
.finbox-nav li[class*="login" i] > .wp-block-navigation-item__content {
	border: 1.5px solid var(--finbox-gold);
	padding: 6.5px 18px !important;
	border-radius: 8px;
	color: #ffffff;
}
.finbox-nav a[href*="login" i] .wp-block-navigation-item__content::before {
	display: none;
}
.finbox-nav a[href*="login" i] .wp-block-navigation-item__content:hover {
	background: rgba(255, 215, 0, 0.12);
	color: var(--finbox-gold-light);
}

/* --------------------------------------------------------------------
   6) Hamburger / open button (mobile trigger).
   -------------------------------------------------------------------- */
.finbox-nav .wp-block-navigation__responsive-container-open {
	color: #ffffff;
	border-radius: 8px;
	transition: background-color var(--finbox-transition-fast), transform var(--finbox-transition-fast);
}
.finbox-nav .wp-block-navigation__responsive-container-open:hover,
.finbox-nav .wp-block-navigation__responsive-container-open:focus-visible {
	background-color: rgba(255, 215, 0, 0.14);
	outline: 2px solid var(--finbox-gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
   7) Mobile menu panel — slide in from the right, blue-gradient bg.
   The one unavoidable !important: WordPress writes the overlay
   background/text color as an inline style on this element, which we
   must intentionally override to use our gradient instead of a flat color.
   -------------------------------------------------------------------- */
.finbox-nav .wp-block-navigation__responsive-container {
	background: var(--finbox-blue-gradient) !important;
}

.finbox-nav .wp-block-navigation__responsive-container.is-menu-open {
	max-width: 380px;
	width: 86vw;
	right: 0;
	left: auto;
	transform: translateX(0);
	transition: transform var(--finbox-transition-menu);
}

/* start off-screen to the right before JS adds is-menu-open */
.finbox-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateX(100%);
}

.finbox-nav .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	padding: 20px 24px 32px;
}

/* semi-transparent dark backdrop behind the sliding panel */
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: -1;
}

/* --------------------------------------------------------------------
   8) Mobile menu header — logo + close button + gold divider.
   -------------------------------------------------------------------- */
.finbox-nav .wp-block-navigation__responsive-container-content::before {
	content: "";
	order: -1;
	display: block;
	height: 2px;
	margin: 56px 0 20px;
	background: var(--finbox-gold-gradient);
}

.finbox-nav .wp-block-navigation__responsive-container-close {
	color: #ffffff;
	transition: transform var(--finbox-transition-fast);
}
.finbox-nav .wp-block-navigation__responsive-container-close:hover,
.finbox-nav .wp-block-navigation__responsive-container-close:focus-visible {
	transform: rotate(90deg) scale(1.1);
	outline: 2px solid var(--finbox-gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
   9) Mobile menu items — large, touch-friendly, staggered entrance.
   -------------------------------------------------------------------- */
.finbox-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	opacity: 0;
	transform: translateX(16px);
	transition: opacity var(--finbox-transition-menu), transform var(--finbox-transition-menu);
}

.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 1;
	transform: translateX(0);
}

/* stagger: each item enters slightly after the previous one */
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { transition-delay: 60ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { transition-delay: 110ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { transition-delay: 160ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { transition-delay: 210ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { transition-delay: 260ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { transition-delay: 310ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { transition-delay: 360ms; }
.finbox-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+8) { transition-delay: 400ms; }

.finbox-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	padding: 18px 4px;
	font-size: 1.05rem;
	color: #ffffff;
}

.finbox-nav .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content {
	color: var(--finbox-gold);
	font-weight: 700;
	position: relative;
}
.finbox-nav .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--finbox-gold-gradient);
}

/* Signup/Login inside the mobile panel: full-width CTA buttons,
   pinned toward the bottom of the item list. */
.finbox-nav .wp-block-navigation__responsive-container-content a[href*="signup" i] .wp-block-navigation-item__content,
.finbox-nav .wp-block-navigation__responsive-container-content a[href*="register" i] .wp-block-navigation-item__content {
	background: var(--finbox-gold-gradient);
	color: #1a1300;
	text-align: center;
	border-radius: 10px;
	margin: 10px 0;
	padding: 16px;
}
.finbox-nav .wp-block-navigation__responsive-container-content li[href*="signup" i],
.finbox-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item:has(a[href*="signup" i]),
.finbox-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item:has(a[href*="register" i]) {
	border-bottom: none;
	margin-top: auto;
}

.finbox-nav .wp-block-navigation__responsive-container-content a[href*="login" i] .wp-block-navigation-item__content {
	border: 1.5px solid var(--finbox-gold);
	color: #ffffff;
	text-align: center;
	border-radius: 10px;
	padding: 14px;
}
.finbox-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item:has(a[href*="login" i]) {
	border-bottom: none;
}

/* --------------------------------------------------------------------
   10) Reduced motion — respect the user's OS setting.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.finbox-nav .wp-block-navigation__responsive-container,
	.finbox-nav .wp-block-navigation__responsive-container.is-menu-open,
	.finbox-nav .wp-block-navigation-item,
	.finbox-nav .wp-block-navigation-item__content,
	.finbox-nav .wp-block-navigation__responsive-container-close,
	.finbox-nav .wp-block-navigation__responsive-container-open {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

/* --------------------------------------------------------------------
   11) Small-screen safety — no horizontal scroll, content never overflows.
   Tested against 320 / 360 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440px.
   -------------------------------------------------------------------- */
@media (max-width: 360px) {
	.finbox-nav .wp-block-navigation__responsive-container.is-menu-open {
		width: 92vw;
	}
}

.finbox-header,
.finbox-nav {
	max-width: 100%;
	overflow-x: hidden;
}