/* =============================================================================
   TSF ADS — front-end styles

   Tokens come from Tylers-Code/css/tsf-tokens.css (handle: tsf-tokens, enqueued
   site-wide at priority 1). Every custom property below is aliased with a
   var() fallback so this file still renders correctly if it is ever loaded on a
   page where the token layer did not print — the fallbacks are the token
   VALUES, not approximations, so there is nothing to drift.
   ========================================================================== */

.tsf-verified-badge {
  --tsf-vb-mark:    var(--tsf-red, #FF0000);
  --tsf-vb-text:    var(--tsf-text-strong, #F2F2F2);
  --tsf-vb-surface: var(--tsf-surface-panel, #1A1A1A);
  --tsf-vb-edge:    var(--tsf-red-deep, #8F0000);

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px 4px 7px;
  border: 1px solid var(--tsf-vb-edge);
  border-radius: var(--tsf-radius-xl, 31px);
  background: var(--tsf-vb-surface);

  font-family: var(--tsf-font-sans, inherit);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tsf-vb-text);
  white-space: nowrap;
  vertical-align: middle;
}

.tsf-verified-badge__mark {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: var(--tsf-vb-mark);
}

/* The hero sets a large type scale on its heading row; the badge sits beside a
   haunt name without inheriting its size. */
.tsf-hero-title .tsf-verified-badge {
  font-size: 11px;
  position: relative;
  top: -2px;
}

/* Single review: the badge lives in the identity aside under the logo, not
   beside the review's own <h1>. See tsfrv_render_hero_aside(). */
.tsf-review__verified {
  margin: 0 0 10px;
}

@media (max-width: 480px) {
  .tsf-verified-badge {
    font-size: 11px;
    padding: 3px 8px 3px 6px;
  }
  .tsf-verified-badge__mark {
    width: 13px;
    height: 13px;
  }
}

/* Print and forced-colours: the pill's meaning is carried by its text, so drop
   the decoration rather than fighting the rendering mode. */
@media print {
  .tsf-verified-badge {
    border-color: currentColor;
    background: none;
    color: inherit;
  }
}