/* GG Header ------------------------------------------------------------ */

/* Elementor commonly wraps every widget in ".elementor-widget-container" / ".elementor-
   element" divs that default to (or get switched to, e.g. by Motion Effects) overflow:
   hidden — that clips our overflowing logo down to a barely-visible sliver even though this
   widget's own CSS says overflow:visible, because an ANCESTOR's overflow:hidden always wins
   over a descendant's overflow:visible. "elementor-widget-gg-header" is Elementor's own
   stable, documented class name for this widget's wrapper (derived from get_name()), so
   this defensively keeps every practical ancestor un-clipped regardless of Elementor
   version, theme, or per-widget motion-effect settings. */
.elementor-widget-gg-header,
.elementor-widget-gg-header > .elementor-widget-container {
	overflow: visible !important;
}

.elementor-widget-gg-header {
	position: relative;
	z-index: 25;
}

/* Extra safety net for setups where the clipping ancestor is the section/column wrapper
   rather than the widget wrapper itself — :has() is supported in all current major browsers
   (Chrome/Edge/Safari since 2023, Firefox since 2024); where it isn't, the rule above still
   covers the most common case on its own. */
.elementor-element:has(> .elementor-widget-container .gg-header),
.elementor-column:has(.gg-header),
.elementor-container:has(.gg-header) {
	overflow: visible !important;
}

.gg-header {
	position: relative;
	z-index: 20; /* keeps the overflowing logo painting above the section below it (e.g. the
	                Hero), since that section comes later in the DOM and would otherwise
	                stack on top by default. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--gg-font-sans, 'Poppins', sans-serif);
}

/* The mobile menu's real toggle control — see the render() docblock comment for why this is
   a checkbox rather than relying on JavaScript alone. Visually hidden using the standard
   "screen-reader-text"-style technique (NOT display:none, which would remove it from the
   keyboard tab order and break accessibility) — it stays fully focusable and toggleable via
   Tab + Space, it's simply not shown or given any layout space, since position:absolute also
   takes it out of this header's flex flow entirely so it can't disturb the logo/nav/actions
   layout regardless of where in the DOM it sits. */
.gg-header__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gg-header__logo {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.gg-header__logo img {
	display: block;
	height: auto;
}

/* When overflow mode is on, the logo container keeps its normal (small) footprint in the
   header's flex row — so nav/CTA/phone spacing never shifts — while the <img> itself is
   pulled out via absolute positioning and can grow arbitrarily large, vertically centered
   on the header's edge, without ever affecting the header's own height. A small min-width
   (instead of a hard 1px) also gives the image a sane fallback footprint if some theme CSS
   ever forces a min-height on flex children. */
.gg-header__logo--overflow {
	width: 1px;
	min-height: 1px;
	overflow: visible;
}

.gg-header__logo--overflow img {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}

.gg-header__logo--shadow img {
	filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

.gg-header__logo img {
	transition: opacity .2s ease;
}

.gg-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.gg-header__nav ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 28px;
}

.gg-header__nav a {
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.gg-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.gg-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
	transition: background-color .2s ease, color .2s ease;
	white-space: normal;
}

.gg-header__cta-text--mobile {
	display: none;
}

.gg-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.gg-header__phone .gg-icon-svg {
	display: inline-block;
	vertical-align: middle;
}

.gg-header__burger {
	display: none;
	position: relative;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	color: var(--gg-burger-color, currentColor);
}

/* The 3 bars are laid out via this inner wrapper, NOT directly inside the <button> —
   several browser engines (older WebKit builds especially) handle flexbox children with
   percentage widths unreliably when the flex container is a <button> element itself, so
   the button stays a plain sized box and this wrapper does the actual flex layout. */
.gg-header__burger-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.gg-header__burger-bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.gg-header__burger-bar + .gg-header__burger-bar {
	margin-top: 6px;
}

/* Hover color is intentionally scoped to devices that have a real pointer/mouse. Touch
   devices simulate ":hover" on tap and then never naturally clear it until the next unrelated
   tap elsewhere — without this media guard, tapping the menu button on a phone would leave
   it permanently tinted with the hover color, including after closing. Wrapping it like this
   is the standard fix and means it can never "stick" on mobile, regardless of what hover
   color is chosen in the Style tab. */
@media (hover: hover) and (pointer: fine) {
	.gg-header__burger:hover {
		color: var(--gg-burger-hover-color, #F0705C);
	}
}

/* The "open" (X) state is driven by BOTH the checkbox's native :checked state (pure CSS,
   always works) AND a JS-toggled .is-active class (progressive enhancement, kept in sync
   with the same checkbox by gg-header.js) — same visual result either way. */
.gg-header__burger.is-active,
.gg-header__toggle:checked ~ .gg-header__actions .gg-header__burger {
	color: var(--gg-burger-active-color, var(--gg-burger-color, currentColor));
}

/* Hamburger → X transform when the menu is open. */
.gg-header__burger.is-active .gg-header__burger-bar:nth-child(1),
.gg-header__toggle:checked ~ .gg-header__actions .gg-header__burger .gg-header__burger-bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.gg-header__burger.is-active .gg-header__burger-bar:nth-child(2),
.gg-header__toggle:checked ~ .gg-header__actions .gg-header__burger .gg-header__burger-bar:nth-child(2) {
	opacity: 0;
}
.gg-header__burger.is-active .gg-header__burger-bar:nth-child(3),
.gg-header__toggle:checked ~ .gg-header__actions .gg-header__burger .gg-header__burger-bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* A visible focus outline on the (visually hidden) checkbox itself when reached via
   keyboard Tab — the outline is drawn using the checkbox's own box, but since it has zero
   size we render it as a ring around the visible burger icon instead, so keyboard users can
   actually see where focus is, matching this site's accessibility requirements. */
.gg-header__toggle:focus-visible ~ .gg-header__actions .gg-header__burger {
	outline: 2px solid var(--gg-burger-active-color, #2F8C82);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Tablet */
@media (max-width: 1024px) {
	.gg-header__nav ul { gap: 16px; }
}

/* Mobile — logo, CTA button, and the menu icon share a single row; the phone number is
   hidden by default (toggle "Show on Mobile" in the Phone content section to bring it back,
   though the row may then wrap onto two lines since there's rarely room for all four). */
@media (max-width: 767px) {
	.gg-header {
		flex-wrap: wrap;
	}

	.gg-header__burger { display: block; }

	/* Keep the overflowing logo from covering the burger menu button on small screens. */
	.gg-header__logo--overflow {
		width: auto;
		min-width: 44px;
	}

	.gg-header__nav {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}

	.gg-header__nav.is-open,
	.gg-header__toggle:checked ~ .gg-header__nav { max-height: 500px; }

	.gg-header__nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 16px 0;
		width: 100%;
	}

	.gg-header__actions {
		flex-wrap: nowrap;
		gap: 10px;
		min-width: 0; /* lets the CTA button shrink/truncate instead of forcing overflow */
	}

	.gg-header__phone {
		display: none;
	}

	.gg-header--show-phone-mobile .gg-header__phone {
		display: inline-flex;
	}

	.gg-header__cta {
		font-size: 12px !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		min-width: 0;
	}

	.gg-header__cta-text--desktop {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 46vw;
	}

	/* If a shorter Mobile Override label was provided, show that instead of truncating the
	   full desktop text (a PHP-added class, not :has(), so this works in every browser). */
	.gg-header__cta--has-mobile-text .gg-header__cta-text--desktop {
		display: none;
	}
	.gg-header__cta--has-mobile-text .gg-header__cta-text--mobile {
		display: inline;
	}
}