/* tioo.com header language picker (public_site/_lang_menu.html).
   Inherits the header's text colour so it works on light and dark navs. */
.site-lang { position: relative; flex-shrink: 0; }
.site-lang__btn {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.site-lang__btn::-webkit-details-marker { display: none; }
.site-lang__btn:hover,
.site-lang[open] .site-lang__btn { border-color: currentColor; }
.site-lang__btn:focus-visible { outline: 2px solid #A63446; outline-offset: 2px; }
.site-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(21, 17, 10, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(21, 17, 10, 0.16);
}
.site-lang__item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1F !important;
    text-decoration: none;
    white-space: nowrap;
}
.site-lang__item:hover { background: #F4EFE4; }
.site-lang__item--current { font-weight: 700; color: #A63446 !important; }
.site-lang__item--current::after { content: " ✓"; }

/* One-time "view this page in …?" hint — floats at the bottom, never shifts the header. */
.site-lang-hint {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    background: #15110A;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    font-size: 14px;
}
.site-lang-hint[hidden] { display: none; }
.site-lang-hint__yes {
    padding: 6px 14px;
    border-radius: 999px;
    background: #E9A860;
    color: #15110A !important;
    font-weight: 700;
    text-decoration: none;
}
.site-lang-hint__no {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Small phones: the picker shrinks to the globe + code; keep it compact. */
@media (max-width: 380px) {
    .site-lang__btn { padding: 6px 8px; gap: 4px; }
}

/* ── Placement in the two marketing headers ─────────────────────────── */
/* base.html: the desktop copy lives in .mkt-nav (which becomes the mobile
   menu panel), the mobile copy in .mkt-mobile-actions. Show one at a time. */
@media (max-width: 640px) {
    .mkt-nav .site-lang { display: none; }
}
.mkt-mobile-actions .site-lang__menu { right: -40px; }

/* home_v2.html (live home page): on phones keep "Try demo" first, then the
   picker, then the menu toggle, and tighten gaps so all fit on 320px. */
@media (max-width: 1260px) {
    .v2-nav-ctas .v2-nav-demo { order: 1; }
    .v2-nav-ctas .site-lang { order: 2; }
}
@media (max-width: 560px) {
    .v2-nav-inner { gap: 10px; }
    .v2-nav-ctas { gap: 8px; }
    .v2-nav { padding-left: 16px; padding-right: 16px; }
    .v2-nav--scrolled { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
    /* Tiny phones: keep the language code (clearer than the icon), drop the globe. */
    .site-lang__btn svg { display: none; }
}

/* base.html on small phones: Log In is also in the menu, so drop the
   account icon to make room for the picker next to "Try demo". */
@media (max-width: 400px) {
    .mkt-mobile-actions { gap: 10px; }
    .mkt-mobile-account { display: none; }
}

/* Home header colours: white text on the dark nav, dark on the cream hero. */
.v2-nav .site-lang { color: var(--v2-fg-1, #fff); }
.v2-nav.v2-nav--on-light .site-lang { color: var(--v2-fg-dark-1, #15110A); }