/* Drop-down items in the main menu (e.g. About > About Emissa, Strategic plan). */

.nav__item.has-sub {
	position: relative;
}

.nav__parent {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	border: 0;
	background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 3px;
	color: var(--ink);
	font: inherit;
	font-size: 0.98rem;
	font-weight: 400;
	line-height: inherit;
	cursor: pointer;
	transition: background-size 0.3s var(--ease), color 0.2s;
}

[dir="rtl"] .nav__parent {
	background-position: 100% 100%;
}

.nav__parent:hover,
.has-sub.is-open .nav__parent {
	color: var(--deep);
	background-size: 100% 3px;
}

.nav__parent.is-current {
	font-weight: 600;
	color: var(--deep);
	background-size: 100% 3px;
}

.nav__chev {
	transition: transform 0.25s var(--ease);
}

.has-sub.is-open .nav__chev {
	transform: rotate(180deg);
}

.nav .nav__sub {
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav .nav__sub a {
	display: block;
	background: none;
	white-space: nowrap;
}

/* ---------- Desktop: a small card under the item ---------- */

@media (min-width: 1121px) {
	.nav .nav__sub {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: -18px;
		z-index: 60;
		min-width: 250px;
		padding: 8px;
		margin-top: 10px;
		border-radius: var(--radius-m);
		background: #fff;
		box-shadow: 0 18px 44px -14px rgba(15, 59, 67, 0.3), 0 0 0 1px var(--line);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0s linear 0.2s;
	}

	/* Invisible bridge so the pointer can travel from the item to the card. */
	.nav .nav__sub::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 100%;
		height: 14px;
	}

	.has-sub:hover .nav__sub,
	.has-sub:focus-within .nav__sub,
	.has-sub.is-open .nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.has-sub:hover .nav__chev {
		transform: rotate(180deg);
	}

	.nav .nav__sub a {
		padding: 11px 14px;
		border-radius: var(--radius-s);
		color: var(--ink);
		transition: background-color 0.2s, color 0.2s;
	}

	.nav .nav__sub a:hover,
	.nav .nav__sub a:focus-visible {
		background: var(--mist);
		color: var(--deep);
	}

	.nav .nav__sub a[aria-current="page"] {
		font-weight: 600;
		color: var(--tide);
		background: var(--mist);
	}
}

/* ---------- Mobile menu: the items open inline under the parent ---------- */

@media (max-width: 1120px) {
	.nav__parent {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding-block: 16px;
		font-size: 1.25rem;
		background: none;
		text-align: start;
	}

	.nav__parent:hover,
	.has-sub.is-open .nav__parent,
	.nav__parent.is-current {
		background: none;
	}

	.nav .nav__sub {
		display: none;
		padding: 0 0 14px;
		padding-inline-start: 16px;
		border-inline-start: 3px solid var(--gold);
		margin-bottom: 16px;
	}

	.has-sub.is-open .nav__sub {
		display: block;
	}

	.nav .nav__sub li {
		border-bottom: 0;
	}

	.nav .nav__sub a {
		padding-block: 10px;
		font-size: 1.1rem;
		white-space: normal;
		color: var(--ink-soft);
	}

	.nav .nav__sub a[aria-current="page"] {
		color: var(--deep);
		font-weight: 600;
	}
}