Add footer-legal block for fortinet.com's second (gray) footer section

blocks/footer-legal/footer-legal.css

@@ -0,0 +1,109 @@
+/* footer-legal — fortinet.com's second footer section (light gray), below
+   the main black footer: sponsor/partner badges, copyright, an extended
+   legal-links row, a tagline, and "Also of Interest" links. Measured
+   directly from fortinet.com's own .footer-row.copyrights.
+
+   This block's own .section wrapper inherits the generic "footer .footer >
+   div" rule from footer.css (1240px max-width, centered, 48/24/32px
+   padding) — right for the black footer's columns, but this section is
+   full-bleed light gray on the source, not centered on white. Overridden
+   below via the auto-generated {blockname}-container class, with the same
+   1240px centering re-applied one level in on .footer-legal itself instead. */
+footer .footer-legal-container {
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  background-color: #e6e6e6;
+}
+
+footer .footer-legal {
+  max-width: var(--content-max-width, 1240px);
+  margin: 0 auto;
+  padding: 30px 24px 24px;
+  color: #000;
+  font-size: 15px;
+}
+
+footer .footer-legal > div {
+  margin: 0 0 20px;
+}
+
+/* Sponsor/partner badge row */
+footer .footer-legal-badges ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 24px 32px;
+  margin: 0 0 30px;
+  padding: 0;
+  list-style: none;
+}
+
+footer .footer-legal-badges li {
+  display: flex;
+  align-items: center;
+}
+
+/* The wordmark (first badge) sits well apart from the sponsor-badge cluster
+   after it on the source (a ~200px gap vs ~15-30px between the sponsor
+   badges themselves) — margin-right:auto pushes just this one item away
+   from the rest, which then keep their own small shared gap from the ul
+   above, rather than every item getting the same wide gap. */
+footer .footer-legal-badges li:first-child {
+  margin-right: auto;
+}
+
+/* Fortinet wordmark (first badge) renders noticeably larger than the
+   sponsor badges after it on the source (194x22 vs ~120x35) — img itself
+   carries the real aspect ratio, height just caps it to match. */
+footer .footer-legal-badges img {
+  display: block;
+  height: 35px;
+  width: auto;
+}
+
+footer .footer-legal-badges li:first-child img {
+  height: 22px;
+}
+
+footer .footer-legal-copyright {
+  margin-bottom: 12px;
+}
+
+/* Legal links row — plain black text/links separated by literal " | "
+   typed in the source doc (matching the pipe-separated convention already
+   used for the "Terms of Services / Privacy Policy" line and elsewhere on
+   this page), not list markup — an author can add/remove links without
+   touching this block's code. */
+footer .footer-legal-links {
+  margin-bottom: 20px;
+}
+
+footer .footer-legal-copyright,
+footer .footer-legal-links,
+footer .footer-legal-tagline {
+  color: #000;
+}
+
+footer .footer-legal a {
+  color: #000;
+}
+
+footer .footer-legal-tagline {
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+footer .footer-legal-also-of-interest {
+  font-size: 13px;
+  color: #555;
+}
+
+footer .footer-legal-also-of-interest-label {
+  font-weight: 700;
+  margin-right: 4px;
+}
+
+footer .footer-legal-also-of-interest a {
+  color: #555;
+}

blocks/footer-legal/footer-legal.js

@@ -0,0 +1,69 @@
+import { moveInstrumentation } from '../../scripts/scripts.js';
+
+/**
+ * fortinet.com's footer has a second, visually distinct section below the
+ * main black footer (light gray, .footer-row.copyrights on the source):
+ * a row of sponsorship badge images, a copyright line, an extended legal
+ * links row, a tagline, and an "Also of Interest" links row. Authored here
+ * as one row per part (in that order) rather than needing named markers —
+ * each row is classified by what it actually contains (images vs. text
+ * starting with "Copyright" vs. "Also of Interest" vs. a plain link row vs.
+ * plain text), so the author doesn't need to remember a rigid row order.
+ * @param {Element} block The footer-legal block element
+ */
+export default function decorate(block) {
+  [...block.children].forEach((row) => {
+    // Rows may be authored as a single cell (row > div > content) or with
+    // content directly in the row — flatten either into the row itself so
+    // classification below doesn't need to care which.
+    const cells = [...row.children];
+    if (cells.length === 1 && cells[0].tagName === 'DIV') {
+      const cell = cells[0];
+      moveInstrumentation(cell, row);
+      while (cell.firstElementChild) row.append(cell.firstElementChild);
+      cell.remove();
+    }
+
+    const text = row.textContent.trim();
+    const images = row.querySelectorAll('picture, img');
+    const links = row.querySelectorAll('a');
+
+    if (images.length && links.length) {
+      row.classList.add('footer-legal-badges');
+      // Each linked badge becomes its own list item, for flex/gap layout
+      // and so screen readers announce a count ("list of 7 items") instead
+      // of a wall of unrelated links.
+      const ul = document.createElement('ul');
+      row.querySelectorAll('p').forEach((p) => {
+        const li = document.createElement('li');
+        moveInstrumentation(p, li);
+        while (p.firstChild) li.append(p.firstChild);
+        ul.append(li);
+        p.remove();
+      });
+      row.append(ul);
+    } else if (/^Copyright/i.test(text)) {
+      row.classList.add('footer-legal-copyright');
+    } else if (/Also of Interest/i.test(text)) {
+      row.classList.add('footer-legal-also-of-interest');
+      // Split the leading label ("Also of Interest:") from the links after
+      // it so each can be styled on its own — the label is bold/dimmer on
+      // the source, not just plain running text.
+      const firstNode = row.firstChild;
+      if (firstNode?.nodeType === Node.TEXT_NODE) {
+        const [label, ...rest] = firstNode.textContent.split(':');
+        if (rest.length) {
+          const labelSpan = document.createElement('span');
+          labelSpan.className = 'footer-legal-also-of-interest-label';
+          labelSpan.textContent = `${label}:`;
+          firstNode.textContent = rest.join(':');
+          row.prepend(labelSpan);
+        }
+      }
+    } else if (links.length >= 2) {
+      row.classList.add('footer-legal-links');
+    } else {
+      row.classList.add('footer-legal-tagline');
+    }
+  });
+}