ferst-core 0.7.4 → 0.7.6

package/components/SiteFooter.astro

@@ -1,270 +1,325 @@
----
-/**
- * Site-wide footer: site name, a one-line description, a Facebook /
- * Contact link row, then a legal-nav + copyright strip. Extracted from
- * Base.astro so changing footer links is a JSON edit, not a layout edit.
- *
- * Split masthead at 48em+ (768px, matching --bp-tablet): name/description
- * left, Facebook/Contact right, one row — below that it's a centred stack.
- * Fills the page's width deliberately on desktop instead of sitting as a
- * small centred island inside a full-bleed band.
- *
- * Follows the page's light/dark theme like every other component. Colour
- * rule throughout: accent links/labels are `--accent` in light mode and
- * `--gold` in dark mode, never the reverse — `--gold` measures only
- * ~1.75:1 against the light-mode footer background (fails WCAG AA badly),
- * it only reads well on the dark background. Checked with the WCAG 2.1
- * relative-luminance formula before writing the CSS below, not after.
- */
-import type { NavLink } from '../content/schemas';
-
-interface Props {
-  facebookUrl: string;
-  footerLinks: NavLink[];
-  footerClass?: string;
-  /** Brand / site name shown in the footer masthead. */
-  shortName: string;
-  /** Optional one-line tagline under the brand. Client-provided; omitted if blank. */
-  tagline?: string;
-}
-
-const { facebookUrl, footerLinks, footerClass, shortName, tagline } = Astro.props;
-const year = new Date().getFullYear();
----
-
-<footer class:list={['site-footer', footerClass]}>
-  <div class="footer-top">
-    <div class="footer-row">
-      <div class="footer-copyblock">
-        <p class="footer-brand">{shortName}</p>
-        {tagline && <p class="footer-blurb">{tagline}</p>}
-      </div>
-      <div class="footer-social">
-        {facebookUrl && (
-          <>
-            <a class="footer-social__link" href={facebookUrl} target="_blank" rel="noopener noreferrer">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <path d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987H7.898V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path>
-              </svg>
-              Facebook
-            </a>
-            <span class="footer-social__divider" aria-hidden="true"></span>
-          </>
-        )}
-        <a class="footer-social__link" href="/contact/">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
-          Contact
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <div class="footer-bottom">
-    <nav class="footer-nav" aria-label="Footer navigation">
-      {footerLinks.map((link) => (
-        <a href={link.href} set:html={link.label} />
-      ))}
-      <button type="button" id="footer-cookie-preferences">Cookie preferences</button>
-    </nav>
-    <p class="footer-copy">&copy; {year} All rights reserved.</p>
-  </div>
-</footer>
-
-<script>
-  document.getElementById('footer-cookie-preferences')?.addEventListener('click', () => {
-    document.dispatchEvent(new CustomEvent('open-cookie-preferences'));
-  });
-</script>
-
-<style is:global>
-  /*
-   * Every rule below is qualified under `.site-footer` on purpose, even
-   * where a bare class would normally do. Base.astro's global stylesheet
-   * carries `[data-theme="dark"] p { color: #C8D4C2 }` and
-   * `[data-theme="dark"] a { color: #E8A84A }` — both specificity (0,1,1).
-   * A bare `.footer-brand { color: ... }` is only (0,1,0) and loses that
-   * fight in dark mode. Prefixing with `.site-footer` (0,2,0/1) wins
-   * outright instead of depending on stylesheet order.
-   */
-  .site-footer {
-    font-size: 0.85rem;
-    background: var(--bg-tag);
-    color: var(--fg);
-  }
-  [data-theme="dark"] .site-footer {
-    background: var(--dark-bg);
-    color: var(--text-light);
-  }
-  .site-footer a {
-    text-decoration: none;
-  }
-  .site-footer a:focus-visible,
-  .site-footer button:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-    border-radius: 4px;
-  }
-
-  /* ── Top: title, description, social row ──
-     Below 48em (768px): centred stack, same as before. At 768px+: a split
-     masthead — name/description left, Facebook/Contact right — so the
-     top section uses the page's width instead of sitting as a small
-     centred island inside it. */
-  .site-footer .footer-top {
-    max-width: 72rem;
-    margin-inline: auto;
-    padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem clamp(1.5rem, 3vw, 2rem);
-  }
-  .site-footer .footer-row {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    text-align: center;
-  }
-  .site-footer .footer-copyblock {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .site-footer .footer-brand {
-    margin: 0;
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: 1.15rem;
-    line-height: 1.3;
-    color: inherit;
-  }
-  .site-footer .footer-blurb {
-    margin: 0;
-    font-size: 0.85rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--muted);
-  }
-  .site-footer .footer-social {
-    display: flex;
-    align-items: center;
-    gap: 1.25rem;
-    margin-top: 0.35rem;
-  }
-  @media (min-width: 48em) {
-    .site-footer .footer-row {
-      flex-direction: row;
-      justify-content: space-between;
-      text-align: left;
-    }
-    .site-footer .footer-social {
-      margin-top: 0;
-    }
-  }
-  .site-footer .footer-social__link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    min-height: 44px;
-    font-size: 0.92rem;
-    font-weight: 600;
-    color: var(--accent);
-  }
-  [data-theme="dark"] .site-footer .footer-social__link {
-    color: var(--gold);
-  }
-  .site-footer .footer-social__divider {
-    width: 1px;
-    height: 1.4rem;
-    background: var(--border);
-  }
-
-  /* ── Legal nav + copyright ── */
-  .site-footer .footer-bottom {
-    border-top: 1px solid var(--border);
-    padding: 1.1rem clamp(1.25rem, 4vw, 2.25rem);
-    max-width: 72rem;
-    margin-inline: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.6rem 1.5rem;
-  }
-  /* Tight gap: each link carries its own inline padding (below), so the visible
-     hit target is a clear region *centred on its label* — no wide dead gap between
-     labels where a hover lands on nothing (and the browser keeps showing the
-     previous link's URL, which reads as an off-by-one). The negative inline margin
-     cancels the first/last item's padding so the row still edge-aligns. */
-  .site-footer .footer-nav {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.15rem 0.15rem;
-    margin-inline: -0.55rem;
-  }
-  .site-footer .footer-nav a,
-  .site-footer .footer-nav button {
-    min-height: 44px;
-    display: inline-flex;
-    align-items: center;
-    font-family: inherit;
-    font-size: 0.68rem;
-    font-weight: 400;
-    letter-spacing: 0.02em;
-    color: var(--accent);
-    background: none;
-    border: none;
-    border-radius: var(--radius-sm, 6px);
-    padding: 0 0.55rem;
-    cursor: pointer;
-    text-decoration: none;
-    transition: background 0.15s ease, color 0.15s ease;
-  }
-  /* Visible hover/focus affordance: makes each link's boundary unmistakable, so
-     it's always clear which one you're on. */
-  .site-footer .footer-nav a:hover,
-  .site-footer .footer-nav button:hover,
-  .site-footer .footer-nav a:focus-visible,
-  .site-footer .footer-nav button:focus-visible {
-    background: color-mix(in srgb, var(--accent) 12%, transparent);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-  }
-  [data-theme="dark"] .site-footer .footer-nav a,
-  [data-theme="dark"] .site-footer .footer-nav button {
-    color: var(--gold);
-  }
-  [data-theme="dark"] .site-footer .footer-nav a:hover,
-  [data-theme="dark"] .site-footer .footer-nav button:hover,
-  [data-theme="dark"] .site-footer .footer-nav a:focus-visible,
-  [data-theme="dark"] .site-footer .footer-nav button:focus-visible {
-    background: color-mix(in srgb, var(--gold) 16%, transparent);
-  }
-  .site-footer .footer-copy {
-    margin: 0;
-    font-family: var(--font-body);
-    font-size: 0.68rem;
-    font-weight: 400;
-    color: var(--muted);
-  }
-
-  /* 48em / 768px, matching --bp-tablet in theme.css — the bottom bar's
-     row layout (legal nav | copyright, space-between) gets cramped once
-     the nav wraps below it, so it stacks and centres instead. */
-  @media (min-width: 48em) {
-    .site-footer .footer-bottom {
-      flex-direction: row;
-      justify-content: space-between;
-      text-align: left;
-    }
-    .site-footer .footer-nav {
-      justify-content: flex-start;
-    }
-  }
-
-  @media (max-width: 22.5em) {
-    .site-footer .footer-social {
-      gap: 1rem;
-    }
-  }
-</style>
+---
+/**
+ * Site-wide footer: site name, a one-line description, a Facebook /
+ * Contact link row, then a legal-nav + copyright strip. Extracted from
+ * Base.astro so changing footer links is a JSON edit, not a layout edit.
+ *
+ * Split masthead at 48em+ (768px, matching --bp-tablet): name/description
+ * left, Facebook/Contact right, one row — below that it's a centred stack.
+ * Fills the page's width deliberately on desktop instead of sitting as a
+ * small centred island inside a full-bleed band.
+ *
+ * Follows the page's light/dark theme like every other component. Colour
+ * rule throughout: accent links/labels are `--accent` in light mode and
+ * `--gold` in dark mode, never the reverse — `--gold` measures only
+ * ~1.75:1 against the light-mode footer background (fails WCAG AA badly),
+ * it only reads well on the dark background. Checked with the WCAG 2.1
+ * relative-luminance formula before writing the CSS below, not after.
+ */
+import type { NavLink } from '../content/schemas';
+
+interface Props {
+  facebookUrl: string;
+  footerLinks: NavLink[];
+  footerClass?: string;
+  /** Brand / site name shown in the footer masthead. */
+  shortName: string;
+  /** Optional one-line tagline under the brand. Client-provided; omitted if blank. */
+  tagline?: string;
+  /** The site's call-to-action (navbarSettings.cta), shown beside Facebook; null hides it. */
+  cta?: { label: string; href: string } | null;
+  /** Headed columns of reference links (policies, documents, forms). */
+  groups?: Array<{ heading: string; links: NavLink[] }>;
+}
+
+const { facebookUrl, footerLinks, footerClass, shortName, tagline, cta = { label: 'Contact', href: '/contact/' }, groups = [] } = Astro.props;
+const year = new Date().getFullYear();
+---
+
+<footer class:list={['site-footer', footerClass]}>
+  <div class="footer-top">
+    <div class="footer-row">
+      <div class="footer-copyblock">
+        <p class="footer-brand">{shortName}</p>
+        {tagline && <p class="footer-blurb">{tagline}</p>}
+      </div>
+      <div class="footer-social">
+        {facebookUrl && (
+          <>
+            <a class="footer-social__link" href={facebookUrl} target="_blank" rel="noopener noreferrer">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987H7.898V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path>
+              </svg>
+              Facebook
+            </a>
+            {cta && <span class="footer-social__divider" aria-hidden="true"></span>}
+          </>
+        )}
+        {cta && (
+          <a class="footer-social__link" href={cta.href}>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            {cta.label}
+          </a>
+        )}
+      </div>
+    </div>
+  </div>
+
+  {groups.length > 0 && (
+    <nav class="footer-groups" aria-label="Site information">
+      {groups.map((g) => (
+        <div class="footer-group">
+          <h2 class="footer-group__title">{g.heading}</h2>
+          <ul>
+            {g.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  )}
+
+  <div class="footer-bottom">
+    <nav class="footer-nav" aria-label="Footer navigation">
+      {footerLinks.map((link) => (
+        <a href={link.href} set:html={link.label} />
+      ))}
+      <button type="button" id="footer-cookie-preferences">Cookie preferences</button>
+    </nav>
+    <p class="footer-copy">&copy; {year} All rights reserved.</p>
+  </div>
+</footer>
+
+<script>
+  document.getElementById('footer-cookie-preferences')?.addEventListener('click', () => {
+    document.dispatchEvent(new CustomEvent('open-cookie-preferences'));
+  });
+</script>
+
+<style is:global>
+  /*
+   * Every rule below is qualified under `.site-footer` on purpose, even
+   * where a bare class would normally do. Base.astro's global stylesheet
+   * carries `[data-theme="dark"] p { color: #C8D4C2 }` and
+   * `[data-theme="dark"] a { color: #E8A84A }` — both specificity (0,1,1).
+   * A bare `.footer-brand { color: ... }` is only (0,1,0) and loses that
+   * fight in dark mode. Prefixing with `.site-footer` (0,2,0/1) wins
+   * outright instead of depending on stylesheet order.
+   */
+  .site-footer {
+    font-size: 0.85rem;
+    background: var(--bg-tag);
+    color: var(--fg);
+  }
+  [data-theme="dark"] .site-footer {
+    background: var(--dark-bg);
+    color: var(--text-light);
+  }
+  .site-footer a {
+    text-decoration: none;
+  }
+  .site-footer a:focus-visible,
+  .site-footer button:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* ── Top: title, description, social row ──
+     Below 48em (768px): centred stack, same as before. At 768px+: a split
+     masthead — name/description left, Facebook/Contact right — so the
+     top section uses the page's width instead of sitting as a small
+     centred island inside it. */
+  .site-footer .footer-top {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem clamp(1.5rem, 3vw, 2rem);
+  }
+  .site-footer .footer-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: center;
+  }
+  .site-footer .footer-copyblock {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .site-footer .footer-brand {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: 1.15rem;
+    line-height: 1.3;
+    color: inherit;
+  }
+  .site-footer .footer-blurb {
+    margin: 0;
+    font-size: 0.85rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--muted);
+  }
+  .site-footer .footer-social {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    margin-top: 0.35rem;
+  }
+  @media (min-width: 48em) {
+    .site-footer .footer-row {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+    }
+    .site-footer .footer-social {
+      margin-top: 0;
+    }
+  }
+  .site-footer .footer-social__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 44px;
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--accent);
+  }
+  [data-theme="dark"] .site-footer .footer-social__link {
+    color: var(--gold);
+  }
+  .site-footer .footer-social__divider {
+    width: 1px;
+    height: 1.4rem;
+    background: var(--border);
+  }
+
+  /* ── Legal nav + copyright ── */
+  .site-footer .footer-bottom {
+    border-top: 1px solid var(--border);
+    padding: 1.1rem clamp(1.25rem, 4vw, 2.25rem);
+    max-width: 72rem;
+    margin-inline: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.6rem 1.5rem;
+  }
+  /* Tight gap: each link carries its own inline padding (below), so the visible
+     hit target is a clear region *centred on its label* — no wide dead gap between
+     labels where a hover lands on nothing (and the browser keeps showing the
+     previous link's URL, which reads as an off-by-one). The negative inline margin
+     cancels the first/last item's padding so the row still edge-aligns. */
+  .site-footer .footer-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.15rem 0.15rem;
+    margin-inline: -0.55rem;
+  }
+  .site-footer .footer-nav a,
+  .site-footer .footer-nav button {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    font-family: inherit;
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.02em;
+    color: var(--accent);
+    background: none;
+    border: none;
+    border-radius: var(--radius-sm, 6px);
+    padding: 0 0.55rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+  /* Visible hover/focus affordance: makes each link's boundary unmistakable, so
+     it's always clear which one you're on. */
+  .site-footer .footer-nav a:hover,
+  .site-footer .footer-nav button:hover,
+  .site-footer .footer-nav a:focus-visible,
+  .site-footer .footer-nav button:focus-visible {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  [data-theme="dark"] .site-footer .footer-nav a,
+  [data-theme="dark"] .site-footer .footer-nav button {
+    color: var(--gold);
+  }
+  [data-theme="dark"] .site-footer .footer-nav a:hover,
+  [data-theme="dark"] .site-footer .footer-nav button:hover,
+  [data-theme="dark"] .site-footer .footer-nav a:focus-visible,
+  [data-theme="dark"] .site-footer .footer-nav button:focus-visible {
+    background: color-mix(in srgb, var(--gold) 16%, transparent);
+  }
+  .site-footer .footer-copy {
+    margin: 0;
+    font-family: var(--font-body);
+    font-size: 0.68rem;
+    font-weight: 400;
+    color: var(--muted);
+  }
+
+  /* 48em / 768px, matching --bp-tablet in theme.css — the bottom bar's
+     row layout (legal nav | copyright, space-between) gets cramped once
+     the nav wraps below it, so it stacks and centres instead. */
+  @media (min-width: 48em) {
+    .site-footer .footer-bottom {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+    }
+    .site-footer .footer-nav {
+      justify-content: flex-start;
+    }
+  }
+
+  @media (max-width: 22.5em) {
+    .site-footer .footer-social {
+      gap: 1rem;
+    }
+  }
+
+  /* Headed columns of reference links: policies, documents, forms. */
+  .site-footer .footer-groups {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    gap: 1.5rem 2rem;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 0.5rem;
+  }
+  .site-footer .footer-group__title {
+    margin: 0 0 0.6rem;
+    font-family: var(--font-heading);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-footer);
+    opacity: 0.8;
+  }
+  .site-footer .footer-group ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.45rem;
+  }
+  .site-footer .footer-group a {
+    color: var(--text-footer-link);
+    text-decoration: none;
+    font-size: 0.9375rem;
+  }
+  .site-footer .footer-group a:hover,
+  .site-footer .footer-group a:focus-visible {
+    text-decoration: underline;
+  }
+</style>