/**
 * Header mega menu — the header BAR itself grows.
 *
 * The mega is a second row inside .iv-header__bar, so opening it grows the real header (one glass
 * element expanding) rather than a separate panel sliding out beneath it — so there is no seam and
 * no corner tricks. The row height-reveals (grid-template-rows 0fr→1fr, easeOutQuad) and the
 * columns fade in once it has grown ~80%. A full-viewport blur scrim dims/blurs the hero. Opens on
 * hover and keyboard focus via :has(); mega-menu.js adds a hover-intent grace (.iv-is-open), the
 * .iv-mega-open fallback class on the header, aria sync, and Escape-to-close. Hidden at the mobile
 * breakpoint, where the hamburger menu takes over.
 *
 * "Open" is any of: the trigger item hovered/focused, the grown mega row hovered (so moving into it
 * keeps it open), the JS grace class .iv-is-open, or the JS fallback class .iv-header.iv-mega-open.
 */

.iv-menu-item-has-mega {
	position: relative;
}

/* Caret on the trigger. */
.iv-menu-item-has-mega > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.iv-menu-item-has-mega:hover > a::after,
.iv-menu-item-has-mega:focus-within > a::after,
.iv-menu-item-has-mega.iv-is-open > a::after,
.iv-header:has(.iv-header__mega:hover) .iv-menu-item-has-mega > a::after,
.iv-header.iv-mega-open .iv-menu-item-has-mega > a::after {
	transform: translateY(1px) rotate(-135deg);
}

/* -------------------------------------------------------------------------
 * Blur scrim over the hero/page behind the header.
 * ---------------------------------------------------------------------- */
.iv-header__scrim {
	position: fixed;
	inset: 0;
	z-index: -1; /* behind the bar, above the page (inside the .iv-header stacking context) */
	background: rgba(17, 24, 39, 0.06);
	-webkit-backdrop-filter: blur(7px) saturate(105%);
	backdrop-filter: blur(7px) saturate(105%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.iv-header:has(.iv-menu-item-has-mega:hover) .iv-header__scrim,
.iv-header:has(.iv-menu-item-has-mega:focus-within) .iv-header__scrim,
.iv-header:has(.iv-menu-item-has-mega.iv-is-open) .iv-header__scrim,
.iv-header:has(.iv-header__mega:hover) .iv-header__scrim,
.iv-header.iv-mega-open .iv-header__scrim {
	opacity: 1;
	visibility: visible;
	transition: opacity 360ms ease, visibility 0s;
}

/* -------------------------------------------------------------------------
 * Mega row — the growing second row of the bar. Height-reveal via grid rows;
 * the clip child hides the overflow while it grows.
 * ---------------------------------------------------------------------- */
.iv-header__mega {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.iv-header:has(.iv-menu-item-has-mega:hover) .iv-header__mega,
.iv-header:has(.iv-menu-item-has-mega:focus-within) .iv-header__mega,
.iv-header:has(.iv-menu-item-has-mega.iv-is-open) .iv-header__mega,
.iv-header:has(.iv-header__mega:hover) .iv-header__mega,
.iv-header.iv-mega-open .iv-header__mega {
	grid-template-rows: 1fr;
}

.iv-header__mega-clip {
	overflow: hidden;
	min-height: 0;
}

/* Per-source panel: plain content now — the bar provides the glass surface. */
.iv-mega {
	padding: 44px 52px 50px;
}

.iv-mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 48px;

	/* Columns start hidden and fade in after the row has grown ~80% (via the delay below). */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 280ms ease, transform 280ms ease;
}

.iv-header:has(.iv-menu-item-has-mega:hover) .iv-mega__inner,
.iv-header:has(.iv-menu-item-has-mega:focus-within) .iv-mega__inner,
.iv-header:has(.iv-menu-item-has-mega.iv-is-open) .iv-mega__inner,
.iv-header:has(.iv-header__mega:hover) .iv-mega__inner,
.iv-header.iv-mega-open .iv-mega__inner {
	opacity: 1;
	transform: none;
	transition: opacity 260ms ease 180ms, transform 260ms ease 180ms;
}

.iv-mega__column {
	min-width: 0;
	padding-top: 26px;
	border-top: 1px solid rgba(17, 24, 39, 0.1);
}

/* Eyebrow header: dot + uppercase muted label. */
.iv-mega__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
}

.iv-mega__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--iv-brand, #14b89a);
}

.iv-mega__eyebrow-label {
	color: rgba(17, 24, 39, 0.5);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 200ms ease;
}

a.iv-mega__eyebrow-label:hover,
a.iv-mega__eyebrow-label:focus-visible {
	color: var(--iv-brand, #14b89a);
}

.iv-mega__desc {
	margin: -14px 0 20px;
	color: rgba(17, 24, 39, 0.48);
	font-size: 13px;
	line-height: 1.55;
}

.iv-mega__list {
	display: grid;
	gap: 26px;
}

/* Service item: title + one-line description, no card background. */
.iv-mega__item {
	display: block;
	text-decoration: none;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.iv-mega__item:hover,
.iv-mega__item:focus-visible {
	transform: translateX(3px);
	outline: none;
}

.iv-mega__item-title {
	display: block;
	color: var(--iv-text, #111827);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 200ms ease;
}

.iv-mega__item:hover .iv-mega__item-title,
.iv-mega__item:focus-visible .iv-mega__item-title {
	color: var(--iv-brand, #14b89a);
}

.iv-mega__item:focus-visible .iv-mega__item-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.iv-mega__item-desc {
	display: block;
	margin-top: 4px;
	color: rgba(17, 24, 39, 0.48);
	font-size: 13px;
	line-height: 1.5;
}

/* Sub-group (child category) inside a column. */
.iv-mega__subgroup {
	display: grid;
	gap: 22px;
}

.iv-mega__subtitle {
	color: rgba(17, 24, 39, 0.5);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 200ms ease;
}

a.iv-mega__subtitle:hover,
a.iv-mega__subtitle:focus-visible {
	color: var(--iv-brand, #14b89a);
}

.iv-mega__view-all {
	display: inline-block;
	color: var(--iv-brand, #14b89a);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 200ms ease;
}

.iv-mega__view-all span {
	display: inline-block;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.iv-mega__view-all:hover span,
.iv-mega__view-all:focus-visible span {
	transform: translateX(4px);
}

/* The desktop mega row does not apply on mobile; the hamburger accordion is used instead. */
@media (max-width: 1024px) {
	.iv-header__mega,
	.iv-header__scrim {
		display: none;
	}

	.iv-menu-item-has-mega > a::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Mobile mega accordion (inside the mobile panel, <=1024px)
 * ---------------------------------------------------------------------- */

.iv-mmega {
	margin: 8px 0 2px;
}

.iv-mmega__group {
	display: block;
}

/* Category / section toggle row. The !important resets defeat aggressive global <button> styling
   from site plugins (ElementsKit / Essential Addons), which otherwise paints these as filled pills. */
.iv-mmega__toggle {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 16px 2px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--iv-text, #111827) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: left;
	cursor: pointer;
}

/* Sub-section (child category) toggle: quieter, uppercase eyebrow. */
.iv-mmega__sec > .iv-mmega__toggle {
	padding: 12px 2px;
	border-bottom-color: rgba(17, 24, 39, 0.05) !important;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(17, 24, 39, 0.5);
}

.iv-mmega__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(17, 24, 39, 0.4);
	border-bottom: 2px solid rgba(17, 24, 39, 0.4);
	transform: rotate(45deg);
	transition: transform 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.iv-mmega__toggle[aria-expanded="true"] > .iv-mmega__chevron {
	transform: rotate(-135deg);
}

.iv-mmega__panel {
	overflow: hidden;
	transition: max-height 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.iv-mmega__panel-inner {
	padding: 10px 2px 18px;
}

.iv-mmega__sec .iv-mmega__panel-inner {
	padding-left: 4px;
}

.iv-mmega__desc {
	margin: 2px 0 14px;
	color: rgba(17, 24, 39, 0.55);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Service list — no bullets; title over a muted one-line description. */
.iv-mmega__services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.iv-mmega__service-link {
	display: block;
	padding: 11px 14px;
	border-radius: 14px;
	text-decoration: none;
	transition: background 160ms ease;
}

.iv-mmega__service-link:hover,
.iv-mmega__service-link:active,
.iv-mmega__service-link:focus-visible {
	background: rgba(20, 184, 154, 0.08);
	outline: none;
}

.iv-mmega__service-title {
	display: block;
	color: var(--iv-text, #111827);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.iv-mmega__service-desc {
	display: block;
	margin-top: 4px;
	color: rgba(17, 24, 39, 0.5);
	font-size: 13px;
	line-height: 1.55;
}

/* Scoped with .iv-mmega so it beats `.iv-header__mobile-nav a` (0,1,1), which the accordion sits inside. */
.iv-mmega .iv-mmega__view-all {
	display: inline-block;
	margin: 10px 0 2px 14px;
	color: var(--iv-brand, #14b89a);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.iv-mmega__panel,
	.iv-mmega__chevron {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iv-header__mega,
	.iv-mega__inner,
	.iv-header__scrim,
	.iv-menu-item-has-mega > a::after,
	.iv-mega__item,
	.iv-mega__item-title,
	.iv-mega__view-all span {
		transition: none;
	}
}