/**
 * Site header.
 * Rebuilt from the ElementsKit "Header" template (post ID 85, entire_site
 * condition) which is now retired -- see functions.php.
 * Original design: transparent bar absolutely positioned over the page's
 * hero content, logo+wordmark on the left, a single hamburger button on the
 * right that opens the fullscreen nav (still the original Elementor popup,
 * ID 1596, until that's rebuilt too).
 */

.cwf-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1111;
	padding: 10px 56px 0;
}

.cwf-header__inner {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
}

.cwf-header__branding {
	display: flex;
	flex-direction: row;
	align-items: center; /* was flex-start + a hardcoded 10px top padding on the wordmark to compensate -- that only balanced at the original 15px font-size; center is self-correcting at any size */
	gap: 20px; /* measured from the original ElementsKit header -- logo and wordmark had no gap before this, they were touching */
	width: 30%;
}

.cwf-header__logo img {
	display: block;
	width: 80px;  /* matches the logo attachment's natural size (80x92), same as the original */
	height: auto;
}

.cwf-header__wordmark {
	margin: 0;
	font-size: 17px; /* original was 15px (see MIGRATION.md); bumped up on request */
	line-height: 1.3; /* the originally-measured 1.68 read as too loose for a tight stacked wordmark once sized up -- tightened */
	font-weight: 400; /* bold comes from the <strong> tags in the markup, not this property -- matches production, which is also 400 here */
	color: #EBEBEB;
	font-family: var(--font-nav-title); /* Inter -- confirmed against production; not the site's Familjen Grotesk body font */
}

.cwf-header__nav-toggle-wrap {
	display: flex;
	justify-content: flex-end;
	width: 70%;
}

/**
 * Scoped as `.cwf-header .cwf-header__nav-toggle` (not just the single
 * class) on purpose: Elementor's kit CSS ships a blanket
 * `.elementor-kit-13 button { background-color: ...; padding: 15px 30px; ...}`
 * rule (specificity 0,1,1) that otherwise beats a plain
 * `.cwf-header__nav-toggle { ... }` (0,1,0) and reintroduces a background/
 * padding on every <button> we render. Two classes (0,2,0) wins outright.
 * Same fix pattern as the nav menu's close button below and the
 * `.elementor-kit-13 a` color collision in nav-menu.css.
 */
.cwf-header .cwf-header__nav-toggle {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #E9E9E9;
	line-height: 0;
	border-radius: 0;
	font: inherit;
}

.cwf-header__nav-toggle svg {
	width: 30px;
	height: 30px;
	display: block;
}

/* !important below is load-bearing, not decorative: the parent theme's
   reset.css ships a bare `button:focus, button:hover { background-
   color:#c36; color:#fff }` (specificity 0,1,1) that only a `:hover`/
   `:focus-visible` override doesn't actually beat -- nav-menu.js calls
   `toggle.focus()` when the menu closes, a *programmatic* focus that
   matches plain `:focus` but typically does NOT match `:focus-visible`
   (browsers suppress it for non-keyboard-triggered focus), so that
   state sailed right past the old override and the parent's pink
   painted the hamburger icon after every close -- caught by the
   client, not testing (`:focus` never got clicked through manually).
   Same class of bug as the FAQ/carousel-arrow pink-button fixes, same
   fix: cover plain `:focus` too and use `!important` rather than rely
   on specificity alone. See MIGRATION.md. */
.cwf-header .cwf-header__nav-toggle:hover,
.cwf-header .cwf-header__nav-toggle:focus,
.cwf-header .cwf-header__nav-toggle:focus-visible {
	background: none !important;
	border: 0 !important;
	color: var(--color-primary) !important;
}

@media (max-width: 1024px) {
	.cwf-header {
		padding: 20px 70px;
	}
}

@media (max-width: 767px) {
	.cwf-header {
		padding: 12px 20px; /* was 20px all round -- brought closer to the
		                       top on mobile per the client's request */
	}
	.cwf-header__inner {
		padding: 4px 0; /* was 10px 0 -- trimmed to match the tighter
		                    top padding above */
		align-items: center; /* was flex-start (inherited from desktop) --
		                         at flex-start only the branding/toggle
		                         containers' TOPS matched; the logo is
		                         taller than the 30px hamburger icon, so
		                         its center sat visibly lower. Centered
		                         per the client's request to bring the logo
		                         "in line with" the hamburger. */
	}
	.cwf-header__branding {
		width: 65%;
	}
	.cwf-header__logo img {
		width: 56px; /* was 80px -- sized down per the client's request,
		                 the wordmark next to it is unchanged */
	}
	.cwf-header__nav-toggle-wrap {
		width: 30%;
	}
}