/*
 * header.css
 * Sticky header overrides for Astra theme.
 * Navy background, white navigation, "Start Investing" CTA button.
 *
 * Astra element selectors used:
 *   .site-header          — wrapper element
 *   .main-header-bar      — primary header bar
 *   .ast-primary-header-bar — Astra inner bar
 *   .main-header-menu     — nav menu container
 *   .menu-link            — individual nav links
 */

/* ==========================================================================
   Sticky Header
   ========================================================================== */
.site-header,
#masthead,
.ast-header-break-point .site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: var(--colour-navy) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Header Background Overrides (Astra)
   ========================================================================== */
.main-header-bar,
.ast-primary-header-bar,
.ast-below-header-bar,
#masthead .main-header-bar {
	background-color: var(--colour-navy) !important;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.site-header .site-title a,
.site-header .site-title {
	color: var(--colour-white) !important;
	font-weight: var(--font-weight-bold);
}

.custom-logo {
	max-height: 52px;
	width: auto;
}

/* ==========================================================================
   Navigation Links
   ========================================================================== */
.main-header-menu .menu-item a,
.main-header-menu .menu-link,
.ast-header-navigation .menu-item a,
#site-navigation .menu-link {
	color: rgba(255, 255, 255, 0.88) !important;
	font-weight: var(--font-weight-medium);
	font-size: 0.9375rem;
	transition: color var(--transition-fast);
	text-decoration: none;
}

.main-header-menu .menu-item a:hover,
.main-header-menu .menu-link:hover,
.ast-header-navigation .menu-item a:hover {
	color: var(--colour-green) !important;
}

/* Active / current menu item */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
	color: var(--colour-green) !important;
}

/* ==========================================================================
   Dropdown Sub-menus
   ========================================================================== */
.main-header-menu .sub-menu,
.ast-header-navigation .sub-menu {
	background-color: var(--colour-navy-dark) !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.main-header-menu .sub-menu .menu-link,
.ast-header-navigation .sub-menu a {
	color: rgba(255, 255, 255, 0.8) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.main-header-menu .sub-menu .menu-link:hover,
.ast-header-navigation .sub-menu a:hover {
	color: var(--colour-green) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   "Start Investing" CTA Button (injected via PHP hook)
   ========================================================================== */
.financeblog-header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.125rem;
	margin-left: var(--space-4);
	background-color: var(--colour-green);
	color: var(--colour-navy-dark) !important;
	font-size: 0.9rem;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	border-radius: var(--radius-sm);
	border: 2px solid var(--colour-green);
	white-space: nowrap;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.financeblog-header-cta:hover {
	background-color: var(--colour-green-dark);
	border-color: var(--colour-green-dark);
	color: var(--colour-navy-dark) !important;
	text-decoration: none;
}

/* Astra Pro native button override (if using Astra's built-in button) */
.ast-header-custom-item .ast-custom-button {
	background-color: var(--colour-green) !important;
	color: var(--colour-navy-dark) !important;
	border: 2px solid var(--colour-green) !important;
	border-radius: var(--radius-sm) !important;
	font-weight: var(--font-weight-bold) !important;
}

.ast-header-custom-item .ast-custom-button:hover {
	background-color: var(--colour-green-dark) !important;
	border-color: var(--colour-green-dark) !important;
}

/* ==========================================================================
   Mobile Hamburger Button
   ========================================================================== */
.ast-mobile-menu-trigger span,
.menu-toggle span,
button.ast-mobile-menu-trigger .ast-icon {
	background-color: var(--colour-white) !important;
	color: var(--colour-white) !important;
}

.ast-mobile-menu-trigger,
.ast-mobile-menu-trigger:hover {
	background: transparent !important;
}

/* ==========================================================================
   Mobile Nav Overlay
   ========================================================================== */
.ast-header-break-point .main-header-menu {
	background-color: var(--colour-navy-dark) !important;
}

.ast-header-break-point .main-header-menu .menu-item a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   Admin Bar Offset
   ========================================================================== */
.admin-bar .site-header,
.admin-bar #masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header,
	.admin-bar #masthead {
		top: 46px;
	}
}