/**
 * 中英切换 — links that read as the text they replaced.
 *
 * Links, not buttons. Under Polylang each language is a real URL serving a real
 * page, so this is navigation and the markup says so: the status bar shows where
 * the click leads, middle-click opens it in a tab, and a crawler can follow it.
 * (It was buttons when GTranslate did the translating, because nothing was being
 * navigated to then — the language was a state of the current page.)
 */

.tc-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
}

.tc-lang__link {
	color: inherit;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
}

.tc-lang__link:hover,
.tc-lang__link:focus-visible {
	color: var(--wp--preset--color--primary-dark, #152A40);
	text-decoration: underline;
}

/* The language being viewed. Weight rather than colour: the header sits on both a
   white bar and a photographic hero, and a colour that reads as "active" against
   one of those reads as "disabled" against the other. */
.tc-lang__link.is-current {
	font-weight: 600;
}

.tc-lang__sep {
	color: var(--wp--preset--color--muted-blue, #AAB6C6);
}

/* A language this page has no translation for. The link still works — Polylang
   sends it to that language's home page — so it stays legible rather than being
   greyed into something that looks broken; the `title` on the link explains where
   it goes. Slightly lighter is enough of a hint without being a dead end. */
.tc-lang__link--home {
	opacity: 0.75;
}

/* On the homepage hero the header is transparent and everything in it is white. */
.home .site-header:not(.is-scrolled) .tc-lang,
.home .site-header:not(.is-scrolled) .tc-lang__sep {
	color: #fff;
}

/* Administrator-only notice when Polylang is missing or has no languages set up.
   Deliberately plain and deliberately in the header, where whoever is looking at
   the missing switcher is already looking. */
.tc-lang__warn {
	color: #B32D2E;
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
}