/* Articles mega-menu — desktop panel + mobile accordion (inc/navigation/mega-menu.php). */

/* ---------- Toggle ---------- */
.site-header__nav .menu-item-has-mega,
.site-header__mobile-nav .menu-item-has-mega {
	display: flex;
	align-items: center;
}

.mega-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 0.125rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--header-fg-muted);
	cursor: pointer;
	transition: color 0.2s ease;
}

.mega-toggle:hover,
.mega-toggle:focus-visible,
.menu-item-has-mega.is-open > .mega-toggle {
	color: var(--header-fg);
}

.mega-toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.mega-toggle__icon {
	transition: transform 0.2s ease;
}

.menu-item-has-mega.is-open > .mega-toggle .mega-toggle__icon {
	transform: rotate(180deg);
}

/* ---------- Desktop panel ---------- */
.mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	width: min(1040px, calc(100vw - 3rem));
	padding-top: 0.5rem; /* visual gap that stays hoverable */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.menu-item-has-mega.is-open > .mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 2.25rem;
	max-height: calc(100vh - 9rem);
	overflow-y: auto;
	padding: 2rem 2.25rem;
	background: var(--color-background);
	color: var(--color-text);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(11, 29, 48, 0.28), 0 2px 6px rgba(11, 29, 48, 0.1);
}

.mega__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 2rem;
	align-content: start;
}

.mega__label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.mega__index {
	color: var(--color-accent-text);
	font-variant-numeric: tabular-nums;
}

.mega__rail {
	padding-left: 2rem;
	border-left: 1px solid var(--color-border);
}

/* Reset the dark-header link styling for links living inside the light panel. */
.site-header__nav .mega a {
	display: block;
	padding: 0.5rem 0.625rem;
	margin-inline: -0.625rem;
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: normal;
	text-decoration: none;
}

.site-header__nav .mega a::after {
	display: none;
}

.site-header__nav .mega a:hover,
.site-header__nav .mega a:focus-visible {
	color: var(--color-primary);
	background: var(--color-surface);
}

.site-header__nav .mega a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.mega__item-title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.mega__item-desc {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-muted);
}

.site-header__nav .mega .mega__more,
.site-header__nav .mega .mega__all {
	display: inline-block;
	margin-top: 0.25rem;
	padding-block: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent-text);
}

.site-header__nav .mega .mega__all {
	display: block;
	margin-top: 1rem;
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
}

.site-header__nav .mega .mega__all:hover,
.site-header__nav .mega .mega__all:focus-visible {
	background: transparent;
	color: var(--color-primary);
}

/* ---------- Mobile accordion ---------- */
.site-header__mobile-nav .menu-item-has-mega {
	flex-wrap: wrap;
	justify-content: space-between;
}

.site-header__mobile-nav .menu-item-has-mega > a {
	flex: 1 1 auto;
}

.site-header__mobile-nav .mega-toggle {
	width: 44px;
	height: 44px;
	margin-left: 0;
}

.mobile-mega {
	display: none;
	flex: 0 0 100%;
	padding: 0 0 0.75rem;
}

.site-header__mobile-nav .menu-item-has-mega.is-open > .mobile-mega {
	display: block;
}

.mobile-mega__label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.75rem 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--header-fg-muted);
}

.mobile-mega__index {
	color: var(--color-accent);
}

.site-header__mobile-nav .mobile-mega a {
	display: block;
	padding: 0.5rem 0 0.5rem 0.75rem;
	border-left: 1px solid var(--header-line);
	font-family: var(--font-body, inherit);
	font-size: 1rem;
	color: var(--header-fg);
}

.site-header__mobile-nav .mobile-mega a:hover,
.site-header__mobile-nav .mobile-mega a:focus-visible {
	color: var(--color-accent);
}

.site-header__mobile-nav .mobile-mega .mobile-mega__all {
	margin-top: 0.75rem;
	border-left: 0;
	padding-left: 0;
	font-weight: 600;
	color: var(--color-accent);
}

@media (max-width: 1099px) {
	.mega__inner {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 1.5rem;
		padding: 1.5rem;
	}

	.mega__rail {
		padding-left: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega,
	.mega-toggle__icon {
		transition: none;
	}
}

@media (min-width: 992px) {
	.mobile-mega {
		display: none !important;
	}
}