/* ============================================================
 * FOOTER BOTTOM STRIP — shared component (design system v2)
 * App store badges · legal line + registration number · policy
 * links · Support pill. Sits in the footer of EVERY page, below
 * the footer divider. Markup: snippets/footer-bottom.html
 * Designed for the navy footer.
 * ============================================================ */

.fxb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* ---------- app store badges ---------- */
/* flex-basis: 100% forces a line break after the badges (3 Aug: "can we have
   © 2026 GroupEd... on the same line as the privacy policy links"). All three
   groups together came to ~1188px plus gaps against a 1216px container, so the
   row wrapped into THREE lines — badges, then legal, then links. Giving the
   badges their own line leaves the legal line and the policy links sharing the
   second one, which is what she asked for and what most footers do. */
.fxb__stores { display: flex; gap: 10px; flex: 0 0 100%; }
.fxb__store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fxb__store:hover { background: rgba(255,255,255,0.14); color: #fff; }
.fxb__store svg { width: 20px; height: 20px; flex: none; }
.fxb__store-txt { display: flex; flex-direction: column; line-height: 1.15; }
/* 9.5px -> 12px, the site's stated minimum (iPad pass, 29 Jul). It appears in
   the footer of all 20 pages, so it was the most widely-seen breach of the rule.
   Tracking eased off slightly — 0.06em was compensating for the tiny size. */
.fxb__store-small { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.fxb__store-big { font-size: 15px; font-weight: 700; }

/* ---------- legal + links ---------- */
.fxb__legal {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  flex: 0 1 auto;
  min-width: 0;   /* lets the long registration line wrap on small screens */
}
/* One line, always (3 Aug: "can you tidy these up so they are on one line").
   They were wrapping because flex: 1 + min-width: 200px let this group be
   squeezed by the long registration line beside it until "Carbon Reduction
   Plan" dropped below the other two. Now the group takes its natural width and
   never wraps; the registration line absorbs the squeeze instead, which it can
   do because it already carries min-width: 0. Below 760px the footer centres
   and stacks, so wrapping is allowed again there — three 13.5px links plus
   gaps don't fit a phone in one line. */
.fxb__links {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 20px;
  flex: 0 0 auto;
  min-width: 0;
}
.fxb__links a { white-space: nowrap; }
.fxb__links a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.fxb__links a:hover { color: #fff; }

@media (max-width: 760px) {
  .fxb { justify-content: center; text-align: center; }
  .fxb__links { justify-content: center; flex-wrap: wrap; flex-basis: 100%; }
}

/* ⚠ The Welsh-version note (11 Aug 2026). Sits with the legal line rather than the
   policy links — it is an announcement, not navigation. Given its own flex-basis
   of 100% so it always takes its own line: dropped inline it wrapped mid-sentence
   between the registration number and the policy links on narrow screens. */
.fxb__welsh {
  flex: 1 0 100%;
  order: -1;                 /* above the legal row */
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
}