/* ================================================================
   FOOTER — shown at the bottom of every page. Deliberately the same
   height as the header bar (both read var(--topbar-height), so they
   can never drift apart if that value ever changes) — logo on one
   side, contact + copyright on the other, single row, no stacking.
   ================================================================ */

/* Background/text use the same --shell-* tokens as the top bar (see
   base.css) — white bar with dark text in day mode, dark navy with
   white text in night mode. */
.site-footer {
  background: var(--shell-bg);
  color: var(--shell-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-inner {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Sits on two <img> tags (.brand-logo-light / .brand-logo-dark, from
   base.css) that swap which one is visible so the logo stays legible
   against whichever color --shell-bg currently is. */
.footer-logo { height: 26px; flex-shrink: 0; }
.footer-tagline {
  font-size: 0.82rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-meta a { color: var(--shell-text); }
.footer-dot { opacity: 0.6; }

/* Below this width the tagline is the first thing to go — logo,
   email, and copyright still fit on one line without it. */
@media (max-width: 640px) {
  .footer-tagline { display: none; }
}

/* Narrower still: drop to two centered lines rather than truncating
   or shrinking text past a readable size. The email address is the
   one piece long enough to need actual wrapping, not just a second
   line — so its "nowrap" gets lifted here specifically. */
@media (max-width: 420px) {
  .footer-inner {
    height: auto;
    flex-direction: column;
    justify-content: center;
    padding-block: 14px;
    text-align: center;
  }
  .footer-meta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }
  /* The middot only makes sense between two items on the same line;
     once they wrap it just reads as a stray mark, so hide it here. */
  .footer-dot { display: none; }
}