Light the Stream

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Create the new top header
    const headerBar = document.createElement('header');
    headerBar.className = 'header-link-bar';
    headerBar.innerHTML = `
        <div class="container">
            <a href="/employment-opportunities">
                <img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/6713c1d0-2364-4ee2-990c-514b51b38097/309041_users_group_people_icon.png?ixlib=rb-1.1.0&amp;or=0&amp;w=100&amp;h=100&amp;fit=max&amp;auto=format%2Ccompress&amp;s=ee08901cf7fac4112c067c9a701ccac6" alt="">
                Join Metro Fire
            </a>
            <a href="/contact-us">
                <img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/cb5ca832-b8e3-451a-9be6-c452ec222c6b/1566544_address%20book_addresses_business_contact_diary_icon.png?ixlib=rb-1.1.0&amp;or=0&amp;w=100&amp;h=100&amp;fit=max&amp;auto=format%2Ccompress&amp;s=80a7bc857a61023c18c690d6561311f7" alt="">
                Contact Us
            </a>
        </div>
    `;

    const existingHeader = document.querySelector('header');
    if (existingHeader && existingHeader.parentNode) {
        existingHeader.parentNode.insertBefore(headerBar, existingHeader);
    }

    // Add styling
    const style = document.createElement('style');
    style.textContent = `
        .header-link-bar {
            position: static;
            text-align: right;
            color: #fff;
            background-color: #4a5361;
            padding: 0 15px;
        }
        .header-link-bar a {
            color: #fff !important;
            font-weight: bold;
            text-decoration: none;
        }
        .header-link-bar a:hover,
        .header-link-bar a:focus {
            color: #e6e6e6 !important;
        }
        .header-link-bar .container {
            display: flex;
            height: 48px;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            letter-spacing: 0.02em;
        }
        .header-link-bar .container img {
            position: relative;
            top: -1px;
            height: 18px;
            margin-right: 10px;
        }
        .header-link-bar .container a {
            margin-left: 30px;
        }
        @media (max-width: 767px) {
            .header-link-bar .container {
                justify-content: center;
            }
        }
    `;
    document.head.appendChild(style);

    // Markdown conversion
    if (window.showdown) {
        var converter = new showdown.Converter();
        document.querySelectorAll('#poc table.table td, #poc table.table th').forEach(function(cell) {
            var html = converter.makeHtml(cell.textContent);
            cell.innerHTML = html;
        });
    }
});
</script>

<style>

.amplify-quicklinks-container .container header:hover {
    transform: scale(1.05);
}
</style>

<script>
  $(function() {
    let signInLink = $('.footer-poweredby a').get(0);
    signInLink.text = 'Streamline';
    signInLink.href = 'https://www.getstreamline.com';
  });
</script>

<style>
.amplify-quicklinks-container .container header {
    width: 10rem;}
 .amplify-quicklinks-container .container header h3 {text-align: center;}
.amplify-header .container h1 img {height: 7.3rem; padding: 20px 0;}
.amplify-quicklinks-container {padding: 2rem 0 2rem 0;}
.amplify-teasers {padding: 0;}
.amplify-meetings .container {
    padding: 1rem 0;}
</style>

<style>

.amplify-quicklinks-container .container header:hover {
    transform: scale(1.05);
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const isAmplifyPage = document.querySelector('[data-amplify="true"]');
    if (!isAmplifyPage) {
      console.info("Skipping search injection — not an Amplify layout.");
      return;
    }

    const searchBox = document.querySelector(".amplify-public-target-locator");
    const menuList = document.querySelector(".sl-modern-menu");

    if (!searchBox || !menuList || menuList.tagName !== "UL") return;
    if (menuList.querySelector(".search-icon-wrapper")) return;

    const searchItem = document.createElement("li");
    searchItem.className = "search-icon-wrapper";
    searchItem.setAttribute("role", "none");

    const link = document.createElement("a");
    link.href = "#";
    link.setAttribute("aria-label", "Search the site");
    link.setAttribute("role", "menuitem");
    link.appendChild(searchBox);

    link.addEventListener("click", function (e) {
      e.preventDefault();
    });

    searchItem.appendChild(link);
    menuList.appendChild(searchItem);
  });
</script>

<style>
  /* Only apply styles if Amplify search exists */
  .amplify-public-target-locator {
    display: block; /* Reset in case classic uses hidden or different styling */
  }

  .search-icon-wrapper {
    display: inline-block;
    height: 100%;
  }

  .search-icon-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
    height: 100%;
    line-height: 1;
    background-color: transparent;
    box-sizing: border-box;
    cursor: pointer;
  }

  .search-icon-wrapper a:hover {
    background-color: #1a2944;
  }

  .search-icon-wrapper svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    transition: transform 0.2s ease;
    vertical-align: middle;
  }

  .search-icon-wrapper a:hover svg {
    transform: scale(1.1);
  }

  /* Hide Amplify's default dropdown/search input */
  .amplify-public-target-locator input,
  .amplify-public-target-locator form,
  .amplify-public-target-locator .ais-SearchBox-form {
    display: none !important;
  }
</style>

<script>
  function loadGoogleTranslateScript(callback) {
    const script = document.createElement('script');
    script.src = 'https://translate.google.com/translate_a/element.js?cb=' + callback;
    script.async = true;
    document.body.appendChild(script);
  }

  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
    }, 'google_translate_element');
  }

  function injectTranslateWidget() {
    const link = document.querySelector('a[href="/google-translate"]');
    if (!link) return setTimeout(injectTranslateWidget, 300);

    const li = link.closest('li');
    const parentUL = li?.closest('ul');
    if (!li || !parentUL) return;

    const newLI = document.createElement('li');
    newLI.className = 'translate-container';
    newLI.setAttribute('role', 'none');

    newLI.innerHTML = `
      <button
        class="translate-trigger"
        role="menuitem"
        aria-label="Translate site"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="google_translate_element"
      >
        <span aria-hidden="true">大A</span>
        <span class="sr-only">Translate site</span>
      </button>
      <div id="google_translate_element_wrapper" hidden aria-hidden="true">
        <div id="google_translate_element"></div>
      </div>
    `;

    parentUL.replaceChild(newLI, li);

    const trigger = newLI.querySelector('.translate-trigger');
    const wrapper = newLI.querySelector('#google_translate_element_wrapper');

    const showWidget = () => {
      wrapper.hidden = false;
      wrapper.setAttribute('aria-hidden', 'false');
      trigger.setAttribute('aria-expanded', 'true');
    };

    const hideWidget = () => {
      wrapper.hidden = true;
      wrapper.setAttribute('aria-hidden', 'true');
      trigger.setAttribute('aria-expanded', 'false');
    };

    trigger.addEventListener('click', (e) => {
      e.preventDefault();
      wrapper.hidden ? showWidget() : hideWidget();
    });

    trigger.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') hideWidget();
    });

    document.addEventListener('click', (e) => {
      if (!newLI.contains(e.target)) hideWidget();
    });

    loadGoogleTranslateScript('googleTranslateElementInit');
  }

  document.addEventListener('DOMContentLoaded', injectTranslateWidget);
</script>

<style>
  .translate-container {
    position: relative;
  }

  .translate-trigger {
    font-size: 20px;
    font-weight: bold;
    color: white;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    outline: none;
  }

  .translate-trigger:hover,
  .translate-trigger:focus-visible {
    background-color: #121d30;
    border-radius: 4px;
  }

  #google_translate_element_wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    white-space: nowrap;
  }

  #google_translate_element_wrapper[hidden] {
    display: none !important;
  }

  /* 🎯 Internal page only (adjust icon and dropdown) */
  .poc-layout .translate-trigger {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  .poc-layout #google_translate_element_wrapper {
    top: calc(100% + 6px);
  }

  /* ✅ Mobile-specific adjustments */
  @media (max-width: 768px) {
    #google_translate_element_wrapper {
      left: auto;
      right: 0;
      min-width: 200px;
      max-width: 90vw;
      white-space: normal;
    }

    .translate-trigger {
      font-size: 18px;
      padding: 0.5rem 0.5rem;
    }

    .poc-layout .translate-trigger {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }

  /* Accessibility and branding cleanup */
  .goog-logo-link,
  .goog-te-gadget span,
  .goog-te-gadget .VIpgJd-ZVi9od-l4eHX-hSRGPd {
    display: none !important;
  }

  .goog-te-banner-frame.skiptranslate,
  #goog-gt-tt {
    display: none !important;
  }

  .skiptranslate {
    font-size: 0 !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>

<style>
  header div[role="search"] {
    display: none !important;
  }
</style>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
/>
<script>
document.addEventListener("DOMContentLoaded", () => {
  function addSearchLink() {
    const translateWrapper = document.querySelector('#page-navigation .translate-container');
    if (!translateWrapper) {
      setTimeout(addSearchLink, 200);
      return;
    }
    if (translateWrapper.querySelector('.search-link')) return;

    const link = document.createElement('a');
    link.href = '/search';
    link.className = 'search-link';
    link.setAttribute('role', 'menuitem');
    link.setAttribute('aria-label', 'Search page');
    link.innerHTML = '<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>';
    translateWrapper.appendChild(link);
  }
  addSearchLink();
});
</script>
<style>/* Ensure both the <li> and <a> fill full navbar height */
#page-navigation .translate-container,
#page-navigation .translate-container .search-link {
  display: inline-block;
  height: 100%;
}

/* Make the <a> fill the vertical space and match nav spacing */
#page-navigation .search-link {
  display: inline-block;
  padding: 0 1.5rem;              /* match horizontal spacing of other items */
  margin: 0;
  line-height: 4.5rem;          /* set to navbar height—adjust if needed */
  height: 100%;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* Hover and focus span full height */
#page-navigation .search-link:hover,
#page-navigation .search-link:focus-visible {
  background-color: #121d30;
}

/* Icon centered properly */
#page-navigation .search-link i {
  font-size: 20px;
  vertical-align: middle;
}

/* Remove unwanted outlines */
#page-navigation .search-link:focus {
  outline: none;
}

.amplify-html-embed-container .container {
    padding: 2rem 0;
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
  const footer = document.querySelector("footer");
  if (!footer) return;

  const container = footer.querySelector(".container.pure-g");
  if (!container) return;

  const columns = container.children;
  if (columns.length < 2) return;

  // Adjust columns to 1/3 width on desktop
  Array.from(columns).forEach(col => {
    col.classList.remove("pure-u-md-1-2");
    col.classList.add("pure-u-md-1-3");
  });

  // Ensure third column exists
  let thirdColumn = container.querySelector(".third-column");
  if (!thirdColumn) {
    thirdColumn = document.createElement("div");
    thirdColumn.className = "pure-u-1 pure-u-md-1-3 third-column";
    container.appendChild(thirdColumn);
  }

  // Add logo
  const leftColumn = columns[0];
  if (leftColumn && !leftColumn.querySelector(".footer-logo")) {
    const logoDiv = document.createElement("div");
    logoDiv.className = "footer-logo";
    logoDiv.style.textAlign = "left";
    logoDiv.style.marginBottom = "1rem";

    const logoImg = document.createElement("img");
    logoImg.src = "https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8e4f1bc1-3ae2-432f-803b-f7d1127fae0c/Metro%20Bar%20Logo-white-lettering.png?ixlib=rb-1.1.0&or=0&w=800&h=800&fit=max&auto=format%2Ccompress&s=2afb12bc9257d246b3d086d4caa4540b";
    logoImg.width = 235;
    logoImg.alt = "Sacramento Metropolitan Fire District";
    logoDiv.appendChild(logoImg);
    leftColumn.insertBefore(logoDiv, leftColumn.firstChild);
  }

  // Insert hours after address
  const addressLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.includes("10545 Armstrong Ave")
  );
  if (addressLine) {
    addressLine.style.fontWeight = "bold";
    addressLine.style.marginBottom = "1rem";

    const hoursLine = document.createElement("div");
    hoursLine.textContent = "Monday – Friday 8:00 AM – 5:00 PM";
    hoursLine.style.marginBottom = "1rem";
    leftColumn.insertBefore(hoursLine, addressLine.nextSibling);
  }

  // Insert fax after phone and label phone number
  const phoneLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.trim().includes("(916) 859-4300")
  );
  if (phoneLine) {
    phoneLine.textContent = "Phone: (916) 859-4300";
    phoneLine.style.fontWeight = "bold";
    phoneLine.style.marginBottom = "1rem";

    const faxLine = document.createElement("div");
    faxLine.textContent = "Fax: (916) 859-3702";
    faxLine.style.fontWeight = "bold";
    faxLine.style.marginBottom = "1rem";
    phoneLine.insertAdjacentElement("afterend", faxLine);
  }

  // Move Powered by + Sign In
  const footerNav = footer.querySelector('nav[aria-label="Footer"]');
  if (footerNav) {
    const listItems = footerNav.querySelectorAll("ul > li");
    const poweredByItem = Array.from(listItems).find(li =>
      li.textContent.includes("Powered by")
    );
    const signInItem = Array.from(listItems).find(li =>
      li.textContent.includes("Sign In")
    );

    if (poweredByItem && signInItem) {
      const infoLine = document.createElement("div");
      infoLine.className = "footer-meta-line";

      const poweredLink = poweredByItem.querySelector("a");
      const signInLink = signInItem.querySelector("a");

      if (poweredLink && signInLink) {
        const separator = document.createElement("span");
        separator.textContent = " | ";
        separator.style.margin = "0 8px";
        separator.style.color = "#ffffff";
        separator.style.whiteSpace = "nowrap";

        infoLine.appendChild(poweredLink);
        infoLine.appendChild(separator);
        infoLine.appendChild(signInLink);
      }
      leftColumn.appendChild(infoLine);
    }

    // Restore styling for main footer nav
    const navList = footerNav.querySelector("ul");
    if (navList) {
      footerNav.style.textAlign = "left";
      navList.style.paddingLeft = "5rem";
      navList.style.listStyle = "none";
      navList.style.display = "flex";
      navList.style.flexDirection = "column";
      navList.style.gap = "12px";

      navList.querySelectorAll("a").forEach(link => {
        link.style.color = "#ffffff";
        link.style.textDecoration = "none";
        link.style.fontWeight = "bold";
        link.style.fontSize = "16px";
      });
    }
  }

  // Move social media
  const socialMediaDiv = footer.querySelector(".social-media");
  if (socialMediaDiv && !thirdColumn.contains(socialMediaDiv)) {
    thirdColumn.appendChild(socialMediaDiv);
    socialMediaDiv.style.display = "flex";
    socialMediaDiv.style.justifyContent = "flex-end";
    socialMediaDiv.style.gap = "12px";
    socialMediaDiv.style.marginTop = "1rem";
    socialMediaDiv.style.color = "#ffffff";
  }

  // Move copyright
  const copyrightLine = Array.from(leftColumn.querySelectorAll("div")).find(div =>
    div.textContent.includes("Copyright")
  );
  if (copyrightLine) {
    copyrightLine.style.marginTop = "1rem";
    copyrightLine.style.fontSize = "14px";
    copyrightLine.style.color = "#ffffff";
    leftColumn.appendChild(copyrightLine);
  }

  // Inject CSS styles (including mobile)
  const style = document.createElement("style");
  style.textContent = `
    footer .container.pure-g {
      font-size: 16px;
      line-height: 1.5;
    }

    .footer-meta-line {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .footer-meta-line a {
      color: #ffffff !important;
      font-size: 14px !important;
      text-decoration: none;
      font-weight: normal;
    }

    .footer-meta-line a:hover {
      text-decoration: underline;
    }

    .third-column .social-media a svg {
      width: 45px;
      height: 45px;
      transition: transform 0.2s ease-in-out;
    }

    .third-column .social-media a:hover svg {
      transform: scale(1.1);
    }

    .third-column .social-media a svg path {
      fill: white !important;
    }

    .footer-logo + div {
      margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
      .container.pure-g {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-right: 0 !important;
        align-items: flex-start !important;
      }

      .container.pure-g > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-right: 0 !important;
      }

      .footer-logo {
        text-align: left !important;
      }

      .footer-meta-line {
        flex-direction: row !important;
        flex-wrap: wrap;
        text-align: left !important;
        justify-content: flex-start !important;
        gap: 8px;
      }

      .footer-meta-line a {
        display: inline !important;
      }

      nav[aria-label="Footer"] {
        text-align: left !important;
      }

      nav[aria-label="Footer"] ul {
        padding-left: 0 !important;
      }

      .third-column .social-media {
        justify-content: flex-start !important;
      }

      .third-column .social-media a {
        padding: 8px;
      }
    }
  `;
  document.head.appendChild(style);
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const oldFooter = document.getElementById("page-footer");

    const footerNav = oldFooter.querySelector('.footer-links');
    const addressInfo = oldFooter.querySelector('.col-md-6:first-child .footer-address');
    const telephoneNumber = oldFooter.querySelector('.col-md-6:first-child .footer-phone');
    const copyrightSection = oldFooter.querySelector('.col-md-6:first-child .footer-copyright');
    const transparencySection = oldFooter.querySelector('.col-md-6:last-child .footer-static-transparency');
    const streamlineSignInSection = oldFooter.querySelector('.col-md-6:last-child .footer-streamline:not(.footer-static-transparency)');
    const socialLinks = oldFooter.querySelector('.social-footer-streamline');

    // Inject CSS
    const style = document.createElement('style');
    style.textContent = `
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

        .footer-clean {
            padding: 40px 0;
            font-family: 'Lato', sans-serif !important;
        }

        .footer-clean .footer-col {
            padding: 20px;
        }

        .footer-col-1 {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .footer-col-1 > * {
            margin-bottom: 14px;
        }

        .footer-col-2 {
            flex: 0 0 30%;
            max-width: 30%;
        }

        .footer-col-3 {
            flex: 0 0 20%;
            max-width: 20%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
        }

        .footer-clean a {
            color: #fff !important;
            text-decoration: none;
        }

        .footer-clean a:hover {
            text-decoration: underline;
        }

        .footer-links,
        .footer-links ul,
        .footer-links li {
            list-style: none !important;
            margin: 0;
            padding: 0;
            background: none !important;
        }

        .footer-logo-container {
            margin-bottom: 20px;
        }

        .footer-col-3-social,
        .social-footer-streamline {
            display: flex;
            gap: 10px;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
        }

        .footer-col-3-social a svg {
            width: 45px;
            height: 45px;
            transition: transform 0.3s ease;
        }

        .footer-col-3-social a:hover svg {
            transform: scale(1.2);
        }

        .footer-powered {
            font-size: 14px;
            margin-top: 10px;
        }

        .footer-copyright {
            font-size: 14px;
            margin-top: 5px;
        }

        .footer-col-1-address,
        .footer-phone,
        .footer-fax {
            font-weight: 700;
        }

        .footer-col-2 ul,
        .footer-col-2-resources,
        .footer-accessibility-link,
        .footer-col-1-transparency {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .footer-col-2 ul li,
        .footer-accessibility-link li,
        .footer-col-1-transparency li {
            font-weight: 700;
            margin-bottom: 12px;
        }

        .footer-col-2 ul li a,
        .footer-accessibility-link li a,
        .footer-col-1-transparency li a {
            color: #fff !important;
            text-decoration: none;
            font-weight: 700;
            display: inline-block;
        }

        .footer-col-2 ul li a:hover,
        .footer-accessibility-link li a:hover,
        .footer-col-1-transparency li a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .footer-col {
                flex: 0 0 100%;
                max-width: 100%;
                text-align: center;
            }

            .footer-col-3 {
                justify-content: center;
                margin-top: 20px;
            }
        }
    `;
    document.head.appendChild(style);

    // Build new footer
    const newFooter = document.createElement('footer');
    newFooter.className = 'footer-clean clearfix';
    newFooter.innerHTML = `
        <div class="container">
            <div class="row d-flex" style="display: flex; flex-wrap: wrap;">
                <!-- Footer Column 1 -->
                <div class="footer-col footer-col-1 col-sm-4">
                    <div class="footer-logo-container">
                        <img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8e4f1bc1-3ae2-432f-803b-f7d1127fae0c/Metro%20Bar%20Logo-white-lettering.png?ixlib=rb-1.1.0&or=0&w=800&h=800&fit=max&auto=format%2Ccompress&s=2afb12bc9257d246b3d086d4caa4540b" width="235" alt="SacMetro Fire Logo">
                    </div>
                    <div class="footer-col-1-address">10545 Armstrong Ave., Suite 200, Mather, CA, 958655</div>
                    <p class="footer-business-hours">Monday – Friday 8:00 AM – 5:00 PM</p>
                    <p class="footer-phone">Phone: (916) 859-4300</p>
                    <p class="footer-fax">Fax: (916) 859-3702</p>
                    <div class="footer-col-1-login"></div>
                    <div class="footer-col-1-content">
                        <div class="footer-powered">Powered by Streamline   |   <a href="#">Sign In</a></div>
                        <div class="footer-copyright">Copyright © 2025 Sacramento Metropolitan Fire District</div>
                    </div>
                </div>

                <!-- Footer Column 2 -->
                <div class="footer-col footer-col-2 col-sm-4">
                    <ul class="footer-col-2-resources"></ul>
                    <ul class="footer-accessibility-link"></ul>
                    <ul class="footer-col-1-transparency"></ul>
                </div>

                <!-- Footer Column 3 -->
                <div class="footer-col footer-col-3 col-sm-4">
                    <div class="footer-col-3-social"></div>
                </div>
            </div>
        </div>
    `;
    oldFooter.parentNode.insertBefore(newFooter, oldFooter.nextSibling);

    // Target new footer areas
    const column2Resources = newFooter.querySelector('.footer-col-2-resources');
    const column1Transparency = newFooter.querySelector('.footer-col-1-transparency');
    const accessibilityLinkContainer = newFooter.querySelector('.footer-accessibility-link');
    const column3Social = newFooter.querySelector('.footer-col-3-social');

    // Move nav links
    if (footerNav) {
        const listItems = footerNav.querySelectorAll('li');
        listItems.forEach(item => {
            item.classList.add('footer-link-item');
            column2Resources.appendChild(item);
        });
    }

    // Insert Website Accessibility Statement from live page
    const accessibilityOriginal = [...document.querySelectorAll('a')].find(a =>
        a.textContent.toLowerCase().includes('accessibility statement')
    );
    if (accessibilityOriginal && !accessibilityLinkContainer.hasChildNodes()) {
        const accessClone = accessibilityOriginal.cloneNode(true); // Clone just the <a>
        const li = document.createElement('li');
        li.className = 'footer-link-item';
        li.appendChild(accessClone);
        accessibilityLinkContainer.appendChild(li);

        // Hide the original link
        accessibilityOriginal.style.display = 'none';
    }

    // Move Transparency link
    if (transparencySection) {
        const link = transparencySection.querySelector('a');
        if (link) {
            link.textContent = "Transparency";
            const li = document.createElement('li');
            li.className = 'footer-link-item';
            li.appendChild(link);
            column1Transparency.appendChild(li);
        }
    }

    // Add social icons
    if (socialLinks) {
        column3Social.appendChild(socialLinks);
    }

    // Hardcode Sign In href
    const signInTarget = newFooter.querySelector('.footer-powered a');
    if (signInTarget) {
        signInTarget.href = "/users/sign_in?destination=%2Fhomepage";
    }

    // Remove the old footer
    oldFooter.remove();
});
</script>