/* ------------------------------------------------------------------
 * nav-mega.css — premium mega-menu + dense footer.
 * Anthropic warm cream surface, Fraunces eyebrow, terracotta hover.
 * Hard rule: tokens only, no hex.
 * ------------------------------------------------------------------ */

/* =============== Top-level nav (desktop) =============== */
.d13a-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.d13a-nav__item {
	position: relative;
}

.d13a-nav__trigger,
.d13a-nav__direct {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var(--color-text-secondary);
	background: transparent;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-out),
				background var(--duration-fast) var(--ease-out);
}

.d13a-nav__trigger:hover,
.d13a-nav__direct:hover,
.d13a-nav__item.is-open .d13a-nav__trigger,
.d13a-nav__trigger[aria-expanded="true"] {
	color: var(--color-text-primary);
	background: var(--color-surface-hover);
}

.d13a-nav__caret {
	font-size: 10px;
	margin-top: 1px;
	opacity: 0.55;
	transition: transform var(--duration-fast) var(--ease-out);
}

.d13a-nav__trigger[aria-expanded="true"] .d13a-nav__caret {
	transform: rotate(180deg);
	opacity: 1;
}

/* =============== Mega panel surface =============== */
.d13a-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-elevated);
	padding-block: clamp(28px, 3.5vw, 44px);
	z-index: 79;

	/* hidden by default */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	transition:
		opacity var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out),
		visibility var(--duration-base) step-end;
}

.d13a-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition:
		opacity var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out),
		visibility 0s;
}

.d13a-mega__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 1.05fr;
	gap: clamp(20px, 2.4vw, 36px);
	align-items: start;
}

.d13a-mega__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.d13a-mega__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-accent);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-border-subtle);
}

.d13a-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.d13a-mega__link {
	display: block;
	padding: 6px 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
	letter-spacing: -0.005em;
	transition: color var(--duration-fast) var(--ease-out),
				transform var(--duration-fast) var(--ease-out);
	text-decoration: none;
	border: 0;
}

.d13a-mega__link:hover,
.d13a-mega__link:focus-visible {
	color: var(--color-accent);
	transform: translateX(2px);
}

.d13a-mega__link--pillar {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 450;
	color: var(--color-accent);
	margin-top: 6px;
}

/* =============== Mega "feature" rail (col 5) =============== */
.d13a-mega__feature {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 100%;
}

.d13a-mega__feature-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-accent);
}

.d13a-mega__feature-title {
	font-family: var(--font-display);
	font-size: 19px;
	line-height: 1.25;
	color: var(--color-text-primary);
	margin: 0;
	letter-spacing: -0.005em;
}

.d13a-mega__feature-title em {
	font-style: italic;
	font-weight: 450;
}

.d13a-mega__feature-link {
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border-strong);
	padding-bottom: 4px;
	align-self: flex-start;
	transition: color var(--duration-fast) var(--ease-out),
				border-color var(--duration-fast) var(--ease-out);
}

.d13a-mega__feature-link:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

/* =============== Scrim under panels =============== */
.d13a-mega__scrim {
	position: fixed;
	inset: 0;
	background: oklch(0.3 0.02 45 / 0.18);
	z-index: 78;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-out);
}

.d13a-mega__scrim.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* =============== Mobile drawer — accordions =============== */
@media (max-width: 1080px) {
	.d13a-nav,
	.site-header__cta {
		display: none;
	}
	.site-header__burger {
		display: flex;
		margin-left: auto;
	}
}

.mobile-drawer {
	overflow-y: auto;
	padding: 18px 22px 32px;
}

.mobile-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-drawer__nav {
	margin-top: 16px;
	gap: 0;
}

.mobile-drawer__group {
	border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-drawer__group summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	font-family: var(--font-display);
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	cursor: pointer;
	list-style: none;
}

.mobile-drawer__group summary::-webkit-details-marker {
	display: none;
}

.mobile-drawer__group summary .caret {
	font-family: var(--font-mono);
	font-size: 20px;
	color: var(--color-text-muted);
	transition: transform var(--duration-fast) var(--ease-out);
}

.mobile-drawer__group[open] summary .caret {
	transform: rotate(45deg);
	color: var(--color-accent);
}

.mobile-drawer__panel {
	padding: 4px 0 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mobile-drawer__sub {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-drawer__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-accent);
	margin-bottom: 4px;
}

.mobile-drawer__sub a {
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	padding: 6px 0 !important;
	border-bottom: 0 !important;
	color: var(--color-text-primary);
}

.mobile-drawer__sub a:hover {
	color: var(--color-accent);
}

.mobile-drawer__direct {
	display: block;
	padding: 14px 0;
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-drawer__direct.mobile-drawer__phone {
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-size: 18px;
	letter-spacing: 0.02em;
}

.mobile-drawer__direct .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	margin-right: 6px;
	vertical-align: middle;
}

/* =============== Dense footer =============== */
.site-footer--dense .site-footer__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.85fr 1.2fr 1.4fr 0.9fr;
	gap: clamp(28px, 3vw, 56px);
	padding-block: clamp(48px, 6vw, 80px);
}

.site-footer--dense .site-footer__col h4 {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
	color: var(--color-accent);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border-subtle);
	margin-bottom: 14px;
}

.site-footer--dense .site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.site-footer--dense .site-footer__col ul li {
	margin: 0;
}

.site-footer--dense .site-footer__col ul a {
	display: block;
	padding: 4px 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	letter-spacing: -0.005em;
	transition: color var(--duration-fast) var(--ease-out),
				transform var(--duration-fast) var(--ease-out);
}

.site-footer--dense .site-footer__col ul a:hover {
	color: var(--color-accent);
	transform: translateX(2px);
}

.site-footer--dense .site-footer__col--zones ul,
.site-footer--dense .site-footer__col--nuisibles ul {
	max-height: none;
	columns: auto;
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 22px;
	border-top: 1px solid var(--color-border-subtle);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	flex-wrap: wrap;
}

.site-footer__bottom a {
	color: var(--color-text-muted);
	transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__bottom a:hover {
	color: var(--color-accent);
}

/* =============== Responsive =============== */
@media (max-width: 1180px) {
	.d13a-mega__inner {
		grid-template-columns: repeat(2, 1fr) 1fr;
		gap: 28px;
	}
	.d13a-mega__feature {
		grid-column: span 1;
	}
}

@media (max-width: 1080px) {
	.d13a-mega { display: none; }
	.d13a-mega__scrim { display: none; }
	.site-footer--dense .site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 720px) {
	.site-footer--dense .site-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.site-footer__bottom {
		flex-direction: column;
		gap: 6px;
	}
}