/**
 * Global header fixes (applies to the Elementor header on every page).
 *
 * 1. Logo: preserve its true aspect ratio at a fixed height instead of being
 *    locked to a 13% container width (which squished it as the viewport
 *    narrowed because the <img> had a fixed height attribute and no height:auto).
 * 2. Primary nav: keep all items on a single line throughout the desktop range
 *    (>=1201px) until the mobile breakpoint (<=1200px) takes over, by tightening
 *    the per-item spacing instead of allowing the menu to wrap.
 */

/* ---- Prevent horizontal page overflow ---- */
/* Stray full-width / fixed-max-width elements can make the document wider than
   the viewport at in-between widths, which lets the page scroll sideways and
   exposes a gap beside the full-width green header. Clip horizontal overflow at
   the document level (clip, not hidden, so position:sticky/fixed still work). */
html,
body {
	overflow-x: clip;
}

/* ---- Robust fallback for the primary-nav font (fixes Mac-only overlap) ---- */
/* The nav is meant to render in the theme's Rubik web font. When Rubik fails to
   load for a visitor (e.g. Google Fonts blocked by a network/privacy setting), the
   theme's menu rule (`font-family: , sans-serif`) drops to the generic sans-serif:
   Arial on Windows (narrow, still fits) but the wider Helvetica on macOS, which
   overflows the single-line bar and overlaps the logo. We keep Rubik first so the
   font is unchanged for everyone who can load it, and add Arial ahead of the generic
   keyword so the rare visitor without Rubik gets a narrow fallback instead of the
   wide Helvetica. Applied to both the top header (elementor-8674) and the sticky
   header (elementor-9593) so they stay consistent. */
#pxl-header-elementor .pxl-menu-primary li a,
#pxl-header-elementor .pxl-menu-primary > li > a {
	font-family: "Rubik", Arial, sans-serif !important;
}

@media (min-width: 1201px) {
	/* ---- Logo: full aspect-ratio responsiveness ---- */
	#pxl-header-elementor .elementor-element-8ed7256 {
		width: auto !important;
		max-width: 30% !important;
		flex: 0 0 auto !important;
		--container-widget-width: auto !important;
		--container-widget-flex-grow: 0 !important;
	}

	#pxl-header-elementor .pxl-logo img {
		height: 40px !important;
		width: auto !important;
		max-width: 100% !important;
		object-fit: contain !important;
	}

	/* ---- Keep the header row and menu on one line ---- */
	/* Full-width green bar with adaptive side padding. On wide screens the
	   content is constrained to ~78% (11vw each side). As the viewport narrows,
	   the padding shrinks so the content area never drops below ~1120px, which
	   keeps the logo, nav and CTA on one line without wrapping or overlapping.
	   clamp(floor, scaled, cap):
	     - cap 11vw  -> wide-screen look (kept above ~1436px)
	     - scaled (100vw - 1120px)/2 -> holds a ~1120px content area while narrow
	     - floor 16px -> minimum breathing room near the mobile breakpoint */
	#pxl-header-elementor .elementor-element-f87a0f9 {
		flex-wrap: nowrap !important;
		padding-left: clamp(16px, calc((100vw - 1120px) / 2), 11vw) !important;
		padding-right: clamp(16px, calc((100vw - 1120px) / 2), 11vw) !important;
	}

	#pxl-header-elementor .elementor-element-7971037 {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: center;
	}

	#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li {
		white-space: nowrap;
	}
}

/* Tighten item spacing on smaller desktops so nothing wraps before mobile. */
@media (min-width: 1201px) and (max-width: 1500px) {
	#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li {
		margin-left: 13px !important;
		margin-right: 13px !important;
	}
}

@media (min-width: 1201px) and (max-width: 1320px) {
	#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li {
		margin-left: 9px !important;
		margin-right: 9px !important;
	}

	#pxl-header-elementor .pxl-nav-menu .pxl-menu-primary > li > a {
		font-size: 15px !important;
	}
}

/* ---- Mobile / tablet header logo (≤1200px) ---- */
@media (max-width: 1200px) {
	#pxl-header-mobile .pxl-header-branding,
	#pxl-header-elementor #pxl-header-mobile .pxl-header-branding {
		flex: 0 1 auto !important;
		max-width: calc(100% - 56px) !important;
	}

	#pxl-header-mobile .pxl-header-branding a,
	#pxl-header-elementor #pxl-header-mobile .pxl-header-branding a {
		display: inline-flex !important;
	}

	#pxl-header-mobile .pxl-header-branding img,
	#pxl-header-mobile .pxl-logo-mobile img,
	#pxl-header-elementor #pxl-header-mobile .pxl-header-branding img {
		height: 37px !important;
		width: auto !important;
		max-width: 100% !important;
		object-fit: contain !important;
	}

	/* Slide-out menu shows two logos by default. Keep only the colored
	   green/blue/black horizontal logo (matching the sticky header) and hide
	   the secondary light "SWFTLABS LLC" wordmark. */
	#pxl-header-mobile .pxl-logo-mobile .pxl-logo--light {
		display: none !important;
	}

	#pxl-header-mobile .pxl-logo-mobile .pxl-logo--dark {
		display: inline-flex !important;
	}
}