/**
 * Styles supporting the accessibility fixes in ../js/nav-a11y.js.
 */

/*
 * Header/top-bar nav disclosure toggle button. The parent theme's
 * decorative span this replaces is 0x0/invisible by default; a visible
 * chevron already exists independently via `.nav-link:after`, so this is
 * sized only as a sane, visible focus target — not a second icon.
 *
 * `.fl-submenu-icon-wrap` is an unstyled block-level <div> by default
 * (only positioned/sized by the parent theme's own CSS in its separate,
 * gated mobile-toggle-icon mode). Giving the button real dimensions made
 * that block-level wrapper stack below the (also block-level) link,
 * adding visible empty space under every top-level item. Taking it out of
 * flow entirely — positioned absolutely within the <li>, which is already
 * `position: relative` — avoids affecting layout height, mirroring how
 * the parent theme's own gated CSS solves this same problem.
 *
 * pointer-events: none on both the wrap and button lets the mouse pass
 * through to the underlying link, which sits directly beneath at the same
 * position — otherwise hovering this small area (rather than the rest of
 * the link) would fail to trigger the link's own hover color, since the
 * mouse would be over this separate, overlapping element instead of the
 * link. Mouse users don't need this button anyway (hovering the link
 * already opens the submenu, matching existing behavior); it exists for
 * keyboard/AT parity, and pointer-events has no effect on keyboard
 * focus/activation.
 */
.fl-page-nav .fl-submenu-icon-wrap,
.fl-page-bar-nav .fl-submenu-icon-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.fl-page-nav .fl-submenu-icon-wrap button.fl-submenu-toggle-icon,
.fl-page-bar-nav .fl-submenu-icon-wrap button.fl-submenu-toggle-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: none;
}

.fl-page-nav .fl-submenu-icon-wrap button.fl-submenu-toggle-icon:focus-visible,
.fl-page-bar-nav .fl-submenu-icon-wrap button.fl-submenu-toggle-icon:focus-visible {
	outline: 2px solid #005fcc;
	outline-offset: 2px;
}