/* ==========================================================================
   Header widget — ported from pestcontrolgroupusa_core_old
   (layout.css .site-header*, components.css .site-header*, responsive.css
   site-header rules). Classes are namespaced pcgu-header(__*) to avoid
   collisions with other plugins/themes; rendered output otherwise matches
   the original exactly. Colors/fonts/radii come from the design-system
   tokens the paired theme registers globally (--primary, --font-display,
   --radius, etc.) — see Global_Design_Tokens_Trait for the PHP-side
   equivalent used by controls.

   Any rule below touching box-shadow/height on an <a>/<img> is prefixed
   with ".pcgu-header" (not left as a single class) — Elementor's own
   frontend.min.css ships ".elementor a { box-shadow:none }" and
   ".elementor img { height:auto; max-width:100% }" at specificity (0,1,1),
   which silently beats a bare single-class selector (0,1,0). Found and
   documented the hard way while hardening the Hero widget; every future
   widget must check for this. ---- */

.pcgu-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
}

/* ---- Topbar ---- */

.pcgu-header__topbar {
	display: none;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	background-color: var(--primary);
	color: var(--primary-foreground);
	transition: opacity 300ms, transform 300ms, height 300ms;
}
.pcgu-header__topbar.is-scrolled {
	/* border-bottom isn't affected by height:0 (borders sit outside the
	   content box), so it left a ~1px sliver behind even fully collapsed —
	   zero it out explicitly so the sticky nav sits flush with no gap. */
	border-bottom-width: 0;
	transform: translateY(-100%);
	opacity: 0;
	height: 0;
	overflow: hidden;
}
.pcgu-header__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.625rem 1.5rem;
	font-size: 0.75rem;
}
.pcgu-header__topbar-list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.pcgu-header__topbar-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}
.pcgu-header__topbar-item span {
	letter-spacing: 0.02em;
}
.pcgu-header__topbar-icon {
	height: 0.875rem;
	width: 0.875rem;
	color: var(--accent);
	flex-shrink: 0;
}
.pcgu-header__topbar-call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--primary-foreground);
}
.pcgu-header__topbar-call .pcgu-header__topbar-icon {
	color: var(--accent);
}
.pcgu-header__topbar-call-label {
	color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
}
.pcgu-header__topbar-call-number {
	font-weight: 600;
}

/* ---- Nav bar ---- */

.pcgu-header__nav {
	transition: background-color 300ms, backdrop-filter 300ms, box-shadow 300ms;
	background-color: color-mix(in oklab, var(--background) 60%, transparent);
	backdrop-filter: blur(12px);
}
.pcgu-header__nav.is-scrolled {
	background-color: color-mix(in oklab, var(--background) 80%, transparent);
	backdrop-filter: blur(24px);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-lift);
}
.pcgu-header__nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.875rem 1rem;
}

.pcgu-header__logo {
	display: flex;
	align-items: center;
}
.pcgu-header .pcgu-header__logo-img {
	display: block;
	height: 3rem;
	width: auto;
}

/* ---- Desktop links ---- */

.pcgu-header__links {
	display: none;
	align-items: center;
	gap: 2rem;
}
.pcgu-header__link {
	font-size: 0.875rem;
	font-weight: 500;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
	transition: color 200ms;
}
.pcgu-header__link:hover {
	color: var(--foreground);
}

/* ---- Actions (call pill / mobile call button / menu toggle) ---- */

.pcgu-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pcgu-header .pcgu-header__call-pill {
	display: none;
	align-items: center;
	gap: 0.75rem;
	border-radius: 9999px;
	background-image: var(--gradient-call);
	padding: 0.625rem 1rem;
	color: var(--primary-foreground);
	box-shadow: var(--shadow-call);
	transition: filter 300ms, box-shadow 300ms;
}
.pcgu-header .pcgu-header__call-pill:hover {
	filter: brightness(1.1);
	box-shadow: 0 20px 50px -14px color-mix(in oklab, var(--secondary) 65%, transparent);
}
.pcgu-header .pcgu-header__call-pill:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--secondary) 30%, transparent);
}
.pcgu-header__call-pill-icon svg,
.pcgu-header__call-pill-icon i {
	height: 1rem;
	width: 1rem;
	font-size: 1rem;
	color: #fff;
}
.pcgu-header__call-pill-text {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.2;
}
.pcgu-header__call-pill-label {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.8);
}
.pcgu-header__call-pill-number {
	font-size: 0.875rem;
	font-weight: 700;
}

.pcgu-header .pcgu-header__call-btn-mobile {
	display: grid;
	place-items: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: 9999px;
	background-image: var(--gradient-call);
	color: var(--primary-foreground);
	box-shadow: var(--shadow-call);
}
.pcgu-header__call-btn-mobile svg,
.pcgu-header__call-btn-mobile i {
	height: 1.25rem;
	width: 1.25rem;
	font-size: 1.25rem;
}

/* .pcgu-header prefix required: the theme's reset.css (Hello Elementor's
   WP form-element defaults) styles every "[type=button]" element globally
   — display:inline-block, width:auto, padding:.5rem 1rem, border-color
   var(--primary), plus a :hover that repaints the background — at
   specificity (0,1,0), an exact TIE with a bare ".pcgu-header__menu-toggle"
   (also 0,1,0). Ties are decided by stylesheet load order, which isn't
   guaranteed, so the hamburger button was inconsistently picking up the
   theme's generic button chrome (wrong size/shape/colors) instead of ours
   — only noticeable on mobile/tablet since this button is display:none on
   desktop (>=1024px) by design. (0,2,0) resolves it deterministically. */
.pcgu-header .pcgu-header__menu-toggle {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-items: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: var(--radius-xl);
	border: 1px solid var(--border);
	background-color: var(--card);
	color: var(--foreground);
	padding: 0;
	transition: background-color 200ms;
}
.pcgu-header .pcgu-header__menu-toggle:hover,
.pcgu-header .pcgu-header__menu-toggle:focus {
	background-color: var(--muted);
	color: var(--foreground);
}
.pcgu-header__menu-toggle svg,
.pcgu-header__menu-toggle i {
	height: 1.25rem;
	width: 1.25rem;
	font-size: 1.25rem;
}
.pcgu-header__menu-icon--close {
	display: none;
}
.pcgu-header__menu-toggle.is-open .pcgu-header__menu-icon--menu {
	display: none;
}
.pcgu-header__menu-toggle.is-open .pcgu-header__menu-icon--close {
	display: block;
}

/* ---- Mobile drawer ---- */

.pcgu-header__drawer {
	position: fixed;
	inset: 0;
	top: 68px;
	z-index: 40;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms;
}
.pcgu-header__drawer.is-open {
	opacity: 1;
	pointer-events: auto;
}
.pcgu-header__drawer-backdrop {
	position: absolute;
	inset: 0;
	background-color: color-mix(in oklab, var(--primary) 40%, transparent);
	backdrop-filter: blur(4px);
}
.pcgu-header__drawer-panel {
	position: absolute;
	inset-inline: 0.75rem;
	top: 0.5rem;
	border-radius: var(--radius-3xl);
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--background) 95%, transparent);
	backdrop-filter: blur(24px);
	box-shadow: var(--shadow-elegant);
	padding: 1.25rem;
	transform: translateY(-1rem);
	transition: transform 300ms;
}
.pcgu-header__drawer.is-open .pcgu-header__drawer-panel {
	transform: translateY(0);
}
.pcgu-header__drawer-nav {
	display: flex;
	flex-direction: column;
}
.pcgu-header__drawer-nav > * + * {
	border-top: 1px solid var(--border);
}
.pcgu-header__drawer-link {
	display: block;
	padding-block: 0.875rem;
	font-size: 1rem;
	font-weight: 500;
	color: color-mix(in oklab, var(--foreground) 90%, transparent);
	transition: color 200ms;
}
.pcgu-header__drawer-link:hover {
	color: var(--secondary);
}
.pcgu-header .pcgu-header__drawer-call {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border-radius: var(--radius-2xl);
	background-image: var(--gradient-call);
	padding: 1rem 1.25rem;
	color: var(--primary-foreground);
	box-shadow: var(--shadow-call);
}
.pcgu-header__drawer-call svg,
.pcgu-header__drawer-call i {
	height: 1.25rem;
	width: 1.25rem;
	font-size: 1.25rem;
}
.pcgu-header__drawer-call span {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.pcgu-header__drawer-info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}
.pcgu-header__drawer-info-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: var(--radius-md);
	background-color: color-mix(in oklab, var(--muted) 60%, transparent);
	padding: 0.5rem 0.625rem;
}
.pcgu-header__drawer-info-item svg,
.pcgu-header__drawer-info-item i {
	height: 0.875rem;
	width: 0.875rem;
	font-size: 0.875rem;
	color: var(--secondary);
	flex-shrink: 0;
}

/* ---- Responsive — exact original breakpoints (sm:640 / md:768 / lg:1024) ---- */

@media (min-width: 640px) {
	.pcgu-header__nav-inner { padding-inline: 1.5rem; }
	.pcgu-header .pcgu-header__call-pill { display: inline-flex; }
	.pcgu-header .pcgu-header__call-btn-mobile { display: none; }
	.pcgu-header .pcgu-header__logo-img { height: 3.5rem; }
}

@media (min-width: 768px) {
	.pcgu-header__topbar { display: block; }
}

@media (min-width: 1024px) {
	.pcgu-header__links { display: flex; }
	/* Must match the ".pcgu-header .pcgu-header__menu-toggle" specificity
	   (0,2,0) used above to defeat the theme's [type=button] reset —
	   otherwise this hide-on-desktop rule (0,1,0) loses the cascade and the
	   hamburger stays visible on desktop too. */
	.pcgu-header .pcgu-header__menu-toggle { display: none; }
	.pcgu-header__drawer { display: none; }
	.pcgu-header .pcgu-header__logo-img { height: 4rem; }
}

/* ---- WordPress Admin Bar compatibility ----
   #wpadminbar is itself position:fixed at the very top of the viewport, so
   our own position:fixed header (and the separately-fixed mobile drawer)
   need to shift down by exactly the admin bar's height while it's showing,
   or they render underneath it. WP core already adds an "admin-bar" class
   to <body> whenever is_admin_bar_showing() is true (wp-includes/
   post-template.php, unconditional core behavior — no theme/plugin support
   needed), and the bar's height is a long-stable WP constant: 32px on
   screens wider than 782px, 46px at or below it (WP's own responsive
   breakpoint for the admin bar, independent of this widget's own 640/768/
   1024 breakpoints above). Logged-out visitors never get the "admin-bar"
   body class, so nothing below applies to them — header renders exactly
   as designed, unchanged. Scroll-state (.is-scrolled) only toggles
   background/shadow, never `top`, so sticky behavior is unaffected. ---- */
body.admin-bar .pcgu-header {
	top: 32px;
}
body.admin-bar .pcgu-header__drawer {
	/* Original drawer top (68px, the collapsed mobile nav-bar's height) plus
	   the desktop admin bar height. */
	top: 100px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .pcgu-header {
		top: 46px;
	}
	body.admin-bar .pcgu-header__drawer {
		top: 114px;
	}
}