/* @doxallia/design — Marketing nav
 * Horizontal sticky top nav for marketing pages.
 * Zero JS — mobile menu via <details>/<summary> progressive enhancement.
 * Class prefix: .mk-nav*
 */

.mk-nav {
	position: sticky;
	top: 0;
	z-index: var(--z-header, 100);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.mk-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	max-width: var(--page-max-width, 1280px);
	margin: 0 auto;
	padding: 0 var(--s-6);
	height: 4rem;
}

.mk-nav__brand {
	font-weight: var(--fw-bold, 700);
	color: var(--color-brand);
	text-decoration: none;
	font-size: var(--text-lg);
	flex-shrink: 0;
	letter-spacing: -0.02em;
}

.mk-nav__brand:hover {
	color: var(--color-brand-dark);
}

/* Desktop links list */
.mk-nav__links {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mk-nav__links a {
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--text-sm);
	white-space: nowrap;
	transition: color 150ms ease;
}

.mk-nav__links a:hover {
	color: var(--color-brand);
}

/* Active page indicator — bottom border underline */
.mk-nav__links a[aria-current="page"] {
	color: var(--color-brand);
	border-bottom: 2px solid var(--color-brand);
	padding-bottom: 2px;
}

/* ── Dropdown submenu (Entreprise → À propos / Événements / Presse) ──────
   Uses native <details>/<summary> for zero-JS keyboard accessibility.
   Desktop: hover or click opens the submenu as an absolute-positioned card.
   Mobile: handled by the .mk-nav__mobile-menu grouping (no dropdown). */
.mk-nav__dropdown {
	position: relative;
}

.mk-nav__dropdown-details {
	display: inline-block;
}

.mk-nav__dropdown-summary {
	list-style: none;
	cursor: pointer;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	white-space: nowrap;
	transition: color 150ms ease;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.mk-nav__dropdown-summary::-webkit-details-marker {
	display: none;
}
.mk-nav__dropdown-summary::marker {
	content: "";
}

.mk-nav__dropdown-summary::after {
	content: "";
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 200ms ease;
}

.mk-nav__dropdown-details[open] .mk-nav__dropdown-summary::after {
	transform: rotate(180deg);
}

.mk-nav__dropdown-summary:hover,
.mk-nav__dropdown-summary[aria-current="page"] {
	color: var(--color-brand);
}

.mk-nav__dropdown-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	border: 1px solid rgba(20, 28, 82, 0.1);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(20, 28, 82, 0.08);
	padding: 0.5rem;
	min-width: 180px;
	list-style: none;
	margin: 0;
	z-index: 100;
}

.mk-nav__dropdown-menu li {
	margin: 0;
}

.mk-nav__dropdown-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-sm);
	border-radius: 4px;
	white-space: nowrap;
	transition:
		background 150ms ease,
		color 150ms ease;
}

.mk-nav__dropdown-menu a:hover,
.mk-nav__dropdown-menu a:focus-visible {
	background: rgba(20, 28, 82, 0.04);
	color: var(--color-brand);
	outline: none;
}

.mk-nav__dropdown-menu a[aria-current="page"] {
	color: var(--color-brand);
	font-weight: 600;
	background: rgba(20, 28, 82, 0.04);
}

/* Mobile — hide desktop dropdown; group label in mobile menu instead */
@media (max-width: 900px) {
	.mk-nav__dropdown {
		display: none;
	}
}

.mk-nav__mobile-group-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0.75rem 0 0.25rem;
	padding-left: 0.5rem;
}

.mk-nav__mobile-menu a.mk-nav__mobile-sublink {
	padding-left: 1.5rem;
}

/* Brand sub-label "by Doxallia" — solid muted tone to meet WCAG AA 4.5:1.
   Previously opacity: 0.55 blended brand navy to #7e82a0 (3.75:1 — fails AA). */
.mk-nav__brand-sub {
	font-size: 0.6em;
	font-weight: var(--fw-normal, 400);
	color: var(--color-text-muted, #636374);
	display: block;
	line-height: 1;
	letter-spacing: 0;
}

/* Portal links zone — separated from nav links by a visual divider */
.mk-nav__portals {
	display: flex;
	gap: var(--s-3);
	align-items: center;
	border-left: 1px solid var(--color-border);
	padding-left: var(--s-4);
	margin-left: var(--s-2);
	flex-shrink: 0;
}

.mk-nav__portal-link {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 150ms ease;
}

.mk-nav__portal-link:hover {
	color: var(--color-brand);
}

/* Desktop CTA buttons area */
.mk-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-shrink: 0;
}

/* Mobile: details/summary toggle — hidden on desktop */
.mk-nav__mobile-toggle {
	display: none;
	margin-left: auto;
}

.mk-nav__mobile-toggle > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--s-2);
	color: var(--color-brand);
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44×44 touch target — WCAG 2.5.5 */
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.mk-nav__mobile-toggle > summary::-webkit-details-marker {
	display: none;
}

/* Dropdown panel — hidden until <details> is open */
.mk-nav__mobile-menu {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: var(--s-4) var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	z-index: var(--z-header, 100);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mk-nav__mobile-menu a {
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-base);
	padding: var(--s-1) 0;
}

.mk-nav__mobile-menu a:hover,
.mk-nav__mobile-menu a[aria-current="page"] {
	color: var(--color-brand);
}

.mk-nav__mobile-menu .mk-nav__mobile-actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-top: var(--s-2);
	padding-top: var(--s-3);
	border-top: 1px solid var(--color-border);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	/* Compress gap between links on medium screens */
	.mk-nav__links {
		gap: var(--s-4);
	}
}

@media (max-width: 768px) {
	/* Hide flat desktop nav, show mobile toggle */
	.mk-nav__links,
	.mk-nav__portals,
	.mk-nav__actions {
		display: none;
	}

	/* Anchor for the absolutely-centered brand */
	.mk-nav__inner {
		position: relative;
		gap: 0;
	}

	/* Burger on the left — no auto margin */
	.mk-nav__mobile-toggle {
		display: block;
		order: -1;
		margin-left: 0;
		flex-shrink: 0;
	}

	/* Logo absolutely centered — independent of burger width */
	.mk-nav__brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-left: 0;
	}
}

/* ── Dark mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-nav__brand {
		color: var(--color-brand-text);
	}
	.mk-nav__brand:hover {
		color: #a5b4fc;
	}
	.mk-nav__links a:hover,
	.mk-nav__links a[aria-current="page"] {
		color: var(--color-brand-text);
	}
	.mk-nav__mobile-menu a:hover {
		color: var(--color-brand-text);
	}
	.mk-nav__portal-link:hover {
		color: var(--color-brand-text);
	}
}