/* ==========================================================================
   Services mega-menu — a full-width sky dropdown under the header's "Services".
   A large accent heading on the left; the Services as category columns on the
   right, each linking out with its Sub-services listed beneath.
   ========================================================================== */

/* The panel spans the viewport, so the list item must not clip or constrain it. */
.nav-menu .menu-item.has-mega { position: static; }

/* Caret on the Services link — follows the link colour and flips when open. */
.nav-menu .has-mega > a { display: inline-flex; align-items: center; gap: 0.3em; }
.nav-menu .has-mega > a::before {
	content: ""; order: 1; flex: none; position: static;
	width: 0.6em; height: 0.42em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.75 6 6.25l4.75-4.5' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s ease;
}
.has-mega:hover > a::before,
.has-mega:focus-within > a::before,
.has-mega.is-open > a::before { transform: rotate(180deg); }

/* ---- Panel --------------------------------------------------------------- */
.mega {
	position: fixed; left: 0; right: 0; top: var(--header-h, 82px);
	z-index: 60;
	background: var(--tint-sky, #a9e2fb);
	box-shadow: 0 26px 44px rgba(2, 16, 52, 0.12);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	pointer-events: none;
}
/* The ribbon drawing sits behind the content, kept faint on the light panel.
   Static (no paint animation) so it's always visible in the dropdown. */
.mega .hero__ribbon { opacity: 0.22; }
.mega .hero__ribbon-facet { animation: none; }
.mega .hero__shine { display: none; }
.mega__inner { position: relative; z-index: 2; }
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
	opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}

/* Hover bridge across the header/nav dead band so the pointer keeps the menu open. */
.mega::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 100%;
	height: 24px;
}

/* ---- Inner layout: lead heading + category columns ----------------------- */
.mega__inner {
	max-width: var(--container, 1504px); margin-inline: auto;
	padding: clamp(2.25rem, 3.5vw, 4rem) var(--gutter, 24px);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
	gap: clamp(2rem, 4vw, 5rem); align-items: start;
}

.mega__lead-title {
	margin: 0; color: var(--c-ink, #1a1a1a);
	font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.75rem);
	line-height: 1.2; font-weight: var(--rf-w-light, 300);
}
.mega__lead-title em {
	font-family: var(--font-serif); font-style: italic; font-weight: 400;
	color: var(--c-primary, #0743f1);
}

/* Categories flow into balanced columns; each category stays whole. */
.mega__cats { columns: 3; column-gap: clamp(1.5rem, 3vw, 3rem); }
.mega__cat { break-inside: avoid; margin: 0 0 clamp(1.75rem, 2.5vw, 2.5rem); }
.mega__cat-title {
	display: block; text-decoration: none; margin-bottom: 0.9rem;
	color: var(--c-primary, #0743f1); font-weight: var(--fw-semibold, 600);
	font-size: 1.05rem; line-height: 1.28;
}
.mega__cat-title:hover { color: var(--c-primary-700, #0631b8); }
.mega__cat-arrow { display: inline-block; margin-left: 0.35rem; }

.mega__subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.mega__sub { color: var(--c-ink, #1a1a1a); font-size: 0.95rem; line-height: 1.3; }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.mega { transition: opacity 0.15s ease, visibility 0.15s; transform: none; }
	.has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.is-open > .mega { transform: none; }
}

/* ---- Mobile: fold the panel into the drawer as an indented list ---------- */
@media (max-width: 900px) {
	.primary-nav.is-open { max-height: calc(100vh - var(--header-h, 82px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }

	.nav-menu .menu-item.has-mega { position: relative; }
	.nav-menu .has-mega > a { display: flex; width: 100%; justify-content: space-between; align-items: center; }
	.nav-menu .has-mega > a::before { margin-left: 0.5em; }

	.mega {
		position: static; opacity: 1; visibility: visible; transform: none;
		pointer-events: auto; box-shadow: none; background: transparent;
		display: none;
	}
	.has-mega.is-open > .mega { display: block; }
	.mega__inner { display: block; padding: 0; }
	.mega__lead { display: none; }
	/* The ribbon + shine are a desktop flourish; in the drawer they only bleed a
	   faint diagonal behind the list, which read as a rendering glitch. */
	.mega .hero__ribbon,
	.mega .hero__shine { display: none; }
	.mega__cats { columns: auto; column-gap: 0; }

	/* Each service is a collapsible accordion row: the heading always shows, its
	   sub-services appear only when the category carries .is-open (toggled by
	   mega-menu.js — first tap expands, a second follows the link). This replaces
	   the old flat dump of every sub-service at once, which made the drawer an
	   endless scroll. */
	.mega__cat { margin: 0; break-inside: auto; border-top: 1px solid rgba(2, 30, 87, 0.14); }
	.mega__cat-title {
		display: flex; align-items: center; gap: 0.75rem;
		padding: 0.9rem 0.2rem; margin: 0; font-size: 1rem;
	}
	/* The inline "→" is a desktop go-to-page cue; on mobile a clear +/- toggle
	   marks the row as expandable, so it is obvious every service has sub-items
	   (a thin chevron alone did not read as "tap to open"). */
	.mega__cat-title .mega__cat-arrow { display: none; }
	/* Scoped under .mega__cat so it outranks the header nav-link underline
	   (.nav-menu a::after) — the category title IS a nav <a>, and that underline
	   rule was overriding the toggle's content + absolutely positioning it, so no
	   "+" ever showed. position/background are reset for the same reason. */
	.mega__cat > .mega__cat-title::after {
		content: "+"; position: static; flex: none; margin-left: auto; align-self: center;
		display: grid; place-items: center;
		width: 1.6rem; height: 1.6rem;
		font-size: 1.3rem; font-weight: 400; line-height: 1;
		color: var(--c-navy, #021e57); background: transparent;
		border: 1.5px solid rgba(2, 30, 87, 0.3); border-radius: 50%;
		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
	.mega__cat.is-open > .mega__cat-title::after {
		content: "\2212"; /* minus */
		background: var(--c-navy, #021e57); color: #fff; border-color: var(--c-navy, #021e57);
	}

	.mega__subs { display: none; padding: 0 0 0.75rem 0.9rem; gap: 0.1rem; }
	.mega__cat.is-open > .mega__subs { display: grid; }
	.mega__sub { padding: 0.5rem 0; }
}