/* Store badges — Tradie2U
 *
 * The download buttons were the site's own buttons: an orange one reading
 * "Download for iPhone" and a ghost one reading "Get it on Android". They
 * said the right words and looked like every other button on the page, which
 * is the problem — a store badge is a thing people recognise without reading,
 * and recognising it is most of what it does.
 *
 * Drawn here rather than downloaded from Apple and Google: same black pill,
 * same two-line lockup, same logos, no third-party files fetched into this
 * repo. If the official artwork is ever wanted instead, drop the PNGs in and
 * swap the <a> contents — the sizing below already matches their proportions.
 *
 * ONE STYLESHEET FOR EVERY PAGE THAT HAS A BADGE. The launch page and the
 * tradies hub carry their CSS inline, the trade pages use trade.css and the
 * invite pages use link.css; a badge defined in three places is a badge that
 * drifts in two of them.
 */

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 9px 18px 9px 16px;
  border-radius: 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
  line-height: 1.05;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

/* On paper the hairline disappears, so the pill carries its own edge. */
.store-badge.on-light {
  border-color: rgba(0, 0, 0, 0.2);
}

.store-badge:hover,
.store-badge:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.store-badge .store-glyph {
  width: 26px;
  height: 26px;
  flex: none;
}

.store-badge .store-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.store-badge .store-small {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.store-badge .store-big {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* A phone gets two badges side by side or stacked, never a squeezed pair. */
@media (max-width: 420px) {
  .store-badge {
    flex: 1 1 100%;
    justify-content: center;
  }
  .store-badge .store-text {
    text-align: left;
  }
}