/* ────────────────────────────────────────────────────────────
   03-site-header.css — Site Header
   Zones:
     1. .hfgp-utility-bar       — top bar: socials + Donate Now (PHP-injected)
     2. .site-header             — GP main bar: logo + primary nav
     3. Mobile                   — hamburger toggle, responsive utility bar

   GP header anatomy:
     header.site-header
       div.inside-header.grid-container
         div.site-logo → a → img
         nav.main-navigation.mobile-menu-control-wrapper → button.menu-toggle
         nav.main-navigation#site-navigation
           div.inside-navigation.grid-container
             div#primary-menu.main-nav
               ul.menu.sf-menu > li > a + span.dropdown-menu-toggle
               ul.sub-menu > li > a
   ──────────────────────────────────────────────────────────── */


/* ── 1. Utility bar ───────────────────────────────────────── */

.hfgp-utility-bar {
	background-color: var(--color-white);
}

.hfgp-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-lg);
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding: var(--spacing-xs) 0 0;
	min-height: 52px;
}

/* ── Social icons ─────────────────────────────────────────── */

/* Rendered by community-connect-features' community_connect_render_social_icons()
   as a core Social Links block (core/social-links + core/social-link) —
   not hand-rolled markup, so these rules target core's own classes
   (.wp-block-social-links, .wp-social-link, .wp-block-social-link-anchor)
   rather than a theme-authored one. Same renderer the footer's
   [cc_social_icons] shortcode uses; footer needed no CSS changes since
   03-site-footer.css already targeted these same core classes. */
.hfgp-utility-bar__socials .wp-block-social-links {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs) !important;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.hfgp-utility-bar__socials .wp-social-link {
	background-color: transparent !important;
	padding: 0 !important;
	color: var(--color-blue-dark) !important;
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.hfgp-utility-bar__socials .wp-social-link:hover,
.hfgp-utility-bar__socials .wp-social-link:focus-within {
	color: var(--color-blue-primary) !important;
	transform: translateY(-1px);
}

.hfgp-utility-bar__socials .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: 4px;
}

.hfgp-utility-bar__socials .wp-social-link svg {
	width: 30px !important;
	height: 30px !important;
	fill: currentColor !important;
}

/* ── Utility nav menu ─────────────────────────────────────────
   Theme default for the utility-bar CTA slot (Appearance → Menus →
   Utility Nav). Community Connect Hub overrides this default via
   client.php's hfgp_utility_bar_cta hook, so these rules aren't
   currently visible on this site — kept so the theme still looks
   right out of the box for a future client that doesn't override it. */

.hfgp-utility-nav {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hfgp-utility-nav li {
	margin: 0;
}

.hfgp-utility-nav li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: var(--spacing-xxs) var(--spacing-lg);
	background-color: var(--color-orange-primary);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--text-body-base);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color 0.2s ease-in-out;
}

.hfgp-utility-nav li a:hover {
	background-color: #B74A1E;
	color: var(--color-white);
}

.hfgp-utility-nav li a:active {
	background-color: #9A3F19;
}

.hfgp-utility-nav li a:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: 2px;
}

/* ── 2. Main header ───────────────────────────────────────── */

.site-header {
	background-color: var(--color-white);
}

/* ── Logo ─────────────────────────────────────────────────── */

.site-header .site-logo {
	transform: translateY(-32px);
}

.site-header .site-logo img {
	display: block;
	height: auto;
	max-height: 58px;
	width: auto;
}


/* ── Mobile CTA slot — desktop nav: hidden (lives in utility bar) ─ */
@media (min-width: 769px) {
	.hfgp-mobile-cta-slot {
		display: none;
	}
}

/* ── Primary nav: top-level items ─────────────────────────── */

/* Force the top-level menu to never wrap to a second line. GP core lays
   these <li> out with float:left (not flexbox), and floats ignore
   white-space: nowrap entirely — they just wrap once they run out of
   row width, which is exactly what started happening here once the
   ReStore item pushed 5 items into the row. Converting to flex +
   flex-wrap: nowrap is what actually prevents that; li's own
   position:relative (needed for the dropdown submenu's absolute
   positioning) is untouched.

   Scoped to min-width: 769px on purpose — below that, GP's mobile
   hamburger panel takes over and needs the <li>s' default block/float
   stacking to lay out as a vertical list; forcing flex there would
   squeeze every mobile nav item into one row instead. */
@media (min-width: 769px) {
	#site-navigation .main-nav > ul {
		display: flex;
		flex-wrap: nowrap;
	}

	#site-navigation .main-nav > ul > li {
		float: none;
	}
}

/* Tightened horizontal item padding specifically in the width range
   where 5 items no longer comfortably fit at GP core's default 20px/side
   — measured live on the sibling Arch theme at 978px (identical nav
   markup/CSS structure): logo + nav items left only a ~12px deficit, so
   this reduction covers it with room to spare across the whole squeeze
   range; above 1100px there's already enough width so the default
   padding returns, and below 769px the mobile hamburger nav takes over
   entirely. */
@media (min-width: 769px) and (max-width: 1100px) {
	#site-navigation .main-nav > ul > li > a {
		padding-left: 12px;
	}
}

#site-navigation .main-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	padding-block: var(--spacing-xs);
	color: var(--color-blue-dark);
	font-family: var(--font-bodyy);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

#site-navigation .main-nav > ul > li > a:hover,
#site-navigation .main-nav > ul > li > a:focus-visible,
#site-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: var(--color-blue-primary);
}

#site-navigation .main-nav > ul > li > a:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: 4px;
}


/* ── Dropdown caret ───────────────────────────────────────── */

.site-header .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	margin-left: 2px;
	pointer-events: none;
}

.site-header .dropdown-menu-toggle .gp-icon svg {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease-in-out;
}

#site-navigation .main-nav > ul > li:hover .dropdown-menu-toggle svg,
#site-navigation .main-nav > ul > li.sfHover .dropdown-menu-toggle svg {
	transform: rotate(180deg);
}


/* ── Dropdown panel ───────────────────────────────────────── */

#site-navigation .main-nav .sub-menu {
	background-color: rgba(255, 255, 255, 0.96);
	box-shadow: var(--shadow-card);
	min-width: 220px;
	padding: var(--spacing-xxs) 0;
}

#site-navigation .main-nav .sub-menu li {
	margin: 0;
}

#site-navigation .main-nav .sub-menu a {
	display: block;
	padding: var(--spacing-xs) var(--spacing-md);
	color: var(--color-blue-dark);
	font-family: var(--font-primary);
	font-size: var(--text-body-base);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

#site-navigation .main-nav .sub-menu a:hover,
#site-navigation .main-nav .sub-menu a:focus-visible,
#site-navigation .main-nav .sub-menu .current-menu-item > a {
	color: var(--color-blue-primary);
}

#site-navigation .main-nav .sub-menu a:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: -2px;
}


/* ── Mobile hamburger toggle ──────────────────────────────── */

.site-header .mobile-menu-control-wrapper .menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-blue-dark);
	cursor: pointer;
	transition: color 0.15s ease-in-out;
}

.site-header .mobile-menu-control-wrapper .menu-toggle .gp-icon svg {
	width: 24px;
	height: 24px;
}

.site-header .mobile-menu-control-wrapper .menu-toggle:hover {
	color: var(--color-blue-primary);
}

.site-header .mobile-menu-control-wrapper .menu-toggle:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: 2px;
}


/* ── Responsive: header padding ───────────────────────────── */

@media (max-width: 1024px) {
	.hfgp-utility-bar__inner,
	.site-header .inside-header {
		padding-inline: 30px;
	}
}

@media (max-width: 768px) {
	.hfgp-utility-bar__inner,
	.site-header .inside-header {
		padding-inline: 15px;
	}
}

@media (max-width: 480px) {
	.hfgp-utility-bar__inner,
	.site-header .inside-header {
		padding-inline: 10px;
	}

	.site-header .site-logo img {
		max-height: 40px;
	}
}

/* ── Responsive: utility bar on mobile ────────────────────── */

@media (max-width: 768px) {
	.hfgp-utility-bar {
		display: none;
	}

	.site-header .site-logo {
		transform: none;
	}
}


/* ── Mobile nav ───────────────────────────────────────────── */

@media (max-width: 768px) {
	/* Full-width rows: link fills available space, arrow pins to the right */
	#site-navigation .main-nav > ul > li {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	#site-navigation .main-nav > ul > li > a {
		flex: 1;
	}

	/* Re-enable pointer events so GP's JS expands the sub-menu
	   instead of the click falling through to the parent link */
	.site-header .dropdown-menu-toggle {
		pointer-events: auto;
		cursor: pointer;
		flex-shrink: 0;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		margin-left: auto;
	}

	/* Sub-menu: remove desktop floating panel, stack inline below parent.
	   Leave display management entirely to GP's JS. */
	#site-navigation .main-nav .sub-menu {
		position: static !important;
		width: 100%;
		min-width: 0;
		box-shadow: none;
		background-color: var(--color-white);
		padding: 0;
	}

	#site-navigation .main-nav .sub-menu a {
		padding: var(--spacing-xs) var(--spacing-lg);
	}

	/* Auto-expand the active parent item when the menu opens */
	#site-navigation .main-nav > ul > li.current-menu-ancestor > .sub-menu,
	#site-navigation .main-nav > ul > li.current-menu-parent > .sub-menu {
		display: block !important;
	}

	#site-navigation .main-nav > ul > li.current-menu-ancestor .dropdown-menu-toggle svg,
	#site-navigation .main-nav > ul > li.current-menu-parent .dropdown-menu-toggle svg {
		transform: rotate(180deg);
	}

	/* Mobile CTA slot — full-width (mobile nav only). Content is
	   supplied by client-specific code; this only shapes the slot. */
	.hfgp-mobile-cta-slot {
		display: flex;
		width: 100%;
	}
}

/* ────────────────────────────────────────────────────────────────
   Language switcher (gTranslate-backed)
   Class chain: .cc-language-switcher (our wrapper, community-connect-features
                plugin) → gTranslate's own generated markup:
                .gtranslate_wrapper > #gt_float_wrapper > .gt_float_switcher
                  > .gt-selected (trigger: .gt-current-lang > img, .gt-lang-code, .gt_float_switcher-arrow)
                  > .gt_options (open list: a.nturl > img, text — one per
                    language, .gt-current on the active one)

   Captured live from the actual rendered DOM (2026-08-27) — gTranslate's
   class names are JS-generated and undocumented; don't assume they'll
   still look like this after a gTranslate update without re-inspecting.
   Requires Site Options → GTranslate set to Widget Look "Float Switcher".

   Verified live: embedded via [gtranslate] shortcode (rather than the
   plugin's separate always-on sitewide floating widget), the switcher
   already renders position: static, not fixed — no "undo fixed
   positioning" override is needed here, only the visual restyle below.

   Restyle is 4 moves: (1) hide the flag <img> everywhere — flags name
   countries, not languages; (2) draw a globe as a ::before on .gt-selected
   itself, since it must be inside the click target to stay clickable;
   (3) strip the trigger's card chrome (bg/shadow/radius/padding) — it's
   built for floating over content, and reads as a competing object sitting
   inline in the utility bar; (4) recolor the built-in caret via mask-image
   (so hover can retint it) instead of replacing it outright.

   Native language names ("Español", not "Spanish") come free from
   gTranslate's own shortcode output — no extra work needed here.

   Open list direction: opens downward (top: 100%) per this site's own
   GTranslate → "Float Switcher Open Direction" setting (down).
   ──────────────────────────────────────────────────────────────── */

.cc-language-switcher {
	display: flex;
	align-items: center;
}

.cc-language-switcher .gtranslate_wrapper,
.cc-language-switcher #gt_float_wrapper {
	display: flex;
	align-items: center;
}

.cc-language-switcher .gt_float_switcher {
	position: relative;
	display: flex;
	align-items: center;
	background: transparent;
	box-shadow: none;
	border-radius: var(--radius-none);
	padding: 0;
	/* gTranslate's own inline style sets overflow: hidden here (meant to
	   clip its own floating "card" widget) — that also clips our
	   absolutely-positioned .gt_options open list, which lives inside
	   this same element. Confirmed live: the list opened but was fully
	   invisible until this override. */
	overflow: visible;
}

/* Flags name countries, not languages — hide everywhere (trigger + open
   list). !important: gTranslate injects its own inline <style> block
   with an equal-specificity ".gt_float_switcher img" rule that loads
   later in the cascade and wins on specificity ties otherwise. */
.cc-language-switcher img {
	display: none !important;
}

.cc-language-switcher .gt-selected {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: var(--spacing-xxs) 0;
}

/* Globe — must live inside .gt-selected itself, not a sibling, or it isn't
   part of the click target. Drawn as a mask so color/hover can use tokens
   the same way the built-in caret below does. */
.cc-language-switcher .gt-selected::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-right: var(--spacing-xxs);
	background-color: var(--color-blue-dark);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c2.5 2.5 3.8 5.7 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.7-3.8-9s1.3-6.5 3.8-9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c2.5 2.5 3.8 5.7 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.7-3.8-9s1.3-6.5 3.8-9z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color 0.2s ease-in-out;
}

.cc-language-switcher .gt-current-lang {
	display: flex;
	align-items: center;
	/* gTranslate's own styling sets padding: 10px 15px here (sized for its
	   default visible flag image) — that 15px left padding is what pushed
	   the globe away from the code text. !important: comes from another
	   of gTranslate's own injected rules, not a plain inline attribute,
	   but still needs to win outright rather than compete on specificity. */
	padding-left: 1px !important;
}

.cc-language-switcher .gt-lang-code {
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-blue-dark);
	text-transform: uppercase;
	transition: color 0.2s ease-in-out;
}

.cc-language-switcher .gt_float_switcher-arrow {
	display: inline-block;
	/* !important: gTranslate's own inline <style> targets this same element
	   via a longer, higher-specificity descendant chain
	   (.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow)
	   that otherwise wins over these two dimensions regardless of order. */
	width: 10px !important;
	height: 10px !important;
	flex-shrink: 0;
	margin-left: var(--spacing-xxs);
	background-color: var(--color-blue-dark);
	background-image: none !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 285'%3E%3Cpath d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 285'%3E%3Cpath d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color 0.2s ease-in-out;
}

.cc-language-switcher .gt-selected:hover .gt-lang-code {
	color: var(--color-blue-primary);
}

.cc-language-switcher .gt-selected:hover::before,
.cc-language-switcher .gt-selected:hover .gt_float_switcher-arrow {
	background-color: var(--color-blue-primary);
}

/* Open list — a genuine dropdown overlay now, not a floating card, so it
   keeps a light card treatment (unlike the trigger above) so it still
   reads as a menu rather than disembodied text over page content.

   Anchored from the right (not left) on purpose: the trigger sits near
   the right edge of the header in both placements (utility bar, and
   beside the mobile hamburger), so a left-anchored list expanding
   rightward ran past the viewport edge and forced the whole page to
   scroll horizontally — confirmed live on a real mobile viewport.
   Anchoring from the right instead expands the list leftward, into the
   room that's actually available on both sides. */
.cc-language-switcher .gt_options {
	position: absolute !important;
	top: 100%;
	right: 0;
	left: auto;
	margin-top: var(--spacing-xxs);
	min-width: 160px;
	max-width: none !important;
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-xxs) 0;
	z-index: 50;
}

.cc-language-switcher .gt_options a {
	display: block;
	padding: var(--spacing-xxs) var(--spacing-sm);
	font-family: var(--font-primary);
	font-size: var(--text-body-sm);
	color: var(--color-text-body);
	text-decoration: none;
	white-space: nowrap;
}

.cc-language-switcher .gt_options a:hover,
.cc-language-switcher .gt_options a.gt-current {
	background-color: var(--color-gray-soft);
	color: var(--color-blue-dark);
}

/* Mobile placement — beside the hamburger, via generate_menu_bar_items.
   44px tap target; text-forward sizing above already keeps this from
   crowding the hamburger control next to it.

   GeneratePress hooks generate_menu_bar_items in two separate DOM
   locations (generate_after_primary_menu AND
   generate_inside_mobile_menu_control_wrapper) — confirmed live: without
   this rule, one of those two renders our switcher a second time at
   desktop widths too, alongside the utility bar's own instance. Hide the
   whole .menu-bar-items placement above the mobile breakpoint so only
   the utility bar's instance shows on desktop. */
@media (min-width: 769px) {
	.menu-bar-items .cc-language-switcher {
		display: none;
	}
}

.menu-bar-items .cc-language-switcher .gt-selected {
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}