/* Shared site footer.
 *
 * Every rule is scoped to `.bb-foot` on purpose. The pages of this site load
 * three different stylesheets (bloom.css, legal.css, site.css) and several
 * carry their own inline `footer{…}` block, so a bare `footer` selector here
 * would win or lose depending on source order. A class beats a bare element
 * selector on specificity, which makes this file order-independent.
 *
 * Markup lives in tools/footer.en.html / footer.he.html — edit there and run
 * tools/build-footer.py, never edit a footer inside a page.
 */

.bb-foot {
  background: #2e2233;
  color: rgba(247, 238, 242, .72);
  font-size: 14px;
  line-height: 1.6;
  padding: 56px 0 28px;
  margin-top: 0;
  text-align: start;
}
.bb-foot * { box-sizing: border-box; }

/* ---- isolation from page CSS ----
 * These pages were authored separately and style the header with bare element
 * selectors that also match the footer's markup:
 *   gift.html      nav { position:sticky; background:rgba(251,246,242,.9) }
 *   index / why    nav { display:flex; height:76px }
 *   age-guides /   p   { color: var(--ink-soft) }   ← dark ink on a dark footer
 *   articles
 * Rather than edit ~30 hand-written pages, the footer restates every property
 * those rules can reach. A class outranks a bare element selector, so this
 * holds regardless of load order or what a future page adds.
 */
.bb-foot nav.bb-foot-col {
  display: block;
  height: auto;
  align-items: initial;
  justify-content: initial;
  flex-wrap: initial;
  gap: 0;
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.bb-foot p,
.bb-foot span,
.bb-foot h2 { color: inherit; }
.bb-foot p { margin: 0; }

.bb-foot-wrap {
  /* Matches the `.wrap` used by bloom.css / legal.css so the footer's left
     edge lines up with the content above it on every page. */
  width: 100%;
  max-width: min(1520px, 94vw);
  margin: 0 auto;
  padding: 0 24px;
}

.bb-foot-cols {
  display: grid;
  /* minmax(0, …) not a bare fr: an `fr` track's automatic minimum is the
     item's max-content width, so a long link or tagline would push the grid
     wider than the viewport instead of wrapping. */
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 36px;
}
.bb-foot-cols > * { min-width: 0; }

/* ---- brand column ---- */
.bb-foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.bb-foot-logo img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}
.bb-foot p.bb-foot-tag {
  margin: 14px 0 0;
  max-width: min(30ch, 100%);
}
.bb-foot p.bb-foot-co {
  margin: 14px 0 0;
  font-size: 13px;
  opacity: .62;
  letter-spacing: .01em;
}
.bb-foot-co strong { font-weight: 600; opacity: .9; }

/* ---- link columns ---- */
.bb-foot-col h2 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 14px;
  letter-spacing: 0;
}
.bb-foot-col a,
.bb-foot-bottom a {
  color: rgba(247, 238, 242, .72);
  text-decoration: none;
}
.bb-foot-col a {
  display: block;
  margin-bottom: 9px;
}
.bb-foot a:hover,
.bb-foot a:focus-visible { color: #fcc5d8; }
.bb-foot a:focus-visible {
  outline: 2px solid #fcc5d8;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- bottom bar ---- */
.bb-foot-bottom > * { min-width: 0; }
.bb-foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12.5px;
  color: rgba(247, 238, 242, .5);
}
/* Same defence as the nav columns: pages carrying `footer a{display:block}`
   would otherwise stack the four legal links vertically, one per line, with
   the separators orphaned between them. */
.bb-foot-bottom a { display: inline; margin: 0; }
.bb-foot-legal { white-space: normal; }
.bb-foot-legal a { color: rgba(247, 238, 242, .62); }

@media (max-width: 860px) {
  .bb-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .bb-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bb-foot { padding: 40px 0 24px; }
  .bb-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bb-foot-bottom { justify-content: flex-start; }
}