/* Native header component. All rules scoped under .cwm-header -- no
   bare-element selectors, so nothing here can leak onto content this
   migration hasn't touched yet (see the cubeworldfilms reference for
   why that rule exists). Background reuses the theme's own theme.json
   bg-color (#191919). Accent is #75CABA -- NOT theme.json's own
   text-link green (#75CABA); the site's accent was switched sitewide
   to this cyan on 2026-08-21 per direct request, matching the header
   nav's own pre-existing active-item color. */

.cwm-header {
	/* Re-hosted as a theme asset (was hotlinked to a third-party demo
	   domain, see MIGRATION.md Phase 1/2) -- no overlay, matching the
	   original (no background_overlay_* keys were set on this section). */
	background: url('../images/header-bg.png') center center / cover no-repeat;
	background-color: #191919;
	position: relative;
	z-index: 100;
}

/* Floats transparently over the Rentals hero image instead of sitting
   as its own solid bar above it -- see header-custom.php for exactly
   which 2 pages get this class. Taken out of normal flow so the hero
   section behind it starts at the very top of the viewport instead of
   being pushed down by the header's own height. */
.cwm-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: none;
	background-color: transparent;
}

/* Rental pages (the parent term + all 11 real subcategories) --
   2026-08-22 direct request: reuse the footer's own background photo
   here instead of staying fully transparent over the page's gradient.
   Same dark overlay treatment footer.css already uses on the same
   image, for the same reason (text legibility over a busy photo). */
body.tax-product_cat .cwm-header--overlay {
	background:
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('../images/footer-bg.png') center center / cover no-repeat;
}

/* Grid, not flex -- with two unequal-width siblings (logo vs. search+
   cart), flex's justify-content:center only centers the nav within
   whatever space is left over between them, which visually reads as
   off-center once those two side widths actually differ. A 1fr/auto/
   1fr grid keeps the two side columns equal regardless of their own
   content width, which is what actually keeps the middle column
   mathematically centered on the row. */
.cwm-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 30px;
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px 70px;
}

.cwm-header__logo {
	justify-self: start;
}

.cwm-header__logo img {
	display: block;
	max-height: 44px;
	width: auto;
	/* The <a> wrapping this (WP core's the_custom_logo()) already
	   correctly links home with cursor:pointer -- but the site's own
	   animated-cursor script (trx_addons' mouse-helper effect) sets a
	   real inline style="cursor:auto" directly on this <img> (confirmed
	   via the element's own getAttribute('style'), not guessed), which
	   silently wins over any plain stylesheet rule regardless of
	   specificity. !important is the one legitimate way a stylesheet
	   rule can still beat an inline style. */
	cursor: pointer !important;
}

.cwm-header__nav {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.cwm-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-self: end;
}

/* Plain white underline instead of a full outlined/filled box --
   2026-08-21 direct request. The container itself carries no border at
   all; the single visible line is the <input>'s own bottom border,
   recolored below -- NOT a second one stacked on top of it. */
.cwm-header__search {
	display: flex;
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 6px 4px;
}

.cwm-header__search-field {
	background: transparent;
	/* The theme's own global input styling gives every text input a
	   dark border-bottom (confirmed via computed style: rgb(62,62,62),
	   not guessed) that otherwise wins over a plain `border: 0` here --
	   overridden with !important, same reasoning as the logo-cursor fix
	   above: fighting one specific foreign rule, not a general pattern. */
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
	outline: 0;
	color: #ffffff;
	font-size: 14px;
	width: 150px;
	max-width: 150px;
	text-align: center;
	transition: border-color 0.2s ease;
}

.cwm-header__search-field:focus {
	border-bottom-color: #75CABA !important;
}

.cwm-header__search-field::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

/* The theme has a global button[type="submit"] rule (large padding,
   solid purple fill) meant for real CTA buttons elsewhere on the site
   -- it otherwise wins the cascade here and balloons this into a huge
   blank pill, burying the small search icon inside its own padding.
   Pinned to !important since it's fighting a specific foreign rule,
   not a general pattern to repeat elsewhere in this file. */
button.cwm-header__search-submit {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: #ffffff;
	cursor: pointer;
	transition: color 0.2s ease;
}

.cwm-header__search-submit:hover {
	/* Cyan, matching the header nav's own active-item color (#75CABA) --
	   not the site's brand green -- replaced 2026-08-21 per direct
	   request. */
	color: #75CABA;
}

.cwm-header__quote {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	text-decoration: none;
	position: relative;
}

.cwm-header__quote:hover {
	color: #75CABA;
}

.cwm-header__quote-count {
	background: #75CABA;
	color: #191919;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Max Mega Menu's default "flyout" dropdown type (used for menu items
   that were never explicitly set up as a themed "megamenu" panel --
   see MIGRATION.md for which two items this hit and why) renders with
   the plugin's own un-themed light-gray style, clashing hard with the
   dark megamenu panels used elsewhere in this same nav. Matched to the
   real dark panel background one of those uses (its own background is
   a gradient, not a plain color -- confirmed via computed style, not
   guessed) rather than inventing a new tone. The plugin generates and
   caches its own CSS with higher-specificity selectors (an ID-scoped
   #mega-menu-menu_main ancestor), which otherwise wins the cascade
   over a plain two-class selector -- !important is fighting that
   specific foreign rule, not a general pattern to repeat. */
.mega-menu-flyout .mega-sub-menu {
	background-color: transparent !important;
	background-image: linear-gradient(rgb(51, 51, 51), rgb(34, 34, 34)) !important;
	border: 0 !important;
}

.mega-menu-flyout .mega-sub-menu a.mega-menu-link {
	/* The links themselves carry their own light-gray background (not
	   just the panel) -- confirmed via computed style, that's what was
	   actually painting over the dark gradient above. */
	background-color: transparent !important;
	color: #ffffff !important;
}

.mega-menu-flyout .mega-sub-menu a.mega-menu-link:hover {
	color: #75CABA !important;
}

@media (max-width: 1100px) {
	.cwm-header__search-field {
		width: 100px;
		max-width: 100px;
	}
}

/**
 * 2026-08-26 direct request, real follow-up to lowering both mobile
 * breakpoints to 399px: at e.g. 500px, the nav still rendered as a
 * squeezed, wrapped mess even with the mobile-layout switch fixed --
 * root-caused (not guessed) via a live layout measurement: this file's
 * `.cwm-header__inner` grid is `1fr auto 1fr` with 70px of horizontal
 * padding and a 30px gap. The two 1fr side columns (logo, search+icons)
 * don't shrink below their own content's minimum width by default, so
 * at narrower widths they were claiming most of the row before the
 * middle "auto" nav column ever got a share -- nav was left with as
 * little as ~80px, not enough for even one item, so every item wrapped
 * mid-word onto its own line. Reclaiming padding/gap here and shrinking
 * the nav items' own font/padding (matching the customizer CSS's exact
 * selector so it wins) gives the nav column enough real room to lay out
 * normally down to 400px, wrapping whole items onto a second line
 * instead of breaking within one.
 */
@media (max-width: 899px) {
	.cwm-header__inner {
		padding: 12px 20px;
		gap: 12px;
	}

	.cwm-header__search-field {
		width: 70px;
		max-width: 70px;
	}

	#mega-menu-wrap-menu_main #mega-menu-menu_main > li.mega-menu-item > a.mega-menu-link {
		font-size: 14px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}

/* 2026-08-26: cutoff moved from 767px down to 399px, matching Max Mega
   Menu's own responsive_breakpoint setting (also lowered from 768px,
   wp_options-level change, not CSS) -- direct request: "the site goes
   to mobile too soon, ipads and 400+ screens can stay in desktop."
   Without this, a screen in the 400-767px range would already show the
   full desktop nav (Max Mega Menu's own change) but with this header's
   padding/logo/search-field still shrunk down to mobile sizing, an
   inconsistent half-mobile/half-desktop look. */
@media (max-width: 399px) {
	.cwm-header__inner {
		padding: 10px 20px;
	}

	.cwm-header__logo img {
		max-height: 34px;
	}

	.cwm-header__search-field {
		width: 90px;
		max-width: 90px;
	}
}