@charset "UTF-8";
/* ===================================================================
   trust.css — the footer credentials band (template-parts/site-trust.php)

   This band lives INSIDE .site-footer, on the footer's own forest green.
   It is not a card: no panel fill, no shadow, no second background. It
   extends the footer surface with one hairline and one gold flourish,
   the same gold the footer's column headings already use.

   Several rules below are deliberately scoped under `.site-footer`.
   style.css sets `.site-footer ul{display:grid}`, `.site-footer p`
   (max-width:340px; font-size:16px) and `.site-footer h4` (19px gold),
   all at specificity 0,1,1 — a bare `.ts-band__*` class loses to them.
   Scoping is the honest fix; the band has no other home.

   Nothing in here transitions or animates, so there is nothing for
   prefers-reduced-motion to switch off.
   =================================================================== */

/* ------------------------------------------------------------------
   1. THE BAND
   ------------------------------------------------------------------ */
.ts-band{
  position:relative;
  margin-top:clamp(44px,5vw,68px);
  padding-top:clamp(32px,3.6vw,46px);
  border-top:1px solid rgba(255,255,255,.16);
}

/* the gold flourish, sitting on the hairline — flourish only, never text */
.ts-band::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:46px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
}

/* ------------------------------------------------------------------
   2. COLUMNS
   One flex row, left-aligned, wrapping. Not a 3-up grid: with one
   sub-block present there is no empty track to give away the two that
   are absent.
   ------------------------------------------------------------------ */
.ts-band__cols{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(26px,3vw,40px) clamp(34px,5vw,76px);
}

.ts-band__col{
  flex:0 1 auto;
  min-width:0;
}

.site-footer .ts-band__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);            /* 5.6:1 on #124933 */
  margin-bottom:16px;
}

/* ------------------------------------------------------------------
   3. ASSOCIATION MARKS
   ------------------------------------------------------------------ */
.site-footer .ts-band__marks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(20px,2.4vw,34px);
  margin:0;
}

.ts-band__marks li{
  display:flex;
  align-items:center;
  min-width:0;
}

/* Each mark links to the page that SUBSTANTIATES it — the UTB register
   entry, the AUTO member listing. The link is sized to its own mark and
   no larger: 44px tall for the tap target, a few px of padding so the
   focus ring and hover tint clear the artwork, and nothing that reaches
   outside its own box. The row's 20-34px gap keeps neighbouring links
   from touching, so no mark can swallow another's hit area. */
.site-footer .ts-band__mark-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:2px 8px;
  margin-left:-8px;            /* keep the marks optically flush left */
  border-radius:12px;
  opacity:1;
}

.site-footer .ts-band__mark-link:hover{
  background:rgba(255,255,255,.08);
  text-decoration:none;
}

.site-footer .ts-band__mark-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Height-normalised: the marks ship at 150px tall but at three different
   aspect ratios, so matching on height is the only way they sit on one
   optical line. width:auto lets the width/height attributes supply the
   ratio, so nothing reflows when the image lands.

   No opacity damping. The supplied PNGs are already soft — their ink is
   white at roughly 45% alpha, which composites to about 4:1 on this
   green. That clears the 3:1 floor for a graphic, but with no headroom
   to spend, so the marks are painted at full strength. */
.ts-band__marks img{
  height:clamp(42px,3.6vw,54px);
  width:auto;
}

/* ------------------------------------------------------------------
   4. PAYMENT CHIPS
   Every accepted method is a named chip in the theme's own typeface at
   the theme's own weight, monochrome. A payment method is set as its
   NAME — nothing here imitates a scheme's trademarked artwork, and
   there is no artwork to imitate, since we hold no licensed copies.

   One system, not two: the chips auto-size to their own text, so a
   longer name or a fallback font simply makes a wider chip instead of
   overflowing a fixed box. Card schemes are told apart from the rest
   by treatment — a hairline outline against a soft fill — rather than
   by pretending one of them is a logo.
   ------------------------------------------------------------------ */
.site-footer .ts-band__marks--pay{
  gap:12px;
  color:#fff;
}

.ts-band__chip{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
}

/* a card scheme: outlined */
.ts-band__chip--card{
  border:1.5px solid rgba(255,255,255,.4);
}

/* bank transfer, mobile money, cash: not card schemes, softly filled */
.ts-band__chip--method{
  background:rgba(255,255,255,.1);
}

/* ------------------------------------------------------------------
   5. PAYMENT NOTE
   A charge or condition attached to a method is part of the offer. It
   is plain text under the marks: no tooltip, no toggle, no JavaScript.
   ------------------------------------------------------------------ */
.ts-band__note{
  margin-top:14px;
  max-width:48ch;
}

.site-footer .ts-band__note p{
  margin:0 0 6px;
  max-width:none;
  font-size:13.5px;
  line-height:1.65;
  color:rgba(255,255,255,.74);  /* ~6.4:1 on #124933 */
}

.site-footer .ts-band__note p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------
   6. REGISTRATION STATEMENT
   Small and quiet: it is a legal note in a footer, not a selling line.
   ------------------------------------------------------------------ */
.ts-band__legal{
  margin-top:clamp(28px,3vw,44px);
}

.site-footer .ts-band__legal p{
  margin:0 0 8px;
  max-width:88ch;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(255,255,255,.68);  /* ~5.7:1 on #124933 */
}

.site-footer .ts-band__legal p:last-child{margin-bottom:0}

/* Only a verbatim override can put a link in here; style it if it does. */
.site-footer .ts-band__legal a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ------------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width:900px){
  .ts-band__cols{gap:30px 40px}
}

@media (max-width:700px){
  .ts-band{
    margin-top:44px;
    padding-top:32px;
  }
  /* Still wrap rather than stack: the two credential columns are ~100px
     wide and sit side by side even at 390px, which reads as one tidy
     row of credentials. Only the wider payment column drops below. */
  .ts-band__cols{
    gap:28px 26px;
  }
  .site-footer .ts-band__marks{gap:22px}
  .ts-band__legal{margin-top:32px}
}