/* === Google Translate Widget (button look + globe + tiny caret) === */ /* container in the nav */ #gtw-li { display:flex; align-items:center; margin-left:12px; } /* button styling (keep your white outline + red hover) */ #gtw-li #google_translate_element .goog-te-gadget-simple{ background: transparent; border: 1px solid #fff; border-radius: 4px; padding: 6px 10px; /* tight so globe+caret sit centered */ font-family: inherit; color: #fff; cursor: pointer; line-height: 1; transition: background .25s, color .25s, border-color .25s; display: inline-block !important; /* make sure it's visible */ } #gtw-li #google_translate_element .goog-te-gadget-simple:hover{ background:#dd0000; border-color:#dd0000; color:#fff; } /* links inside inherit color */ #gtw-li #google_translate_element .goog-te-gadget-simple a{ color: inherit; text-decoration: none; } /* hide Google’s icon if injected */ #gtw-li #google_translate_element img{ display:none !important; } /* === hide Google's default label/arrow and inject our own === */ /* ensure single-line layout and win specificity */ #gtw-li #google_translate_element .goog-te-gadget-simple .goog-te-menu-value{ display:inline-flex !important; align-items:center !important; gap:6px !important; line-height:1 !important; font-size:0 !important; /* nuke built-in text visually */ } /* hide all inner spans (Google’s text + big arrow) */ #gtw-li #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span{ display:none !important; } /* small white globe left (inline SVG) */ #gtw-li #google_translate_element .goog-te-gadget-simple .goog-te-menu-value::before{ content:"" !important; width:16px; height:16px; display:inline-block; background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); } /* tiny down-caret on the right */ #gtw-li #google_translate_element .goog-te-gadget-simple .goog-te-menu-value::after{ content:"▾" !important; font-size:12px !important; opacity:.9; } /* optional: hide Google’s top banner */ .goog-te-banner-frame.skiptranslate{ display:none !important; } body{ top:0 !important; } /* mobile spacing */ @media (max-width:767px){ #gtw-li{ margin:8px 0 0; } } /* container */ #gtw-li { display:flex; align-items:center; margin-left:12px; position:relative; } /* our visible button (matches your header) */ .gtw-btn{ background: transparent; border: 1px solid #fff; border-radius: 4px; padding: 6px 10px; color: #fff; font: inherit; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .25s, color .25s, border-color .25s; } .gtw-btn:hover{ background:#dd0000; border-color:#dd0000; color:#fff; } /* globe icon (inline SVG) */ .gtw-globe{ width:16px; height:16px; display:inline-block; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); } .gtw-caret{ font-size:12px; opacity:.9; } /* hide the real Google widget off-screen but keep it functional */ .gtw-hidden{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* optional: hide Google’s top banner */ .goog-te-banner-frame.skiptranslate{ display:none !important; } body{ top:0 !important; } /* mobile spacing */ @media (max-width:767px){ #gtw-li{ margin:8px 0 0; } } /* Place the hidden Google widget right under the button (not off-screen) */ #gtw-li { position: relative; } #google_translate_element.gtw-hidden{ position: absolute; right: 0; /* anchor to button's right edge */ top: calc(100% + 8px); /* just below the button */ width: 1px; height: 1px; /* tiny footprint */ opacity: 0; /* invisible */ pointer-events: none; /* don't block clicks */ z-index: 9999; /* above header if needed */ } /* make sure any parent doesn’t clip the menu */ #branding, #branding .col, #mob-nav { overflow: visible; }

/* === Ultra-compact translate button for very small screens === */
@media (max-width: 700px){
  #gtw-li #google_translate_element .goog-te-gadget-simple,
  #gtw-li .gtw-btn {
    padding: 4px 6px !important;   /* tighter horizontal padding */
    gap: 4px !important;           /* shrink space between globe + caret */
  }
  #gtw-li .gtw-globe {
    width: 14px !important;
    height: 14px !important;       /* slightly smaller globe */
  }
  #gtw-li .gtw-caret,
  #google_translate_element .goog-te-menu-value::after {
    font-size: 11px !important;    /* smaller caret */
  }
}