/* =========================================
   LSFLR: Language Switcher For Language Router (theme-friendly css)
========================================= */

/* =========================================
   Variables + Container
========================================= */
.lsflr-switcher {
    /* Adaptive palette.
     *
     * --lsflr-bg / --lsflr-color inherit the FSE global-style tokens
     * (--wp--preset--color--base / --contrast) when the active theme defines
     * them — all modern block themes (TT4, etc.) do.  When those tokens are
     * absent (classic theme or custom FSE palette names) the fallback is a
     * CSS system colour: Canvas / CanvasText.  System colours automatically
     * match the OS light/dark preference via color-scheme below.
     *
     * Override any variable on the block's parent element for site-specific
     * tuning without touching plugin CSS:
     *   .my-header { --lsflr-bg: #1a1a2e; --lsflr-color: #eee; }
     *
     * --lsflr-border / --lsflr-hover use neutral 50 % grey at low opacity —
     * visible on both white and black backgrounds without needing to know
     * which one the theme uses.
     */
    --lsflr-bg:     var(--wp--preset--color--base,     Canvas);
    --lsflr-color:  var(--wp--preset--color--contrast, CanvasText);
    --lsflr-border: rgba(128, 128, 128, 0.22);
    --lsflr-hover:  rgba(128, 128, 128, 0.12);
    --lsflr-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    --lsflr-radius: 8px;
    --lsflr-speed:  0.18s;
    --lsflr-delay:  0.04s;

    /* Tell the browser this component supports both schemes so system colours
       resolve correctly even when the OS preference differs from the page. */
    color-scheme: light dark;

    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    font-family: var(--wp--preset--font-family--base-hand);
    color: var(--lsflr-color);
    margin-block-start: 0;
}

/* =========================================
   Toggle
========================================= */
.lsflr-toggle {
    list-style: none;
    cursor: pointer;
    outline: none;	
}

.lsflr-current {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

/* Arrow */
.lsflr-current::after {
    content: "▾";
    font-size: 1.7em;
    opacity: 0.6;
    transition: transform var(--lsflr-speed) ease;
}

.lsflr-icon {
    display: inline-flex;
    align-items: center;
}

/* Size and colour for every SVG inside the toggle, regardless of show mode.
   The old rule used --wp--custom--fixed-bottom-bar--icon-size which is a
   theme-specific variable — when undefined calc() produces an invalid value
   and the icon collapses to zero size. */
.lsflr-toggle .lsflr-current svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    display: inline-flex;
    flex-shrink: 0;
}

.lsflr-toggle .lsflr-current svg path {
    fill: currentColor;
}

.lsflr-toggle:hover .lsflr-current::after,
.lsflr-toggle:focus-within .lsflr-current::after {
    transform: rotate(180deg);
}

/* =========================================
   Submenu
========================================= */
.lsflr-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;

    min-width: max-content;

    margin: 0;
    padding: 0.35em 0;
    list-style: none;

    background: var(--lsflr-bg);
    color: var(--lsflr-color);
    border: 1px solid var(--lsflr-border);
    border-radius: var(--lsflr-radius);
    box-shadow: var(--lsflr-shadow);

    /* animation */
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;

    transform-origin: top left;

    transition:
        opacity var(--lsflr-speed) ease var(--lsflr-delay),
        transform var(--lsflr-speed) cubic-bezier(.2,.7,.3,1) var(--lsflr-delay);
}

/* Dropup */
.lsflr-dropup .lsflr-submenu {
    top: auto;
    bottom: 100%;
    transform: translateY(8px) scale(0.96);
    transform-origin: bottom left;
}

/* =========================================
   AUTO EDGE DETECTION (CSS trick)
========================================= */

/* If near right edge, add this class in block wrapper */
.lsflr-auto-right .lsflr-submenu {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.lsflr-dropup.lsflr-auto-right .lsflr-submenu {
    transform-origin: bottom right;
}

/* =========================================
   Show
========================================= */
.lsflr-toggle:hover .lsflr-submenu,
.lsflr-toggle:focus-within .lsflr-submenu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* =========================================
   Items
========================================= */
.lsflr-submenu li {
    margin: 0;
    padding: 0;
}

.lsflr-submenu a {
    display: flex;
    align-items: center;
    gap: 0.5em;

    padding: 0.45em 0.85em;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;

    transition:
        background 0.14s ease,
        transform 0.12s ease;
}

.lsflr-submenu a:hover,
.lsflr-submenu a:focus {
    background: var(--lsflr-hover);
    outline: none;
}

.lsflr-submenu a:active {
    transform: scale(0.97);
}

/* =========================================
   LANGUAGE ICONS (CSS-only flags)
   Add class: lsflr-lang-en, lsflr-lang-ca, etc.
========================================= */
.lsflr-submenu a::before {
    content: attr(data-lang);
    font-size: 0.85em;
    opacity: 0.7;
}

/* Optional nicer icons (emoji flags) */
.lsflr-lang-en::before { content: "🇬🇧"; }
.lsflr-lang-es::before { content: "🇪🇸"; }
.lsflr-lang-ca::before { content: "🏴"; } /* Catalan alt */
.lsflr-lang-fr::before { content: "🇫🇷"; }
.lsflr-lang-de::before { content: "🇩🇪"; }

/* =========================================
   Accessibility
========================================= */
.lsflr-toggle:focus {
    outline: 2px solid rgba(100,100,255,0.4);
    outline-offset: 2px;
}

/* =========================================
   RTL SUPPORT
   Scoped to .lsflr-switcher so specificity
   (0,3,0) and (0,4,0) matches or beats the
   auto-right rules (0,2,0) and (0,3,0).
   Placed after all regular rules so no
   lower-specificity rule follows.
========================================= */
[dir="rtl"] .lsflr-switcher .lsflr-submenu {
    left: auto;
    right: 0;
    transform-origin: top right;
}

[dir="rtl"] .lsflr-switcher.lsflr-dropup .lsflr-submenu {
    transform-origin: bottom right;
}

/* =========================================
   Mobile (no hover devices)
========================================= */
@media (hover: none) {

    .lsflr-submenu a {
        padding: 0.6em 1em;
    }

    /* reduce animation slightly */
    .lsflr-submenu {
        transition: opacity 0.15s ease;
    }
}

/* =========================================
   Reduced motion
========================================= */
@media (prefers-reduced-motion: reduce) {
    .lsflr-submenu {
        transition: none;
    }
}

/* =========================================
   OVERLAY MODE
   Activated by overlayMode="always"|"auto"
   The wrapper becomes a relative block;
   the panel floats above all content as a
   dialog-style overlay with a responsive
   CSS grid of language links.
========================================= */
.lsflr-overlay-wrap {
    position: relative;
    display: inline-block;
}

/* Trigger button inherits switcher colours */
.lsflr-overlay-wrap .lsflr-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;

    padding: 0.3em 0.6em;
    border: 1px solid var(--lsflr-border);
    border-radius: var(--lsflr-radius);
    background: transparent;
    color: var(--lsflr-color);
    font: inherit;
    cursor: pointer;

    transition: background var(--lsflr-speed) ease;
}

.lsflr-overlay-wrap .lsflr-trigger:hover,
.lsflr-overlay-wrap .lsflr-trigger:focus-visible {
    background: var(--lsflr-hover);
    outline: 2px solid rgba(100, 100, 255, 0.4);
    outline-offset: 2px;
}

/* Arrow on trigger — mirrors .lsflr-current::after */
.lsflr-overlay-wrap .lsflr-trigger .lsflr-current::after {
    content: "▾";
    font-size: 1.7em;
    opacity: 0.6;
    transition: transform var(--lsflr-speed) ease;
}

.lsflr-overlay-wrap .lsflr-trigger[aria-expanded="true"] .lsflr-current::after {
    transform: rotate(180deg);
}

/* Inline SVG sizing inside the trigger */
.lsflr-overlay-wrap .lsflr-trigger svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
    flex-shrink: 0;
}

/* Panel — fixed so it escapes any stacking context and can use full viewport
   width. top/left/width/max-height are set at open-time by positionPanel(). */
.lsflr-panel {
    position: fixed;
    z-index: 9999;

    /* Fallback dimensions; JS overrides these each time the panel opens */
    width: 90vw;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 1em;
    background: var(--lsflr-bg);
    color: var(--lsflr-color);
    border: 1px solid var(--lsflr-border);
    border-radius: var(--lsflr-radius);
    box-shadow: var(--lsflr-shadow);

    /* Animate in */
    animation: lsflr-panel-in var(--lsflr-speed) cubic-bezier(.2,.7,.3,1) both;
}

@keyframes lsflr-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Close button — top-right corner */
.lsflr-panel-close {
    position: absolute;
    top: 0.4em;
    right: 0.5em;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;

    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--lsflr-color);
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;

    transition: background var(--lsflr-speed) ease, opacity var(--lsflr-speed) ease;
}

.lsflr-panel-close:hover,
.lsflr-panel-close:focus-visible {
    background: var(--lsflr-hover);
    opacity: 1;
    outline: 2px solid rgba(100, 100, 255, 0.4);
    outline-offset: 2px;
}

/* Responsive grid of language items.
   clamp(4.5em, 28vw, 10em) keeps column width viewport-relative so that:
   - mobile ~390px → 28vw ≈ 109px ≈ 6.8em → 3 columns inside 90vw panel
   - tablet ~768px → 28vw ≈ 215px clipped to 10em=160px → 4 columns
   - desktop →10em → 6+ columns */
.lsflr-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(4.5em, 28vw, 10em), 1fr));
    gap: 0.25em;
    /* Indent top edge so grid clears the absolute-positioned close button */
    margin-top: 1.8em;
}

.lsflr-lang-item {
    display: flex;
    align-items: center;
    padding: 0.45em 0.7em;
    border-radius: calc(var(--lsflr-radius) - 2px);
    text-decoration: none;
    color: inherit;
    /* Scale text so labels fit in narrower columns on small screens.
       clamp: floor 0.8rem, fluid 3.5vw, cap 1rem */
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    white-space: nowrap;

    transition: background 0.14s ease, transform 0.12s ease;
}

.lsflr-lang-item:hover,
.lsflr-lang-item:focus-visible {
    background: var(--lsflr-hover);
    outline: none;
}

.lsflr-lang-item:active {
    transform: scale(0.97);
}

/* Current language — muted / de-emphasised so the user knows where they are */
.lsflr-panel-current {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* auto mode: when ResizeObserver determines there is enough room, revert to
   inline flow by hiding the trigger and showing links directly.
   JS adds .lsflr-overlay-auto-expanded when the container is wide enough. */
.lsflr-overlay-wrap.lsflr-overlay-auto-expanded .lsflr-trigger {
    display: none;
}

.lsflr-overlay-wrap.lsflr-overlay-auto-expanded .lsflr-panel {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    max-height: none;
    overflow: visible;
    animation: none;
}

.lsflr-overlay-wrap.lsflr-overlay-auto-expanded .lsflr-panel-close {
    display: none;
}

.lsflr-overlay-wrap.lsflr-overlay-auto-expanded .lsflr-panel[hidden] {
    display: block; /* override [hidden] when auto-expanded */
}

/* Reduce panel animation for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
    .lsflr-panel {
        animation: none;
    }
}