/* ══ SHARED SITE FOOTER ══════════════════════════════════════════════════
   One footer, identical on every page. This is index.html's original footer,
   unchanged in appearance -- same type, same colours, same spacing, same five
   links in the same order -- made portable so the other 28 pages can carry it.

   Everything is prefixed `bof-` and every value is written out in full rather
   than read from a CSS variable. That is deliberate: this has to render on
   index.html, the blog (which loads blog.css and its own palette),
   memorial.html, 404.html and the portal screens, and those share no variable
   set. A footer inheriting var(--warm-white) from a page that never declared
   it comes out transparent, and it fails silently.

   Same reason the type is pinned rather than inherited. The original set no
   font-family or weight and simply took `Jost 300` from index.html's body;
   dropped onto a page with a different body font, that footer changes
   typeface. The literals below are exactly what index.html's body and :root
   have always resolved to:
     --warm-white    #f2f4f9      --muted          #7a8a9e
     --charcoal      #1c2333      --light-muted    #a8b4c4
     --sapphire-mid  #2a5298      --sapphire-light #4a72b8
     --border-silver rgba(184,196,212,0.25)

   No <nav> element anywhere in the markup. index.html, create.html, 404.html
   and blog.css all carry a bare `nav { position: fixed; top: 0 }` rule, so a
   <nav> in here is yanked out of the footer and pinned over the site header.
   Plain divs, deliberately. */

.bof {
  background: #f2f4f9;
  border-top: 1px solid rgba(184, 196, 212, 0.25);
  padding: 74px 80px 46px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  /* index.html, create.html and loginportal.html each still carry a bare
     `footer { ... }` rule -- loginportal's sets text-align:center, which would
     otherwise bleed in. Anything those can reach is restated here rather than
     left to whichever page the component lands on. */
  text-align: left;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}
.bof *, .bof *::before, .bof *::after { box-sizing: border-box; }

.bof-inner { max-width: 1260px; margin: 0 auto; }

.bof-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(184, 196, 212, 0.25);
  margin-bottom: 32px;
}

/* ── wordmark ── */
.bof-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: 0 0 auto; }
.bof-mark { width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; position: relative; flex: 0 0 auto; }
.bof-ring, .bof-ring-o, .bof-ring-oo { position: absolute; border-radius: 50%; }
.bof-ring    { inset: 0;     border: 1px solid #4a72b8;                 animation: bofBreathe 7s ease-in-out infinite; }
.bof-ring-o  { inset: -5px;  border: 1px solid rgba(74, 114, 184, 0.12); animation: bofBreathe 7s ease-in-out infinite 1.2s; }
.bof-ring-oo { inset: -10px; border: 1px solid rgba(74, 114, 184, 0.05); animation: bofBreathe 7s ease-in-out infinite 2.2s; }
.bof-star { color: #2a5298; font-size: 12px; position: relative; z-index: 1;
  line-height: 1; filter: drop-shadow(0 0 4px rgba(42, 82, 152, 0.4));
  animation: bofTwinkle 5s ease-in-out infinite; }
.bof-wordwrap { display: flex; flex-direction: column; }
.bof-name { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; color: #1c2333; }
.bof-name span { color: #2a5298; }
.bof-sub { font-size: 7px; letter-spacing: 0.4em; text-transform: uppercase;
  color: #7a8a9e; margin-top: 2px; }

/* Keyframes are renamed rather than reused: index.html defines logoBreathe and
   starTwinkle, the blog and portal do not, and a name collision would leave
   whichever loaded last driving both the header logo and this one. */
@keyframes bofBreathe {
  0%, 100% { opacity: 0.35; transform: scale(1); box-shadow: none; }
  50%      { opacity: 0.8;  transform: scale(1.08); box-shadow: 0 0 12px rgba(42,82,152,0.1); }
}
@keyframes bofTwinkle {
  0%   { opacity: 0.55; filter: drop-shadow(0 0 1px rgba(42,82,152,0.15)); }
  15%  { opacity: 1;    filter: drop-shadow(0 0 8px rgba(180,196,220,0.85)) drop-shadow(0 0 16px rgba(42,82,152,0.35)); }
  25%  { opacity: 0.55; filter: drop-shadow(0 0 1px rgba(42,82,152,0.15)); }
  100% { opacity: 0.55; filter: drop-shadow(0 0 1px rgba(42,82,152,0.15)); }
}
@media (prefers-reduced-motion: reduce) {
  .bof-ring, .bof-ring-o, .bof-ring-oo, .bof-star { animation: none; }
}

/* ── links ── */
/* 40px gaps as the original. flex-wrap is the one addition: it changes nothing
   at any width where the row already fits, and stops the footer dragging the
   page sideways where it doesn't. */
.bof-links { display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; }
.bof-links a { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: #7a8a9e;
  text-decoration: none; transition: color 0.3s; }
.bof-links a:hover { color: #2a5298; }
.bof-links a:focus-visible { outline: 2px solid #4a72b8; outline-offset: 3px; }
/* -- social row, under the wordmark on the left. Added 2026-09-04. -- */
.bof-social { display: flex; gap: 12px; align-items: center; flex: 0 0 auto; }
.bof-soc { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(184,196,212,0.25);
  display: flex; align-items: center; justify-content: center; color: #7a8a9e; transition: all 0.3s; text-decoration: none; }
.bof-soc:hover { color: #2a5298; border-color: #4a72b8; transform: translateY(-2px); }
.bof-soc:focus-visible { outline: 2px solid #4a72b8; outline-offset: 3px; }
.bof-soc svg { width: 17px; height: 17px; display: block; }


/* ── bottom rule ── */
.bof-bottom { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; }
.bof-copy { font-size: 10.5px; color: #a8b4c4; letter-spacing: 0.06em; margin: 0;
  font-family: 'Jost', sans-serif; font-weight: 300; }
.bof-made { font-size: 10.5px; color: #4a72b8; letter-spacing: 0.15em; margin: 0;
  font-family: 'Jost', sans-serif; font-weight: 300; }

/* A line some pages carry above the footer proper -- the memorial pages'
   attribution and verse. Kept as its own element so those pages stay
   themselves while still ending in the same footer as everywhere else. */
.bof-note { text-align: center; padding: 0 20px 34px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 15px; color: #7a8a9e; line-height: 1.8; }
.bof-note a { color: #2a5298; text-decoration: none; }
.bof-note a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .bof { padding: 52px 24px 36px; }
  .bof-top { flex-direction: column; align-items: center; text-align: center;
    padding-bottom: 32px; margin-bottom: 24px; gap: 26px; }
  .bof-links { justify-content: center; gap: 14px 26px; }
  .bof-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
}

@media print { .bof { display: none; } }