/* Homepage v2 — Header overrides
 * --------------------------------------------------------------
 * CSS scoped to the dedicated `header-v2.php` template (loaded via
 * `get_header( 'v2' )` from `page-homepage-v2.php` only).
 *
 * This file is loaded AFTER `gpf-styles.css` and AFTER the child
 * theme's `style.css`, so any rule here wins the cascade on shared
 * selectors without needing `!important`.
 *
 * Scope note: this entire stylesheet is loaded ONLY on the homepage
 * v2 page, so even bare ID selectors like `#masthead` and
 * `#site-navigation` are safe — they only apply where this file is
 * served. No other page on the site is affected.
 * --------------------------------------------------------------
 */

/* ============================================================
   Header / navigation: in normal flow, above the hero
   ============================================================
   The parent theme (great-white/style.css) declares:
     #masthead       { display: block !important; float: left; width: 100%; … }
     #site-navigation { background: black; width: 100%; float: left }
   `float: left` doesn't expand the parent #page.site, so on a page
   where the first non-floated sibling is a full-bleed hero (us),
   the floats and the hero share the top of #page and overlap
   visually — the hero appears taller and the header content is
   layered on/under it. Reset both to plain block flow with
   matching specificity (0,1,0) and let this file's later source
   order win the cascade.
   ============================================================ */
#masthead {
	position: relative;
	float: none;
	width: 100%;
	background: #ffffff;
	z-index: 10;
}

#site-navigation {
	position: relative;
	float: none;
	clear: both;
	width: 100%;
	z-index: 9;
	/* Brand-orange nav bar (replaces the parent theme's black). Menu
	 * link text in the child theme is already `color: #fff` so contrast
	 * stays readable. The mega-menu link backgrounds are forced to
	 * transparent further down so the orange bar shows through
	 * end-to-end. */
	background: #f5841f;
}

/* The parent theme also sets `#content { text-align: center }`
 * globally, which makes our left-aligned hero/section text inherit
 * centre alignment until each block explicitly resets it. Reset
 * locally on homepage v2 so child blocks don't have to fight it. */
#content.site-content {
	text-align: left;
}

/* ============================================================
   Nav bar — fully orange (override mega-menu plugin backgrounds)
   ============================================================
   The mega-menu plugin renders each menu link as
   `<a class="mega-menu-link">` and the child theme styles it:
     #site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1
       ul#mega-menu-menu-1 li a.mega-menu-link {
         background: #151515; padding: 0 20px; … }
   That dark background was painting on top of the orange `#site-
   navigation` bg, making strips of the bar look dark. Replicate
   the same selector chain so we tie on specificity and win via
   source order — then drop the background to transparent so the
   orange bar shows through. */
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li a.mega-menu-link {
	background: transparent;
}
/* Hover / focus / active / current-item text colour: BLACK on the
 * orange bar (not the brand green the child theme applies site-wide).
 *
 * The child theme has
 *   .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1
 *     li.mega-menu-item a.mega-menu-link:hover { color: #00C750 !important }
 * with `!important`. We match its selector chain plus carry our own
 * `!important` so we win on the same-specificity tie via source order. */
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li a.mega-menu-link:hover,
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li a.mega-menu-link:focus,
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li a.mega-menu-link:active,
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-current-menu-item a.mega-menu-link,
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item a.mega-menu-link:hover,
#site-navigation .mega-menu-wrap#mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item a.mega-menu-link:focus {
	background: #d96f10 !important;
	color: #000000 !important;
}
/* Plain `wp_nav_menu()` fallback (no mega-menu plugin) — defensive. */
#site-navigation ul.nav-menu > li > a:hover,
#site-navigation ul.nav-menu > li > a:focus,
#site-navigation ul.nav-menu > li.current-menu-item > a {
	color: #000000;
}
/* Also catch the simpler nav-menu fallback (no mega-menu plugin)
 * and any other inner backgrounds that might paint a dark strip. */
#site-navigation ul,
#site-navigation li,
#site-navigation .mega-menu-wrap,
#site-navigation #mega-menu-menu-1,
#site-navigation .menu-toggle {
	background: transparent;
}
#site-navigation ul.nav-menu > li > a {
	background: transparent;
}

/* ============================================================
   Dealer-link buttons (Register + Dealer Login)
   ============================================================
   header-v2.php renders these inside `.header-dealer-links` —
   the container now has a tagline above the two buttons:
     <div class="header-dealer-links">
       <p class="dealer-links-tagline">Become an Authorised GreenPower Dealer</p>
       <div class="dealer-links-buttons">
         <a class="dealer-link dealer-login">Dealer Login</a>
         <a class="dealer-link dealer-register">Register Here</a>
       </div>
     </div>
   Selectors below carry enough specificity (≥ 0,2,1) to defeat the
   parent theme's global `a { color: #00C750 }` and `a:hover` rules
   without `!important`. */
/* `.header-dealer-links` is a horizontal row — tagline on the left,
 * then the two buttons. Vertically centred so the tagline baseline
 * aligns with the buttons.
 *
 * Padding is forced to 0 with !important to defeat any inherited
 * right padding (parent theme or child theme) that was nudging the
 * dealer block in from the right edge of `.right`.
 *
 * The flex `gap` is set to 0 here because reports indicated that
 * `gap` on `display: inline-flex` wasn't producing a visible space
 * in this cascade. Instead, the tagline → buttons spacing is
 * guaranteed via an explicit `margin-right` on `.dealer-links-tagline`,
 * which can't be overridden by flex layout quirks. */
/* X2 dealer row: tagline + buttons are now direct flex children of
 * .header-dealer-links (the .dealer-links-buttons wrapper was removed in the
 * rebuild) so a single `gap` gives EQUAL spacing across all items. The X1↔X2
 * vertical gap is handled by .gpf-hv2-right's gap, so no margin-top here. */
.header-dealer-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px; /* equal gap between tagline, Register, Dealer Login */
	padding: 0;
	margin: 0;
}
.dealer-links-tagline {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: #151515;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: left;
}
/* Button base — every property carries !important so the buttons
 * always render as proper buttons, regardless of which parent-theme
 * `a { ... }` / `a:hover { ... }` rule tries to interfere. Greping
 * both stylesheets turned up no direct `.dealer-link` rule, but
 * several broad anchor rules (e.g. `a { color: #00C750 }` global,
 * various scoped link rules) can chip away at the box model and
 * colours in unexpected ways — !important pins the styling to
 * what the brief specifies. */
.header-dealer-links a.dealer-link,
.header-dealer-links a.dealer-link:link,
.header-dealer-links a.dealer-link:visited,
.header-dealer-links a.dealer-link:hover,
.header-dealer-links a.dealer-link:focus,
.header-dealer-links a.dealer-link:active {
	display: inline-block !important;
	padding: 10px 22px !important;
	font-family: 'Lato', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background 0.15s ease-in-out;
	/* Bug 3 — the parent theme sizes ALL `.right a` as 44x44 icon buttons
	 * (`#masthead…right a{width:44px;padding:10px}`) and only resets to natural
	 * width inside `@media (min-width:1441px)`, so at <=1440px the dealer buttons
	 * were forced to 44px and their labels clipped/wrapped. Pin natural width,
	 * stop them shrinking, and keep labels on one line. !important is required to
	 * beat the parent's (1,4,0) icon-button rule. */
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	flex: 0 0 auto !important; /* flex-shrink:0 — never compress while space exists */
	white-space: nowrap !important;
}
.header-dealer-links a.dealer-register,
.header-dealer-links a.dealer-register:link,
.header-dealer-links a.dealer-register:visited {
	background: #42b653 !important;
}
.header-dealer-links a.dealer-register:hover,
.header-dealer-links a.dealer-register:focus,
.header-dealer-links a.dealer-register:active {
	background: #3aa348 !important;
}
/* Change A — Dealer Login (and the logged-in Logout, which reuses this class):
 * background #B3B3B3 with DARK text. White on #B3B3B3 is ~1.6:1 (fails WCAG),
 * so #151515 is used for legibility (~8:1). */
.header-dealer-links a.dealer-login,
.header-dealer-links a.dealer-login:link,
.header-dealer-links a.dealer-login:visited {
	background: #B3B3B3 !important;
	color: #151515 !important;
}
.header-dealer-links a.dealer-login:hover,
.header-dealer-links a.dealer-login:focus,
.header-dealer-links a.dealer-login:active {
	background: #a0a0a0 !important;
	color: #151515 !important;
}

/* ============================================================
   Phone icon circles — green gradient
   ============================================================
   The child theme sets `... .header-phone i { background: #00C750
   !important; padding: 10px; border-radius: 4px; width: 44px;
   height: 44px }` (specificity 0,5,1). Match that selector chain
   so we tie on specificity and win via source order, then add
   !important so we beat the upstream !important. Same treatment
   applied to the per-location `a[class*="std-"] i` icons. */
#masthead .header-content .inner-container .right a[class*="std-"] i,
.gpf-hv2-mobile .header-phone i {
	background: linear-gradient(135deg, #056738 0%, #41B352 100%) !important;
	color: #ffffff;
}

/* ============================================================
   Phone glyph — white SVG (masked) on the green gradient
   ============================================================
   Replace the Font Awesome phone glyph with the new outlined SVG, rendered
   WHITE, on the existing green gradient icon. Method: CSS mask on the icon's
   ::before — a white box clipped to the SVG shape (works for an outlined icon
   because the mask paints wherever the SVG has opaque pixels). The external SVG
   stays external (no inlining the markup 3× for the desktop icons). The FA glyph
   is removed by overriding its ::before content. */
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] i,
.gpf-hv2-mobile .header-phone > i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0 !important; /* kill any residual FA glyph sizing */
}
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] i::before,
.gpf-hv2-mobile .header-phone > i::before {
	content: "" !important; /* removes the Font Awesome glyph */
	display: block;
	width: 58%;
	height: 58%;
	background-color: #ffffff;
	-webkit-mask: url("https://greenpowerforklifts.com/wp-content/uploads/2026/06/phone-calling-svgrepo-com.svg") no-repeat center center;
	mask: url("https://greenpowerforklifts.com/wp-content/uploads/2026/06/phone-calling-svgrepo-com.svg") no-repeat center center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
/* Desktop only — the std-* circle is smaller than the mobile one, so 58% read
 * too small here. Grow the GLYPH to ~72% to match the old FA icon's footprint.
 * Circle size/padding/background are untouched; only the masked glyph grows.
 * Same selector as above, later in source order → wins without !important. */
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] i::before {
	width: 90%;
	height: 90%;
}

/* ============================================================
   Header v2 — Row A / RAC1 / RAC2 / X1 / X2 structural layout
   ============================================================ */

/* NOTE on specificity: the parent theme styles `.left` / `.right` /
 * `.inner-container` via high-specificity chains like
 * `#masthead>*.header-content .inner-container .right { display:flex; … }`.
 * The structural rules below reuse the same `#masthead .header-content
 * .inner-container …` chain (compounding the gpf-hv2-* class on the same
 * element) so they win on specificity + source order — without !important. */

/* Row A: logo (left) + right area, on one line, vertically centred. */
#masthead .header-content .inner-container.gpf-hv2-row-a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
#masthead .header-content .inner-container .gpf-hv2-logo {
	float: none;
}

/* RAC2 (desktop right area): X1 over X2, both right-aligned, equal vertical gap.
 * flex-direction is forced with !important: the parent theme sets `.right`
 * to display:flex (row) via an equal-specificity chain, and the owner observed
 * the row default winning — !important guarantees the stacked column. */
#masthead .header-content .inner-container .gpf-hv2-right {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end;
	/* Gap between X1 and X2 is enforced via margin-top on .gpf-hv2-x2 below
	 * (more reliable than flex `gap` here, which rendered flush). Container gap
	 * kept at 0 so the two mechanisms don't double up. */
	gap: 0;
	float: none;
}

/* X1 — phone numbers side-by-side, right-aligned. */
#masthead .header-content .inner-container .gpf-hv2-x1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
/* Each phone link: icon LEFT, label over number stacked to its right. */
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #151515;
	float: none;
}
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] span {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	text-align: left;
	font-size: 13px;
}
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] strong {
	font-size: 15px;
}

/* X2 — dealer row, right-aligned. */
#masthead .header-content .inner-container .gpf-hv2-x2 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	/* Vertical gap between X1 (above) and X2 — applies in both auth states
	 * (logged-out: phones over dealer line; logged-in: Nationwide over Logout),
	 * since both render X2 as the second child of .gpf-hv2-right. !important
	 * because the parent theme's equal-specificity `.right` rules have leaked
	 * throughout this header work. */
	margin-top: 10px !important; /* Change B — halved from 20px */
}
/* Bug 2 — zero the X2 inner container's padding so the dealer block's right
 * edge sits flush against the column edge (aligned with X1 above). */
#masthead .header-content .inner-container .gpf-hv2-x2 .header-dealer-links {
	padding: 0 !important;
	margin: 0 !important;
}
/* Bug 2 (alignment) — the parent's icon-button rule also puts padding:10px /
 * width:44px on the X1 `std-*` phone links at <=1440px, insetting X1's right
 * edge. Neutralise it so X1 links are natural-size and X1/X2 share the same
 * right edge (also prevents the X1 links squishing at <=1440px). */
#masthead .header-content .inner-container .gpf-hv2-x1 a[class*="std-"] {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
}

/* Mobile cluster is desktop-hidden; shown at the mobile breakpoint below. */
#masthead .header-content .inner-container .gpf-hv2-mobile {
	display: none;
}

/* ============================================================
   Header v2 — mobile (centred phone + hamburger cluster)
   ============================================================
   Breakpoint 980px: the wide desktop phone+dealer row can't fit below
   this, so swap to the centred mobile cluster. If the plugin hamburger
   only opens below a different width, align this value to the plugin. */
@media (max-width: 980px) {
	#masthead .header-content .inner-container.gpf-hv2-row-a {
		flex-direction: column;
	}
	#masthead .header-content .inner-container .gpf-hv2-logo {
		width: 100%;
		text-align: center;
	}
	#masthead .header-content .inner-container .gpf-hv2-logo .header-logo {
		display: inline-block;
		float: none;
	}
	/* Bug 2 — desktop right area (X1/X2 phones+dealer) hidden on mobile in BOTH
	 * auth states; !important so no parent `.right` rule can leak it back. */
	#masthead .header-content .inner-container .gpf-hv2-right {
		display: none !important;
	}
	#masthead .header-content .inner-container .gpf-hv2-mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin-top: 10px;
	}
	/* Centred phone + hamburger, side-by-side. */
	.gpf-hv2-mobile__icons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.gpf-hv2-mobile .header-phone {
		display: inline-flex;
		align-items: center;
		position: relative;
	}

	/* Bug 3b — icon shape/size. The live header sizes `.right .header-phone i`
	 * to a 44x44 rounded square; that chain no longer matches (icon moved into
	 * .gpf-hv2-mobile), so re-apply matching sizing to the phone trigger icon
	 * and the hamburger so they render as clean, equal, centred icons. */
	.gpf-hv2-mobile .header-phone > i,
	.gpf-hv2-mobile .mobmenu-left-bt {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0;
		margin: 0;
	}
	.gpf-hv2-mobile .header-phone > i {
		background: linear-gradient(135deg, #056738 0%, #41B352 100%);
		color: #ffffff;
		font-size: 18px;
	}
	.gpf-hv2-mobile .mobmenu-left-bt {
		display: inline-flex !important; /* ensure the plugin trigger is visible in the cluster */
		background: #151515;
		color: #ffffff;
	}
	.gpf-hv2-mobile .mobmenu-left-bt i {
		font-size: 20px;
		color: #ffffff;
		line-height: 1;
	}

	/* Bug 3a — #call dropdown CLOSED by default. The live collapse rule is
	 * scoped to `.right div#call` (max-height:0; overflow:hidden); #call now
	 * lives in .gpf-hv2-mobile, so that rule no longer applies and it rendered
	 * open. Replicate the closed-by-default + .active-opens behaviour here; the
	 * existing #clickme toggle JS (adds/removes .active on #call) is reused. */
	.gpf-hv2-mobile #call {
		position: absolute;
		top: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		max-height: 0;
		overflow: hidden;
		background: #ffffff;
		z-index: 999;
		min-width: 260px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
		transition: max-height 0.3s ease;
	}
	.gpf-hv2-mobile #call.active {
		max-height: 600px;
	}
	.gpf-hv2-mobile #call .location-list {
		padding: 8px 12px;
	}
	.gpf-hv2-mobile #call table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
		color: #151515;
		margin: 0;
	}
	.gpf-hv2-mobile #call td {
		padding: 4px 8px;
		text-align: left;
		white-space: nowrap;
	}
	.gpf-hv2-mobile #call a {
		color: #151515;
		text-decoration: none;
	}
	.gpf-hv2-mobile__tagline {
		margin: 0;
		text-align: center;
		font-size: 12px;
		font-weight: 700;
		color: #151515;
	}
	/* Dealer buttons: 2 side-by-side, centred. High-specificity chain so the
	 * green/grey styling wins over any parent `.mobile-dealer-link` rules. */
	#masthead .header-content .inner-container .gpf-hv2-mobile .mobile-dealer-links {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 10px;
	}
	#masthead .header-content .inner-container .gpf-hv2-mobile .mobile-dealer-link {
		display: inline-block;
		padding: 10px 22px;
		font-family: 'Lato', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		color: #ffffff;
		text-decoration: none;
		border: 0;
		border-radius: 0;
	}
	#masthead .header-content .inner-container .gpf-hv2-mobile .mobile-dealer-register {
		background: #42b653;
	}
	/* Change A (mobile) — Dealer Login / Logout grey #B3B3B3 with dark text. */
	#masthead .header-content .inner-container .gpf-hv2-mobile .mobile-dealer-login {
		background: #B3B3B3;
		color: #151515;
	}
}