/*
 * DFDC primary navigation — Menu Option A.
 *
 * Five top-level: The Hague · BareFABRIC · Solutions · Resources · Contact.
 * Mega-panel mounts under each item with sections, links with notes, and
 * a featured tile on the right. Mobile drops to a full-screen drawer.
 *
 * Renders via mu-plugins/dfdc-menu.php at wp_body_open.
 */

.dfdc-nav {
	position: sticky;
	top: 0;
	z-index: 9000;
	background: #0F1513;
	color: #E9F4F0;
	border-bottom: 1px solid rgba(45, 212, 163, 0.18);
	font-family: var(--dfdc-font-sans, "Inter Tight", system-ui, sans-serif);
}

.dfdc-nav__inner {
	width: var(--dfdc-container, min(1240px, calc(100% - 32px)));
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 70px;
}

/* ---- Brand ---- */
.dfdc-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #E9F4F0;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: -0.01em;
	flex-shrink: 0;
}
.dfdc-nav__brand svg {
	width: 32px;
	height: 32px;
	display: block;
}
.dfdc-nav__brand-text {
	font-size: 22px;
	letter-spacing: 0.02em;
}

/* ---- Primary list ---- */
.dfdc-nav__primary {
	flex: 1;
	display: flex;
	justify-content: center;
}
.dfdc-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}
.dfdc-nav__item {
	position: static;          /* mega-panel is positioned to .dfdc-nav, not the item */
}

/* The trigger link */
.dfdc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	color: rgba(233, 244, 240, 0.85);
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	border-bottom: 2px solid transparent;
	transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1),
				border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dfdc-nav__link:hover,
.dfdc-nav__item.is-open .dfdc-nav__link,
.dfdc-nav__item.is-active .dfdc-nav__link { color: #fff; }

.dfdc-nav__item.is-active .dfdc-nav__link { border-bottom-color: var(--dfdc-mint, #2DD4A3); }

.dfdc-nav__caret {
	font-size: 10px;
	color: rgba(233, 244, 240, 0.55);
	transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dfdc-nav__item.is-open .dfdc-nav__caret { transform: rotate(180deg); }

/* ---- Mega panel ---- */
.dfdc-nav__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #0F1513;
	border-top: 1px solid rgba(45, 212, 163, 0.18);
	border-bottom: 1px solid rgba(45, 212, 163, 0.32);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
				transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
				visibility 0s linear 200ms;
}
.dfdc-nav__item.is-open .dfdc-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s, 0s, 0s;
}

.dfdc-nav__panel-inner {
	width: var(--dfdc-container, min(1240px, calc(100% - 32px)));
	margin: 0 auto;
	padding: 36px 0 44px;
}

.dfdc-nav__panel-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(280px, 360px);
	gap: 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.18);
	border-left: 1px dashed rgba(255, 255, 255, 0.18);
}

/* When there's only one section + featured, drop to 2 cols */
.dfdc-nav__panel-cols:has(> .dfdc-nav__col:nth-child(2):last-of-type) {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.dfdc-nav__col {
	padding: 24px 28px;
	border-right: 1px dashed rgba(255, 255, 255, 0.18);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.dfdc-nav__col-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--dfdc-mint, #2DD4A3);
	margin-bottom: 16px;
	font-weight: 500;
}
.dfdc-nav__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.dfdc-nav__col-list a {
	text-decoration: none;
	color: inherit;
	display: grid;
	gap: 2px;
	padding: 4px 0;
	transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dfdc-nav__col-link {
	color: #E9F4F0;
	font-size: 15px;
	font-weight: 500;
}
.dfdc-nav__col-note {
	color: rgba(152, 172, 165, 0.85);
	font-size: 12px;
	letter-spacing: 0.01em;
}
.dfdc-nav__col-list a:hover .dfdc-nav__col-link { color: var(--dfdc-mint, #2DD4A3); }

/* ---- Featured tile (right column of the panel) ---- */
.dfdc-nav__featured {
	padding: 24px 28px;
	border-right: 1px dashed rgba(255, 255, 255, 0.18);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
	background: linear-gradient(135deg, rgba(45, 212, 163, 0.08) 0%, rgba(11, 19, 17, 0) 80%);
	display: grid;
	gap: 12px;
	align-content: start;
}
.dfdc-nav__featured-eyebrow {
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--dfdc-mint, #2DD4A3);
	font-weight: 500;
}
.dfdc-nav__featured-title {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	letter-spacing: -0.01em;
	max-width: 18ch;
}
.dfdc-nav__featured-note {
	margin: 0;
	color: rgba(233, 244, 240, 0.78);
	font-size: 13px;
	line-height: 1.5;
}
.dfdc-nav__featured-cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	background: var(--dfdc-mint, #2DD4A3);
	color: #0F1513;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	width: fit-content;
}
.dfdc-nav__featured-cta > span:first-child {
	padding: 12px 18px;
	display: inline-flex;
	align-items: center;
}
.dfdc-nav__featured-arrow {
	width: 44px;
	background: #0F1513;
	color: #E9F4F0;
	display: inline-grid;
	place-items: center;
}

/* ---- Mobile toggle (hamburger) ---- */
.dfdc-nav__toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	width: 44px;
	height: 44px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}
.dfdc-nav__toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: #E9F4F0;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
				opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dfdc-nav.is-drawer-open .dfdc-nav__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.dfdc-nav.is-drawer-open .dfdc-nav__toggle span:nth-child(2) { opacity: 0; }
.dfdc-nav.is-drawer-open .dfdc-nav__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---- Mobile drawer ---- */
.dfdc-nav__drawer {
	position: fixed;
	inset: 70px 0 0 0;
	background: #0F1513;
	z-index: 8990;
	overflow-y: auto;
	padding: 24px clamp(16px, 4vw, 32px);
	display: none;
}
.dfdc-nav__drawer[hidden] { display: none; }
.dfdc-nav.is-drawer-open .dfdc-nav__drawer { display: block; }
.dfdc-nav__drawer-section {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
	padding: 18px 0;
}
.dfdc-nav__drawer-section summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	color: #E9F4F0;
}
.dfdc-nav__drawer-section summary::-webkit-details-marker { display: none; }
.dfdc-nav__drawer-section summary a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}
.dfdc-nav__drawer-caret {
	color: var(--dfdc-mint, #2DD4A3);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dfdc-nav__drawer-section[open] .dfdc-nav__drawer-caret { transform: rotate(180deg); }
.dfdc-nav__drawer-body {
	padding-top: 16px;
	display: grid;
	gap: 18px;
}
.dfdc-nav__drawer-section-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--dfdc-mint, #2DD4A3);
	margin-bottom: 8px;
}
.dfdc-nav__drawer-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.dfdc-nav__drawer-body a {
	color: rgba(233, 244, 240, 0.85);
	text-decoration: none;
	font-size: 15px;
	display: block;
	padding: 6px 0;
}
.dfdc-nav__drawer-body a:hover { color: var(--dfdc-mint, #2DD4A3); }

/* ---- Responsive switch ---- */
@media (max-width: 960px) {
	.dfdc-nav__primary { display: none; }
	.dfdc-nav__toggle { display: inline-flex; margin-left: auto; }
}
@media (min-width: 961px) {
	.dfdc-nav__drawer, .dfdc-nav__toggle { display: none !important; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.dfdc-nav *,
	.dfdc-nav *::before,
	.dfdc-nav *::after { transition-duration: 0s !important; }
}