/**
 * Nyumbani Host Manager — language switcher.
 *
 * Inherits the theme's CSS variables so it sits inside the existing design
 * rather than next to it. Works on a dark or light surface.
 */

.nhm-lang { position: relative; display: inline-block; font-size: 0.92rem; line-height: 1; }
.nhm-lang .flag { font-size: 1.05em; line-height: 1; }
.nhm-lang .txt  { white-space: nowrap; }

/* ---------------- Dropdown ---------------- */

.nhm-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--nhm-card-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--nhm-card-border, rgba(255, 255, 255, 0.14));
    border-radius: 999px;
    color: var(--nhm-text, #f8fafc);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.nhm-lang-trigger:hover { border-color: var(--nhm-accent, #f97316); transform: translateY(-1px); }
.nhm-lang-trigger:focus-visible { outline: 2px solid var(--nhm-accent, #f97316); outline-offset: 2px; }

.nhm-lang-trigger .chev {
    width: 15px; height: 15px; opacity: .65;
    transition: transform .2s ease;
}
.nhm-lang.is-open .nhm-lang-trigger .chev { transform: rotate(180deg); }
.nhm-lang.is-open .nhm-lang-trigger { border-color: var(--nhm-accent, #f97316); }

.nhm-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--nhm-card-bg, #0f172a);
    border: 1px solid var(--nhm-card-border, rgba(255, 255, 255, 0.14));
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1200;   /* must clear the theme's sticky .site-header (z-index 1000) */
    /* The panel is opaque even when the theme's card colour is translucent. */
    backdrop-filter: blur(14px);
}
.nhm-lang.is-open .nhm-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nhm-lang-menu li { margin: 0; }
.nhm-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--nhm-text, #f8fafc);
    text-decoration: none;
    font-weight: 600;
    transition: background .15s ease;
}
.nhm-lang-menu a:hover,
.nhm-lang-menu a:focus-visible { background: rgba(127, 127, 127, .16); }
.nhm-lang-menu a.is-active { color: var(--nhm-accent, #f97316); }
.nhm-lang-menu .tick { width: 15px; height: 15px; margin-left: auto; }

/* ---------------- Inline pills ---------------- */

.nhm-lang-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nhm-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--nhm-card-border, rgba(255, 255, 255, 0.14));
    color: var(--nhm-text-muted, #94a3b8);
    text-decoration: none;
    font-weight: 600;
    transition: all .18s ease;
}
.nhm-lang-pill:hover { color: var(--nhm-text, #f8fafc); border-color: var(--nhm-accent, #f97316); }
.nhm-lang-pill.is-active {
    background: var(--nhm-accent, #f97316);
    border-color: var(--nhm-accent, #f97316);
    color: #fff;
}

/* ---------------- Floating ---------------- */

.nhm-lang-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
}
/* Sit above the support widget rather than on top of it. */
.nhm-lang-float .nhm-lang-menu { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.nhm-lang-float .nhm-lang.is-open .nhm-lang-menu { transform: translateY(0); }

@media (max-width: 640px) {
    .nhm-lang-float { right: 12px; bottom: 12px; }
    .nhm-lang-trigger .txt { display: none; }   /* flag only on small screens */
    .nhm-lang-trigger { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .nhm-lang-trigger, .nhm-lang-menu, .nhm-lang-pill, .nhm-lang-trigger .chev { transition: none; }
}