.dropdown-links {
	display: inline-block;
	position: relative;
}

.dropdown-links__details {
	position: relative;
}

.dropdown-links__toggle {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--border-radius--medium);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	gap: var(--wp--preset--spacing--tiny);
	list-style: none;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	transition: filter 0.2s ease;
}

.dropdown-links__toggle::-webkit-details-marker {
	display: none;
}

.dropdown-links__toggle:hover,
.dropdown-links__toggle:focus {
	filter: brightness(85%);
}

.dropdown-links__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dropdown-links__chevron {
	fill: none;
	height: 1em;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: transform 0.2s ease;
	width: 1em;
}

.dropdown-links__details[open] .dropdown-links__chevron {
	transform: rotate(180deg);
}

.dropdown-links__menu {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--quinary);
	border-radius: 12px;
	display: grid;
	left: 0;
	margin-top: var(--wp--preset--spacing--tiny);
	min-width: 100%;
	overflow: hidden;
	position: absolute;
	top: 100%;
	width: max-content;
	z-index: 20;
	max-width: 350px;
}

.dropdown-links__details:not([open]) .dropdown-links__menu {
	display: none;
}

.dropdown-links__link {
	color: var(--wp--preset--color--black);
	display: block;
	padding: 15px 20px;
	text-decoration: none !important;
	line-height: 25px;
}

.dropdown-links__link:hover,
.dropdown-links__link:focus {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.dropdown-links__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* The Site Options header instance is a split Donate link and chevron button. */
#nav-menu .header-donate-dropdown .dropdown-links,
#nav-menu .header-donate-dropdown .dropdown-links__split-button {
	align-items: stretch;
	display: inline-flex;
}

#nav-menu .header-donate-dropdown .dropdown-links__primary-link,
#nav-menu .header-donate-dropdown .dropdown-links__toggle {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	transition: filter 0.2s ease;
}

#nav-menu .header-donate-dropdown .dropdown-links__primary-link {
	align-items: center;
	border-radius: var(--wp--custom--border-radius--medium) 0 0 var(--wp--custom--border-radius--medium);
	display: inline-flex;
	padding: 10px 20px;
	text-decoration: none;
}

#nav-menu .header-donate-dropdown .dropdown-links__toggle {
	border: 0;
	border-left: 1px solid var(--wp--preset--color--white);
	border-radius: 0 var(--wp--custom--border-radius--medium) var(--wp--custom--border-radius--medium) 0;
	gap: 0;
	height: 100%;
	padding: var(--wp--preset--spacing--small);
}

#nav-menu .header-donate-dropdown .dropdown-links__primary-link:hover,
#nav-menu .header-donate-dropdown .dropdown-links__primary-link:focus,
#nav-menu .header-donate-dropdown .dropdown-links__toggle:hover,
#nav-menu .header-donate-dropdown .dropdown-links__toggle:focus,
#nav-menu .header-donate-dropdown .dropdown-links__details[open] .dropdown-links__toggle {
	color: var(--wp--preset--color--white);
	filter: brightness(85%);
}

#nav-menu .header-donate-dropdown .dropdown-links__toggle:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

#nav-menu .header-donate-dropdown .dropdown-links__chevron {
	flex: 0 0 auto;
}

#nav-menu .header-donate-dropdown .dropdown-links__menu {
	left: auto;
	right: 0;
}

.editor-styles-wrapper .dropdown-links__details[open] {
	z-index: 1;
}

/*
 * Mobile menu instance.
 *
 * The markup mirrors the theme's own mobile menu items, so the link, submenu,
 * and chevron button inherit `#mobile-menu` styling untouched. The theme drops
 * the right padding on a parent item's label so the 50px toggle sits flush;
 * that rule targets a `span`, and this item uses a real link.
 */
#mobile-menu .header-donate-dropdown--mobile > a {
	padding-right: 0;
}