<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;

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

  // Step 2: Ensure the 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);
  }

  // Step 3: Insert logo into the first (left) column if not already there
  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);
  }

  // Step 4: Move social-media section to third column and style
const socialMediaDiv = footer.querySelector(".social-media");
if (socialMediaDiv && !thirdColumn.contains(socialMediaDiv)) {
  thirdColumn.appendChild(socialMediaDiv);

  // Format and color it white
  socialMediaDiv.style.display = "flex";
  socialMediaDiv.style.justifyContent = "flex-end";
  socialMediaDiv.style.gap = "12px";
  socialMediaDiv.style.marginTop = "1rem";
  socialMediaDiv.style.color = "#ffffff"; // Makes icons white
} else {
  console.warn("❌ .social-media div not found or already placed.");
}

// Make social media SVG icons white
const style = document.createElement("style");
style.textContent = `
  .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;
  }
`;
document.head.appendChild(style);
});
</script>