/**
 * 30-header.css — header (Elementor template 403) and its desktop/mobile navigation (Task 13), plus the box of the
 * header search slot (`.ric-header-search`, inserted by Section 4). Everything is scoped to .elementor-location-header;
 * element ids are header 403's. This file loads after post-403.css (inc/enqueue.php), so equal specificity wins.
 */

/* Menu toggle: a 44×44 target around the 22px icon (G-10). */
.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
	padding: 11px;
}

/* Header row at ≥ 768px (G-11): the CTA group takes its natural width and never wraps; the logo/nav group takes the
   rest. Containers size through Elementor's --width variable; selectors match post-403.css's (0,3,0) and win by order. */
@media (min-width: 768px) {
	.elementor-location-header .elementor-element.elementor-element-5e15abc9 {
		--width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
	.elementor-location-header .elementor-element.elementor-element-4e14c26e {
		--width: auto;
		flex: 0 0 auto;
		margin-inline-start: var(--ric-space-4);
	}
	/* One line each; at the touch widths (768–1024) a single-line CTA is 42px tall, so keep it a 44px tap target. */
	.elementor-location-header .elementor-widget-button .elementor-button {
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		min-height: var(--ric-tap-min);
	}
}

/* Burger widths (≤ 1024px): logo left; the toggle, the search slot and the CTAs on the right, in the DOM's order so the
   row reads in its Tab order (G-37: Joseph chose (a), 2026-10-11). */
@media (max-width: 1024px) {
	.elementor-location-header .elementor-element.elementor-element-5e15abc9 {
		justify-content: flex-start;
	}
	.elementor-location-header .elementor-element-5e15abc9 > .elementor-widget-theme-site-logo {
		margin-inline-end: auto;
	}
}

/* 1025–1279px: the seven desktop items ("This Month" since Spec D) need tighter padding and 15px type to stay on one
   row beside the CTAs and the search slot (up to 1279 since the "CMA Communities ↗" label, D-1-8 / G-34). */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-location-header .elementor-element.elementor-element-29ebe62e .elementor-nav-menu--main .elementor-item {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 15px;
	}
}
/* ≥ 1280px: Elementor's 15px item padding leaves no room for a seventh item at 1280–1439; 9px keeps about 30px to spare
   at 1280 (Spec D §8.6, measured in Chromium and WebKit). */
@media (min-width: 1280px) {
	.elementor-location-header .elementor-element.elementor-element-29ebe62e .elementor-nav-menu--main .elementor-item {
		padding-left: 9px;
		padding-right: 9px;
	}
}
/* 1025–1199px: with "CMA Communities ↗" and "This Month" (Spec D) the row is still too wide, so the nav goes to 14px
   with 4px padding and an 8px row gap, and the two CTAs to 15px with tighter spacing, 8px from the nav (G-11 keeps the
   header one 81px row; about 20px to spare at 1025, so a classic 17px scrollbar, as on Windows, still leaves one row at
   1025–1026; with a 12px CTA margin it wrapped there). The CTA selectors match post-403.css's per-widget rule (0,4,0)
   and win by order. Elementor animates nav-link changes (transition .4s), so measure after it settles. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-location-header .elementor-element.elementor-element-5e15abc9 {
		column-gap: var(--ric-space-2);
	}
	.elementor-location-header .elementor-element.elementor-element-29ebe62e .elementor-nav-menu--main .elementor-item {
		padding-left: 4px;
		padding-right: 4px;
		font-size: 14px;
	}
	.elementor-location-header .elementor-element.elementor-element-4e14c26e {
		column-gap: var(--ric-space-2);
		margin-inline-start: var(--ric-space-2);
	}
	.elementor-location-header .elementor-element:is(.elementor-element-73a3e02d, .elementor-element-2880a125) .elementor-button {
		padding-left: var(--ric-space-3);
		padding-right: var(--ric-space-3);
		font-size: 15px;
	}
}

/* Header search slot (Section 4 inserts widget ricsrhdr1; behaviour and look are Section 4's, 51-search.css). */
.elementor-location-header .elementor-element-5e15abc9 > .elementor-element-ricsrhdr1 {
	flex: 0 0 auto;
}
@media (min-width: 1025px) {
	.elementor-location-header .elementor-element-5e15abc9 > .elementor-element-ricsrhdr1 {
		margin-inline-start: auto;
	}
}
.elementor-location-header .ric-header-search-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ric-tap-min);
	min-height: var(--ric-tap-min);
}

/* Dropdown (G-22): the current item is marked by weight and a bar, not by colour alone. The selector out-ranks
   post-403.css's dropdown typography rule (0,5,0), which sets font-weight from the Text global. */
.elementor-location-header .elementor-element.elementor-element-29ebe62e .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--ric-color-primary);
}

/* Phones (D-1-4 = A, G-12; G-37 = (a), 2026-10-11): logo · menu · search · "Get Involved" on one row, the DOM's order,
   so Tab moves left to right as on desktop. The logo/nav container dissolves into the header row (display: contents) so
   its items and the CTA container share one row. The toggle's 44px box meets the search slot's (the negative margin
   cancels the row gap; no overlap), which keeps the row on one line at 320. */
@media (max-width: 767px) {
	.elementor-location-header :is(.elementor-element-24f50336, .elementor-element-24f50336 > .e-con-inner) {
		column-gap: var(--ric-space-2);
	}
	.elementor-location-header .elementor-element.elementor-element-5e15abc9 {
		display: contents;
	}
	.elementor-location-header .elementor-element.elementor-element-4e14c26e {
		--width: auto;
		flex: 0 0 auto;
	}
	.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
		margin-inline-end: calc(-1 * var(--ric-space-2));
	}
	.elementor-location-header .elementor-element-2880a125 .elementor-button {
		white-space: nowrap;
	}
}
@media (max-width: 359px) {
	/* 320px phones: a 64px logo leaves room for the CTA, the search slot and the toggle (beats post-403.css by order). */
	.elementor-location-header .elementor-element.elementor-element-78a0760 img {
		width: 64px;
	}
}