/*
 * ACCL Header fixes. Loaded after the theme stylesheets.
 */

/*
 * 1. Mobile panel width.
 * The theme's generated stylesheet forces `position: relative !important` on every <nav>
 * that is not sticky/fixed/absolute. That made the nav a 28px-wide positioning box, so the
 * absolutely positioned .menu panel (left:0; right:0) collapsed to a sliver at the right edge.
 * The panel must be positioned against the header, as in the design.
 * The ID selectors out-rank the generated rule's :not(#wpconvert-mobile-nav).
 */
#site-header #site-navigation.main-navigation {
	position: static !important;
}

/*
 * 2. Mobile and tablet (below the design's 1100px desktop breakpoint): dropdowns are an accordion.
 * The generated stylesheet also hides every .sub-menu with display:none !important and opens it
 * on :hover, which on a touch screen is a sticky, unreliable state. ID selectors win over those
 * rules, so only the toggle button (the .is-open class) opens a section.
 */
@media (max-width: 1099.98px) {
	#primary-menu {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	}

	#primary-menu .menu-item-has-children > .sub-menu,
	#primary-menu .menu-item-has-children > .submenu {
		display: none !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0.25rem 0 0.5rem 1rem !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	#primary-menu .menu-item-has-children > .sub-menu.is-open,
	#primary-menu .menu-item-has-children > .submenu.is-open {
		display: block !important;
	}

	#primary-menu .sub-menu > .menu-item {
		display: block !important;
		width: 100% !important;
	}
	#primary-menu .sub-menu a {
		display: block !important;
		width: 100% !important;
		min-height: 44px;
		padding: 0.7rem 0 !important;
		white-space: normal !important;
		line-height: 1.3;
		color: var(--graphite);
	}

	/*
	 * Tablet widths (768px to 1099px): the generated stylesheet has
	 * `ul.menu:not(.submenu):not(.sub-menu) { display:flex !important; flex-direction:row !important }`
	 * from 768px up, which kept the menu permanently open as a squashed row next to the hamburger.
	 * Below 1100px the menu is a panel: closed until the hamburger opens it, items stacked.
	 */
	#site-header #primary-menu.menu:not(.is-open) {
		display: none !important;
	}
	#site-header #primary-menu.menu.is-open {
		display: block !important;
		flex-direction: column !important;
		align-items: stretch !important;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		padding: 0.5rem var(--gutter) 1.25rem !important;
	}
	#site-header #primary-menu.menu > li {
		display: block !important;
		position: static !important;
		float: none !important;
		flex-shrink: 1 !important;
		width: 100% !important;
		vertical-align: baseline !important;
	}

	/* Comfortable tap targets for the top level. */
	#primary-menu > .menu-item > a,
	#primary-menu > .menu-item > .menu-item__toggle {
		min-height: 52px;
	}
}

/*
 * 3. Desktop: dropdowns open on hover (generated rules) and also from the keyboard / the toggle button.
 */
@media (min-width: 1100px) {
	#primary-menu .menu-item-has-children > .sub-menu.is-open,
	#primary-menu .menu-item-has-children > .submenu.is-open,
	#primary-menu .menu-item-has-children:focus-within > .sub-menu,
	#primary-menu .menu-item-has-children:focus-within > .submenu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/*
 * 4. Current page highlight, at every width.
 * Top level: the link (or the dropdown button for the section the visitor is in).
 * Inside a dropdown: the link marked aria-current="page".
 */
#primary-menu > .menu-item.current-menu-item > a,
#primary-menu > .menu-item.current-menu-item > .menu-item__toggle,
#primary-menu > .menu-item.current-menu-ancestor > .menu-item__toggle,
#primary-menu > .menu-item.current-menu-parent > .menu-item__toggle,
#primary-menu .sub-menu a[aria-current="page"] {
	color: var(--swoosh-deep) !important;
	font-weight: 600;
}
#primary-menu .sub-menu a[aria-current="page"] {
	box-shadow: inset 3px 0 0 var(--swoosh);
	padding-left: 0.75rem !important;
}

/* Visible keyboard focus on the toggle buttons. */
#primary-menu .menu-item__toggle:focus-visible,
#primary-menu a:focus-visible {
	outline: 3px solid var(--swoosh);
	outline-offset: -3px;
}