/* ------------------------------------------------------------------------
   Google Website Translator — reskinned to look native.
   Pattern: SouthCoastAQMD/Documents patterns/multilingual-google-translate.md
   HORIZONTAL layout renders a native <select>; these rules de-chrome Google
   and style the field to match the advisory page (light theme, top-right).
   ------------------------------------------------------------------------ */

/* --- Tuck the single widget into the top-right page corner so it reads as an
       integrated utility control instead of a detached full-width band. --- */
.advisoryLanguageDD {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
}

/* --- The gadget as a native, page-styled <select> (HORIZONTAL layout) --- */
.advisoryLanguageDD .goog-te-gadget {
    /* collapse the "Powered by" text node that HORIZONTAL renders */
    font-size: 0 !important;
    color: transparent !important;
    height: 32px;
    display: flex;
    align-items: center;
    margin: 0;
}
/* hide the "Powered by Google Translate" logo/label span (the <select> is in a <div>, unaffected) */
.advisoryLanguageDD .goog-te-gadget > span { display: none !important; }
.advisoryLanguageDD .goog-te-gadget img { display: none; }        /* Google logo inside the gadget */

/* the actual dropdown — small, subtle, styled to sit on the header band */
.advisoryLanguageDD .goog-te-gadget .goog-te-combo {
    margin: 0;
    padding: 2px 6px;
    height: 26px;
    font-family: inherit;
    font-size: 12px;
    color: #196db6;
    background-color: #fff;
    border: 1px solid rgba(25, 109, 182, 0.35);
    border-radius: 3px;
    cursor: pointer;
    max-width: 170px;
}

/* --- Kill Google's injected chrome --- */
/* The top banner is an IFRAME (class contains skiptranslate) that Google sometimes nests
   inside a wrapper <div>, so a `body > iframe` selector misses it. Match at ANY depth.
   The gadget/select is a <div>/<select> (not an iframe), so it is unaffected. */
iframe.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* "Rate this translation" tooltip on hover over translated text */
#goog-gt-tt { display: none !important; visibility: hidden !important; }

/* Reclaim the ~40px offset Google forces on <body> when the banner shows */
body { top: 0 !important; }

/* On narrow screens the header fills the width, so the absolute corner-tuck
   would overlap the title. Fall back to a compact in-flow bar at the top. */
@media (max-width: 768px) {
    .advisoryLanguageDD {
        position: static;
        padding: 6px 10px;
    }
}
