/**
 * FLAVOR Translate — Language Switcher Styles
 */

/* === Flaggengroesse (S-104b) =============================================
 *
 * --ft-flag-w / --ft-flag-h tragen die Flaggengroesse aus der Einstellung
 * „Flaggengroesse" (ft_switcher_flag_size). Ohne Wert gilt der Rueckfall
 * 20px/15px (= „Klein", die bisherige Festgroesse). Bei „Mittel"/„Gross"
 * setzt LanguageSwitcher::inline_css() die beiden Properties auf
 * ACCENT_ROOT_SELECTORS — sie erben bis in jedes Flaggen-<img>. Bis
 * alpha.103 stand hier fest 20px/15px: die Einstellung schrieb nur die
 * width/height-Attribute, die diese Klassenregeln immer ueberstimmten.
 */

/* === Akzentfarbe (R3-T4, B1) ============================================
 *
 * --fl-color-flavor ist die EINE Stellschraube fuer alle Akzentstellen
 * dieser Datei (aktive Sprache, Panel-Hover, Dropdown-Rahmen). Default:
 * das Corporate-Gelb #FFC64B des Betreibers.
 *
 * Override-Weg: Das Akzentfarben-Feld der Einstellungsseite liefert per
 * wp_add_inline_style() GENAU EINE Zeile mit DERSELBEN Selektorgruppe
 * (LanguageSwitcher::ACCENT_ROOT_SELECTORS — Test pinnt beide Seiten
 * aufeinander). Inline-CSS steht hinter dieser Datei, gleiche Spezifitaet
 * => Reihenfolge entscheidet, der Betreiberwert gewinnt. Ein leeres Feld
 * liefert KEINE Zeile — dieser Datei-Default gilt und kann sich per
 * Plugin-Update aendern, ohne dass Bestandsfelder ihn uebertoenen.
 *
 * Die Gruppe deckt alle vier Render-Wurzeln ab: .ft-language-switcher
 * (list/dropdown/flags), li.ft-menu-switcher (Menue-Modus traegt die
 * Klasse .ft-language-switcher NICHT) und .ft-floating-switcher
 * (PHP-inline gestylter Wrapper des Floating-Buttons).
 *
 * NUR Akzentstellen nutzen die Property — neutrale Grau-/Textwerte
 * bleiben Literale (kein Farbschema-Umbau).
 */
.ft-language-switcher,
li.ft-menu-switcher,
.ft-floating-switcher {
    --fl-color-flavor: #FFC64B;
}

.ft-language-switcher {
    font-size: 14px;
    line-height: 1.4;
}

/* List mode */
.ft-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-switcher-list li {
    display: inline-block;
}

.ft-switcher-list a {
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.ft-switcher-list a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ft-switcher-list .ft-active .ft-current {
    font-weight: 700;
    padding: 4px 8px;
    /* Akzentstelle: aktive Sprache traegt eine Unterstreichung in der
     * Akzentfarbe. inset-box-shadow statt border-bottom: verschiebt das
     * Layout nicht (R3-T4). */
    box-shadow: inset 0 -2px 0 0 var(--fl-color-flavor, #FFC64B);
}

/* Dropdown mode */
.ft-switcher-dropdown {
    padding: 6px 12px;
    /* Akzentstelle: der Select-Rahmen zeigt die Akzentfarbe (vorher
     * neutrales #ddd) — kontrastsicher, weil unabhaengig von Textfarben. */
    border: 1px solid var(--fl-color-flavor, #FFC64B);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    min-width: 80px;
}

/* Flag dropdown mode (S-104): display="dropdown" with flags.
 *
 * <details>/<summary> — opens and closes by click, tap and keyboard without
 * JavaScript; language-switcher.js additionally closes it on an outside
 * click and on Escape. Sits in arbitrary header builders (WoodMart, BeTheme,
 * text/HTML blocks), so the panel is positioned absolutely and the
 * function-critical properties carry a targeted !important where theme
 * rules for `ul`, `li`, `a` and `img` in headers are usually more specific
 * than a single class. The browser hides the panel of a closed <details>
 * itself — the display value below never shows it while closed. */
.ft-switcher-flagdrop {
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    /* S-104b (Review N-1): accordion CSS such as `details { overflow: hidden }`
     * (FAQ blocks) would clip the absolutely positioned panel to the toggle;
     * a themed details border/background would frame the whole switcher. */
    overflow: visible !important;
    border: 0;
    background: none;
}

.ft-switcher-flagdrop > .ft-switcher-flagdrop-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    /* Akzentstelle: Rahmen wie beim Auswahlfeld. */
    border: 1px solid var(--fl-color-flavor, #FFC64B);
    border-radius: 3px;
    background: #fff;
    color: #333;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

/* The native disclosure triangle — replaced by our own arrow below. */
.ft-switcher-flagdrop > .ft-switcher-flagdrop-toggle::-webkit-details-marker {
    display: none;
}

.ft-switcher-flagdrop > .ft-switcher-flagdrop-toggle::marker {
    content: "";
}

/* Arrow as a pure CSS triangle: no text node in the markup, so a
 * flags-only switcher (show_names="0") really carries no text. */
.ft-switcher-flagdrop > .ft-switcher-flagdrop-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: currentColor transparent transparent transparent;
    transition: transform 0.15s;
}

.ft-switcher-flagdrop[open] > .ft-switcher-flagdrop-toggle::after {
    transform: rotate(180deg);
}

.ft-switcher-flagdrop > .ft-switcher-flagdrop-toggle:focus-visible,
.ft-switcher-flagdrop-list a:focus-visible {
    outline: 2px solid #1e1e1e;
    outline-offset: 2px;
}

.ft-switcher-flagdrop > .ft-switcher-flagdrop-list {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    /* Logical property: left-aligned in LTR, right-aligned in RTL. */
    inset-inline-start: 0;
    z-index: 99999;
    min-width: 100%;
    width: max-content;
    margin: 4px 0 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: start;
    /* S-104b (Review N-1): header patterns such as
     * `header ul { opacity: 0; visibility: hidden }` (hover-revealed
     * sub-menus) must not hide the open panel. Safe: the browser itself
     * never renders the panel of a CLOSED <details>, whatever these say —
     * the same pattern as li.ft-menu-switcher.ft-open below. */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.ft-switcher-flagdrop-list > li {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ft-switcher-flagdrop-list > li::before,
.ft-switcher-flagdrop-list > li::after {
    content: none !important;
}

/* Panel links: enforce readable neutral styling (same reasoning as the
 * menu panel below — a half-applied theme skin would be unreadable). */
.ft-switcher-flagdrop-list a {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    color: #333 !important;
    background: transparent;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.5;
}

.ft-switcher-flagdrop-list a:hover,
.ft-switcher-flagdrop-list a:focus-visible {
    /* Akzentstelle: Hover in der Akzentfarbe, Text bleibt dunkel. */
    background-color: var(--fl-color-flavor, #FFC64B) !important;
    color: #111 !important;
}

/* Flag hardening, as for the menu switcher: header rules like
 * `.header img { width: 100% }` or `img { max-width: 100%; height: auto }`
 * would stretch the flag and push the label out of the box (seen in a
 * header-like test page). Size from the flag-size variables (top). */
.ft-switcher-flagdrop img.ft-flag-icon {
    flex: none;
    width: var(--ft-flag-w, 20px) !important;
    height: var(--ft-flag-h, 15px) !important;
    max-width: var(--ft-flag-w, 20px) !important;
    max-height: var(--ft-flag-h, 15px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-block !important;
}

/* Flags mode */
.ft-switcher-flags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ft-switcher-flags a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.ft-switcher-flags a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ft-switcher-flags .ft-active {
    font-weight: 700;
    /* Akzentstelle: wie im Listen-Modus — aktive Sprache unterstrichen. */
    box-shadow: inset 0 -2px 0 0 var(--fl-color-flavor, #FFC64B);
}

.ft-flag-icon {
    display: inline-block;
    width: var(--ft-flag-w, 20px);
    height: var(--ft-flag-h, 15px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
    vertical-align: middle;
    object-fit: contain;
}

/* Menu dropdown mode
 *
 * Injected as the LAST item into arbitrary theme menus — the rules below
 * deliberately use targeted !important on FUNCTION-critical properties,
 * because theme selectors (nav ul li a, .main-navigation ul ul ...) are
 * almost always more specific than our single classes. Design intent:
 * the TOGGLE inherits the theme's menu typography (native look), the
 * PANEL enforces its own neutral look (always readable, never half
 * theme-styled). */
.ft-menu-dropdown {
    position: relative;
}

/* Themes style THEIR menu items inline via their own selector chains
 * (#main-nav > li, .nav > li ...) — an appended li falls back to the
 * browser default display:list-item = BLOCK, full row width. Symptoms:
 * switcher wraps onto its own line below the menu, and the right:0
 * panel anchors to the full-width row (appears far off to the side).
 * Forcing a shrink-wrapped inline item + pinned containing block fixes
 * both. inline-flex behaves correctly inside flex menus (becomes a
 * flex item), inline-block menus and plain lists. */
li.ft-menu-switcher {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    float: none;
    vertical-align: middle;
}

li.ft-menu-switcher > a.ft-menu-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    /* "Deutsch (Österreich) ▾" must never wrap inside a menu bar */
    white-space: nowrap;
}

.ft-dropdown-arrow {
    font-size: 10px;
    line-height: 1;
}

/* alpha.101 N3 (Diller): WoodMart zeichnet in seinen Menüleisten an jeden
 * Menüpunkt mit Kindern einen eigenen Pfeil
 * (`.wd-nav > li.menu-item-has-children > a::after`, Icon-Schrift, Farbe
 * `--nav-chevron-color`). Unser Punkt trägt die Klasse ebenfalls — im
 * Desktop-Kopf standen deshalb zwei Pfeile nebeneinander. Dort gilt
 * WoodMarts Pfeil: er sieht aus wie bei den Nachbarpunkten und folgt dem
 * Farbschema des Kopfs (hell/dunkel, Sticky). Unserer entfällt.
 * Ausgenommen sind die WoodMart-Menüs, in denen WoodMart selbst KEINEN Pfeil
 * zeichnet: Vollbild-Menü `.wd-nav-fs` und Mobilmenü `.wd-nav-mobile`
 * (`content: none` in 7.2.5, 7.3.2, 8.4.1 und 8.5.5). Dort bleibt unserer,
 * damit es genau einen gibt. Die Produktkategorien `.wd-nav-product-cat`
 * blenden WoodMarts Pfeil erst ab 8.x aus (8.4.1 `display: none`, 8.5.5
 * `content: none`); der Umschalter erscheint dort ohnehin nie — WoodMart
 * baut diese Navigation über `wp_list_categories()`, nicht
 * `wp_nav_menu()`. Andere Themes kennen `.wd-nav` nicht — unverändert. */
.wd-nav:not(.wd-nav-fs):not(.wd-nav-mobile):not(.wd-nav-product-cat) > li.ft-menu-switcher > a.ft-menu-dropdown-toggle > .ft-dropdown-arrow {
    display: none;
}

/* Flag size hardening: themes with `nav li img { width: 100% }` or
 * `max-width: 100%; height: auto` would blow a 20px flag up to full
 * column width — THE classic injected-switcher bug. */
li.ft-menu-switcher img.ft-flag-icon,
.ft-menu-dropdown-list img.ft-flag-icon {
    width: var(--ft-flag-w, 20px) !important;
    height: var(--ft-flag-h, 15px) !important;
    max-width: var(--ft-flag-w, 20px) !important;
    max-height: var(--ft-flag-h, 15px) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* Last menu item → panel opens right-aligned (never off-viewport),
 * even when the theme's `.sub-menu { left: 0 }` is more specific. */
li.ft-menu-switcher > .ft-menu-dropdown-list {
    display: none;
    position: absolute !important;
    top: 100% !important;
    margin-top: 0 !important;
    right: 0 !important;
    left: auto !important;
    min-width: 0;
    width: max-content;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    margin: 0;
    list-style: none;
    z-index: 99999;
    /* Defeat theme float/transform inheritance on sub-menus */
    float: none;
    text-align: left;
}

/* Open state must WIN against every theme hidden-state pattern:
 * display:none, opacity/visibility transitions, translateY transforms,
 * pointer-events traps — themes only know their own hover/.toggled-on
 * classes, not our .ft-open click state. */
li.ft-menu-switcher.ft-open > .ft-menu-dropdown-list {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* alpha.99 (Futura live, Mobilmenü): Hover öffnet NUR dort, wo es echtes
 * Hover gibt — Maus/Trackpad UND Desktop-Breite. Auf einem Telefon ist
 * :hover „klebrig": der erste Tipp setzt es, und es bleibt stehen, bis
 * woanders getippt wird. Folgen (am Futura-Klon belegt, 390×844 mit
 * Touch-Emulation): der zweite Tipp nahm .ft-open weg, das Panel blieb
 * über :hover trotzdem offen — Schließen per Tipp ging nicht. Auf iOS
 * kommt hinzu, dass ein Tipp, der über :hover Inhalt sichtbar macht, als
 * reines Hover zählt und KEINEN click auslöst — das Panel öffnete dann
 * „nur per Hover". Desktop (hover + > 782 px) bleibt wie bisher. */
@media (hover: hover) and (min-width: 783px) {
    li.ft-menu-switcher:hover > .ft-menu-dropdown-list {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        clip: auto !important;
        clip-path: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Auf Touch und im gestapelten Menü entscheidet NUR .ft-open. Das schlägt
 * auch fremde Öffner: WoodMarts Mobilmenü hängt an jedes
 * `menu-item-has-children` ein eigenes `.wd-nav-opener` und klappt das
 * `> ul` per jQuery slideDown (Inline-Stil display:block) auf, und manche
 * Themes zeigen `.sub-menu` bei :hover. Ohne diese Regel hätte das Panel
 * zwei Schalter mit getrenntem Zustand. */
@media (max-width: 782px), (hover: none) {
    li.ft-menu-switcher:not(.ft-open) > .ft-menu-dropdown-list {
        display: none !important;
    }

    /* Review N-5: Rückfall, solange language-switcher.js noch nicht läuft
     * (NitroPack/WP Rocket „JS verzögern": der erste Tipp lädt erst die
     * Skripte). Das Skript setzt beim Start .ft-js; bis dahin öffnet der
     * Fokus auf Toggle oder Liste das Panel (Browser, die einen getippten
     * Link fokussieren). Mit .ft-js entscheidet wieder NUR .ft-open —
     * sonst hielte der Fokus auf dem Toggle das Panel nach dem zweiten
     * Tipp offen. Nur in diesem Media-Block: Desktop unverändert. */
    li.ft-menu-switcher:not(.ft-js):focus-within > .ft-menu-dropdown-list {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        clip: auto !important;
        clip-path: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

.ft-menu-dropdown-list li {
    display: block;
    width: 100%;
    margin: 0;
}

/* Panel links: enforce readable neutral styling — a half-applied theme
 * dropdown skin (dark bg + our grey text) would be unreadable. */
li.ft-menu-switcher > .ft-menu-dropdown-list a {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    text-decoration: none;
    color: #333 !important;
    background: transparent;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.15s;
}

li.ft-menu-switcher > .ft-menu-dropdown-list a:hover {
    /* Akzentstelle: Panel-Hover in der Akzentfarbe (vorher neutrales
     * #f5f5f5). Kontrast garantiert, weil das Panel seine Textfarbe
     * selbst erzwingt (#111, s. o.) — kein Theme-Weiss auf Gelb. */
    background-color: var(--fl-color-flavor, #FFC64B) !important;
    color: #111 !important;
}

/* Collapsed/hamburger menus: absolute positioning inside an accordion
 * overlaps following items — render the languages inline instead. */
@media (max-width: 782px) {
    /* In stacked hamburger menus the switcher behaves like a normal
     * full-width accordion entry again */
    li.ft-menu-switcher {
        display: block !important;
        width: 100% !important;
    }

    /* alpha.99 (Betreiber, Futura live): der Umschalter füllt die Zeile wie
     * jeder andere Menüpunkt. Vorher blieb der Toggle inline-flex und nur so
     * breit wie Flagge + Name (Klon: 163 von 300 px) — Tippfläche und Pfeil
     * saßen mitten in der Zeile. */
    li.ft-menu-switcher > a.ft-menu-dropdown-toggle {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    /* Der Pfeil ans Zeilenende — dort, wo Mobilmenüs ihre Aufklapp-Pfeile
     * haben (WoodMart: rechts). Logische Eigenschaft, damit RTL-Menüs ihn
     * links bekommen. */
    li.ft-menu-switcher > a.ft-menu-dropdown-toggle .ft-dropdown-arrow {
        margin-inline-start: auto;
    }

    /* Fremde Öffner, die ein Theme in UNSEREN Menüpunkt hängt (WoodMart:
     * `span.wd-nav-opener`, weil der Punkt `menu-item-has-children` trägt).
     * Unser Toggle ist schon die volle Zeile samt Pfeil; ein zweiter
     * Schalter mit eigenem Zustand (WoodMart klappt per slideDown) saß am
     * Klon mitten im Toggle bzw. rutschte beim Öffnen unter die Liste.
     * Unser Menüpunkt hat genau zwei eigene Kinder: Toggle und Liste.
     *
     * Review N-5: nur, solange die Liste noch UNSER Kind ist. Panel-Menüs
     * (mmenu-Muster) verschieben das `ul.sub-menu` in ein eigenes Panel und
     * lassen im Menüpunkt nur ihren „weiter"-Öffner — der ist dann der
     * einzige Weg zu den Sprachen und bleibt sichtbar. Ohne :has()-
     * Unterstützung entfällt die Regel still (Verhalten wie vorher). */
    li.ft-menu-switcher:has(> .ft-menu-dropdown-list) > :not(.ft-menu-dropdown-toggle):not(.ft-menu-dropdown-list) {
        display: none !important;
    }

    li.ft-menu-switcher > .ft-menu-dropdown-list {
        position: static !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent !important;
        width: auto;
        padding: 0 0 0 16px;
    }

    li.ft-menu-switcher > .ft-menu-dropdown-list a {
        color: inherit !important;
        background: transparent !important;
    }
}

/* === RTL: Switcher-Anpassungen === */
[dir="rtl"] .ft-language-switcher.ft-switcher-list,
.ft-rtl .ft-language-switcher.ft-switcher-list {
    direction: rtl;
}

[dir="rtl"] .ft-language-switcher .ft-flag,
.ft-rtl .ft-language-switcher .ft-flag {
    margin-left: 6px;
    margin-right: 0;
}