/**
 * Navigation foundation: site branding, primary/footer menu framework
 * (desktop dropdown + mobile collapse), the mobile menu toggle, and the
 * header search toggle. Structure and interaction states only — no menu
 * content, no search execution logic (WordPress core already handles
 * search; this file only styles the entry point).
 *
 * Submenu visibility uses :hover/:focus-within rather than JS, which
 * keeps it fully keyboard-operable (focusing the parent link, itself
 * always visible, puts focus "within" its <li>, revealing the child
 * list before the next Tab press reaches it). A dedicated tap-to-expand
 * affordance for touch users is a documented future enhancement, not a
 * blocker — see docs/UI_GUIDELINES.md.
 */

/* ---------- Site branding ---------- */

.site-branding {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.site-title {
	margin: 0;
	font-size: var(--font-size-xl);
	line-height: var(--line-height-tight);
}

.site-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.custom-logo-link {
	display: inline-flex;
}

/* ---------- Primary / footer navigation ---------- */

.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.main-navigation ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition:
		background-color var(--transition-fast) var(--ease-standard),
		color var(--transition-fast) var(--ease-standard);
}

.main-navigation a:hover,
.main-navigation a:focus {
	background-color: var(--color-gray-100);
	color: var(--color-brand-primary);
}

.main-navigation .current-menu-item > a {
	color: var(--color-brand-primary);
	font-weight: var(--font-weight-semibold);
}

.main-navigation li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: var(--space-2);
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 100%;
	flex-direction: column;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-2);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-dropdown);
}

.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

.main-navigation .sub-menu a {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

.menu-toggle:hover {
	background-color: var(--color-gray-100);
}

/* Mobile presentation (≤48rem): #site-navigation becomes a full off-canvas
   drawer instead of an inline dropdown — see assets/css/header.css, loaded
   after this file, which is authoritative for the drawer's positioning,
   the .menu-toggle icon swap, and the backdrop. The toggle mechanism
   itself (.is-menu-open on #site-navigation, unchanged since Phase 1/2)
   still lives here since it's a base navigation concern, not header
   chrome. */
@media (max-width: 48rem) {
	.main-navigation .sub-menu {
		position: static;
		border: none;
		box-shadow: none;
		padding-inline-start: var(--space-4);
	}
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	display: inline-flex;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	text-decoration: none;
}

.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--color-brand-primary);
}

/* ---------- Icon button (shared by search toggle and any future icon-only control) ---------- */

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	color: var(--color-text);
	cursor: pointer;
	transition:
		background-color var(--transition-fast) var(--ease-standard),
		border-color var(--transition-fast) var(--ease-standard);
}

.icon-button:hover {
	background-color: var(--color-gray-100);
}

.icon-button svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* ---------- Header search toggle ---------- */

.site-search {
	position: relative;
}

.site-search__panel {
	display: none;
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + var(--space-2));
	width: 20rem;
	max-width: 90vw;
	padding: var(--space-4);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-dropdown);
}

.site-search.is-search-open .site-search__panel {
	display: block;
}

.site-search__panel .search-form {
	display: flex;
	gap: var(--space-2);
}

.site-search__panel .search-form label {
	flex: 1 1 auto;
}