/**
 * Designed dropdown panels for the header navigation.
 *
 * Core's submenu container ships as a bare bordered box; this restyles it
 * as a floating panel — rounded, shadowed, padded, with rounded hover
 * states on items. Token-based throughout so child skins recolor it.
 * Loaded on the frontend AND the editor canvas (editor = frontend).
 */

/* The hero (position:relative with masked/transformed layers) paints over
   the header's absolutely-positioned submenu without this — the panel was
   opening invisibly underneath the section below. */
header.site-header {
	position: relative;
	z-index: 100;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--outline) !important;
	border-radius: 12px !important;
	box-shadow: var(--wp--preset--shadow--console);
	padding: 0.5rem !important;
	min-width: 220px !important;
	margin-top: 0.75rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 0.5rem 0.75rem !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
}

/**
 * Mega-menu convention (opt-in, pure CSS):
 *
 * 1. Add the `lp-mega-trigger` class to a top-level navigation-submenu item.
 * 2. Place a group with the `lp-mega-menu` class anywhere inside the header
 *    (the nav-mega-menu pattern is the ready-made panel).
 *
 * Desktop: the trigger's native dropdown is suppressed and the panel opens
 * under the full header instead — on hover, on click (the nav's own
 * aria-expanded toggle), or while anything in the panel has focus. Mobile
 * (< 782px, the overlay menu): the panel stays hidden and the trigger's
 * native submenu accordion keeps every link reachable.
 */
.lp-mega-menu {
	display: none;
}

@media (min-width: 782px) {
	.lp-mega-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		width: min(1080px, calc(100vw - 3rem));
		z-index: 110;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	/* Invisible strip bridging the gap so the pointer can travel from the
	   trigger into the panel without it closing. */
	.lp-mega-menu::before {
		content: "";
		position: absolute;
		top: -1.75rem;
		left: 0;
		right: 0;
		height: 1.75rem;
	}

	header.site-header:has(.lp-mega-trigger:hover) .lp-mega-menu,
	header.site-header:has(.lp-mega-trigger [aria-expanded="true"]) .lp-mega-menu,
	header.site-header:has(.lp-mega-menu:hover) .lp-mega-menu,
	header.site-header:has(.lp-mega-menu:focus-within) .lp-mega-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	/* The native dropdown box would open on top of the panel — suppress it. */
	header.site-header:has(.lp-mega-menu) .lp-mega-trigger .wp-block-navigation__submenu-container {
		display: none;
	}
}

/* Item links read as menu entries, not body links: no underline. */
.lp-mega-menu a {
	text-decoration: none;
}

/* A floating panel earns a real shadow: a tight contact line plus a deep
   soft drop. Overrides the markup's inline preset (hence !important). */
.lp-mega-menu {
	box-shadow: 0 2px 6px rgba(11, 36, 56, 0.06), 0 24px 56px -16px rgba(11, 36, 56, 0.3) !important;
}

/* Whole-item link: the title's <a> stretches over the lp-mega-item row, so
   chip, title, and description are one click target with a shared hover
   wash. The 0.5rem padding is part of the row rhythm (the pattern's item
   gap and intro-column padding are sized to match). */
.lp-mega-item {
	position: relative;
	border-radius: 12px;
	padding: 0.5rem;
	transition: background-color 0.15s ease;
}

.lp-mega-item a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.lp-mega-item:hover,
.lp-mega-item:has(a:focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-light) 50%, transparent);
}

.lp-mega-item:hover a,
.lp-mega-item:has(a:focus-visible) a {
	color: var(--wp--preset--color--primary);
}

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

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

/* Panel columns center vertically — the link grid gets equal breathing
   room above and below regardless of which column runs taller. */
.lp-mega-menu .wp-block-columns {
	align-items: center;
}

.lp-mega-menu .wp-block-column {
	align-self: center;
}