/* ===================================================================
   lang-select.css — the language selector, and the job of keeping Google
   Translate's own furniture off the page.

   Two halves. The first is a small control that matches the rest of the
   header: a globe, the current language, a panel that fades down. The second
   half is defensive — the Translate widget inserts a banner iframe, shoves
   the document down by 40px, highlights every translated run in yellow and
   floats a tooltip over hovered text. None of that belongs on a hospital
   site, so it is all suppressed. The <select> the widget builds is the part
   that does the actual work, so it is hidden rather than removed.
   =================================================================== */

/* ---------- the control ---------- */
.als {
    position: relative;
    flex: 0 0 auto;
}

.als-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 42px;
    border: 1.5px solid rgba(228, 87, 78, .3);
    border-radius: 50px;
    background: #fff;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--primary-dark, #8E1B2E);
    line-height: 1;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.als-btn:hover,
.als-btn:focus-visible {
    border-color: var(--primary, #A32236);
    box-shadow: 0 6px 16px -8px rgba(139, 16, 20, .5);
    outline: none;
}

.als-globe {
    font-size: 1rem;
    line-height: 1;
}

/* the two-letter code on the pill; the full name lives in the panel */
.als-code {
    letter-spacing: .04em;
    text-transform: uppercase;
}

.als-caret {
    font-size: .6rem;
    opacity: .7;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.als.is-open .als-caret {
    transform: rotate(180deg);
}

/* ---------- the panel ---------- */
.als-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1400;          /* over the sticky header, under the modals */
    width: 254px;
    max-height: 420px;   /* all ten fit without scrolling */
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border-color, #F0E4E0);
    border-radius: 16px;
    box-shadow: 0 22px 48px -18px rgba(120, 60, 55, .34), 0 6px 14px -8px rgba(120, 60, 55, .14);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .26s cubic-bezier(.22, .61, .36, 1),
                transform .26s cubic-bezier(.22, .61, .36, 1),
                visibility .26s;
}

.als.is-open .als-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.als-opt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text-main, #2B2B2B);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease, padding-left .2s ease, color .2s ease;
}

/* the row slides a touch on hover rather than just tinting */
.als-opt:hover,
.als-opt:focus-visible {
    background: var(--bg-light, #FDF2EF);
    padding-left: 16px;
    outline: none;
}

/* the native spelling, in its own script */
.als-native {
    font-size: .84rem;
    color: var(--text-muted, #6F6F6F);
}

.als-opt[aria-selected="true"] {
    background: var(--bg-wash, #FDF7F5);
    color: var(--primary-dark, #8E1B2E);
    font-weight: 600;
}

.als-opt[aria-selected="true"]::after {
    content: '\f00c';                       /* check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: .7rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1620px) {
    /* the bar is tight between here and the drawer breakpoint */
    .als-btn {
        height: 38px;
        padding: 0 11px;
        gap: 6px;
    }
}

@media (max-width: 600px) {
    .als-panel {
        position: fixed;
        top: auto;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: 60vh;
    }

    .als-opt {
        padding: 12px;       /* a comfortable tap target */
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .als-panel,
    .als-caret,
    .als-opt,
    .als-btn {
        transition: none;
    }
}

/* ==================================================================
   Google Translate's own interface, suppressed
   ================================================================== */

/* the widget's <select> still drives the translation, so it is kept in the
   document and taken out of view rather than hidden from the engine */
#als-gt {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* the banner iframe, and the 40px it pushes the document down by */
.goog-te-banner-frame,
.goog-te-gadget-icon,
iframe.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* the yellow highlight over every translated run, and the hover balloon */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame {
    display: none !important;
}

/* ==================================================================
   Keeping the swap still
   ==================================================================
   Nothing is drawn over the page while Google works — no overlay, no fade,
   no blur. What is left is to stop the widget's own furniture from moving
   the layout as the translation lands.
   ================================================================== */

/* The widget throws a spinner over the viewport while it fetches. It is the
   one piece of its interface that appears mid-translation, and it is what
   reads as a flash. */
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-spinner-animation {
    display: none !important;
}

/* Once translated, Google adds .translated-ltr / .translated-rtl to <html>
   and re-applies the 40px body offset for its banner. The banner is gone, so
   the offset would be a pure jump. */
html.translated-ltr body,
html.translated-rtl body {
    top: 0 !important;
    position: static !important;
}

/* Every translated run is wrapped in a <font>. Left alone these sit on the
   text baseline slightly differently from the original nodes, which shows up
   as a one-pixel shuffle down a column of headings. */
font {
    vertical-align: inherit;
    line-height: inherit;
    font-size: inherit;
}