/*
 * macAdesign AI Translator — language switcher
 *
 * Every colour and size is a CSS custom property, and none of them is declared
 * on .maca-switcher itself. That is not a stylistic choice: a variable declared
 * on an element always beats the same variable inherited from an ancestor, no
 * matter how specific the ancestor's rule is. Declaring the defaults here would
 * therefore make this line silently do nothing:
 *
 *   .site-header { --maca-switcher-panel-bg: #151f33; }
 *
 * So the defaults live at the point of use instead, as the second argument to
 * var(). Set a property anywhere above the switcher — on the header, on a
 * section, on :root — and it is inherited and applied.
 *
 *   .site-header {
 *       --maca-switcher-color: #fff;
 *       --maca-switcher-bg: rgba(255, 255, 255, .07);
 *       --maca-switcher-panel-bg: #151f33;
 *       --maca-switcher-panel-color: #e8edf7;
 *       --maca-switcher-radius: 8px;
 *   }
 *
 * https://macadesign.dk
 */

.maca-switcher {
	color: var(--maca-switcher-color, inherit);
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------- lists --- */

.maca-switcher ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--maca-switcher-gap, .5em);
}

.maca-switcher li {
	margin: 0;
}

.maca-switcher a,
.maca-switcher span[aria-current] {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: var(--maca-switcher-item-gap, .45em);
}

.maca-switcher a:hover {
	color: var(--maca-switcher-hover-color, inherit);
}

.maca-switcher a:focus-visible,
.maca-switcher button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.maca-switcher .is-current > a,
.maca-switcher .is-current > span {
	color: var(--maca-switcher-active-color, inherit);
}

/* --------------------------------------------------------------- compact --- */

.maca-switcher-compact ul > li + li::before {
	content: "|";
	opacity: .4;
	margin-right: var(--maca-switcher-gap, .5em);
}

.maca-switcher-compact .is-current > span {
	font-weight: 700;
}

/* ----------------------------------------------------------------- flags --- */

.maca-switcher-flags ul {
	flex-wrap: wrap;
	gap: .25em 1.25em;
}

.maca-switcher-flags .is-current a {
	font-weight: 700;
}

.maca-flag,
.maca-switcher svg.maca-flag,
.maca-menu-flag svg.maca-flag {
	display: inline-block;
	width: var(--maca-flag-width, 1.25em);
	height: calc(var(--maca-flag-width, 1.25em) * .75);
	border-radius: var(--maca-flag-radius, 2px);
	flex: 0 0 auto;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
	vertical-align: middle;
}

.maca-flag-text {
	width: auto;
	height: auto;
	padding: 0 .3em;
	font-size: .75em;
	line-height: 1.6;
	letter-spacing: .04em;
	font-weight: 700;
	box-shadow: 0 0 0 1px currentColor;
	opacity: .75;
}

/* -------------------------------------------------------------- dropdown --- */

.maca-switcher-dropdown {
	position: relative;
	display: inline-flex;
}

.maca-switcher-toggle {
	font: inherit;
	color: inherit;
	line-height: inherit;
	background: var(--maca-switcher-bg, transparent);
	border: 0;
	border-radius: var(--maca-switcher-radius, 6px);
	padding: var(--maca-switcher-padding, .35em .6em);
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--maca-switcher-item-gap, .45em);
	-webkit-appearance: none;
	appearance: none;
}

.maca-switcher-toggle:hover {
	color: var(--maca-switcher-hover-color, inherit);
}

.maca-switcher-chevron {
	width: .7em;
	height: auto;
	flex: 0 0 auto;
	transition: transform .18s ease;
	opacity: .7;
}

.maca-switcher-toggle[aria-expanded="true"] .maca-switcher-chevron {
	transform: rotate(180deg);
}

/*
 * The panel is only ever hidden once JavaScript has taken charge of showing it
 * again. Without the ready attribute the list simply stays visible, so a
 * visitor whose script fails to load gets a working list of languages rather
 * than a button that does nothing.
 */
.maca-switcher-dropdown[data-maca-ready] .maca-switcher-list {
	position: absolute;
	top: calc(100% + var(--maca-switcher-panel-offset, 4px));
	left: 0;
	z-index: var(--maca-switcher-panel-z, 999);
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 100%;
	width: max-content;
	max-width: 18em;
	padding: var(--maca-switcher-panel-inset, .3em 0);
	background: var(--maca-switcher-panel-bg, #fff);
	color: var(--maca-switcher-panel-color, #1d2327);
	border-radius: var(--maca-switcher-radius, 6px);
	box-shadow: var(--maca-switcher-panel-shadow, 0 8px 28px rgba(0, 0, 0, .18));
}

.maca-switcher-dropdown[data-maca-ready][data-maca-open] .maca-switcher-list {
	display: flex;
}

.maca-switcher-dropdown[data-maca-ready] .maca-switcher-list li {
	display: flex;
}

.maca-switcher-dropdown[data-maca-ready] .maca-switcher-list a {
	flex: 1 1 auto;
	padding: var(--maca-switcher-panel-padding, .45em .75em);
	white-space: nowrap;
}

.maca-switcher-dropdown[data-maca-ready] .maca-switcher-list a:hover,
.maca-switcher-dropdown[data-maca-ready] .maca-switcher-list a:focus {
	background: var(--maca-switcher-panel-hover-bg, rgba(127, 127, 127, .16));
	color: inherit;
}

/* Flip to the right edge when the panel would otherwise leave the viewport. */
.maca-switcher-dropdown[data-maca-align="right"] .maca-switcher-list {
	left: auto;
	right: 0;
}

/* ------------------------------------------------------------ menu item --- */

/*
 * Inside a navigation menu the plugin styles nothing but the flag. The theme
 * owns the spacing, the colours, the dropdown and the mobile accordion — that
 * is the entire reason for being a real menu item rather than a widget dropped
 * next to one.
 */
.maca-menu-flag {
	display: inline-flex;
	align-items: center;
	margin-right: var(--maca-menu-flag-gap, .5em);
	vertical-align: middle;
	line-height: 1;
}

/*
 * Deliberately more specific than a bare svg selector: themes and page
 * builders routinely set a size on every svg inside a menu, and the flag has
 * to win that without resorting to !important.
 */
.maca-menu-flag .maca-flag,
.maca-menu-flag svg.maca-flag,
.menu-item .maca-menu-flag svg.maca-flag {
	width: var(--maca-menu-flag-width, 1.15em);
	height: calc(var(--maca-menu-flag-width, 1.15em) * .75);
	max-width: none;
}

/*
 * There is deliberately no styling of the switcher item itself. It points at
 * the page being viewed in the language being viewed, so WordPress marked it
 * as the current page and the theme drew it exactly like the active menu item
 * — which made a language chooser look like the page you were already on.
 * Those classes are stripped in PHP instead. Want the item to stand out? Style
 * .maca-menu-switcher yourself; nothing here is in the way.
 */
.maca-menu-label {
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	.maca-switcher-chevron {
		transition: none;
	}
}