/**
 * The header's navigation panel below the desktop row, after the prototype's
 * Header.tsx: the toggle, the panel under the row and the rows that open
 * their entries in place.
 *
 * Unwrapped: functions.php enqueues this file with the media query of the
 * site's breakpoint, raskin_header_panel_media(), which header.js reads from
 * the header's data-panel-media. SBA's panel takes over below 1025px, SBD's
 * below 1200px, where its row stops fitting. Loaded right after
 * header-footer.css, which holds the row.
 */

.sba-header-search {
	display: none;
}

.sba-header-search-trigger {
	display: inline-flex;
}

/* The toggle's glyph sits at the content's edge: its 8px of padding
   reach into the gutter. */
.sba-header .sba-header-toggle,
.sba-header .sba-header-toggle:hover,
.sba-header .sba-header-toggle:focus {
	display: inline-flex;
	margin-right: -8px;
}

/* The logo takes the free space, pushing actions and toggle to the right. */
.sba-header-logo {
	flex: 1 1 auto;
}

/* Panel: a sheet under the row, over the page, py-4 below a top border,
   shown at once. The row is 64px tall, so the panel's border sits where
   the header's does. */
.sba-header-nav {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - 64px);
	padding: 16px;
	background: var(--sba-surface);
	border-top: 1px solid var(--sba-border);
	overflow-y: auto;
}

.sba-header.is-open .sba-header-nav {
	display: block;
}

.sba-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}

/* Top-level rows, divided by a half-strength border. */
.sba-nav > li {
	border-bottom: 1px solid color-mix(in srgb, var(--sba-border) 50%, transparent);
}

.sba-nav > li:last-child {
	border-bottom: 0;
}

/* Row: px-4 py-3, foreground text, accent background on hover, rounded. */
.sba-nav > li > a,
.sba-nav > li > a:hover,
.sba-nav > li > a:focus,
.sba-nav > li.is-open > a,
.sba-nav > li.current-menu-item > a,
.sba-nav > li.current-menu-ancestor > a {
	justify-content: space-between;
	padding: 12px 16px;
	color: var(--sba-charcoal);
	background-color: transparent;
	border-radius: var(--sba-radius);
	font-size: 16px;
	font-weight: 400;
	transition: background-color var(--sba-duration-hover) ease;
}

.sba-nav > li > a:hover,
.sba-nav > li > a:focus {
	background-color: var(--sba-accent);
}

/* An open row keeps the plain look; its chevron turns. */
.sba-nav > li.is-open > a {
	background-color: transparent;
}

.sba-nav > li.is-open > a .sba-nav-chevron {
	transform: rotate(180deg);
}

/* Entries: pb-2, links px-8 py-2, small muted text. A row opens only
   through its link (header.js), not on hover or focus. */
.sba-nav-sub,
.sba-nav > li:hover > .sba-nav-sub,
.sba-nav > li:focus-within > .sba-nav-sub {
	display: none;
	position: static;
	width: auto;
	min-width: 0;
	padding: 0 0 8px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.sba-nav > li.is-open > .sba-nav-sub {
	display: block;
}

.sba-nav-sub a {
	padding: 8px 32px;
	border-radius: var(--sba-radius);
}