/*--------------------------------------------------------------
# Header — Trust Bar + Bootstrap Navbar
#
# Top trust bar (gold) + main navigation (navy) + sticky phone CTA.
# Uses Bootstrap 5 navbar classes with design token overrides.
--------------------------------------------------------------*/

/* ==========================================================================
   Trust Bar (top strip)
   ========================================================================== */

.trust-bar {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	padding: var(--space-1) 0;
	letter-spacing: var(--tracking-wide);
}

.trust-bar .container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-5);
	flex-wrap: wrap;
}

.trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.trust-bar__item i {
	font-size: var(--text-base);
}

.trust-bar__phone {
	color: var(--color-primary-dark);
	text-decoration: none;
	font-weight: var(--weight-bold);
}

.trust-bar__phone:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   Main Navbar
   ========================================================================== */

.site-header .navbar {
	background-color: var(--color-primary);
	padding: var(--space-3) 0;
	transition: box-shadow var(--transition-base);
}

.site-header .navbar.scrolled {
	box-shadow: var(--shadow-lg);
}

.site-header .navbar-brand {
	color: var(--color-text-inverse);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-xl);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.site-header .navbar-brand:hover {
	color: var(--color-accent);
}

.site-header .navbar-brand img {
	max-height: 48px;
	width: auto;
}

/* Nav links */
.site-header .navbar-nav .nav-link,
.site-header .navbar-nav .menu-item a {
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-4);
	transition: color var(--transition-fast);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .menu-item a:hover {
	color: var(--color-accent);
}

.site-header .navbar-nav .current-menu-item > a,
.site-header .navbar-nav .current_page_item > a {
	color: var(--color-accent);
}

/* Phone CTA button in navbar */
.navbar-phone-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-emergency);
	color: var(--color-text-inverse);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.navbar-phone-cta:hover {
	background-color: var(--color-emergency-dark);
	color: var(--color-text-inverse);
	transform: scale(1.03);
}

.navbar-phone-cta i {
	animation: phone-ring 1.5s ease-in-out infinite;
}

@keyframes phone-ring {
	0%, 100% { transform: rotate(0deg); }
	15% { transform: rotate(15deg); }
	30% { transform: rotate(-10deg); }
	45% { transform: rotate(10deg); }
	60% { transform: rotate(-5deg); }
	75% { transform: rotate(0deg); }
}

/* Mobile toggler */
.site-header .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.3);
	padding: var(--space-2);
}

.site-header .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   WordPress Nav Menu + Bootstrap 5 Dropdown Compatibility
   ========================================================================== */

.site-header .navbar-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header .navbar-nav .menu-item {
	list-style: none;
}

/* Dropdown toggle caret */
.site-header .navbar-nav .dropdown-toggle::after {
	border-top-color: currentColor;
	margin-left: var(--space-1);
	vertical-align: 0.15em;
}

/* Dropdown menu (sub-menu) */
.site-header .navbar-nav .dropdown-menu {
	background-color: var(--color-primary-dark);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	padding: var(--space-2) 0;
	min-width: 220px;
	box-shadow: var(--shadow-lg);
	margin-top: var(--space-1);
}

/* Dropdown items */
.site-header .navbar-nav .dropdown-item {
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	padding: var(--space-2) var(--space-4);
	transition: all var(--transition-fast);
}

.site-header .navbar-nav .dropdown-item:hover,
.site-header .navbar-nav .dropdown-item:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-accent);
}

.site-header .navbar-nav .dropdown-item.active {
	background-color: rgba(213, 173, 54, 0.12);
	color: var(--color-accent);
}

/* ==========================================================================
   Mobile Sticky Phone CTA
   ========================================================================== */

.mobile-phone-cta {
	display: none;
}

@media (max-width: 991.98px) {
	.trust-bar .container {
		font-size: var(--text-xs);
		gap: var(--space-3);
	}

	/* Mobile nav collapse */
	.site-header .navbar-nav {
		padding: var(--space-3) 0;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		margin-top: var(--space-3);
	}

	.site-header .navbar-nav .nav-link {
		padding: var(--space-3) var(--space-2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	/* Mobile dropdown — no absolute positioning, just indented */
	.site-header .navbar-nav .dropdown-menu {
		position: static !important;
		float: none;
		border: none;
		box-shadow: none;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}

	.site-header .navbar-nav .dropdown-item {
		padding-left: var(--space-6);
		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	}

	.mobile-phone-cta {
		display: flex;
		position: fixed;
		bottom: var(--space-5);
		right: var(--space-5);
		z-index: var(--z-sticky);
		width: 60px;
		height: 60px;
		background-color: var(--color-emergency);
		color: var(--color-text-inverse);
		border-radius: var(--radius-full);
		align-items: center;
		justify-content: center;
		font-size: var(--text-xl);
		text-decoration: none;
		box-shadow: var(--shadow-lg);
		transition: transform var(--transition-fast);
	}

	.mobile-phone-cta:hover {
		transform: scale(1.1);
		color: var(--color-text-inverse);
	}
}