/* ============================================================
 * Defentect.com mobile hamburger nav
 *
 * Loaded on the .com IR site (NOT on /ai pages — those have their
 * own dark-theme hamburger). Light-theme to match the rest of .com.
 *
 * Activates below 900px. Above 900px, the toggle is hidden and the
 * nav-links render as the original horizontal row.
 * ============================================================ */

/* Toggle button — hidden on desktop, visible on mobile */
.nav-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 8px;
	margin-left: auto;
}
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--ink);
	transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: flex; }

	/* CLOSED STATE — hide the nav-links container entirely on mobile,
	 * leaving only the hamburger toggle. Matches the .ai pattern.
	 * (.nav-cta is inside .nav-links so this hides it too.) */
	body nav.top .nav-links:not(.open) {
		display: none !important;
	}

	/* OPEN STATE — full-viewport overlay, light theme.
	 * High specificity + !important so this beats the existing
	 * `.nav-links a:not(.nav-cta) { display: none }` rule and any
	 * other late-cascade overrides. */
	body nav.top .nav-links.open,
	body .nav-links.open {
		display: flex !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: #ffffff !important;
		z-index: 9998 !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 32px !important;
		padding: 80px 24px 24px !important;
		margin: 0 !important;
	}
	body nav.top .nav-links.open a,
	body .nav-links.open a {
		display: block !important;
		color: var(--ink) !important;
		font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
		font-size: 22px !important;
		font-weight: 400 !important;
		letter-spacing: -0.01em !important;
		text-decoration: none !important;
		padding: 4px 0 !important;
	}
	body nav.top .nav-links.open a.nav-cta,
	body .nav-links.open a.nav-cta {
		margin-top: 16px;
		padding: 12px 24px !important;
		border: 1px solid var(--blue-deep) !important;
		color: var(--blue-deep) !important;
		font-size: 14px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
	}

	/* When open, pin the toggle to the top-right so the X is
	 * positioned over the overlay and stays clickable. */
	body nav.top .nav-toggle.open,
	body .nav-toggle.open {
		position: fixed !important;
		top: 22px !important;
		right: 24px !important;
		z-index: 9999 !important;
	}
	body .nav-toggle.open span {
		background: var(--ink) !important;
	}
}