Light the Stream

<!-- Google Translate Container -->
<div id="google_translate_element" style="display: none;"></div>

<!-- Google Translate Initialization -->
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
      autoDisplay: false
    }, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- Universal Injection Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const homepageHeader = document.querySelector('header.amplify-header');
  const interiorHeader = document.querySelector('#page-header');
  const translateEl = document.getElementById('google_translate_element');

  if (!translateEl) return;

  const translateWrapper = document.createElement('div');
  translateWrapper.id = 'google_translate_element_wrapper';
  translateWrapper.style.display = 'flex';
  translateWrapper.style.justifyContent = 'flex-end';
  translateWrapper.style.marginBottom = '8px';
  translateEl.style.display = 'block';
  translateWrapper.appendChild(translateEl);

  // === Homepage Layout ===
  if (homepageHeader) {
    const secondaryContainer = homepageHeader.querySelector('.secondary-container');
    if (secondaryContainer) {
      secondaryContainer.parentNode.insertBefore(translateWrapper, secondaryContainer);
    }
  }

  // === Interior Layout ===
  else if (interiorHeader) {
    const searchBox = interiorHeader.querySelector('div[role="search"]');
    if (searchBox) {
      searchBox.parentNode.insertBefore(translateWrapper, searchBox);
    }
  }

  // === Shared Styles ===
  const style = document.createElement('style');
  style.textContent = `
    #google_translate_element_wrapper {
      padding: 4px 0;
      flex-wrap: wrap;
    }

    #google_translate_element select {
      background-color: #4a5361 !important;
      color: #fff !important;
      border: 1px solid #888 !important;
      border-radius: 4px;
      padding: 3px 5px;
      font-size: 13px;
      height: 28px;
    }

    #google_translate_element_wrapper .VIpgJd-ZVi9od-l4eHX-hSRGPd,
    #google_translate_element_wrapper .VIpgJd-ZVi9od-l4eHX-hSRGPd a,
    #google_translate_element_wrapper .VIpgJd-ZVi9od-l4eHX-hSRGPd a:link,
    #google_translate_element_wrapper .VIpgJd-ZVi9od-l4eHX-hSRGPd a:visited,
    #google_translate_element_wrapper .VIpgJd-ZVi9od-l4eHX-hSRGPd a:hover {
      color: #fff !important;
    }

    .goog-logo-link,
    .goog-te-gadget span,
    .VIpgJd-ZVi9od-xl07Ob-lTBxed {
      color: #fff !important;
      font-size: 12px !important;
      white-space: nowrap !important;
    }

    .goog-te-gadget {
      display: flex !important;
      align-items: center !important;
      gap: 4px;
      font-family: Arial, sans-serif !important;
      font-size: 11px !important;
      color: #fff !important;
    }

    /* Homepage search alignment fix */
    .secondary-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
    }

    .secondary-container .amplify-public-target-locator {
      margin-left: auto;
    }

    @media (max-width: 767px) {
      #google_translate_element_wrapper {
        justify-content: flex-start;
        padding: 8px 0;
      }

      #google_translate_element select {
        width: 100%;
      }

      .secondary-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .secondary-container .amplify-public-target-locator {
        margin-left: 0;
        align-self: flex-end;
      }

      #page-header div[role="search"] {
        align-self: flex-end;
      }
    }
  `;
  document.head.appendChild(style);
});
</script>