/* ============================================================
   MODULE: Trust Bar
   A full-width horizontal strip of short trust signals
   separated by sage bullet dots.

   Classes output by trust_bar.php:
     .hds-trust-bar  — outer wrapper (also .trust-bar)
     .trust-item     — individual signal pill
     .trust-dot      — the dot separator preceding each item
   ============================================================ */

/* ── Outer wrapper ─────────────────────────────────────────── */

.hds-trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0; /* Items handle their own spacing via padding */
  padding: 14px var(--gutter);
  background: var(--sand);
  border-top: 1px solid var(--rule-sage);
  border-bottom: 1px solid var(--rule-sage);
}

/* ── Individual item ───────────────────────────────────────── */

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  padding: 4px 16px;
  white-space: nowrap;
}

/* ── Dot separator ─────────────────────────────────────────── */

.trust-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage-dark);
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 780px) {
  .hds-trust-bar {
    gap: 0;
    padding: 12px var(--gutter);
  }

  .trust-item {
    font-size: 8px;
    padding: 4px 10px;
  }
}

@media (max-width: 520px) {
  /* On small screens, allow wrapping into two rows max;
     hide dots on wrapped items so layout stays tidy */
  .trust-item {
    padding: 4px 8px;
    font-size: 7.5px;
  }
}