/*
 * header.css — Site header / navbar styles.
 *
 * Design tokens
 *   --enveng-header-bg      #EEFAFF   (light sky-blue background)
 *   --enveng-active-bg      #219FD6   (active pill background)
 *   --enveng-active-text    #FFFFFF
 *   --enveng-link-color     #1B250E   (dark olive — inactive links)
 *   --enveng-radius-bottom  20px      (bottom-left + bottom-right corner)
 */

/* =============================================================================
   1. Header Shell
   ============================================================================= */

#masthead {
	background-color: #EEFAFF;
	border-bottom-left-radius:  20px;
	border-bottom-right-radius: 20px;

	/* Sits above page content; add position:sticky + top:0 to make it sticky */
	position: relative;
	z-index: 1030;
	width: 100%;
}

#masthead .navbar {
	padding-top:    0.625rem; /* ~10px */
	padding-bottom: 0.625rem;
}

/* =============================================================================
   2. Logo
   ============================================================================= */

.site-logo-link {
	display:        inline-flex;
	align-items:    center;
	text-decoration: none;
	flex-shrink: 0;
	padding: 0;     /* Override Bootstrap's default navbar-brand padding */
}

.site-logo-img {
	width:       140px;
	max-width:   100%;  /* Safety cap so it never overflows on very wide logos */
	object-fit:  contain;
	display:     block;

	/* Keep it crisp on HiDPI / retina displays */
	/* image-rendering: -webkit-optimize-contrast; */
	/* image-rendering: crisp-edges; */
}

/* Text fallback when no logo is uploaded */
.site-logo-fallback {
	font-size:   1.25rem;
	font-weight: 700;
	color:       #1B250E;
	letter-spacing: 0.02em;
}

/* =============================================================================
   3. Top-level Nav Links
   ============================================================================= */

.primary-nav .nav-link {
	color:          #1B250E;
	font-size:      0.9375rem; /* 15px */
	font-weight:    500;
	line-height:    1.4;
	padding:        0.45rem 1.1rem;
	border-radius:  12px;           /* Pill shape ready for active state */
	white-space:    nowrap;
	text-decoration: none;
	transition:     background-color 0.2s ease, color 0.2s ease;
}

/* Hover — light tint of the brand blue */
.primary-nav .nav-link:hover {
	background-color: rgba(33, 159, 214, 0.10);
	color:            #1276a3;
	text-decoration:  none;
}

/* Active / current page — filled pill */
.primary-nav .nav-link.active,
.primary-nav .nav-item.current-menu-item    > .nav-link,
.primary-nav .nav-item.current_page_item    > .nav-link,
.primary-nav .nav-item.current-menu-parent  > .nav-link,
.primary-nav .nav-item.current-menu-ancestor > .nav-link {
	background-color: #7FB04F;
	color:            #ffffff !important;
	font-weight: 700;
}

/* Don't double-apply active styles to a dropdown-toggle parent that's not active */
.primary-nav .nav-item.dropdown:not(.current-menu-parent):not(.current-menu-ancestor) > .nav-link.active {
	background-color: #7FB04F;
	color: #ffffff !important;
}

/* =============================================================================
   4. Dropdown Caret (Bootstrap adds ::after via .dropdown-toggle — customise it)
   ============================================================================= */

.primary-nav .dropdown-toggle::after {
	display:       inline-block;
	margin-left:   0.35em;
	vertical-align: 0.15em;
	border-top:    0.32em solid currentColor;
	border-right:  0.32em solid transparent;
	border-bottom: 0;
	border-left:   0.32em solid transparent;
}

/* =============================================================================
   5. Dropdown Menu Panel
   ============================================================================= */

.primary-nav .dropdown-menu {
	background-color: #ffffff;
	border:           none;
	border-radius:    14px;
	box-shadow:       0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
	padding:          0.5rem;
	min-width:        210px;
	margin-top:       0.5rem;

	/* Fade + slide-down animation on open */
	animation: envengDropdownIn 0.18s ease both;
}

@keyframes envengDropdownIn {
	from {
		opacity:   0;
		transform: translateY(-8px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

/* =============================================================================
   6. Dropdown Items
   ============================================================================= */

.primary-nav .dropdown-item {
	color:         #1B250E;
	font-size:     0.9rem;
	font-weight:   500;
	border-radius: 8px;
	padding:       0.6rem 1rem;
	transition:    background-color 0.15s ease, color 0.15s ease;
	white-space:   normal; /* Allow wrapping on long labels */
}

.primary-nav .dropdown-item:hover,
.primary-nav .dropdown-item:focus {
	background-color: rgba(33, 159, 214, 0.10);
	color:            #1276a3;
}

.primary-nav .dropdown-item.active,
.primary-nav .dropdown-item:active {
	background-color: #219FD6;
	color:            #ffffff;
}

/* =============================================================================
   7. Mobile — Hamburger Toggle Button
   ============================================================================= */

.site-navbar-toggler {
	border:           1.5px solid rgba(27, 37, 14, 0.25);
	border-radius:    10px;
	padding:          0.375rem 0.625rem;
	background-color: transparent;
	line-height:      1;
	cursor:           pointer;
	transition:       background-color 0.2s ease, border-color 0.2s ease;
}

.site-navbar-toggler:hover {
	background-color: rgba(33, 159, 214, 0.10);
	border-color:     rgba(33, 159, 214, 0.5);
}

.site-navbar-toggler:focus {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(33, 159, 214, 0.3);
}

/* =============================================================================
   8. Responsive — Mobile / Tablet (< lg breakpoint, 992px)
   ============================================================================= */

@media ( max-width: 991.98px ) {

	/* Remove the rounded bottom on mobile so the expanded nav looks connected */
	#masthead {
		border-bottom-left-radius:  0;
		border-bottom-right-radius: 0;
	}

	/* Expanded nav gets the rounded bottom instead */
	#masthead .navbar-collapse.show,
	#masthead .navbar-collapse.collapsing {
		border-bottom-left-radius:  20px;
		border-bottom-right-radius: 20px;
		overflow: hidden;
	}

	/* Stacked nav spacing */
	.primary-nav {
		padding:      0.75rem 0;
		border-top:   1px solid rgba(27, 37, 14, 0.08);
		margin-top:   0.5rem;
	}

	.primary-nav .nav-link {
		padding: 0.55rem 1rem;
	}

	/* Mobile dropdown: flush, no shadow */
	.primary-nav .dropdown-menu {
		box-shadow:    none;
		border-radius: 10px;
		background-color: rgba(33, 159, 214, 0.05);
		padding:       0.25rem 0;
		margin-top:    0.25rem;
		animation:     none; /* No animation on mobile */
	}

	.primary-nav .dropdown-item {
		padding-left: 1.5rem;
	}
}

/* =============================================================================
   9. Sticky Header Utility Class
   Add class="site-header sticky-header" to <header> in PHP to enable.
   ============================================================================= */

.site-header.sticky-header {
	position: sticky;
	top:      0;
}

/* Subtle shadow when page is scrolled (toggled via JS body.scrolled) */
body.scrolled .site-header {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}