@charset "UTF-8";
/**
 * IMPERVORA - Premium mega menu (Phase 1, module 1).
 *
 * Scoped entirely to .impervora-mega* and the .impervora-mega-parent <li>.
 * Nothing here touches Astra's header, nav, or any other menu item.
 *
 * The panel markup carries the [hidden] attribute so that if this stylesheet
 * ever fails to load the panel stays collapsed and the header renders exactly
 * as it did before the module. The desktop rules below deliberately override
 * [hidden] to animate it instead. Closed state uses visibility:hidden, which
 * also removes the panel from the accessibility tree.
 *
 * Tokens come from impervora.css :root. Per the brand typography standard the
 * accents use the systemic gold --imp-gold, never the brand gold.
 */

.impervora-mega[hidden] {
	display: none;
}

@media (min-width: 922px) {

	.impervora-mega-parent {
		position: relative;
	}

	/* Override [hidden] on desktop so the panel can animate. */
	.impervora-mega-parent .impervora-mega[hidden] {
		display: block;
		position: absolute;
		z-index: 999;
		top: 100%;
		left: 50%;
		width: min(880px, calc(100vw - 48px));
		padding-top: 10px;
		transform: translateX(-50%) translateY(6px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--imp-dur, 0.5s) var(--imp-ease, ease),
			transform var(--imp-dur, 0.5s) var(--imp-ease, ease),
			visibility 0s linear var(--imp-dur, 0.5s);
	}

	.impervora-mega-parent:hover .impervora-mega[hidden],
	.impervora-mega-parent:focus-within .impervora-mega[hidden],
	.impervora-mega-parent .impervora-mega.is-open[hidden] {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s;
	}

	.impervora-mega__inner {
		display: grid;
		grid-template-columns: 1fr 220px;
		gap: 28px;
		padding: 26px 28px;
		background: var(--imp-white, #fff);
		border: 1px solid var(--imp-warm-grey, #d8d5d0);
		border-radius: var(--imp-radius, 6px);
		box-shadow: var(--imp-shadow-lift, 0 18px 44px rgba(14, 14, 14, 0.2));
	}

	.impervora-mega__grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 18px 14px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.impervora-mega__item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.impervora-mega__link {
		display: flex;
		flex-direction: column;
		gap: 8px;
		text-decoration: none;
		color: var(--imp-ink, #0e0e0e);
	}

	.impervora-mega__media {
		display: block;
		overflow: hidden;
		aspect-ratio: 1 / 1;
		background: var(--imp-warm-white, #f4f2ef);
		border-radius: var(--imp-radius-sm, 3px);
	}

	.impervora-mega__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s var(--imp-ease, ease);
	}

	.impervora-mega__link:hover .impervora-mega__img,
	.impervora-mega__link:focus-visible .impervora-mega__img {
		transform: scale(1.06);
	}

	/* Nav labels stay link-styled - never gilded (brand standard). */
	.impervora-mega__label {
		display: block;
		font-size: 0.82rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		line-height: 1.3;
	}

	.impervora-mega__link:hover .impervora-mega__label,
	.impervora-mega__link:focus-visible .impervora-mega__label {
		color: var(--imp-gold-deep, #b08f4e);
	}

	.impervora-mega__link:focus-visible {
		outline: 2px solid var(--imp-gold, #c6a667);
		outline-offset: 3px;
	}

	.impervora-mega__aside {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		padding-left: 28px;
		border-left: 1px solid var(--imp-warm-grey, #d8d5d0);
	}

	.impervora-mega__eyebrow {
		margin: 0;
		font-size: 0.68rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--imp-gold, #c6a667);
	}

	.impervora-mega__cta {
		align-self: flex-start;
		padding: 10px 18px;
		font-size: 0.76rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--imp-white, #fff);
		background: var(--imp-ink, #0e0e0e);
		border-radius: var(--imp-radius-sm, 3px);
		transition: background 0.3s var(--imp-ease, ease);
	}

	.impervora-mega__cta:hover,
	.impervora-mega__cta:focus-visible {
		background: var(--imp-gold-deep, #b08f4e);
		color: var(--imp-white, #fff);
	}
}

@media (prefers-reduced-motion: reduce) {

	.impervora-mega-parent .impervora-mega[hidden],
	.impervora-mega__img {
		transition: none;
	}
}