/**
 * Nav dropdown: .mk-nav-dropdown (templates/components/nav-dropdown.php).
 * Tokens: theme.json `custom.navDropdown`.
 *
 * Trigger: the nav link look (nav-links.css) + chevron 24, gap 4; the chevron
 * turns while open. List: padding 16 / 0 on the page background, radius 8,
 * min width 200, items
 * padding 5 / 16, icon box 20 × 28 + label-medium; the current page link is
 * a full-width row in `color.navDropdown.current*`. In a row menu the list
 * floats below the item, `--mk-nav-dropdown-offset` lower (the header puts it
 * on its bottom edge); in a column menu (burger drawer) it opens inline.
 */

.mk-nav-dropdown {
	position: relative;
}

.mk-nav-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--nav-dropdown--trigger-gap);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mk-nav-dropdown__trigger.is-current {
	color: var(--wp--custom--color--text--accent);
}

.mk-nav-dropdown__trigger .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--nav-dropdown--chevron-size);
	block-size: var(--wp--custom--nav-dropdown--chevron-size);
	transition-property: transform;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-nav-dropdown__trigger[aria-expanded="true"] .mk-icon {
	transform: rotate(180deg);
}

.mk-nav-dropdown__list {
	--mk-offset: var(
		--mk-nav-dropdown-offset,
		var(--wp--custom--nav-dropdown--offset)
	);

	position: absolute;
	inset-block-start: calc(100% + var(--mk-offset));
	inset-inline-start: 0;
	z-index: var(--wp--custom--nav-dropdown--z-index);
	box-sizing: border-box;
	min-inline-size: var(--wp--custom--nav-dropdown--min-width);
	margin: 0;
	padding-block: var(--wp--custom--nav-dropdown--padding-block);
	padding-inline: 0;
	list-style: none;
	border-radius: var(--wp--custom--nav-dropdown--radius);
	background-color: var(--wp--custom--color--surface--default);
	box-shadow: var(--wp--custom--shadow--dropdown);
}

.mk-nav-dropdown__list[hidden] {
	display: none;
}

.mk-nav-links--column .mk-nav-dropdown__list {
	position: static;
	box-shadow: none;
}

.mk-nav-dropdown__link {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--nav-dropdown--item-gap);
	padding-block: var(--wp--custom--nav-dropdown--item-padding-block);
	padding-inline: var(--wp--custom--nav-dropdown--item-padding-inline);
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
	text-decoration: none;
	white-space: nowrap;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-nav-dropdown__link[aria-current="page"] {
	background-color: var(
		--wp--custom--color--nav-dropdown--current-background
	);
	color: var(--wp--custom--color--nav-dropdown--current-text);
}

@media (hover: hover) {
	.mk-nav-dropdown__link:hover {
		color: var(--wp--custom--color--text--accent);
	}
}

.mk-nav-dropdown__link:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(var(--wp--custom--focus--ring-width) * -1);
}

.mk-nav-dropdown__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: var(--wp--custom--nav-dropdown--icon-width);
	block-size: var(--wp--custom--nav-dropdown--icon-height);
}

.mk-nav-dropdown__icon img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.mk-nav-dropdown__trigger .mk-icon,
	.mk-nav-dropdown__link {
		transition: none;
	}
}