/*
 * The site footer, on its own.
 *
 * Extracted from bn_home.css for the same reason bn_faq.css was: that file
 * carries a whole-page reset which restyles the sidebar and squeezes the
 * character grid, so a page that only wants the footer cannot load it.
 *
 * The footer is the site's internal-linking hub — every SEO landing page is
 * reachable from it — so any indexable page needs to be able to render it
 * without inheriting a homepage layout.
 */

.bh-footer {
  border-top: 1px solid var(--neutral-700);
  padding: 48px 0;
}

.bh-footer-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bh-footer-brand {
  max-width: 200px;
}

.bh-footer-logo {
  height: 25px;
  width: auto;
  margin-bottom: 12px;
}

.bh-footer-copyright {
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 18px;
  margin-bottom: 16px;
}

.bh-footer-socials {
  display: flex;
  gap: 12px;
}

.bh-footer-socials a {
  display: inline-flex;
  color: var(--neutral-400);
  transition: opacity 0.2s;
}

.bh-footer-socials a:hover { opacity: 0.7; }

/*
 * The link columns.
 *
 * `flex-wrap` and a non-shrinking column, because between 768px (the only
 * breakpoint this file had) and full desktop the row simply squeezed: flex
 * items shrink below their content by default, so at ~944px each column was
 * about 84px wide and "AI Companions" broke across two lines as "AI /
 * Companions". Wrapping moves a whole column down instead of mangling the
 * words in it, and row-gap keeps the wrapped row legible.
 */
.bh-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  row-gap: 28px;
}

.bh-footer-col {
  display: flex;
  flex-direction: column;
  /* Never narrower than its longest label — that squeeze is the bug. */
  flex: 0 0 auto;
}

.bh-footer-link {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  display: block;
  line-height: 32px;
  /* A two-word label is one label. Wrapping belongs to the column, above. */
  white-space: nowrap;
}

.bh-footer-link:hover { color: var(--purple-400); }

.bh-footer-link-muted {
  font-size: 14px;
  color: var(--neutral-500);
  text-decoration: none;
  display: block;
  line-height: 32px;
}

.bh-footer-link-muted:hover { color: var(--purple-400); }

.bh-footer-pill {
  background: var(--neutral-800);
  border-radius: 32px;
  padding: 8px 24px;
  font-size: 12px;
  color: var(--neutral-500);
  display: inline-block;
}

/* Stacks on a phone. Mirrors the rule in bn_home.css's mobile block. */
@media (max-width: 768px) {
  .bh-footer-layout { flex-direction: column; gap: 32px; }
  .bh-footer-links { flex-wrap: wrap; gap: 24px; }
}

/* Keyboard focus, matching the shared treatment in bn_home.css. */
.bh-footer-link:focus-visible {
  outline: 2px solid var(--purple-400);
  outline-offset: 2px;
}