/**
 * Dropdown/accordion styling for the intent-based primary nav
 * (see nav-structure.php). Site-wide enqueue — this chrome is small
 * enough to load on every page, unlike the homepage-only GSAP stack.
 *
 * Desktop (min-width: 1080px, matching site-chrome.css's own switch):
 * panels are shown via :hover/:focus-within alone, no JS involved.
 * Mobile: panels are toggled by main.js's .site-nav__toggle handler,
 * which adds/removes .is-open on the .site-nav__item.
 */

.site-nav__item.has-submenu > a {
	display: inline-flex;
	align-items: center;
}

.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-inline-start: 0.15rem;
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	cursor: pointer;
}

.site-nav__toggle svg {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform 0.25s ease;
}

.site-nav__item.is-open > .site-nav__toggle svg {
	transform: rotate(180deg);
}

.site-nav__panel {
	background: #fffdf9;
	color: #141413;
}

/* Placeholder ("coming soon") links: visually distinct, never a dead end —
   they still point somewhere real, this just sets honest expectations. */
[data-nav-placeholder="1"] {
	position: relative;
	opacity: 0.65;
}

[data-nav-placeholder="1"]::after {
	content: "Coming soon";
	display: inline-block;
	margin-inline-start: 0.5em;
	padding: 0.05em 0.5em;
	font-size: 0.65em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.6;
	color: #b64c08;
	background: rgba(237, 90, 42, 0.12);
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}

/* Mobile / below the desktop nav breakpoint: accordion. */
@media (max-width: 1079px) {
	.site-nav__panel {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		transition: grid-template-rows 0.3s ease;
	}

	.site-nav__panel > ul,
	.site-nav__panel > * {
		min-height: 0;
	}

	.site-nav__panel {
		display: grid;
	}

	.site-nav__item.is-open > .site-nav__panel {
		grid-template-rows: 1fr;
	}

	.site-nav__panel > ul {
		overflow: hidden;
		list-style: none;
		margin: 0;
		padding: 0 0 0 1rem;
	}

	.site-nav__panel ul li a {
		display: block;
		padding: 0.5rem 0;
	}
}

/* Desktop: hover/focus-within reveal, pure CSS. */
@media (min-width: 1080px) {
	.site-nav__item.has-submenu {
		position: relative;
	}

	.site-nav__toggle {
		display: none;
	}

	.site-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		margin-top: 0.5rem;
		padding: 0.75rem 0;
		border-radius: 12px;
		box-shadow: 0 18px 40px rgba(20, 20, 19, 0.16);
		opacity: 0;
		transform: translateY(6px);
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		z-index: 60;
	}

	.site-nav__panel > ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav__panel ul li a {
		display: block;
		padding: 0.5rem 1.25rem;
		white-space: nowrap;
		color: #141413;
	}

	.site-nav__panel ul li a:hover,
	.site-nav__panel ul li a:focus-visible {
		color: #ed5a2a;
		background: rgba(237, 90, 42, 0.08);
	}

	.site-nav__item.has-submenu:hover > .site-nav__panel,
	.site-nav__item.has-submenu:focus-within > .site-nav__panel {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
		pointer-events: auto;
	}

	/* Service Areas' [bronco_seo_areas_menu] shortcode renders its own
	   markup (not a plain <ul>) — give it room without assuming structure. */
	.site-nav__item.has-submenu .site-nav__panel:not(:has(> ul)) {
		padding: 1rem 1.25rem;
		min-width: 18rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__panel,
	.site-nav__toggle svg {
		transition: none !important;
	}
}