/* ==========================================================================
   Sprachumschalter im Header-Balken
   ========================================================================== */

/*
 * Shortcode [hpl_language_switcher], siehe LanguageSwitcherShortcode.php.
 *
 * Standarddarstellung "style=dropdown" (Menü-Nachbau, siehe unten). Die
 * Regeln hier gelten für die alternative Darstellung "style=list": ohne
 * sie bleibt die Liste als normale, vertikal gestapelte Punkteliste
 * stehen, da <ul>/<li> ohne eigenes CSS genau so vom Browser dargestellt
 * werden.
 *
 * Feste Werte statt var(--theme-font-size) & Co: Blocksy definiert diese
 * Variablen für den Menü-Baustein nur lokal auf dem Selektor
 * "[data-id="menu"] > ul > li > a" neu (16px, Helvetica, 700) - als
 * Geschwisterelement außerhalb dieses Selektors bekommt unsere Liste diese
 * Neudefinition nicht mit und würde stattdessen die globale, kleinere
 * Fallback-Größe erben. Quelle: DevTools-Inspektion des Menü-Elements.
 */
.hpl-language-switcher {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	font-family: Helvetica, sans-serif;
}

.hpl-language-switcher .current-lang a {
	text-decoration: underline;
}

.hpl-language-switcher a {
	text-transform: uppercase;
}

/*
 * Menü-Darstellung des Sprachumschalters (Standarddarstellung von
 * [hpl_language_switcher], siehe LanguageSwitcherShortcode.php).
 *
 * Das PHP baut hier absichtlich dieselben Klassen nach, die Blocksy für
 * echte Hauptmenüpunkte mit Untermenü verwendet ("menu-item",
 * "animated-submenu-block", "sub-menu", "ct-menu-link",
 * "ct-toggle-dropdown-desktop(-ghost)"). Position, Hintergrund, Schatten
 * und die Auf-/Zuklapp-Sichtbarkeit des Untermenüs (".ct-active") kommen
 * dadurch bereits automatisch aus Blocksys eigenem, unscoped CSS.
 *
 * Farbe/Schriftgröße/-schnitt müssen hier trotzdem explizit gesetzt werden:
 * Blocksys entsprechende Regeln sind auf "nav[class*=menu] .ct-menu-link"
 * beschränkt - unser Baustein sitzt aber bewusst außerhalb des echten
 * <nav>-Menüs (siehe Klassenkommentar in LanguageSwitcherShortcode.php),
 * daher greifen diese Regeln hier nicht automatisch. Aus demselben Grund
 * bekommt auch die Untermenü-Hintergrundfarbe hier ihren eigenen Wert
 * (--hpl-header-bar-background-color) statt Blocksys eigener, dynamisch
 * generierter Paletten-Variable: die ist ebenfalls nur innerhalb des
 * echten Menüs auf Rot gesetzt und würde außerhalb auf eine andere,
 * dunkle Standardfarbe zurückfallen.
 */
/*
 * Streckt unseren Baustein auf die volle Höhe der Header-Leiste, so wie es
 * echte Menüpunkte über ihre eigene "height: 100%"-Regel bereits tun. Ohne
 * das ist unser <li> nur so hoch wie sein Text, und Blocksys "top: 100%"
 * für das Untermenü (bezogen auf die Höhe des <li>) positioniert es dann
 * zu weit oben statt bündig unter der Header-Leiste.
 *
 * Prozent-Höhen vererben sich nur, wenn JEDE Zwischenstufe der Eltern-
 * Kette selbst eine definierte Höhe hat - "height: 100%" auf einem
 * Element allein reicht nicht, wenn ein Elternelement dazwischen noch
 * "height: auto" hat. ".entry-content" ist hier die von Blocksy erzeugte
 * Zwischenstufe zwischen ".ct-header-text" und unserem eigenen "<ul>",
 * die sonst genau diese Kette unterbrechen würde. Beide gezielt über
 * ":has()" auf unseren Baustein beschränkt, damit nicht jede
 * ".entry-content"-Box der ganzen Seite betroffen ist.
 */
.ct-header-text:has(.hpl-language-switcher-menu) {
	height: 100%;
}

.ct-header-text:has(.hpl-language-switcher-menu) > .entry-content {
	height: 100%;
}

.hpl-language-switcher-menu {
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hpl-language-switcher-menu > li {
	height: 100%;
}

.hpl-language-switcher-menu > li > .ct-menu-link {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 4px;
	color: var(--hpl-header-bar-color);
	font-size: 16px;
	font-weight: 700;
	font-family: Helvetica, sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	padding: 4px;
}

.hpl-language-switcher-menu .ct-toggle-dropdown-desktop svg {
	fill: var(--hpl-header-bar-color);
}

/*
 * "width" und "min-width" überschreiben Blocksys eigene, feste Vorgabe
 * (200px unabhängig vom Inhalt) - bei den kurzen Sprachnamen sonst eine
 * unnötig breite, halbleere Box statt einer eng am Text anliegenden.
 */
.hpl-language-switcher-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content !important;
	min-width: 0 !important;
	background-color: var(--hpl-header-bar-background-color) !important;
}

.hpl-language-switcher-menu .sub-menu .menu-item {
	justify-content: flex-start;
}

/*
 * "font-size: 12px" entspricht Blocksys eigenem Standardwert für
 * Untermenü-Punkte des echten Menü-Bausteins (siehe
 * wp-content/themes/blocksy/inc/panel-builder/header/menu/dynamic-styles.php,
 * "Dropdown Font"). Diese eine Blocksy-Regel zielt auf den Selektor
 * "[data-id=menu] .sub-menu .ct-menu-link" - unser Baustein sitzt aber in
 * "[data-id=text]", wird von dieser Regel also gar nicht erst erreicht.
 * Deshalb reicht hier ein einfacher eigener Wert ohne "!important".
 */
.hpl-language-switcher-menu .sub-menu .ct-menu-link {
	display: block;
	text-align: left;
	color: var(--hpl-font-color);
	font-size: calc(var(--hpl-sub-menu-font-size) * 0.9);
	font-weight: normal;
	text-transform: uppercase;
	white-space: nowrap;
}