/*
 * Polaris language switcher.
 *
 * Ships with the add-on rather than the theme: the add-on emits this markup, so
 * it owns the styling. Unscoped by necessity — the switcher renders inside the
 * theme's header menu, outside the #polaris-ui island — and every selector is
 * namespaced .pls-lang-* so it cannot reach anything else.
 *
 * SCOPE, deliberately: layout only. Weight, colour, case and spacing of menu text
 * are the THEME's typography, shared with every other item in the bar; the earlier
 * muted prefix and bold current language fought it and made "LANGUAGE" the one
 * light word in the menu. Anything visual beyond keeping the two spans apart
 * belongs at theme level.
 */

.pls-lang-switcher > a {
    display: inline-flex;
    align-items: center;
}

/* Uncode wraps the whole menu title in its own span, so a flex gap on the <a>
   never lands between these two. Space the prefix directly. */
.pls-lang-switcher .pls-lang-prefix {
    margin-right: .35em;
}

/* The dropdown panel hugs its content instead of Uncode's fixed width.
   Uncode pins every horizontal-menu dropdown to `width: 195px !important`
   (style.css, four rules, desktop-only) and comments out SmartMenus' own
   content sizing (`//subMenusMinWidth` in app.js), so two-letter language codes
   floated in a panel sized for full menu labels, chevrons stranded at the far
   edge. `li.menu-item.pls-lang-switcher` carries one class more than Uncode's
   selector, so this wins on specificity regardless of stylesheet order — the
   `!important` alone would tie, and a tie goes to whoever loads last, which is
   not a thing to depend on. Scoped to the switcher only: every other dropdown
   keeps the theme's width. min-width 7em so a panel of two-letter codes still
   reads as a menu rather than shrink-wrap; mobile untouched (Uncode's accordion
   already forces width:auto below 960px).

   TWO CORRECTIONS, both proven against the real Uncode style.css in a browser
   (b024 shipped without that check and changed nothing):
   - NO media query. Uncode's top-bar variant of the 195px rule is unwrapped, so a
     media-wrapped override leaves it winning everywhere the query is false. And
     specificity, counted honestly: Uncode's selector is FIVE classes once the two
     :not() arguments are counted, so this one carries seven.
   - min-width in REM, never em: Uncode puts font-size:0 on the submenu ul (its
     inline-block whitespace kill), which silently turns any em value into 0. */
.menu-horizontal ul.menu-smart > li.menu-item.pls-lang-switcher.dropdown {
    /* Belt and braces: the panel must measure from the switcher item itself. */
    position: relative;
}
.menu-horizontal ul.menu-smart > li.menu-item.pls-lang-switcher.dropdown > ul.drop-menu.un-submenu {
    width: auto !important;
    min-width: 0 !important;
    /* Anchored to the item's RIGHT edge, so the panel hangs tight under the
       current-language code and its chevron ("GB v") rather than spreading across
       the whole LANGUAGE label — Anthony's pick, 2026-08-21. SmartMenus writes
       `left`/`right`/`margin-left` INLINE when it opens the panel, so these carry
       !important to beat the inline styles — the one legitimate use of
       !important-over-inline. */
    left: auto !important;
    right: 0 !important;
    margin-left: 0 !important;
}

/* The rows themselves, taken over completely: Uncode's submenu layout spreads a
   row's chevron to the panel's far edge, which is why even a narrowed panel read
   as a wide block. Inline-flex puts the arrow 8px after the code and lets the
   panel shrink to a compact list (~58px for two-letter codes, measured against the
   real theme stylesheet). The add-on owns .pls-lang-item, so this reaches nothing
   else. */
.pls-lang-switcher .drop-menu .pls-lang-item > a {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    width: auto !important;
    white-space: nowrap;
}
.pls-lang-switcher .drop-menu .pls-lang-item > a i.fa-dropdown {
    position: static !important;
    float: none !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    top: auto !important;
}