/* ==========================================================================
   Language switcher and the browser-language suggestion (astrum-core).

   Lives in the plugin, not in the theme: both belong to blocks the plugin
   registers, and `block.json` loads this file only on views that render them.
   Every value goes through a theme.json token — the plugin must not invent
   colours the design system does not know (see docs/predani.md §3).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The switcher, as a disclosure menu
   -------------------------------------------------------------------------- */

.astrum-language-switcher__menu {
	position: relative;
}

/* The marker is removed twice: `list-style` covers Firefox and modern Chrome,
   the WebKit pseudo-element covers Safari, which ignores the first. */
.astrum-language-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--wp--preset--spacing--20) / 2);
	/* Same 44px touch target as the menu items in the theme's §2.3. */
	min-height: 44px;
	padding: 0 calc(var(--wp--preset--spacing--20) / 2);
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	list-style: none;
	cursor: pointer;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.astrum-language-switcher__toggle::-webkit-details-marker {
	display: none;
}

.astrum-language-switcher__toggle:hover,
.astrum-language-switcher__menu[open] > .astrum-language-switcher__toggle {
	color: var(--wp--custom--color--text-inverse);
}

/* The full name is the label on a wide header, the code is what survives when
   the header runs out of room (see the breakpoint at the end of the file). */
.astrum-language-switcher__code {
	display: none;
}

.astrum-language-switcher__caret {
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.astrum-language-switcher__menu[open] .astrum-language-switcher__caret {
	transform: rotate(180deg);
}

/* The panel is anchored to the right edge: the switcher sits next to the CTA
   at the end of the header, so a left-anchored panel would hang off-screen. */
.astrum-language-switcher__list {
	position: absolute;
	z-index: var(--wp--custom--header--z);
	top: calc(100% + calc(var(--wp--preset--spacing--20) / 2));
	right: 0;
	min-width: 9rem;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--20) / 2);
	list-style: none;
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--corner--lg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.astrum-language-switcher__item {
	margin: 0;
	padding: 0;
}

.astrum-language-switcher__link {
	display: flex;
	align-items: center;
	/* 44px again — a menu row is a touch target like any other. */
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-radius: var(--wp--custom--corner--sm);
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
		color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

a.astrum-language-switcher__link:hover,
a.astrum-language-switcher__link:focus-visible {
	color: var(--wp--custom--color--text-inverse);
	background-color: rgba(255, 255, 255, 0.08);
}

/* The current language stays in the list so the menu answers "where am I?",
   but it is not a link and must not look like one. */
.astrum-language-switcher__link.is-current {
	color: var(--wp--preset--color--chartreuse);
	cursor: default;
}

/* --------------------------------------------------------------------------
   2. Browser-language suggestion

   A card under the fixed header rather than a bar: the bottom of the viewport
   belongs to the cookie dialog, which is a full-screen modal, and the notice is
   suppressed in PHP while that decision is pending anyway.

   Anchored LEFT on purpose. The switcher's panel opens against the right edge
   of the header, directly below it — the same band this card occupies — so a
   right-anchored notice sat underneath the open menu.
   -------------------------------------------------------------------------- */

.astrum-lang-notice {
	position: fixed;
	/* Above the header, and anchored to the BOTTOM. Sitting under the header at
	   `header--z - 1` meant the header painted over the card, and the top offset
	   only held while the header stayed exactly `--header--height` tall — one
	   viewport where the logo wrapped and the card slid underneath it. Nothing
	   grows upwards from the bottom edge, so the collision cannot come back.
	   Still below the cookie dialog (z-index 1000), which is modal and wins. */
	z-index: calc(var(--wp--custom--header--z) + 1);
	bottom: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	max-width: min(26rem, calc(100vw - 2 * var(--wp--preset--spacing--30)));
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--text-inverse);
	background: var(--wp--preset--color--ink);
	/* The accent edge is the whole reason the card reads as an offer rather than
	   as a strip of chrome: on a dark page a dark card with a hairline border
	   disappears into the background. */
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-left: 4px solid var(--wp--preset--color--chartreuse);
	border-radius: var(--wp--custom--corner--lg);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Opening the switcher hides the suggestion: both answer the same question, and
   answering it twice in two places is noise. `:has()` is the same mechanism the
   theme already uses for its empty-section guards. */
body:has(.astrum-language-switcher__menu[open]) .astrum-lang-notice {
	display: none;
}

.astrum-lang-notice__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.astrum-lang-notice__action {
	flex-shrink: 0;
	padding: calc(var(--wp--preset--spacing--20) / 2) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	background: var(--wp--preset--color--chartreuse);
	border-radius: var(--wp--custom--corner--pill);
}

.astrum-lang-notice__action:hover,
.astrum-lang-notice__action:focus-visible {
	color: var(--wp--preset--color--ink);
	background: var(--wp--custom--color--text-inverse);
}

.astrum-lang-notice__close {
	flex-shrink: 0;
	/* Smaller than 44px on purpose: dismissing is the low-stakes action here and
	   the card is already dismissed by following the link. The hit area is
	   padded out to 32px, which WCAG 2.5.8 (AA) accepts at 24px minimum. */
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--corner--sm);
	cursor: pointer;
}

.astrum-lang-notice__close:hover,
.astrum-lang-notice__close:focus-visible {
	color: var(--wp--custom--color--text-inverse);
	background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   3. Narrow headers

   Below the navigation breakpoint the menu collapses into the hamburger, but
   the language choice stays outside it: a visitor who cannot read the current
   language must not have to open a menu written in it to escape. Trading the
   full name for the code is what buys the room.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	.astrum-language-switcher__name {
		display: none;
	}

	.astrum-language-switcher__code {
		display: inline;
	}
}

@media (max-width: 620px) {

	.astrum-lang-notice {
		right: var(--wp--preset--spacing--20);
		left: var(--wp--preset--spacing--20);
		max-width: none;
	}


}