/* ArtsPro Editions — switcher styles. Intentionally minimal so it
   inherits the theme's typography/colour. Override in your theme as needed. */

.ap-edition-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.ap-edition-switcher__label {
	font-size: 0.875em;
	opacity: 0.8;
}

.ap-edition-switcher__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.35em 1.8em 0.35em 0.6em;
	/* Explicit light surface + dark ink so the control stays legible when
	   dropped into a dark header. We don't use `currentColor` here because
	   the theme's header text colour (often white) would make both the
	   border and the chevron invisible against the white fill. */
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background-color: #fff;
	color: #1d2327;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, #1d2327 50%),
		linear-gradient(135deg, #1d2327 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* Make the native option list match the control it dropped out of.
   Browsers vary here — Chrome/Edge respect these, Firefox ignores
   `option` styling and always uses its own theme — but where it works,
   the menu stays legible in dark-UI scenarios. */
.ap-edition-switcher__select option {
	background-color: #fff;
	color: #1d2327;
}

.ap-edition-switcher__select:hover {
	border-color: #8c8f94;
}

.ap-edition-switcher__select:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	border-color: #2271b1;
}

/* Inline variant */
.ap-edition-switcher--inline .ap-edition-switcher__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-edition-switcher__item a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	text-decoration: none;
	color: inherit;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
}

.ap-edition-switcher__item a:hover,
.ap-edition-switcher__item.is-current a {
	background: rgba(0, 0, 0, 0.06);
}

.ap-edition-switcher__item.is-current a {
	font-weight: 600;
}

.ap-edition-switcher__flag {
	font-size: 1.05em;
	line-height: 1;
}

/* Force the system colour-emoji font on the flag glyph and the option text.
   Some themes set a custom font that doesn't include the regional indicator
   emoji ZWJ pairs, which would otherwise show as plain "EU" letters. */
.ap-edition-switcher__flag,
.ap-edition-switcher__select option,
.ap-edition-switcher__select {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
		"Twemoji Mozilla", system-ui, sans-serif;
}