/*
 * Global "Translate this page" widget.
 *
 * Loaded once from templates/base.html (every public page/layout extends
 * it), so it appears on every page without duplication. This file only
 * styles the control itself -- positioning/dragging is handled by the
 * wrapping #evitoA11yToolbar (see static/assets/css/a11y-toolbar.css),
 * which this widget sits inside as one of three control groups.
 *
 * Uses Google's free client-side "Website Translator" widget
 * (translate.google.com/translate_a/element.js). No API key, no billing,
 * no backend call from this app — see static/assets/js/translate-widget.js.
 */

.evito-translate-widget {
    display: flex;
    align-items: center;
    gap: 6px;
}

.evito-tr-icon {
    font-size: 16px;
    line-height: 1;
}

/* Visually-hidden label — the select itself carries an aria-label too,
   this just gives a redundant, more descriptive accessible name. */
.evito-tr-sr-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.evito-tr-select {
    /* appearance:none replaces the browser's native dropdown arrow with our
       own SVG chevron below -- the native arrow rendering was clashing
       with this control's custom pill background/shape and looking
       broken/misaligned on some browsers. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background-color: #f2f2f2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    color: #222;
    cursor: pointer;
    border-radius: 999px;
    padding: 8px 26px 8px 10px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    max-width: 46vw;
}

/* Scoped to real hover-capable pointers (mouse/trackpad) only -- without
   this, touch devices can get "stuck" showing the hover color after a tap
   (no mouse ever leaves to un-hover it), which is what made the control
   look permanently highlighted/different from the others. */
@media (hover: hover) and (pointer: fine) {
    .evito-tr-select:hover {
        background-color: #37C2CC;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        color: #fff;
    }
}

.evito-tr-select:focus-visible {
    outline: 3px solid #37C2CC;
    outline-offset: 2px;
}

.evito-tr-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Required attribution when Google's own widget UI is hidden (see the
   comment above this element in base.html) -- kept small and muted so it
   doesn't visually compete with the control, but stays visible/clickable. */
.evito-tr-badge {
    font-size: 9px;
    color: #9a9a9a;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 2px;
}

.evito-tr-badge:hover,
.evito-tr-badge:focus-visible {
    color: #37C2CC;
    text-decoration: underline;
}

/* The real Google widget mount -- we build our own <select> above and
   drive Google's hidden combo box programmatically, so Google's own UI
   (dropdown + "powered by" banner block) never needs to be shown. */
.evito-tr-google-mount {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Google's script pushes body down 40px and inserts a top iframe banner
   when it thinks it's rendering its own default toolbar; with our hidden
   mount + autoDisplay:false this normally never appears, and
   translate-widget.js additionally force-hides it via MutationObserver
   (Google's exact class names have changed across versions, so these
   selectors deliberately overlap with the JS-side ones rather than
   relying on one exact match). -->
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
iframe[id^="goog-te-banner"],
iframe[title*="Google Translate" i] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body {
    top: 0 !important;
}

/* Hover translation tooltips Google injects on translated text -- purely
   cosmetic clutter for this site, hidden to keep the existing design
   visually unchanged after translating. */
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

@media (max-width: 576px) {
    .evito-tr-select {
        max-width: 40vw;
        font-size: 12px;
        padding: 8px 22px 8px 8px;
    }

    /* Not enough horizontal room for icon + select + badge on one line at
       this width -- wrap onto a second line rather than hiding the required
       attribution. */
    .evito-translate-widget {
        flex-wrap: wrap;
        max-width: calc(100vw - 24px);
    }

    .evito-tr-badge {
        flex-basis: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 2px;
    }
}