/*
 * Brandagy footer.
 *
 * Ported literally from the footer build spec: the .bgc-f-* class names and the
 * raw hex are the spec's own. No cards, no radii on containers, no shadows —
 * separation is hairlines and whitespace. #163300 is the only green here.
 *
 * Every horizontal offset is logical, so the identical stylesheet mirrors for
 * RTL and LTR with no direction-specific rules.
 */

.bgc-f {
  --bgc-f-ink: #163300;
  --bgc-f-bg: #F1F1EF;
  --bgc-f-line: #E1E2DD;

  background: var(--bgc-f-bg);
  border-top: 1px solid var(--bgc-f-line);
  color: var(--bgc-f-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  padding-bottom: 40px;
}

.bgc-f, .bgc-f * { box-sizing: border-box; }

.bgc-f-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 40px 0;
}

.bgc-f :focus-visible {
  outline: 2px solid var(--bgc-f-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ top row */

.bgc-f-top {
  display: flex;
  align-items: center;
  margin-bottom: 56px;
}

.bgc-f-spacer { flex: 1; }

.bgc-f-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.bgc-f-logo img,
.bgc-f-logo .bgc-mark {
  height: 44px;
  width: auto;
  display: block;
}

.bgc-f-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Filled glyphs, not outlines. Hover dims — no colour change, no scale. */
.bgc-f-socials a,
.bgc-f-mobsocials a {
  display: inline-flex;
  color: var(--bgc-f-ink);
  transition: opacity .16s;
}

.bgc-f-socials a:hover,
.bgc-f-mobsocials a:hover { opacity: .6; }

.bgc-f-socials svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* ------------------------------------------------------------- link columns */

/* No column headings — three labelled stacks read heavier than the content
   deserves. Grouping is carried by column position alone. */
.bgc-f-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-bottom: 52px;
}

.bgc-f-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bgc-f-col a {
  font-size: 19px;
  font-weight: 400;
  line-height: 27px;
  color: var(--bgc-f-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* The rule is exactly as wide as the text, not as wide as the column. */
  align-self: flex-start;
  transition: border-color .16s;
}

.bgc-f-col a:hover { border-bottom-color: var(--bgc-f-ink); }

/* --------------------------------------------------------------- fine print */

.bgc-f-fine {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 40px;
}

/* Full ink, not a muted grey: the escrow disclosure is the legally meaningful
   line on the page and has to clear 4.5:1. */
.bgc-f-fine p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 26px;
  color: var(--bgc-f-ink);
  max-width: 92ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- action pair */

/* Scrolls with the footer. Not fixed, not floating, not a pop-up. */
.bgc-fabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--bgc-f-line);
  padding-bottom: 8px;
}

.bgc-askfab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid #E6E8E0;
  border-radius: 999px;
  background: #fff;
  color: var(--bgc-f-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s, border-color .16s;
}

.bgc-askfab:hover {
  background: #F4F7EE;
  border-color: #D6DCCB;
}

.bgc-askfab svg { flex: none; }

.bgc-f-touch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bgc-f-ink);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s;
}

.bgc-f-touch:hover { background: #1E4A05; }

/* Mobile-only surfaces. */
.bgc-f-mobsocials,
.bgc-f-mini { display: none; }

/* ------------------------------------------------------------ tablet ≤900px */

@media (max-width: 900px) {
  .bgc-f-in { padding: 34px 20px 0; }
  .bgc-f-top { margin-bottom: 34px; }
  .bgc-f-socials { gap: 16px; }
  .bgc-f-cols { grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 34px; }
  .bgc-f-col a { font-size: 17px; line-height: 25px; }
  .bgc-f-fine p { font-size: 15px; line-height: 24px; }
}

/* ------------------------------------------------------------ mobile ≤520px */

/*
 * Not the desktop footer reflowed — the shortest thing that still answers who
 * you are, how to reach you, and what the terms are. The link columns live in
 * the drawer, which is the real mobile route to those pages.
 */
@media (max-width: 520px) {
  .bgc-f-in {
    padding: 26px 18px 0;
    /* Reordered rather than re-marked-up: the copyright is last on mobile but
       first inside .bgc-f-fine on desktop. */
    display: flex;
    flex-direction: column;
  }

  .bgc-f-top { order: 1; margin-bottom: 20px; }
  .bgc-fabs { order: 2; }
  .bgc-f-mobsocials { order: 3; }
  .bgc-f-mini { order: 4; }
  .bgc-f-fine { order: 5; }

  .bgc-f-cols { display: none; }
  .bgc-f-fine p:not(.bgc-f-copy) { display: none; }
  .bgc-f-fine { gap: 0; padding-bottom: 0; }
  .bgc-f-socials { display: none; }          /* moves below the buttons */
  .bgc-f-logo img,
  .bgc-f-logo .bgc-mark { height: 36px !important; }

  .bgc-fabs {
    flex-direction: column-reverse;           /* primary lands first visually */
    align-items: stretch;
    gap: 10px;
    padding-top: 4px;
    border-top: 0;
  }

  .bgc-askfab,
  .bgc-f-touch { width: 100%; justify-content: center; }

  .bgc-f-mobsocials {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 22px;
  }

  .bgc-f-mobsocials svg { width: 24px; height: 24px; display: block; }

  .bgc-f-mini {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 15px;
  }

  .bgc-f-mini a {
    color: var(--bgc-f-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }

  .bgc-f-mini a:hover { border-bottom-color: var(--bgc-f-ink); }
  .bgc-f-mini span { color: var(--bgc-f-ink); }

  /* Scoped through .bgc-f-fine so it outranks the ≤900px `.bgc-f-fine p` size. */
  .bgc-f-fine .bgc-f-copy { font-size: 14px; text-align: center; margin-top: 14px; }
}

@media print {
  .bgc-fabs { display: none; }
}