/*
 * Header navigation: accessibility and states (focus, open/closed menus, search panel).
 * The header layout and look are in css/header.css, which loads after this file.
 * Both load after css/theme.css (see abefactors_scripts() in functions.php), so they win over its global button styles.
 *
 * 1. Focus indicators and skip links
 * 2. Header buttons (reset of the global button look)
 * 3. Menu toggle
 * 4. Search toggle and search panel
 * 5. Sub menus (desktop and mobile)
 * 6. Mobile menu panel
 * 7. Reduced motion
 */

/* ------------------------------------------------------------------
 * 1. Focus indicators and skip links
 * Visible on every interactive element (WCAG 2.4.7 / 2.4.11). Black ring on light backgrounds,
 * yellow ring on the charcoal and black sections.
 * ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--wp--preset--color--black);
	outline-offset: 3px;
}

/* Text fields: the ring only for keyboard users (js/focus-source.js sets data-input="pointer" after a mouse or
 * touch press; Tab sets it back to "keyboard"). Browsers would otherwise show it after a click too. */
html[data-input="pointer"] input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-input="pointer"] textarea:focus,
html[data-input="pointer"] select:focus {
	outline: none;
	box-shadow: none;
}

.bgcolor-secondary :focus-visible,
.bgcolor-black :focus-visible,
.has-secondary-background-color :focus-visible,
.has-black-background-color :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

/* Focus rings appear at once (links have "transition: all" in theme.css, which would animate the ring). */
a:focus-visible,
button:focus-visible {
	transition-property: color, background-color, border-color;
}

/* The main landmark gets focus from the skip link; no ring is needed on the whole page area. */
#primary:focus {
	outline: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 16px;
	left: 16px;
	z-index: 100001;
	padding: 14px 22px;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	text-decoration: underline;
	border-radius: 4px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--black);
}

body.admin-bar .skip-link.screen-reader-text:focus {
	top: 48px;
}

/* ------------------------------------------------------------------
 * 2. Header buttons
 * theme.css styles every <button> as a yellow pill with an arrow icon. Icon buttons in the header
 * must not look like that, in any state.
 * ------------------------------------------------------------------ */
.site-header button.header-btn,
.site-header button.header-btn:hover,
.site-header button.header-btn:active,
.site-header button.header-btn:focus {
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	line-height: 1;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--black);
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.site-header button.header-btn::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------
 * 3. Menu toggle: hidden on desktop, shown at 1100px and below with a 44px target size (WCAG 2.5.8).
 * ------------------------------------------------------------------ */
.site-header #primary-menu-triger {
	position: relative;
	z-index: 10; /* above the open menu panel */
	display: none;
}

@media screen and (max-width: 1100px) {
	.site-header #primary-menu-triger {
		display: inline-flex;
		flex: 0 0 44px;
		width: 44px;
		min-width: 44px;
		height: 44px;
		aspect-ratio: auto;
		line-height: 1;
	}
}

.toggle-menu .mobile_menu_button,
.toggle-menu .mobile_menu_button > span {
	display: block;
}

.toggle-menu .mobile_menu_button > span {
	height: auto;
	width: 30px;
}

/* ------------------------------------------------------------------
 * 4. Search toggle and search panel
 * ------------------------------------------------------------------ */
.site-header .header-widget .search-icon .search-toggle {
	position: relative;
	display: flex;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background-color: var(--wp--preset--color--lightgrey);
}

.site-header .header-widget .search-icon .search-toggle::before {
	content: '\e80c';
	font-family: "abe-icons";
	font-size: 18px;
	line-height: 1;
}

.site-header .header-widget .search-icon .search-toggle:hover,
.site-header .header-widget .search-icon .search-toggle[aria-expanded="true"] {
	background-color: var(--wp--preset--color--primary);
}

/* Panel under the header bar. Closed: hidden attribute (display: none). Open: fades in (.open). */
.header_search {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: visible;
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--lightgrey);
	transition: opacity 0.3s linear;
}

.header_search[hidden] {
	display: none;
}

.header_search.open {
	height: auto;
	opacity: 1;
}

.header_search .container {
	position: relative;
}

/* Search form (header panel and mobile menu). */
.gutenberg_search_form {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 0;
}

.gutenberg_search_form .gutenberg_icon_in_search {
	padding: 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small-20);
}

/* Submit button: arrow icon, the button text stays for screen readers (font-size 0 hides it visually). */
.gutenberg_search_form .submit_search_btn {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--black);
	font-size: 0;
}

.gutenberg_search_form .submit_search_btn::after {
	content: "\e815";
	font-size: var(--wp--preset--font-size--small-20);
}

.gutenberg_search_form .gutenberg_search_close {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small-20);
}

.gutenberg_search_form input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	box-shadow: none;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small-20);
	font-family: inherit;
	line-height: 1.2;
	height: 50px;
	margin: 0;
	width: 100%;
	padding: 0 8px;
	border-radius: 0;
}

.gutenberg_search_form input[type="search"]:focus {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.gutenberg_search_form input[type="search"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--black);
	outline-offset: 2px;
}

.header_search .gutenberg_search_form .submit_search_btn {
	width: 44px;
	height: 44px;
	margin: 0;
	flex: 0 0 44px;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--black);
}

.gutenberg_search_form .submit_search_btn::after {
	margin: 0;
	width: auto;
	height: auto;
	background: none;
	color: inherit;
}

.site-header .gutenberg_search_form .gutenberg_search_close {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	font-size: var(--wp--preset--font-size--small-20);
}

.site-header .gutenberg_search_form .gutenberg_search_close:hover {
	color: var(--wp--preset--color--mediumgrey);
}

/* Search form inside the mobile menu. */
.main-navigation .mobile-search {
	padding: 20px 45px 30px;
	border-top: 1px solid var(--wp--preset--color--lightgrey);
}

.main-navigation .mobile-search .gutenberg_search_form {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
}

.main-navigation .mobile-search .submit_search_btn {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	justify-content: center;
	background-color: transparent;
	color: var(--wp--preset--color--black);
}

@media screen and (max-width: 480px) {
	.main-navigation .mobile-search {
		padding: 20px 20px 30px;
	}
}

/* ------------------------------------------------------------------
 * 5. Sub menus
 * Closed sub menus use visibility: hidden, so their links leave the tab order and the accessibility tree.
 * They open on hover or with their toggle button (li.subopened).
 * ------------------------------------------------------------------ */
.main-navigation .menu-item-text {
	display: block;
}

/* theme.css gives links "transition: all", which would also delay the hidden state of sub menu links. */
.main-navigation .sub_menu a {
	transition-property: color, background-color, border-color;
}

@media screen and (min-width: 1101px) {

	.main-navigation .head_mob,
	.main-navigation .mobile-search {
		display: none;
	}

	/* Closed: slid up behind the header bar and hidden. */
	.main-navigation ul .sub_menu {
		z-index: -1;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-100%);
		transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s;
	}

	/* Not on :focus-within: after Escape, focus stays on the toggle and the sub menu must close. */
	.main-navigation ul li:hover > .sub_menu,
	.main-navigation ul li.subopened > .sub_menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		z-index: 10;
		transition: opacity 0.3s, transform 0.3s, visibility 0s;
	}

	.main-navigation > div > ul > li.has_sub {
		display: flex;
		align-items: center;
	}

	.main-navigation ul li .mobile_arrow.submenu-toggle {
		position: relative;
		z-index: 2; /* above .header-bg, like the links */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		margin-left: 8px; /* room for the focus ring, so it does not cover the link text */
		padding: 0;
		border: 0;
		border-radius: 0;
		line-height: 1;
	}

	.main-navigation ul li .mobile_arrow.submenu-toggle svg {
		width: 11px;
		height: auto;
		transition: transform 0.2s;
	}

	.main-navigation ul li .mobile_arrow.submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* Second level opens to the side: chevron points right. */
	.main-navigation ul ul li .mobile_arrow.submenu-toggle svg {
		transform: rotate(-90deg);
	}

	/* Second level: the toggle sits at the end of the row. */
	.main-navigation ul ul li.has_sub {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

@media screen and (max-width: 1100px) {

	.main-navigation ul li .mobile_arrow.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 44px;
		min-height: 44px;
	}

	.main-navigation div.sub_menu {
		visibility: hidden;
		transition: transform 0.3s, visibility 0s linear 0.3s;
	}

	.main-navigation li.subopened > div.sub_menu {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.3s, visibility 0s;
	}

	.main-navigation div.sub_menu .col.head_mob .back {
		min-width: 44px;
		min-height: 44px;
		justify-content: flex-start;
	}

	/* Mobile drill-down: chevron points right on the toggle, left on Back. */
	.main-navigation ul li .mobile_arrow.submenu-toggle svg {
		width: 14px;
		height: auto;
		transform: rotate(-90deg);
	}

	.main-navigation div.sub_menu .col.head_mob .back svg {
		width: 14px;
		height: auto;
		transform: rotate(90deg);
	}
}

/* ------------------------------------------------------------------
 * 6. Mobile menu panel: hidden at 1100px and below until the menu button adds .toggled-on.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1100px) {
	#site-navigation {
		display: none;
	}

	#site-navigation.toggled-on {
		display: block;
		overflow-y: auto;
	}
}

/* ------------------------------------------------------------------
 * 7. Reduced motion (WCAG 2.3.3)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}