/* ============================================================
 * GML Language Switcher — Frontend Styles (v2)
 *
 * Design principle: FULL inheritance from parent context.
 * Typography, color, spacing and interactions default to the
 * container's own values. The switcher becomes visually
 * indistinguishable from a native menu item / nav link / footer
 * text — no "bolted-on" look.
 *
 * Escape hatch: CSS custom properties let themes or users
 * override specific values without fighting specificity.
 *     --gml-gap            (space between flag / text / arrow)
 *     --gml-hover-opacity  (hover dimming ratio)
 *     --gml-panel-bg       (dropdown panel background)
 *     --gml-panel-fg       (dropdown panel text)
 *     --gml-panel-border   (dropdown panel border color)
 *     --gml-panel-radius   (dropdown panel corner radius)
 * ============================================================ */

:root {
    --gml-gap: 0.4em;
    --gml-hover-opacity: 0.75;
    --gml-panel-bg: #fff;
    --gml-panel-fg: #333;
    --gml-panel-border: rgba(0, 0, 0, 0.08);
    --gml-panel-hover-bg: #f7f7f7;
    --gml-panel-active-bg: #f0f0f0;
    --gml-panel-radius: 6px;
    --gml-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ── Root — pure inheritance, zero forced styling ───────── */
.gml-language-switcher {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    /* Everything else inherits: font, color, line-height, letter-spacing */
    font: inherit;
    color: inherit;
}

/* ── Flag images ─────────────────────────────────────────── */
.gml-flag-img {
    display: inline-block;
    vertical-align: middle;
    object-fit: cover;
    flex-shrink: 0;
}
.gml-flag-rectangle { width: 1.5em; height: 1em; border-radius: 2px; }
.gml-flag-square    { width: 1.2em; height: 1.2em; border-radius: 3px; }
.gml-flag-circle    { width: 1.2em; height: 1.2em; border-radius: 50%; }
.gml-flag-emoji     { font-size: 1.15em; line-height: 1; display: inline-block; vertical-align: middle; }

/* ── Dropdown trigger — transparent, inherits ALL typography ─ */
.gml-language-switcher .gml-dropdown {
    position: relative;
    display: inline-block;
}

.gml-language-switcher .gml-dropdown-btn {
    /* Strip all default button chrome */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* Inherit everything type-related so it matches the container */
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    text-align: inherit;
    line-height: inherit;
    /* Layout: inline + small internal gap, driven by CSS var */
    display: inline-flex;
    align-items: center;
    gap: var(--gml-gap);
    white-space: nowrap;
    transition: opacity 0.15s;
}

.gml-language-switcher .gml-dropdown-btn:hover,
.gml-language-switcher .gml-dropdown.open .gml-dropdown-btn {
    opacity: var(--gml-hover-opacity);
}

/* Optional visual presets. The default inherit preset preserves the theme's
   existing navigation appearance. */
.gml-language-switcher.gml-appearance-outline .gml-dropdown-btn {
    padding: 0.45em 0.7em;
    border: 1px solid currentColor;
    border-radius: 6px;
}
.gml-language-switcher.gml-appearance-solid .gml-dropdown-btn {
    padding: 0.45em 0.7em;
    border: 1px solid var(--gml-switcher-bg, #1d2327);
    border-radius: 6px;
    background: var(--gml-switcher-bg, #1d2327);
    color: var(--gml-switcher-fg, #fff);
}

.gml-language-switcher .gml-dropdown-arrow {
    font-size: 0.7em;
    opacity: 0.65;
    transition: transform 0.2s;
}
.gml-language-switcher .gml-dropdown.open .gml-dropdown-arrow {
    transform: rotate(180deg);
}

.gml-language-switcher .gml-lang-label {
    font: inherit;
    color: inherit;
}

/* ── Dropdown panel — floats out of flow, has own styling ─ */
/* This is the ONLY part that doesn't inherit — it's teleported outside
   of the menu container, so must carry its own visual identity. Users
   override via CSS custom properties listed at the top of this file. */
.gml-language-switcher .gml-dropdown-menu,
ul.gml-dropdown-menu.gml-dropdown-teleported,
.gml-dropdown-menu.gml-dropdown-teleported {
    display: none;
    position: absolute;
    top: calc(100% + 0.3em);
    left: 0;
    min-width: 9em;
    background: var(--gml-panel-bg);
    color: var(--gml-panel-fg);
    border: 1px solid var(--gml-panel-border);
    border-radius: var(--gml-panel-radius);
    box-shadow: var(--gml-panel-shadow);
    list-style: none;
    margin: 0;
    padding: 0.25em 0;
    z-index: 99999;
    overflow: hidden;
    font: normal 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
}
.gml-language-switcher .gml-dropdown.open .gml-dropdown-menu {
    display: block;
}

/* Panel <li> — reset any theme styling that bleeds in */
.gml-language-switcher .gml-dropdown-menu li,
.gml-dropdown-menu.gml-dropdown-teleported li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    float: none;
    width: 100%;
    background: none;
    border: 0;
    line-height: normal;
}

/* Panel items */
.gml-language-switcher .gml-dropdown-item,
.gml-dropdown-menu.gml-dropdown-teleported .gml-dropdown-item,
.gml-dropdown-menu.gml-dropdown-teleported li > a {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.9em;
    color: var(--gml-panel-fg);
    text-decoration: none;
    white-space: nowrap;
    font: inherit; /* inherits the panel's font, not the page's */
    font-weight: normal;
    background: transparent;
    border: 0;
    transition: background 0.15s;
}
.gml-language-switcher .gml-dropdown-item:hover,
.gml-dropdown-menu.gml-dropdown-teleported .gml-dropdown-item:hover,
.gml-dropdown-menu.gml-dropdown-teleported li > a:hover {
    background: var(--gml-panel-hover-bg);
    color: var(--gml-panel-fg);
    text-decoration: none;
}
.gml-language-switcher .gml-dropdown-item.gml-active,
.gml-dropdown-menu.gml-dropdown-teleported .gml-dropdown-item.gml-active {
    background: var(--gml-panel-active-bg);
    font-weight: 600;
}

/* ── Button-list style — also fully inherits ──────────── */
.gml-language-switcher .gml-language-buttons {
    display: inline-flex;
    gap: var(--gml-gap);
    flex-wrap: wrap;
    align-items: center;
}
.gml-language-switcher .gml-lang-button {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--gml-gap) * 0.8);
    padding: 0.2em 0.6em;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.gml-language-switcher .gml-lang-button:hover {
    opacity: 1;
    color: inherit;
}
.gml-language-switcher .gml-lang-button.gml-active {
    opacity: 1;
    font-weight: 600;
    border-width: 2px;
}
.gml-language-switcher.gml-appearance-solid .gml-lang-button {
    border-color: var(--gml-switcher-bg, #1d2327);
}
.gml-language-switcher.gml-appearance-solid .gml-lang-button.gml-active {
    background: var(--gml-switcher-bg, #1d2327);
    color: var(--gml-switcher-fg, #fff);
}

/* ── Nav menu context — seamless integration ────────────── */

/*
 * The <li> wrapper. Don't force display — let the theme's own
 * .menu-item rules apply. Only ensure no bullet / weird spacing
 * leaks in from user-agent defaults.
 */
li.gml-menu-item,
li.menu-item.gml-menu-item-switcher,
li.menu-item-gml_language_switcher {
    list-style: none;
}

/*
 * When the switcher sits inside a menu item, the theme's
 * .menu-item a selector no longer applies (our root is not an <a>),
 * so we need to mimic the same typography as the menu's links.
 * The :is() selector pulls in the parent's rendered styles through
 * the inheritance chain — which is already how it works, but we
 * reinforce it by removing ANY width/block behavior we might have
 * accidentally introduced above.
 */
.gml-in-menu {
    /* inherit everything possible from the surrounding <li> / theme */
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: inherit;
    vertical-align: baseline;
    display: inline-flex;
    align-items: center;
}

.gml-in-menu .gml-dropdown-btn,
.gml-in-menu .gml-lang-button,
.gml-in-menu .gml-lang-label {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
}

.gml-in-menu .gml-lang-button {
    /* in menus, remove the button border so it blends with links */
    border: 0;
    padding: 0;
    background: transparent;
    opacity: 0.75;
}
.gml-in-menu .gml-lang-button:hover,
.gml-in-menu .gml-lang-button.gml-active {
    opacity: 1;
    font-weight: inherit;
    border: 0;
}

/*
 * Dropdown panel when triggered from menu — keep the panel's own
 * visual identity (fixed font/colors/shadow) but align to the right
 * edge of the trigger so it doesn't overflow narrow menu columns.
 */
.gml-in-menu .gml-dropdown-menu {
    left: auto;
    right: 0;
}

/* ── Footer / sidebar context — no special rules needed ── */
/* The root inheritance rules already cover these. */