/*
 * Site header: layout and look (ABE Factors design, Figma "Website Dev_ October 21", Home / About / Contact frames).
 * All header CSS lives here and in css/navigation.css (focus, open/closed states, search). style.css has none.
 *
 *   Background   Steel #BDC2BA (the header sits on the steel page title band)
 *   Logo         242 x 36, Charcoal #241F21, left edge of the 1378px content area
 *   Menu         Red Hat Display 18px SemiBold, black, about 44px between items
 *   Current page ExtraBold + 2px yellow line about 12px under the text
 *                (bold is the non-colour cue; the yellow line alone is too light on steel)
 *
 * Markup: header.php, the menu walker in functions.php (ABEFactors_Walker_Nav_Menu) and inc/header-functions.php.
 * Body classes: fixed-header (Customizer), scrolled / scrolldown / scrollup (js/theme.js), overflow (js/navigation.js).
 *
 * 1. Header bar (position, hide on scroll, admin bar, background, spacer)
 * 2. Layout
 * 3. Logo
 * 4. Menu (all screen sizes)
 * 5. Desktop menu (1101px and up)
 * 6. Desktop sub menu
 * 7. Fixed header while scrolling
 * 8. Mobile header and menu button (1100px and below)
 * 9. Mobile menu panel and sub menus
 */

:root {
	--abe-header-pad-top: 67px;
	--abe-header-pad-bottom: 48px;
	--abe-header-height: 169px; /* pad-top + logo row (36px logo + 18px) + pad-bottom */
	--abe-header-bg: var(--wp--preset--color--steel);
}

/* ------------------------------------------------------------------
 * 1. Header bar
 * ------------------------------------------------------------------ */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	color: var(--wp--preset--color--black);
}

.site-header .header-inner-container {
	position: relative;
	margin: 0 auto;
}

body.fixed-header .site-header {
	position: fixed;
	transform: translateY(0);
	transition: transform 0.3s ease-in-out;
}

/* Hides while scrolling down, comes back when scrolling up (js/theme.js). */
body.scrolldown .site-header {
	transform: translateY(-100%);
}

/* Never hidden while it has keyboard focus or the mobile menu is open (WCAG 2.4.11 Focus Not Obscured). */
body.scrolldown .site-header:focus-within,
body.scrolldown .site-header.open_m {
	transform: translateY(0);
}

/* Browser scrolling to a focused element keeps it clear of the fixed header (WCAG 2.4.11). */
html:has(body.fixed-header) {
	scroll-padding-top: var(--abe-header-height);
}

body.fixed-header.admin-bar .site-header {
	margin-top: 32px;
}

@media screen and (max-width: 782px) {
	body.fixed-header.admin-bar .site-header {
		margin-top: 46px;
	}
}

.site-header .header-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--abe-header-bg);
	transition: box-shadow 0.3s linear;
	/* Only a background: lets the mouse reach the menu items under it, so the whole item (the space under
	 * the chevron and between link and chevron) keeps the sub menu open. */
	pointer-events: none;
}

/* Keeps the page content below the fixed header. */
.divide_fixed_header {
	display: none;
}

body.fixed-header .divide_fixed_header {
	display: block;
	min-height: var(--abe-header-height);
	background-color: var(--abe-header-bg);
}

/* ------------------------------------------------------------------
 * 2. Layout: logo left, menu right
 * ------------------------------------------------------------------ */
.site-header .header-inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 40px;
	margin: 0 auto;
	padding-top: var(--abe-header-pad-top);
	padding-bottom: var(--abe-header-pad-bottom);
	transition: padding 0.3s ease;
}

.site-header a {
	color: inherit;
}

.site-header .header-center {
	display: flex;
	flex: 1;
	align-items: center;
}

/* Header search button and secondary menu (both off in this design). */
.site-header .header-right p {
	margin: 0;
}

.site-header .header-right a {
	text-decoration: none;
}

.site-header .header-right > div,
.site-header .header-right > nav {
	z-index: 2;
}

/* No search and no secondary menu: drop the empty right column, so the menu ends on the content edge. */
.site-header .header-inner > div.header-right:not(:has(*)) {
	display: none;
}

/* ------------------------------------------------------------------
 * 3. Logo
 * ------------------------------------------------------------------ */
.site-header .site-branding {
	position: relative;
	z-index: 2; /* above .header-bg */
	margin-bottom: 18px; /* logo bottom sits a little above the menu line, as in the design */
	padding: 0;
	color: var(--wp--preset--color--secondary);
}

.site-header .site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-header .site-branding img.custom-logo,
.site-header .site-branding .site-logo-svg {
	display: block;
	width: 242px;
	max-width: 100%;
	height: auto;
}

/* The light logo (Customizer) is for dark headers; this header is always steel. */
.site-header .custom-logo-link img.custom-logo-light {
	display: none;
}

/* Text fallback when there is no logo. */
.site-header .site-title {
	margin: 0;
	font-size: 1.33em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * 4. Menu (all screen sizes)
 * ------------------------------------------------------------------ */
.main-navigation {
	clear: both;
	display: block;
	width: 100%;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation a,
.main-navigation .menu-item-text {
	display: block;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

/* Top level links sit above .header-bg. */
.main-navigation > div > ul > li > a,
.main-navigation > div > ul > li > .menu-item-text {
	position: relative;
	z-index: 2;
}

/* Sub menu toggle: a plain chevron button. It has no .header-btn class, so the global button look
 * from theme.css (yellow pill, arrow icon) is reset here in every state. */
.main-navigation ul li .mobile_arrow,
.main-navigation ul li .mobile_arrow:hover,
.main-navigation ul li .mobile_arrow:focus {
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	line-height: inherit;
	background-color: transparent !important;
	color: var(--wp--preset--color--black) !important;
}

.main-navigation ul li .mobile_arrow::after {
	display: none;
}

/* Wide "mega menu" panel (ACF option on a menu item) is not part of this design. */
.main-navigation .sub_menu .parent_item {
	display: none;
}

/* ------------------------------------------------------------------
 * 5. Desktop menu
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1101px) {

	.site-header .header-center {
		justify-content: flex-end;
		align-items: flex-end;
	}

	.main-navigation .mobile-secondary-nav,
	.main-navigation > div > ul > li.hide-on-desktop {
		display: none;
	}

	/* Flex row (only when it has content): also lets the z-index of its items lift them above .header-bg. */
	.site-header .header-inner > div.header-right:has(*) {
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.site-header .main-navigation > div > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-end;
		gap: clamp(20px, 2.55vw, 44px); /* about 44px at 1728px, as measured between the words in the design */
	}

	.site-header .main-navigation > div > ul > li > a,
	.site-header .main-navigation > div > ul > li > .menu-item-text {
		padding: 0 0 12px;
		color: var(--wp--preset--color--black);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.3;
	}

	/* Yellow line under the current item, and on hover or while focus is inside the item. */
	.site-header .main-navigation > div > ul > li > a::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 0;
		border-bottom: 2px solid var(--wp--preset--color--primary);
		transition: width 0.2s ease;
	}

	.site-header .main-navigation > div > ul > li:hover > a::before,
	.site-header .main-navigation > div > ul > li:focus-within > a::before,
	.site-header .main-navigation > div > ul > li > a[aria-current="page"]::before,
	.site-header .main-navigation > div > ul > li.current-menu-item > a::before,
	.site-header .main-navigation > div > ul > li.current-menu-parent > a::before,
	.site-header .main-navigation > div > ul > li.current-menu-ancestor > a::before,
	.site-header .main-navigation > div > ul > li.current_page_parent > a::before,
	.site-header .main-navigation > div > ul > li.current_page_ancestor > a::before {
		width: 100%;
	}

	/* Current item: ExtraBold, so it does not depend on the yellow line (WCAG 1.4.1 / 1.4.11). */
	.site-header .main-navigation > div > ul > li > a[aria-current="page"],
	.site-header .main-navigation > div > ul > li.current-menu-item > a,
	.site-header .main-navigation > div > ul > li.current-menu-parent > a,
	.site-header .main-navigation > div > ul > li.current-menu-ancestor > a,
	.site-header .main-navigation > div > ul > li.current_page_parent > a,
	.site-header .main-navigation > div > ul > li.current_page_ancestor > a {
		font-weight: 800;
	}

	.site-header .main-navigation > div > ul > li > a:hover,
	.site-header .main-navigation > div > ul > li > a:focus {
		color: var(--wp--preset--color--black);
	}

	/* Parent with sub menu: chevron button on the text line. */
	.site-header .main-navigation > div > ul > li.has_sub {
		align-items: flex-start;
	}

	.site-header .main-navigation > div > ul > li.has_sub > .submenu-toggle {
		height: 23px;
		margin-left: 8px; /* room for the focus ring, so it does not cover the link text */
	}
}

/* ------------------------------------------------------------------
 * 6. Desktop sub menu (open and closed states: css/navigation.css)
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1101px) {

	.site-header .main-navigation ul .sub_menu {
		position: absolute;
		top: calc(100% + 14px);
		left: -20px;
		min-width: 240px;
		padding: 8px 0;
		text-align: left;
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 10px 30px rgba(36, 31, 33, 0.15);
	}

	/* Invisible bridge over the 14px gap between the link and the sub menu, so the mouse can move
	 * down into the sub menu without leaving the hover area (WCAG 1.4.13: content on hover is hoverable). */
	.site-header .main-navigation ul .sub_menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 16px;
	}

	/* Third level opens to the side. */
	.site-header .main-navigation ul ul .sub_menu {
		top: 0;
		left: 100%;
	}

	.site-header .main-navigation ul ul li a,
	.site-header .main-navigation ul ul li .menu-item-text {
		padding: 10px 20px;
		color: var(--wp--preset--color--black);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.4;
		white-space: nowrap;
	}

	.site-header .main-navigation ul ul li a:hover,
	.site-header .main-navigation ul ul li a:focus-visible {
		background-color: var(--wp--preset--color--lightgrey);
		color: var(--wp--preset--color--black);
	}

	.site-header .main-navigation ul ul li a[aria-current="page"] {
		font-weight: 800;
		box-shadow: inset 4px 0 0 var(--wp--preset--color--primary);
	}

	.site-header .main-navigation ul ul li.has_sub > .submenu-toggle {
		margin-right: 12px;
	}
}

/* ------------------------------------------------------------------
 * 7. Fixed header while scrolling: same look, smaller padding, soft shadow
 * ------------------------------------------------------------------ */
body.fixed-header.scrolled .site-header .header-inner {
	padding-top: 20px;
	padding-bottom: 16px;
}

body.fixed-header.scrolled .site-header .header-bg {
	box-shadow: 0 2px 12px rgba(36, 31, 33, 0.12);
}

/* ------------------------------------------------------------------
 * 8. Mobile header and menu button (size and show/hide: css/navigation.css)
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1100px) {

	:root {
		--abe-header-height: 84px; /* 20 + 44px menu button + 20 */
	}

	.site-header .header-inner,
	body.fixed-header.scrolled .site-header .header-inner {
		justify-content: flex-end;
		align-items: center;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.site-header .header-left {
		margin-right: auto;
	}

	/* Search and secondary menu move into the menu panel. */
	.site-header .header-right {
		display: none;
	}

	.site-header .site-branding {
		margin-bottom: 0;
	}

	.site-header .site-branding img.custom-logo,
	.site-header .site-branding .site-logo-svg {
		width: 180px;
	}
}

/* Hamburger icon: six bars, they turn into an X while the menu is open (.open, js/navigation.js). */
.mobile_menu_button span {
	position: relative;
	margin: 0 auto;
	cursor: pointer;
	transform: rotate(0deg);
	transition: 0.5s ease-in-out;
}

.mobile_menu_button span > i {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 19px;
	vertical-align: middle;
}

.mobile_menu_button span em {
	position: absolute;
	display: block;
	width: 50%;
	height: 2px;
	background: var(--wp--preset--color--black);
	opacity: 1;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}

.mobile_menu_button span.open > i {
	margin-top: -6px;
}

.mobile_menu_button span em:nth-child(even) {
	left: 50%;
	border-radius: 0 9px 9px 0;
}

.mobile_menu_button span em:nth-child(odd) {
	left: 0;
	border-radius: 9px 0 0 9px;
}

.mobile_menu_button span em:nth-child(1),
.mobile_menu_button span em:nth-child(2) {
	top: 0;
}

.mobile_menu_button span em:nth-child(3),
.mobile_menu_button span em:nth-child(4) {
	top: 7px;
}

.mobile_menu_button span em:nth-child(5),
.mobile_menu_button span em:nth-child(6) {
	top: 14px;
}

.mobile_menu_button span.open em:nth-child(1),
.mobile_menu_button span.open em:nth-child(6) {
	transform: rotate(45deg);
}

.mobile_menu_button span.open em:nth-child(2),
.mobile_menu_button span.open em:nth-child(5) {
	transform: rotate(-45deg);
}

.mobile_menu_button span.open em:nth-child(1) {
	left: 2px;
	top: 6px;
}

.mobile_menu_button span.open em:nth-child(2) {
	left: calc(50% - 3px);
	top: 6px;
}

.mobile_menu_button span.open em:nth-child(3) {
	left: -50%;
	opacity: 0;
}

.mobile_menu_button span.open em:nth-child(4) {
	left: 100%;
	opacity: 0;
}

.mobile_menu_button span.open em:nth-child(5) {
	left: 2px;
	top: 14px;
}

.mobile_menu_button span.open em:nth-child(6) {
	left: calc(50% - 3px);
	top: 14px;
}

/* ------------------------------------------------------------------
 * 9. Mobile menu panel and sub menus
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1100px) {

	/* Full screen panel on steel, under the header bar. */
	#site-navigation {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		padding-top: var(--abe-header-height);
		overflow: hidden;
		background-color: var(--abe-header-bg);
	}

	body.admin-bar #site-navigation {
		padding-top: calc(var(--abe-header-height) + 46px);
	}

	.site-header .main-navigation li {
		position: static; /* sub menu panels are placed against the whole menu panel */
		margin: 0;
		border-top: 1px solid rgba(36, 31, 33, 0.2);
	}

	.site-header .main-navigation > div > ul > li > a {
		z-index: 1;
	}

	.site-header .main-navigation a,
	.site-header .main-navigation .menu-item-text {
		position: relative;
		padding: 16px 24px;
		color: var(--wp--preset--color--black);
		font-size: var(--wp--preset--font-size--small-22);
		font-weight: 600;
		line-height: 1.3;
	}

	.site-header .main-navigation a:hover {
		color: var(--wp--preset--color--black);
		text-decoration: underline;
	}

	/* Keep keyboard focus inside the panel instead of clipping it to a divider-like line. */
	.site-header .main-navigation a:focus-visible {
		outline-offset: -3px;
	}

	/* Opening the menu focuses its first link. A touch press should not draw a focus ring. */
	html[data-input="pointer"] .site-header .main-navigation a:focus {
		outline: none;
	}

	/* Current item: ExtraBold + yellow bar on the left. */
	.site-header .main-navigation li a[aria-current="page"],
	.site-header .main-navigation li.current-menu-ancestor > a,
	.site-header .main-navigation li.current_page_parent > a {
		font-weight: 800;
		box-shadow: inset 4px 0 0 var(--wp--preset--color--primary);
		color: var(--wp--preset--color--black);
	}

	/* Item with children: link on the left, chevron button on the right. */
	.site-header .main-navigation ul > li.has_sub {
		display: flex;
		justify-content: space-between;
	}

	.site-header .main-navigation ul > li.has_sub > a,
	.site-header .main-navigation ul > li.has_sub > .menu-item-text {
		flex: 1;
	}

	.site-header .main-navigation ul > li.has_sub > .mobile_arrow {
		width: 50px;
		margin: 0 16px 0 0;
		text-align: right;
		cursor: pointer;
	}

	/* Sub menu panels slide over the menu (not over the header bar) on the same steel background. */
	.site-header .main-navigation div.sub_menu {
		position: absolute;
		top: var(--abe-header-height);
		left: 0;
		z-index: 3;
		width: 100%;
		height: calc(100dvh - var(--abe-header-height));
		padding: 0;
		overflow-y: auto;
		background-color: var(--abe-header-bg);
		transform: translateX(100%);
	}

	body.admin-bar .site-header .main-navigation div.sub_menu {
		top: calc(var(--abe-header-height) + 46px);
		height: calc(100dvh - var(--abe-header-height) - 46px);
	}

	/* Sub menu header row: Back button, name of the open level, empty column to keep the name centred. */
	.site-header .main-navigation div.sub_menu .col.head_mob {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		text-align: center;
	}

	.site-header .main-navigation div.sub_menu .col.head_mob .headtxt {
		position: relative;
		display: block;
		color: var(--wp--preset--color--black);
		font-size: var(--wp--preset--font-size--small-22);
		font-weight: 800;
		line-height: normal;
		letter-spacing: 0;
	}

	.site-header .main-navigation div.sub_menu .col.head_mob .back {
		display: flex;
		flex-direction: column;
		text-align: left;
		cursor: pointer;
	}

	.site-header .main-navigation div.sub_menu .col.head_mob .close {
		min-width: 30px;
	}
}

@media screen and (max-width: 480px) {
	.site-header .main-navigation a,
	.site-header .main-navigation .menu-item-text {
		padding: 14px 20px;
	}
}