/* === HGEA Header Styles === */

/* Base variables (fallbacks if CSS vars not defined in theme.json) */
:root {
	--hgea-green: #006b4f;
	--hgea-color-light-green: #b5d6c8;
	--hgea-color-new-yellow: #ffd966;
	--hgea-color-mid-grey: #f5f5f5;
	--hgea-font-montserrat: "Montserrat", sans-serif;
}

/* --------------------------------------------------------------------------------
   DESKTOP  ( ≥ 768px )
-------------------------------------------------------------------------------- */

#site-header nav.nav-element.desktop {
	max-width: 1340px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-inline: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}


#site-header nav.nav-element.desktop ul.nav-element.desktop {
	max-width: 1230px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#site-header.site-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	justify-content: center;
	align-items: center;
}

/* Top bar (logo + search + auth + nav trigger hidden on desktop) */
#site-header .hgea-desktop-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1230px;
	margin-inline: auto;
	width: 100%;
	padding: 0;
}


#site-header .search-desktop button {
	display: flex;
	align-items: center;
	justify-content: center;
}

#site-header .search-desktop button.wp-block-search__button svg {
	width: 80px;
	height: 80px;
}

/* Need the search button to always be on the right */
/* #site-header .search-desktop .wp-block-search__inside-wrapper {
	display: flex;
	justify-content: flex-end;
} */

/* Navigation */
#site-header .nav-container {
	display: flex;
	justify-content: center;
	width: 100%;
}

#site-header .nav-container .nav-element {
	font-family: var(--hgea-font-montserrat);
	font-weight: 600;
	text-transform: uppercase;
}

/* Drop-down menu styling */
#site-header .nav-element .wp-block-navigation-submenu__toggle {
	display: none;
	/* we use hover on desktop */
}

#site-header .nav-element ul.wp-block-navigation__submenu-container {
	background: var(--hgea-color-mid-grey);
}

/* Submenu hover for the parent item being hovered */
#site-header .nav-element ul.wp-block-navigation__submenu-container li.wp-block-navigation-link:hover {
	background: var(--hgea-color-light-green);
}

#site-header .nav-element ul.wp-block-navigation__container li ul li.wp-block-navigation-link {
	padding-top: 4px;
	padding-bottom: 4px;
}

#site-header .nav-element ul.wp-block-navigation__submenu-container li:not(:last-child) {
	border-bottom: 1px solid var(--hgea-color-light-green);
	margin-bottom: 0;
}

/* No link underline on the submenu items */
#site-header .nav-element ul.wp-block-navigation__submenu-container li a {
	text-decoration: none;
}

#site-header .hgea-mobile-header {
	display: none;
}

#site-header .hgea-desktop-header .site-name-text {
	margin-bottom: -8px !important;
}

#site-header p:has(.hgea-dynamic-auth-button) {
	min-width: 204px !important;
}

/* non homepage header has slighly different styling due to white background */
#site-header nav.non-homepage {
	border: 2px solid var(--hgea-color-dark-green)
}

/* ---------- Desktop header fine-tuning ---------- */
@media (min-width: 768px) {

	/* Fix search form dimensions and visibility */
	#site-header .search-desktop {
		position: relative;
		width: 48px;
		height: 48px;
		overflow: visible !important;
	}

	#site-header .search-desktop .wp-block-search__inside-wrapper {
		position: static !important;
		width: 48px !important;
		height: 48px !important;
		overflow: visible !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	#site-header .search-desktop .wp-block-search__button {
		width: 48px !important;
		height: 48px !important;
		background: transparent !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative;
		z-index: 10;
	}

	#site-header .search-desktop .wp-block-search__button svg {
		fill: white !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
	}

	#site-header .search-desktop.non-homepage .wp-block-search__button svg {
		fill: var(--hgea-color-dark-green) !important;
	}

	/* Hide input by default */
	#site-header .search-desktop .wp-block-search__input {
		display: none !important;
	}

	/* Show input when search is active */
	#site-header .search-desktop:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		display: block !important;
		position: absolute !important;
		top: -2px;
		right: 51px !important;
		width: 320px !important;
		z-index: 10000 !important;
		background: white !important;
		border: 1px solid var(--hgea-color-new-yellow) !important;
		border-radius: 6px !important;
		padding: 13px !important;
		font-size: 16px !important;
	}

	/* Adjust wrapper when input is shown */
	#site-header .search-desktop:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 320px !important;
		height: auto !important;
	}
}

/* --------------------------------------------------------------------------------
   MOBILE  ( < 768px )
-------------------------------------------------------------------------------- */

@media (max-width: 767px) {
	#site-header p:has(.hgea-dynamic-auth-button) {
		min-width: 100px !important;
	}

	#site-header .hgea-desktop-header,
	#site-header .nav-container {
		display: none;
	}

	#site-header .hgea-mobile-header {
		display: block;
	}

	#site-header.site-header {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	#site-header .mobile-header-logo img {
		max-width: 60px;
	}

	#site-header .mobile-nav-link {
		width: 100%;
		text-align: left;
		padding: 15px 20px;
		font-family: var(--hgea-font-montserrat);
		font-weight: 600;
		text-transform: uppercase;
		border-bottom: 1px solid var(--hgea-color-light-green);
		display: block;
		min-width: 120px;
	}

	#site-header ul.mobile-nav-heading {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0;
		margin: 0;
		width: 100% !important;
	}

	#site-header ul.mobile-nav-heading .wp-block-navigation-item__content {
		padding: 0;
		margin: 0;
	}

	/* Hide desktop bits / show mobile bits */
	#site-header .hgea-desktop-header,
	#site-header .nav-container {
		display: none
	}

	#site-header .hgea-mobile-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		padding: 0 5px 0 5px;
	}

	#site-header .hgea-mobile-header .mobile-controls {
		padding: 0;
	}

	/* Compact search icon */
	#site-header .hgea-mobile-header .wp-block-search__inside-wrapper {
		display: flex;
		justify-content: flex-end;
	}

	/* if aria-hidden is false, then the wrapper needs to be much wider */
	#site-header .hgea-mobile-header .wp-block-search__inside-wrapper:has(.wp-block-search__input:not([aria-hidden="true"])) {
		max-width: 100%;
	}

	#site-header .hgea-mobile-header .wp-block-search__input {
		display: none
	}

	/* if aria-hidden is false, then show the search input */
	#site-header .hgea-mobile-header .wp-block-search__input:not([aria-hidden="true"]) {
		display: block;
	}

	#site-header .hgea-mobile-header .wp-block-search__button {
		padding: 5px;
		border: 2px solid white;
		background: transparent
	}

	#site-header .hgea-mobile-header .wp-block-search__button svg {
		fill: white;
	}

	/* non homepage header has slighly different styling due to white background */

	#site-header .non-homepage .wp-block-search__button {
		border: 2px solid var(--hgea-color-dark-green);
	}

	#site-header .non-homepage .wp-block-search__button svg {
		fill: var(--hgea-color-dark-green) !important;
	}

	/* Hamburger button */
	#site-header .mobile-nav-element {
		border: 2px solid white;
		border-radius: 5px;
		background: #fff;
		min-width: 40px;
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#site-header .mobile-nav-element>button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	#site-header .mobile-search-element button {
		width: 40px;
		height: 40px;
	}

	#site-header .mobile-nav-element>button>svg {
		fill: var(--hgea-color-dark-green);
	}

	#site-header .mobile-nav-element .wp-block-navigation__responsive-container-close {
		top: 8px;
		right: -3px;
	}

	#site-header .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
		padding-top: 10px;
	}

	/* ---------- Overlay menu ---------- */
	/* Force overlay container full-width column */
	#site-header .wp-block-navigation__responsive-container {
		background: #fff
	}

	#site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		width: 100% !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 15px !important;
	}

	/* Top-level items */
	#site-header .wp-block-navigation__container>li {
		width: 100% !important;
		border-bottom: 1px solid var(--hgea-color-light-green);
		position: relative;
	}

	#site-header .wp-block-navigation-item__content {
		display: block;
		padding: 15px 20px;
		width: 100%;
		text-align: left;
		font-family: var(--hgea-font-montserrat);
		font-weight: 600;
		text-transform: uppercase;
	}

	/* Sub-menu toggle arrow position */
	#site-header .wp-block-navigation-submenu__toggle {
		position: absolute;
		right: 10px;
		top: 0;
		height: 100%;
		width: 44px;
		display: flex;
		align-items: center;
		justify-content: center
	}

	/* Sub-menus */
	#site-header .wp-block-navigation__submenu-container {
		background: var(--hgea-color-mid-grey);
		padding-inline-start: 20px
	}

	#site-header .wp-block-navigation__submenu-container li {
		border-bottom: 1px solid var(--hgea-color-light-green)
	}

	#site-header .wp-block-navigation__submenu-container li:last-child {
		border-bottom: none
	}

	#site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 12px 20px;
		font-weight: 400;
		text-transform: none
	}

	#site-header .mobile-search-element input.wp-block-search__input {
		padding: 0 8px !important;
		max-width: 300px !important;
		margin-right: 8px !important;
		border: 1px solid var(--hgea-color-new-yellow) !important;
		border-radius: 10px;
	}

	#site-header .mobile-controls {
		gap: 5px;
	}

	/* -------- Auth button inside menu -------- */
	#site-header .mobile-login-item {
		width: 100%;
		text-align: center;
		padding: 25px 0;
		border-top: 2px solid var(--hgea-color-new-yellow)
	}
}

@media (max-width: 480px) {
	#site-header .mobile-search-element input.wp-block-search__input {
		max-width: 150px !important;
	}
}

/* --------------------------------------------------------------------------------
   UTILITIES
-------------------------------------------------------------------------------- */

/* Remove focus outlines set by WP (we handle accessibility elsewhere) */
#site-header a:focus {
	outline: none;
	box-shadow: none
}