/* ── nt-lingua language dropdown (navbar-integrated mode) ───────────────────── */

/* Toggle button: white on transparent header */
.nt-lingua-dropdown .nt-lingua-toggle {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
    line-height: 1.5;
    white-space: nowrap;
}
.nt-lingua-dropdown .nt-lingua-toggle:hover,
.nt-lingua-dropdown .nt-lingua-toggle:focus,
.nt-lingua-dropdown .nt-lingua-toggle.active {
    color: #fff;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Toggle button: black on scrolled (sticky) header */
.nav-scroll .nt-lingua-dropdown .nt-lingua-toggle {
    color: #212529;
    border-color: rgba(0, 0, 0, 0.3);
}
.nav-scroll .nt-lingua-dropdown .nt-lingua-toggle:hover,
.nav-scroll .nt-lingua-dropdown .nt-lingua-toggle:focus {
    color: #212529;
    border: 1px solid #212529;
    background: rgba(0, 0, 0, 0.06);
}

/* ── Override sitepackage hover-open for nt-lingua: click-only via Bootstrap JS ── */
.nt-lingua-dropdown .dropdown-menu {
    display: none !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    min-width: 12rem;
    width: auto;
}
.nt-lingua-dropdown .dropdown-menu.show {
    display: block !important;
}

/* ── Fix: main nav dropdown transform animation causes 1px nav shift ──────── */
.navbar-nav .dropdown-menu {
    transform: none !important;
    will-change: opacity;
}

/* ── Dropdown items ─────────────────────────────────────────────────────────── */
.nt-lingua-dropdown .dropdown-item {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    white-space: nowrap;
}

/* When a DOM overlay is active, suppress the server-rendered checkmark on native links */
html.nt-lingua-dom-active .nt-lingua-dropdown .dropdown-item.active:not([aria-pressed="true"])::after {
    content: none;
}

/* Checkmark after the label: active native link and pressed DOM/CE button */
.nt-lingua-dropdown .dropdown-item.active::after,
.nt-lingua-dropdown .dropdown-item[aria-pressed="true"]::after {
    content: ' ✓';
    font-size: 0.85em;
    margin-left: 0.4em;
    opacity: 0.75;
}
/* Checkmark for CE buttons outside the dropdown (e.g. footer "Einfache Sprache") */
[data-ntlingua-target][aria-pressed="true"]:not(.dropdown-item)::after {
    content: ' ✓';
}
/* "Einfache Sprache" only visible on German pages (dropdown + footer) */
html:not([lang^="de"]) .nt-lingua-ce-footer { display: none !important; }
html:not([lang^="de"]) li:has(> .nt-lingua-ce),
html:not([lang^="de"]) li:has(> .dropdown-divider) { display: none !important; }

/* English name in parentheses: stays inline, no wrap */
.nt-lingua-dropdown .nt-lingua-name-en {
    display: inline !important;
    white-space: nowrap;
    font-size: 0.82em;
    opacity: 0.65;
    margin-left: 0.25em;
}

/* Flag emoji: fixed width column */
.nt-lingua-dropdown .nt-lingua-flag {
    display: inline-block;
    width: 1.4em;
    text-align: left;
    margin-right: 0.3em;
    font-style: normal;
}

/* ── Translation status message (navbar mode) ────────────────────────────────── */
.nt-lingua-status {
    font-size: 0.75em;
    white-space: nowrap;
    margin: 0 0.5rem;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0.9;
}
.nav-scroll .nt-lingua-status {
    color: #212529;
    background: rgba(0, 0, 0, 0.07);
}

/* ── Language switcher: inside navbar-collapse on all screen sizes ─────────── */
/* On desktop the collapse is always open → switcher sits in the navbar.
   On mobile the collapse opens via the hamburger → switcher appears at the
   bottom of the nav list, safely inside the menu rather than floating over
   the page content as an absolute-positioned overlay. */
.nt-lingua-mobile  { display: none; }
.nt-lingua-desktop { display: flex; align-items: center; margin-left: auto; }

/* On mobile (collapsed navbar) the dropdown-menu must not be position:absolute
   so it expands inline within the slide-down menu instead of floating over content.
   Background and text color are left to Bootstrap defaults (white bg, dark text)
   so items are readable in both the transparent and the scrolled (white) navbar state. */
@media (max-width: 991.98px) {
    .nt-lingua-desktop {
        padding: 0.5rem 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .nt-lingua-desktop .dropdown-menu {
        position: static !important;
        border: none;
        box-shadow: none;
    }
    /* Sitepackage sets navbar-collapse { background: #fff } on mobile → toggle
       must use dark colors instead of the default white-on-transparent rules. */
    .nt-lingua-desktop .nt-lingua-toggle {
        color: #212529;
        border-color: rgba(0, 0, 0, 0.3);
    }
    .nt-lingua-desktop .nt-lingua-toggle:hover,
    .nt-lingua-desktop .nt-lingua-toggle:focus {
        color: #212529;
        border-color: #212529;
        background: rgba(0, 0, 0, 0.06);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Floating widget (standalone / non-navbar mode)
   ═══════════════════════════════════════════════════════════════════════════════ */

.nt-lingua-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9990;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.nt-lingua-float__toggle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #1a1a2e;
    color: #fff;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
.nt-lingua-float__toggle:hover,
.nt-lingua-float__toggle:focus-visible {
    transform: scale(1.1);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.nt-lingua-float__panel {
    position: absolute;
    bottom: 3.75rem;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.4rem 0;
    animation: ntFloatIn 0.15s ease;
}
@keyframes ntFloatIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nt-lingua-float__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nt-lingua-float__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 1rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #212529;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    text-align: left;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.1s;
}
.nt-lingua-float__item:hover,
.nt-lingua-float__item:focus-visible {
    background: #f0f4ff;
    outline: none;
}
.nt-lingua-float__item.active,
.nt-lingua-float__item[aria-pressed="true"] {
    font-weight: 600;
    color: #0d6efd;
}
.nt-lingua-float__item[aria-pressed="true"]::after { content: ' ✓'; opacity: 0.75; }

.nt-lingua-float__flag {
    display: inline-block;
    width: 1.3em;
    flex-shrink: 0;
}
.nt-lingua-float__name-en {
    font-size: 0.8em;
    opacity: 0.6;
    margin-left: 0.2em;
}

.nt-lingua-float__divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0.3rem 0;
}

.nt-lingua-float__status,
.nt-lingua-float__disclaimer {
    font-size: 0.75rem;
    color: #666;
    margin: 0.3rem 1rem 0.5rem;
    padding: 0;
    background: none;
}

/* ── Automatic-translation disclaimer banner (shown at bottom of content area) ── */
.nt-lingua-disclaimer {
    background: rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.55rem 0;
}
.nt-lingua-disclaimer__text {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

/* ── Server-side active-language notice (injected by middleware before footer) ── */
.nt-lingua-page-notice {
    background: rgba(0, 0, 0, 0.04);
    border-top: 2px solid rgba(0, 0, 0, 0.10);
    padding: 0.75rem 0;
    margin-top: 2rem;
}
.nt-lingua-page-notice__text {
    margin: 0;
    font-size: 0.8rem;
    color: #555;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Translation overlay spinner
   ═══════════════════════════════════════════════════════════════════════════════ */

.nt-lingua-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ntFadeIn 0.2s ease;
}
@keyframes ntFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.nt-lingua-overlay__inner {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 220px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.nt-lingua-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1a1a2e;
    border-radius: 50%;
    animation: ntSpin 0.65s linear infinite;
    flex-shrink: 0;
}
@keyframes ntSpin {
    to { transform: rotate(360deg); }
}

.nt-lingua-overlay__text {
    font-size: 0.92rem;
    color: #333;
    margin: 0;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
}