/*
 * DJfy - Sprachumschalter
 * ---------------------------------------------------------------------------
 * Eigene Datei, damit main.css und die SASS-Quellen unberuehrt bleiben.
 *
 * ACHTUNG BEIM AENDERN: Das Theme (main.css, ab Zeile 1393) setzt fuer JEDES
 * <button> unter anderem height: 2.75rem, line-height: 2.75rem, padding,
 * text-transform und letter-spacing. Diese Regeln greifen auch hier. Alles,
 * was davon stoert, muss ausdruecklich zurueckgesetzt werden - sonst schiebt
 * die geerbte Zeilenhoehe von 44 px die Flagge im 30-px-Kreis nach unten.
 *
 * Position oben RECHTS, mit dem Seiteninhalt mitscrollend. Beim Oeffnen eines
 * Dialogs blendet das Theme dort einen Schliessen-Button ein - deshalb
 * verschwindet der Umschalter, solange ein Dialog offen ist.
 */

.djfy-lang {
	/* Bewusst absolute statt fixed: der Umschalter soll mit dem Seiteninhalt
	   nach oben wegscrollen und nicht dauerhaft ueber der Ansicht liegen. */
	position: absolute;
	/* Erst der einfache Wert als Rueckfall, dann der um den Geraeterand
	   erweiterte. Browser, die env() nicht kennen, behalten die erste Zeile. */
	top: 12px;
	right: 12px;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	z-index: 10000;
	font-family: inherit;
	line-height: 1;
	transition: opacity 0.2s ease;
}

/* Dialog offen: Platz fuer den Schliessen-Button des Themes machen. */
body.is-article-visible .djfy-lang,
body.is-switching .djfy-lang {
	opacity: 0;
	pointer-events: none;
}

/* --- Schaltflaeche ------------------------------------------------------- */

.djfy-lang .djfy-lang__button {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	background: transparent;
	/* Gegen die geerbten Textmasse des Themes */
	line-height: 0;
	font-size: 0;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s ease, border-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Sichtbar bleibt der Kreis 30 x 30. Die Flaeche, die auf eine Beruehrung
 * reagiert, wird unsichtbar auf 46 x 46 vergroessert - sonst waere das Ziel
 * am Smartphone zu klein zum sicheren Treffen.
 */
.djfy-lang .djfy-lang__button::after {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.djfy-lang .djfy-lang__button:active {
	transform: scale(0.92);
}

.djfy-lang.is-busy .djfy-lang__button {
	opacity: 0.55;
	pointer-events: none;
}

/* --- Menue ---------------------------------------------------------------
 * Achtzehn Sprachen passen nicht mehr untereinander auf ein Smartphone.
 * Deshalb steht das Menue in Spalten: zwei im Hochformat, drei im Quer-
 * format. Gefuellt wird spaltenweise (grid-auto-flow: column), die
 * alphabetische Reihenfolge liest sich also von oben nach unten und dann
 * in der naechsten Spalte weiter. Die Zeilenzahl setzt langswitch.js
 * passend zur Zahl der Sprachen (--djfy-lang-rows-2 / -3).
 *
 * Breite: hoechstens 360px, auf schmalen Geraeten Bildschirmbreite minus
 * 24px - das Menue haengt rechts am Knopf und darf links nicht aus dem
 * Bild laufen.
 *
 * Browser ohne CSS Grid zeigen die Liste einfach einspaltig an.
 */

.djfy-lang__menu {
	position: absolute;
	top: 40px;
	right: 0;
	box-sizing: border-box;
	width: 360px;
	width: min(360px, calc(100vw - 24px));
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(16, 21, 29, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(var(--djfy-lang-rows-2, 9), auto);
	grid-auto-flow: column;
	column-gap: 4px;
	row-gap: 2px;

	/* Sicherheitsnetz fuer sehr kleine Fenster: lieber eine Bildlaufleiste
	   als abgeschnittene Sprachen. Im Normalfall greift sie nicht. */
	max-height: calc(100vh - 64px);
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Querformat am Smartphone: wenig Hoehe, viel Breite -> drei Spalten. */
@media screen and (orientation: landscape) and (max-height: 520px) {
	.djfy-lang__menu {
		width: 510px;
		width: min(510px, calc(100vw - 24px));
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: repeat(var(--djfy-lang-rows-3, 6), auto);
	}
}

.djfy-lang__menu[hidden] {
	display: none;
}

.djfy-lang .djfy-lang__item {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 38px;
	/* Longhand statt Kurzform: das Theme setzt padding fuer jedes <button>,
	   und einzelne Werte lassen sich so eindeutig ueberschreiben. */
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	margin: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #fff;
	font-size: 11px;
	line-height: 1.15;
	/* Das Theme gibt jedem <button> 0.2rem Sperrung. In zwei Spalten
	   waere "Deutsch (Schweiz)" damit zu breit; leicht gesperrt bleibt der
	   Stil der Seite erhalten. */
	letter-spacing: 0.06em;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/*
 * WICHTIG: main.css Zeile 4921 setzt fuer JEDES span, das direkt in einem
 * <button> steckt:
 *     position: absolute; left: 0; right: 0;
 *     text-align: center;
 *     font-size: clamp(10px, 5vh, 13px);
 *
 * Beides stoert hier. Durch das absolute Positionieren fallen Flagge und
 * Beschriftung aus dem Flex-Fluss: die Beschriftung liegt dann ueber die
 * volle Breite der Zeile und wird zentriert - kurze Namen wie POLSKI ruecken
 * dadurch weiter nach rechts als lange wie NEDERLANDS. Und 5vh bindet die
 * Schriftgroesse an die Fensterhoehe, auf hohen Displays wird sie zu gross.
 *
 * Deshalb hier beides zurueckholen. Die Zeile darf nicht schwaecher werden
 * als button > span (0,0,2) - .djfy-lang .djfy-lang__item > span liegt mit
 * (0,2,1) deutlich darueber.
 */
.djfy-lang .djfy-lang__item > span {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	text-align: left;
	/* Obergrenze 11px. Der clamp bleibt erhalten, damit sehr niedrige
	   Fenster weiterhin auf 10px heruntergehen duerfen. */
	font-size: clamp(10px, 5vh, 11px);
}

.djfy-lang .djfy-lang__item:hover,
.djfy-lang .djfy-lang__item:focus-visible {
	background: rgba(66, 127, 236, 0.22);
	outline: none;
}

.djfy-lang .djfy-lang__item.is-active {
	background: rgba(66, 127, 236, 0.32);
	font-weight: 700;
}

/* --- Flaggen -------------------------------------------------------------
 * Feste Masse, damit die Beschriftung daneben nicht verrutscht. Genau das
 * ging mit Emojis schief: sie waren je nach System unterschiedlich breit
 * oder gar nicht vorhanden.
 *
 * Der Abstand zur Beschriftung kommt bewusst ueber margin-right und nicht
 * ueber gap - das ist in aelteren Browsern verlaesslicher.
 *
 * Das frueher noetige margin-left: 20px ist entfallen. Es war nur ein Ersatz
 * dafuer, dass die Flagge durch die main.css-Regel absolut positioniert war
 * und das padding-left der Zeile deshalb wirkungslos blieb. Seit die Spans
 * wieder im Fluss stehen, macht padding-left der Zeile den Einzug.
 */
.djfy-lang__flag {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 17px;
	margin-left: 0;
	margin-right: 9px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
	line-height: 0;
}

.djfy-lang__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * In der runden Schaltflaeche fuellt die Flagge die gesamte Innenflaeche.
 * Absolut positioniert, damit weder Zeilenhoehe noch Grundlinie des Themes
 * sie verschieben koennen.
 */
.djfy-lang__flag--round {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 50%;
	box-shadow: none;
}

.djfy-lang__label {
	/* Lange Namen wie "Deutsch (Schweiz)" duerfen in der schmalen Spalte
	   auf zwei Zeilen umbrechen, statt abgeschnitten zu werden. */
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}