/* Desktop mega menu: compact panel (no descriptions, no photo), capped to the screen height, page dimmed behind it.
   Loaded after main.css (inc/template-tags.php). Mobile menu rules in main.css stay as they are. */
@media (min-width: 1025px) {
	.nav__mega > .mega { grid-template-columns: 1fr 250px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
	.mega__in { padding: 16px 20px 16px; }
	.mega__head { margin-bottom: 8px; }
	.mega__grid { gap: 2px 10px; }
	.nav__sub .mega__sys { align-items: center; gap: 10px; padding: 7px 8px; }
	.mega__ico { width: 32px; height: 32px; border-radius: 8px; }
	.mega__ico .ico { width: 18px; height: 18px; }
	.mega__desc { display: none; }
	.mega__links { margin: -3px 0 6px 50px; gap: 0; }
	.nav__sub .mega__links a { padding: 2px 0; font-size: 13px; }
	.mega__card { padding: 18px; gap: 8px; }
	.mega__card-t { margin: 0; font-size: 16px; }
	.mega__card-d { font-size: 13.5px; line-height: 1.5; }
	.mega__quick { display: grid; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
	.nav__sub .mega__quick a { gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fff; font: 600 14px var(--font-head); color: var(--navy); }
	.nav__sub .mega__quick a:hover { color: var(--orange-2); background: #fff; }
	.mega__quick .ico { width: 18px; height: 18px; color: var(--orange); }
	.mega__card .btn { margin-top: auto; padding: 11px 14px; font-size: 14px; }
	/* dim the page behind the open panel so the menu reads as a layer, not part of the page */
	.site-head:has(.nav__mega.is-open)::after,
	.site-head:has(.nav__mega:focus-within)::after { content: ""; position: fixed; inset: 75px 0 0; background: rgba(15, 43, 76, .3); pointer-events: none; z-index: -1; }
}