/**
 * Header Styles
 *
 * CTA-focused header: utility bar with estimate button + phone,
 * compact navigation bar with logo + minimal nav + location + CTA.
 * Modeled after acehandymanservices.com conversion-focused pattern.
 *
 * @package One_Handyman
 * @version 2.0.0
 */

/* ==========================================================================
   Site Header
   ========================================================================== */

/* ==========================================================================
   Sticky Navigation with Shrinkable Header
   ==========================================================================
   The utility bar (topbar) scrolls away naturally with the page.
   The navigation bar is position: fixed; JS syncs its top offset to scroll so it
   tracks the topbar then stays pinned at the viewport top for the rest of the page.
   Homepage: transparent by default, opaque with blur on scroll.
   Other pages: solid navigation bar, opaque on scroll.
   ========================================================================== */

/* Site header wrapper — plain block, no positioning */
.site-header {
	position: relative;
	z-index: var(--one-z-sticky);
	background-color: transparent;
	box-shadow: none;
	--one-topbar-height: 40px;
	--one-nav-height: 72px;
	/* Header (topbar, menu, sub-menu) uses Jost instead of the mono nav font.
	   Scoped here so eyebrows/labels/buttons elsewhere keep their own fonts. */
	--one-font-nav: 'Jost', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Utility bar — always black, in normal flow (scrolls away with page) */
.site-header__utility-bar {
	background-color: #000;
	color: #fff;
	position: relative;
	z-index: 1;
	min-height: var(--one-topbar-height, 40px);
}

/* Utility bar right-side actions group */
.site-header__utility-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--one-spacing-lg, 24px);
}

/* GET AN ESTIMATE button in utility bar */
.site-header__utility-cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	background-color: var(--one-bronze, #B08D57);
	color: #000;
	font-family: var(--one-font-nav, 'JetBrains Mono', monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	transition: background-color var(--one-transition-fast, 150ms ease), color var(--one-transition-fast, 150ms ease);
}

.site-header__utility-cta:hover,
.site-header__utility-cta:focus {
	background-color: #fff;
	color: #000;
	outline: none;
}

/* Navigation bar — fixed below topbar; JS syncs `top` to scroll so it moves with
   the topbar then pins at viewport top. No CSS transition on top (avoids jank). */
.site-header__navigation {
	position: fixed;
	top: var(--one-topbar-height, 40px);
	left: 0;
	right: 0;
	z-index: var(--one-z-sticky);
	padding: var(--one-spacing-md) 0;
	background-color: #fff;
	border-bottom: var(--one-hairline);
	transition:
		padding 150ms ease-out,
		background-color 120ms ease-out,
		-webkit-backdrop-filter 120ms ease-out,
		backdrop-filter 120ms ease-out,
		box-shadow 120ms ease-out,
		border-color 120ms ease-out;
}

/* Homepage: navigation bar is transparent by default (over Elementor hero) */
.home .site-header__navigation:not(.is-scrolled):not(.has-open-panel),
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) {
	background-color: transparent;
	border-bottom-color: transparent;
}

/* Logo scales down smoothly when header is compact */
.site-header__logo-img,
.site-header__logo .custom-logo {
	transition: max-height 150ms ease-out;
}

/* Scrolled state — shrink padding + logo, add backdrop blur */
.site-header__navigation.is-scrolled {
	padding: 8px 0;
	background-color: rgba(10, 10, 10, 0.9);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* When mega-menu or property-menu panel is open, header takes on obsidian
   background to blend with the panel below (which uses --one-obsidian). */
.site-header__navigation.has-open-panel,
.home .site-header__navigation.has-open-panel {
	background-color: var(--one-obsidian, #1C1C1E);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: var(--one-bronze, #B08D57);
	border-bottom-width: 2px;
}

.site-header__navigation.has-open-panel .one-nav__link,
.site-header__navigation.has-open-panel .site-header__site-title {
	color: #fff;
}

.site-header__navigation.is-scrolled .site-header__logo-img,
.site-header__navigation.is-scrolled .site-header__logo .custom-logo {
	max-height: 44px;
}

/* Text/icons color: white on homepage (transparent nav over hero) and when scrolled */
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .one-nav__link,
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__site-title,
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__location-pin,
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__phone-cta,
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__mobile-cta-phone,
.site-header__navigation.is-scrolled .one-nav__link,
.site-header__navigation.is-scrolled .site-header__site-title,
.site-header__navigation.is-scrolled .site-header__location-pin,
.site-header__navigation.is-scrolled .site-header__phone-cta,
.site-header__navigation.is-scrolled .site-header__mobile-cta-phone,
.site-header__navigation.is-scrolled .one-nav__toggle,
.site-header__navigation.has-open-panel .one-nav__toggle,
.site-header__navigation.has-open-panel .site-header__mobile-cta-phone,
.hrg-home-hero .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .one-nav__toggle {
	color: #fff;
}

/* Inner pages: dark hamburger + phone icon on white nav bar */
body:not(.home):not(.hrg-home-hero) .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .one-nav__toggle,
body:not(.home):not(.hrg-home-hero) .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__mobile-cta-phone {
	color: var(--one-obsidian, #1C1C1E);
}

/* Services button — always white bg with obsidian text/icon, no underline.
   Consistent style regardless of scroll state or homepage/inner page. */
.site-header__navigation .site-header__property-btn,
.site-header__navigation.is-scrolled .site-header__property-btn,
.hrg-home-hero .site-header__navigation:not(.is-scrolled) .site-header__property-btn {
	background-color: #fff;
	color: var(--one-obsidian, #1C1C1E);
	text-decoration: none;
	border: none;
}

.site-header__navigation .site-header__property-btn:hover,
.site-header__navigation .site-header__property-btn:focus,
.site-header__navigation .site-header__property-btn[aria-expanded="true"] {
	background-color: #fff;
	color: var(--one-obsidian, #1C1C1E);
}

.site-header__navigation .site-header__property-btn:hover .site-header__property-icon,
.site-header__navigation .site-header__property-btn:focus .site-header__property-icon,
.site-header__navigation .site-header__property-btn[aria-expanded="true"] .site-header__property-icon {
	color: var(--one-obsidian, #1C1C1E);
}

/* Add spacing so homepage content isn't hidden behind the fixed header */
.home {
	--one-header-offset: 0px;
}

/* Homepage: pull hero up so transparent nav overlays it (topbar stays in flow) */
.home #primary,
.hrg-home-hero #primary {
	margin-top: calc(-1 * var(--one-nav-height, 72px));
}

/* Inner pages: offset content below fixed nav (topbar remains in document flow) */
body:not(.home):not(.hrg-home-hero) #primary {
	padding-top: var(--one-nav-height, 72px);
}

/* Logged-in WP admin: fixed nav sits below #wpadminbar (JS syncs top on scroll) */
body.admin-bar .site-header__navigation {
	top: calc(var(--one-wp-admin-bar-height, 32px) + var(--one-topbar-height, 40px));
}

/* ==========================================================================
   Utility Bar — Dark bg, "GET AN ESTIMATE" (left) + Phone CTA (right)
   ========================================================================== */

.site-header__utility-bar {
	background-color: var(--one-utility-bar-bg, #1C1C1E);
	color: #fff;
	padding: var(--one-spacing-sm) 0;
	border-bottom: 1px solid var(--one-obsidian-3, #2C2C31);
}

.site-header__utility-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--one-spacing-md);
}

/* Business Hours Label — Utility bar left side */
.site-header__hours-label {
	display: inline-flex;
	align-items: center;
	gap: var(--one-spacing-xs);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--one-font-nav, 'JetBrains Mono', monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Phone CTA — Prominent phone number styled as a clickable CTA */
.site-header__phone-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--one-spacing-sm);
	color: #fff;
	text-decoration: none;
	font-family: var(--one-font-nav, 'JetBrains Mono', monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: opacity var(--one-transition-fast);
}

.site-header__phone-cta:hover,
.site-header__phone-cta:focus {
	opacity: 0.85;
	color: #fff;
}

.site-header__phone-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.site-header__phone-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.site-header__phone-number {
	font-family: var(--one-font-nav, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   Navigation Bar — Logo (left) + nav actions (right)
   Base styles defined above; only inner layout here.
   ========================================================================== */

.site-header__navigation-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--one-spacing-lg);
}

/* ==========================================================================
   Branding (Logo / Site Title)
   ========================================================================== */

.site-header__branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.site-header__logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.site-header__logo .custom-logo {
	max-height: 60px;
	width: auto;
	height: auto;
}

/* Logo (no shimmer effect) */
.site-header__logo-link,
.site-header__logo .custom-logo-link {
	position: relative;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	height: 100%;
}

.site-header__logo-img {
	max-height: 80px;
	width: auto;
	max-width: var(--one-logo-width, 180px);
	height: auto;
	object-fit: contain;
}

.site-header__site-title {
	font-family: var(--one-font-heading);
	font-size: var(--one-font-size-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--one-obsidian, #1C1C1E);
	text-decoration: none;
	line-height: 1.2;
}

.site-header__site-title:hover,
.site-header__site-title:focus {
	color: var(--one-bronze-dark, #8C6D3F);
}

/* ==========================================================================
   Nav Actions — Grouped: nav links + location + CTA
   ========================================================================== */

.site-header__nav-actions {
	display: flex;
	align-items: center;
	gap: var(--one-spacing-md);
}

/* Location Pin Indicator */
.site-header__location-pin {
	display: inline-flex;
	align-items: center;
	gap: var(--one-spacing-xs);
	color: var(--one-text);
	font-size: var(--one-font-size-sm);
	font-weight: 500;
	padding: var(--one-spacing-xs) var(--one-spacing-sm);
	text-decoration: none;
	transition: color var(--one-transition-fast);
}

.site-header__location-pin:hover {
	color: var(--one-bronze-dark, #8C6D3F);
}

.site-header__location-pin .site-header__icon {
	color: var(--one-bronze, #B08D57);
	flex-shrink: 0;
}

.site-header__location-label {
	white-space: nowrap;
}

/* Navigation CTA Button (in nav bar) — Red, matches utility bar style */
.site-header__nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--one-spacing-sm) var(--one-spacing-lg);
	background-color: var(--one-obsidian, #1C1C1E);
	color: #fff;
	font-family: var(--one-font-eyebrow);
	font-size: var(--one-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 1px solid var(--one-obsidian, #1C1C1E);
	border-radius: 0;
	transition: background-color var(--one-transition-base), color var(--one-transition-base), border-color var(--one-transition-base);
	white-space: nowrap;
}

.site-header__nav-cta:hover,
.site-header__nav-cta:focus {
	background-color: var(--one-bronze, #B08D57);
	border-color: var(--one-bronze, #B08D57);
	color: var(--one-obsidian, #1C1C1E);
}

.site-header__nav-cta:focus-visible {
	outline: 2px solid var(--one-bronze, #B08D57);
	outline-offset: 2px;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

/* ==========================================================================
   Mobile CTA cluster — icon phone + compact Estimate button inside the
   FIXED nav bar. Hidden on desktop where the utility bar and nav-actions
   carry the same CTAs. Sits between logo and hamburger so both CTAs stay
   pinned at the top after the utility bar scrolls away (one-tap access).
   ========================================================================== */

.site-header__mobile-cta {
	display: none;
}

@media (max-width: 768px) {
	.site-header__mobile-cta {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-left: auto; /* push cluster to right; hamburger follows */
	}

	/* Icon-only phone button. WCAG-safe 40x40 tap target. */
	.site-header__mobile-cta-phone {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: inherit; /* inherits from nav-bar state colour rules below */
		text-decoration: none;
		border-radius: 50%;
		transition: background-color 150ms ease, color 150ms ease;
	}

	.site-header__mobile-cta-phone:hover,
	.site-header__mobile-cta-phone:focus {
		background-color: rgba(255, 255, 255, 0.12);
	}

	.site-header__mobile-cta-phone:focus-visible {
		outline: 2px solid var(--one-bronze, #B08D57);
		outline-offset: 2px;
	}

	/* Inner pages: white nav bar → subtle grey hover instead of white-on-white. */
	body:not(.home):not(.hrg-home-hero) .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__mobile-cta-phone:hover,
	body:not(.home):not(.hrg-home-hero) .site-header__navigation:not(.is-scrolled):not(.has-open-panel) .site-header__mobile-cta-phone:focus {
		background-color: var(--one-off-white-2, #F1F1F4);
	}

	/* Estimate button — always bronze so it stands out regardless of nav-bar state.
	   Flat rectangle: no border, no radius, no min-height. Height is driven by
	   padding + line-height so it hugs the nav-bar strip. */
	.site-header__mobile-cta-estimate {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 14px;
		background-color: var(--one-bronze, #B08D57);
		color: var(--one-obsidian, #1C1C1E);
		font-family: var(--one-font-nav, 'Jost', sans-serif);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		border: 0;
		border-radius: 0;
		transition: background-color 150ms ease, color 150ms ease;
		white-space: nowrap;
	}

	.site-header__mobile-cta-estimate:hover,
	.site-header__mobile-cta-estimate:focus {
		background-color: #fff;
		color: var(--one-obsidian, #1C1C1E);
		outline: none;
	}

	.site-header__mobile-cta-estimate:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

/* Very small screens: tighten the cluster so it fits on 320px iPhone SE. */
@media (max-width: 360px) {
	.site-header__mobile-cta {
		gap: 4px;
	}

	.site-header__mobile-cta-estimate {
		padding: 6px 10px;
		font-size: 10px;
		letter-spacing: 0.06em;
	}

	.site-header__mobile-cta-phone {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 768px) {
	/* Utility bar is hidden on mobile — phone + Estimate CTAs live in the
	   sticky nav-bar cluster (.site-header__mobile-cta) instead, so the topbar
	   is redundant and would just eat vertical space above the fold. */
	.site-header__utility-bar {
		display: none;
	}

	/* Zero out the CSS custom prop that positions the fixed nav bar so it
	   sits flush against the viewport top now that no topbar precedes it. */
	.site-header {
		--one-topbar-height: 0px;
	}

	/* Navigation bar: logo + hamburger only */
	.site-header__nav-actions {
		display: none;
	}

	.site-header__navigation {
		padding: 5px 0;
	}

	.site-header__navigation.is-scrolled {
		padding: 5px 0;
	}

	.site-header {
		--one-nav-height: 60px;
	}

	.site-header__navigation-inner {
		justify-content: space-between;
	}

	.site-header__logo .custom-logo,
	.site-header__logo-img,
	.site-header__navigation.is-scrolled .site-header__logo .custom-logo,
	.site-header__navigation.is-scrolled .site-header__logo-img {
		max-height: 50px;
	}
}

@media (min-width: 769px) {
	.one-nav__toggle {
		display: none;
	}

	.one-mobile-panel,
	.one-mobile-panel__overlay {
		display: none !important;
	}
}