/*
 * Faiha Services mega menu (desktop): one compact panel of the ten primary
 * services, two columns by five rows, with "View All Services" below.
 *
 * The hierarchy lives in WordPress (Appearance > Menus, Primary Menu):
 *
 *   li.faiha-mega                 Services (menu item CSS class)
 *     ul.sub-menu                 -> the mega panel
 *       li.faiha-mega__item       -> primary service row (link to its page)
 *       li.faiha-mega__footer     -> "View All Services"
 *
 * For the desktop menu, functions.php (faiha_child_mega_menu_objects)
 * leaves the child services out of the markup, so a row is a single link
 * (icon, title, chevron) with no nested panel and no selected state. The
 * grid fills column by column: services 1-5 on the left, 6-10 on the
 * right. The mobile drawer (#mobile-site-navigation) renders the full
 * hierarchy as Kadence's native accordion.
 *
 * With mega-menu.js (.faiha-mega--enhanced) the panel is shown only while
 * the Services item carries .faiha-mega--open (hover intent, close delay,
 * keyboard, Escape). Closed: opacity 0, visibility hidden, pointer-events
 * none, so nothing else in the header can reach it. Without JavaScript,
 * :hover / :focus-within open it.
 *
 * Selectors are scoped to #site-navigation so they outrank Kadence's
 * dropdown rules without !important.
 */

#site-navigation {
	/* Light panel in light mode, deep navy in dark (follows the header). */
	--mega-bg: var(--faiha-surface);
	--mega-text: var(--faiha-navy-900);
	--mega-muted: var(--faiha-text-secondary);
	--mega-hover-bg: var(--faiha-surface-alt);
	--mega-accent: var(--faiha-color-brand-strong);
	--mega-icon-bg: color-mix(in srgb, var(--faiha-color-brand-strong) 8%, transparent);
	--mega-line: color-mix(in srgb, var(--faiha-navy-900) 8%, transparent);
	--mega-shadow: var(--faiha-shadow-float-strong);
	--mega-row-shadow: 0 6px 16px color-mix(in srgb, var(--faiha-navy-900) 8%, transparent);
	--faiha-mega-width: 53.75rem; /* 860px, within the approved 820-900px range */
	--faiha-mega-padding: 1.25rem 1.5rem;
	--faiha-mega-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] #site-navigation {
	--mega-bg: var(--faiha-navy-800);
	--mega-text: var(--faiha-text-on-dark);
	--mega-muted: var(--faiha-text-on-dark-secondary);
	--mega-hover-bg: var(--faiha-navy-600);
	--mega-accent: color-mix(in srgb, var(--faiha-color-brand) 80%, #fff);
	--mega-icon-bg: color-mix(in srgb, var(--faiha-color-brand) 16%, transparent);
	--mega-line: color-mix(in srgb, var(--faiha-text-on-dark) 10%, transparent);
	--mega-shadow: 0 20px 48px color-mix(in srgb, #000 45%, transparent);
	--mega-row-shadow: none;
}

/*
 * Panel. The Services item is made static so the panel anchors to Kadence's
 * full-width header row wrapper instead: it sits under the header and is
 * centred on the viewport, so it can never overflow either edge.
 */

#site-navigation .faiha-mega {
	position: static;
}

#site-navigation .faiha-mega > .sub-menu {
	top: calc(100% + 0.75rem); /* just below the floating header container */
	left: 50%;
	right: auto;
	/* Label row, five service rows, footer row; services flow down each column. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto repeat(5, auto) auto;
	grid-auto-flow: column;
	gap: 0.25rem 1rem;
	width: var(--faiha-mega-width);
	max-width: min(92vw, calc(100vw - 2rem));
	padding: var(--faiha-mega-padding);
	box-sizing: border-box;
	border: 1px solid var(--mega-line);
	border-radius: 1.25rem; /* 20px */
	background-color: var(--mega-bg);
	box-shadow: var(--mega-shadow);
	transform: translateX(-50%);
}

/* Top label (decorative; the Services link names the menu). */
#site-navigation .faiha-mega > .sub-menu::before {
	content: "Our Services";
	grid-row: 1;
	grid-column: 1 / -1;
	margin: 0 0 0.375rem 0.5rem;
	color: var(--mega-accent);
	font-family: var(--faiha-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * Open / closed (with mega-menu.js). The panel stays in the layout so it
 * can fade; when closed it is invisible and ignores the pointer, so hovering
 * any other header item can never reach or reopen it.
 */
#site-navigation .faiha-mega.faiha-mega--enhanced > .sub-menu {
	display: grid;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Closing is instant, so the panel never lingers under another item; only opening fades in. */
	transition: none;
}

#site-navigation .faiha-mega.faiha-mega--enhanced.faiha-mega--open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 120ms var(--faiha-ease-standard),
		visibility 0s;
}

/* No JavaScript: Kadence's own hover/focus opening, laid out as the grid. */
#site-navigation .faiha-mega:not(.faiha-mega--enhanced):is(:hover, :focus-within) > .sub-menu {
	display: grid;
}

/*
 * Hover bridge across the gap between the Services link and the floating
 * panel. It hangs under the Services link only (never under Home, About,
 * etc.) and exists only while the Services link is hovered or the panel is
 * open, so a pointer heading down from Services never leaves the item.
 */
#site-navigation .faiha-mega > a {
	position: relative;
}

#site-navigation .faiha-mega.faiha-mega--enhanced.faiha-mega--open > a::after,
#site-navigation .faiha-mega.faiha-mega--enhanced > a:hover::after,
#site-navigation .faiha-mega:not(.faiha-mega--enhanced):hover > a::after {
	content: "";
	position: absolute;
	top: 100%;
	right: -0.75rem;
	left: -0.75rem;
	height: 2.75rem; /* link bottom to panel top, header at full height */
}

/* Service rows: icon, title + sub-service count, chevron; the whole row is the link. */

#site-navigation .faiha-mega > .sub-menu > li {
	position: static;
	width: auto;
	border-bottom: 0;
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: auto;
	min-height: 3.5rem; /* 56px */
	padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 0.875rem;
	color: var(--mega-text);
	text-decoration: none;
	transition:
		background-color var(--faiha-duration-fast) var(--faiha-ease-standard),
		border-color var(--faiha-duration-fast) var(--faiha-ease-standard),
		box-shadow var(--faiha-duration-fast) var(--faiha-ease-standard);
}

/* Icon container with the category's Faiha icon (mapped by URL in icons.css). */
#site-navigation .faiha-mega .faiha-mega__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.875rem; /* 46px */
	height: 2.875rem;
	border-radius: 0.75rem;
	background-color: var(--mega-icon-bg);
	transition: background-color var(--faiha-duration-fast) var(--faiha-ease-standard);
}

#site-navigation .faiha-mega .faiha-mega__icon::before {
	content: "";
	width: 1.375rem;
	height: 1.375rem;
	background-color: var(--mega-accent);
	-webkit-mask: var(--faiha-icon) center / contain no-repeat;
	mask: var(--faiha-icon) center / contain no-repeat;
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-left: auto;
	background-color: var(--mega-muted);
	opacity: 0.6;
	-webkit-mask: var(--faiha-mega-chevron) center / contain no-repeat;
	mask: var(--faiha-mega-chevron) center / contain no-repeat;
	transition:
		opacity var(--faiha-duration-fast) var(--faiha-ease-standard),
		transform var(--faiha-duration-fast) var(--faiha-ease-standard);
}

#site-navigation .faiha-mega .faiha-mega__name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--mega-text);
	font-family: var(--faiha-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Hover / focus: tinted, slightly lifted surface and a red accent. */
#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:hover,
#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:focus-visible {
	border-color: var(--mega-line);
	background-color: var(--mega-hover-bg);
	box-shadow: var(--mega-row-shadow);
	color: var(--mega-text);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:is(:hover, :focus-visible) .faiha-mega__name {
	color: var(--mega-accent);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:is(:hover, :focus-visible) .faiha-mega__icon {
	background-color: var(--faiha-color-brand-strong);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:is(:hover, :focus-visible) .faiha-mega__icon::before {
	background-color: var(--faiha-text-on-dark);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__item > a:is(:hover, :focus-visible)::after {
	background-color: var(--mega-accent);
	opacity: 1;
	transform: translateX(2px);
}

#site-navigation .faiha-mega > .sub-menu > li > a:focus-visible {
	outline: 2px solid var(--mega-accent);
	outline-offset: 2px;
}

/* Footer: View All Services */

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer {
	grid-row: 7;
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--mega-line);
	text-align: center;
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	min-height: 2.75rem;
	padding: 0.5rem 1.5rem;
	border-radius: var(--faiha-radius-button);
	background-color: var(--faiha-color-brand-strong);
	color: var(--faiha-text-on-dark);
	font-family: var(--faiha-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--faiha-weight-button);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer > a::after {
	content: "\2192"; /* → */
	transition: transform var(--faiha-duration-fast) var(--faiha-ease-standard);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer > a:hover,
#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer > a:focus-visible {
	background-color: color-mix(in srgb, var(--faiha-color-brand-strong) 86%, #000);
	color: var(--faiha-text-on-dark);
}

#site-navigation .faiha-mega > .sub-menu > li.faiha-mega__footer > a:hover::after {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	#site-navigation .faiha-mega.faiha-mega--enhanced > .sub-menu,
	#site-navigation .faiha-mega.faiha-mega--enhanced.faiha-mega--open > .sub-menu,
	#site-navigation .faiha-mega > .sub-menu > li > a,
	#site-navigation .faiha-mega > .sub-menu > li > a::after,
	#site-navigation .faiha-mega .faiha-mega__icon {
		transition: none;
	}

	#site-navigation .faiha-mega > .sub-menu > li > a:is(:hover, :focus-visible)::after {
		transform: none;
	}
}

/* Mobile drawer: Kadence's native nested accordion, comfortable targets. */

#mobile-site-navigation .faiha-mega .sub-menu a {
	min-height: 2.75rem;
	box-sizing: border-box;
}

#mobile-site-navigation .faiha-mega .drawer-sub-toggle {
	min-width: 2.75rem;
	min-height: 2.75rem;
}

#mobile-site-navigation .faiha-mega__footer > a {
	font-weight: var(--faiha-weight-button);
}