/* taxes-refund.co.il - Trust signal strip - 12.10.2026
 * Front page only (enqueued from inc/plugin-config.php, priority 21).
 *
 * Replaces three scattered sections - the press logos, the N12 strip and the
 * 46M counter - with one row directly under the hero.
 */

.trh-trust {
  background: #fff;
  padding: 56px 20px;
}

.trh-trust__inner {
  max-width: var(--trh-container, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* auto-fit, not repeat(4, 1fr): the average cell is behind a filter and may be
   absent (see homepage.php), and a fixed four-column track would leave a hole.
   The dividers are the 1px grid gap showing the container's colour through,
   with each cell painting its own white - so they land between whatever cells
   there are, in any column count, and in RTL as readily as LTR. That is also
   why there are no per-child border rules to get the edges wrong. */
.trh-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--trh-line, #dbe3ec);
  border: 1px solid var(--trh-line, #dbe3ec);
  border-radius: var(--trh-radius-lg, 16px);
  overflow: hidden;
}

.trh-trust__cell {
  background: #fff;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trh-trust__label { font-size: 13px; color: var(--trh-muted, #4a5d70); }

.trh-trust__value {
  font-size: 26px;
  font-weight: var(--trh-w-black, 800);
  font-variant-numeric: tabular-nums;
  color: var(--trh-ink, #0c2e4e);
}
.trh-trust__value--positive { color: var(--trh-positive, #0e7c52); }

.trh-trust__caption { font-size: 12px; color: var(--trh-muted, #4a5d70); }

/* The "כפי שפורסם ב:" logo row was removed from this strip on 13.10.2026.
   The three mastheads now carry quotations and links in the "אנחנו בתקשורת"
   section further down the page, and Eden was looking at them appearing in
   both places. The rules that styled .trh-trust__press and .trh-trust__logo
   went with the markup - verified unreferenced in any PHP or JS first. Two
   more of them, further down this file, went from the dark and the
   reduced-motion blocks for the same reason. */

.trh-trust__disclaimer {
  margin: 0;
  font-size: 12px;
  color: var(--trh-muted, #4a5d70);
  padding: 0 28px;
}

/* Mobile: two columns, which auto-fit gives on its own below ~450px, but the
   padding and type still need tightening. */
@media (max-width: 760px) {
  .trh-trust { padding: 32px 16px; }
  .trh-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trh-trust__cell { padding: 16px 14px; }
  .trh-trust__value { font-size: 22px; }
  .trh-trust__disclaimer { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
}


/* ===== Dark variant =======================================================
 * Added with task D. The hero's simulator card has a -180px bottom margin so
 * that it is cut into the band below it, and that band is this section. On a
 * white strip the overlap reads as a mistake rather than as a design.
 *
 * The extra top padding is the room the card needs: 180px of overlap plus the
 * 56px the light version already had.
 *
 * Positive amounts switch to --trh-positive-on-dark. #0e7c52 on #0c2e4e is
 * 1.6:1 - unreadable - which is exactly why the token set carries a second
 * green for ink backgrounds.
 */
.trh-trust--dark {
  background: var(--trh-ink, #0c2e4e);
  /* Was 236px on top: 180px of room for the hero card's bite plus the 56px the
     light version has. The bite is cancelled (brief 2C section 5, hero.css), so
     the reserved room goes with it - leaving it would be 180px of empty ink
     between the simulator and the first cell, which is exactly the "dead space"
     this round is trying to remove. */
  padding-block: 56px;
}
.trh-trust--dark .trh-trust__grid {
  background: rgba(255, 255, 255, .14);   /* the 1px gap showing through */
  border-color: rgba(255, 255, 255, .14);
}
.trh-trust--dark .trh-trust__cell { background: var(--trh-ink, #0c2e4e); }
.trh-trust--dark .trh-trust__value { color: #fff; }
.trh-trust--dark .trh-trust__value--positive { color: var(--trh-positive-on-dark, #6fd6a8); }
.trh-trust--dark .trh-trust__label,
.trh-trust--dark .trh-trust__caption,
.trh-trust--dark .trh-trust__disclaimer { color: #b6c7d8; }

@media (max-width: 760px) {
  /* No bite on a phone (hero.css sets margin-block: 24px 32px), so there is no
     overlap to reserve room for - and no dead white gap either, because the
     strip's own 32px padding is the only space between the card and the cells. */
  .trh-trust--dark { padding-block: 32px; }
}


/* ===== LICENCE LINK ON THE DARK STRIP ================================== */

/* The licence number in the first cell is a link as of 13.10.2026, and it
   must NOT take --trh-primary here. This strip is --trh-ink, and #15548c on
   #0c2e4e measures 1.77:1 - invisible, and a WCAG failure on the one number
   the page most wants read. #9cc6ec on the same ink is 7.72:1; it is the
   colour the urgency banner already uses for a link on ink.

   Two classes, so this beats the single-class base rule in css/homepage.css
   on specificity and does not depend on which file loads later. */
.trh-trust--dark .trh-license-link {
  color: #9cc6ec;
}

.trh-trust--dark .trh-license-link:hover,
.trh-trust--dark .trh-license-link:focus-visible {
  color: #fff;
}