/* taxes-refund.co.il - Hero 1b - 12.10.2026
 * Front page only (enqueued from inc/plugin-config.php, priority 21).
 *
 * This file loads after css/homepage.css, which still carries the old hero's
 * rules. Same specificity, later file, so these win - but three of the old
 * declarations have to be undone by name rather than simply overridden, and
 * they are marked below.
 *
 * The dark band under the hero is the trust strip wearing .trh-trust--dark.
 * The simulator's negative bottom margin lifts that strip up behind it, which
 * is what makes the card look like it is cut into the band.
 */

.trh-hero {
  /* 02.11.2026: uniform surface behind the whole form. The hero used to fade to
     --trh-ink over its bottom 30%, which painted a navy band below the card;
     the brief wants the colour change to belong to the next section only
     (.trh-trust--dark, which is already --trh-ink), not to the hero. */
  background: var(--trh-surface, #f5f8fb);
  /* 64px -> 28px, brief 2C section 5. Every pixel above the simulator is a
     pixel the form sits below the fold; the audit measured .tr-calc starting at
     ~735px and the target is 420px. */
  padding-block: 28px 0;
  padding-inline: 20px;
  position: relative;
  /* Undo: css/homepage.css gives .trh-hero a 1px bottom rule, which would draw
     a hairline across the dark band. */
  border-bottom: 0;
}

.trh-hero__intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 20px between four stacked blocks was 60px of pure gap. Three blocks now
     (badges, H1, lead) and a tighter rhythm. */
  gap: 14px;
}

/* The pill and the chips share one row, brief 2C section 5. They were two
   stacked blocks at opposite ends of the intro. */
.trh-hero__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.trh-hero__pill {
  display: inline-block;
  background: var(--trh-tint, #e8f0f7);
  color: var(--trh-primary, #15548c);
  font-weight: var(--trh-w-medium, 500);
  font-size: 15px;
  padding: 6px 14px;
  border-radius: 999px;
}

/* 44px on one line, brief 2C section 5 - it was 68px over two lines, 143px
   tall. The token --trh-h1-size is deliberately NOT used here any more: it is
   68/34px and this heading has its own size now.

   max-width has to be stated. css/homepage.css gives .trh-hero__h1
   max-width:24ch, which at 44px is about 530px and would wrap this heading onto
   a second line however small the type got - the cap, not the font size, was
   what forced two lines. none, plus nowrap on wide screens, is what keeps it to
   one.
   text-wrap:balance is gone with the second line: there is nothing to balance,
   and it costs a layout pass. */
.trh-hero__h1 {
  margin: 0;
  max-width: none;
  font-size: 44px;
  line-height: 1.15;
  font-weight: var(--trh-w-black, 800);
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--trh-ink, #0c2e4e);
}
.trh-hero__h1-accent { color: var(--trh-positive, #0e7c52); }

/* Slogan and explanation are one paragraph now, brief 2C section 5. They were
   two blocks with a gap between them; as inline spans in a single <p> they flow
   together and cost one block instead of two. The slogan keeps its weight so it
   still reads as the line it used to be. */
.trh-hero__lead {
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
  text-wrap: pretty;
}

.trh-hero__slogan {
  font-size: 20px;
  font-weight: var(--trh-w-bold, 700);
  color: var(--trh-ink, #0c2e4e);
}

.trh-hero__sub {
  font-size: 17px;
  color: #33475b;
}

.trh-hero__chips {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.trh-hero__chips li {
  background: #fff;
  border: 1px solid var(--trh-line, #dbe3ec);
  color: var(--trh-ink, #0c2e4e);
  font-size: 14px;
  font-weight: var(--trh-w-medium, 500);
  padding: 6px 14px;
  border-radius: 999px;
}

/* The card. It replaces the old .trh-hero__tool > .trh-tool pair, so it
   carries both the scroll offset that used to be on the outer element and the
   surface that used to be on the inner one.

   scroll-margin-top is not decoration: this element is #Contact, the target of
   the header CTA, the mobile menu, the footer bar and the floating CTA, and
   without it the sticky header covers the top of the card on arrival.
   --tr-header-h is the header's measured height (assets/js/theme.js), which
   now includes the urgency banner. */
.trh-hero__sim {
  max-width: 760px;
  margin-inline: auto;
  /* The -180px bite into the trust strip is cancelled, brief 2C section 5.
     It was the deliberate look from brief 1 and Eden approved it then; this
     round overrides that, because the overlap only worked while the hero was
     tall and it was also double-counting height against the 420px target.
     trust-strip.css drops the matching 236px of reserved top padding. */
  margin-block: 24px 0;
  scroll-margin-top: calc(var(--tr-header-h, 105px) + 12px);
  background: #fff;
  border: 1px solid var(--trh-line, #dbe3ec);
  border-radius: var(--trh-radius-lg, 16px);
  box-shadow: var(--trh-shadow-md, 0 16px 48px rgba(12,46,78,.18));
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.trh-hero__sim-head,
.trh-hero__sim-foot {
  display: flex;
  padding: 14px 24px;
  font-size: 14px;
  color: #33475b;
}
.trh-hero__sim-head {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6ecf2;
}
.trh-hero__sim-title { font-weight: 700; font-size: 16px; color: var(--trh-ink, #0c2e4e); }
/* 12px -> 14px, brief 2B task 5: this line qualifies the whole simulator. */
.trh-hero__sim-meta  { font-size: 14px; color: var(--trh-muted, #4a5d70); }

.trh-hero__sim-foot { border-top: 1px solid #e6ecf2; padding-inline: 0; }
.trh-hero__sim-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  /* Logical, so the dividers land between the steps in RTL as in LTR. */
  border-inline-end: 1px solid #e6ecf2;
}
.trh-hero__sim-step:last-child { border-inline-end: 0; }
.trh-hero__sim-step strong { color: var(--trh-primary, #15548c); font-weight: 700; font-size: 14px; }
.trh-hero__sim-step .trh-pos { color: var(--trh-positive, #0e7c52); }
.trh-hero__sim-step span { font-size: 14px; color: var(--trh-muted, #4a5d70); }

/* Tablet, brief 2B task 9. 761-1023px was falling through to the desktop
   -180px bite, which at 800px wide is most of the card's height hanging over
   the dark strip. Half the bite, and the strip's reserved top padding comes
   down with it (trust-strip.css). */
@media (min-width: 761px) and (max-width: 1023px) {
  /* No bite at any width now, so this band only needs the H1 to stop being
     nowrap before it overflows its container. */
  .trh-hero__h1 { white-space: normal; font-size: 38px; }
}

/* Mobile */
@media (max-width: 760px) {
  .trh-hero {
    /* Flat, no band: there is no bite on a phone, so a dark 30% would just be
       a dark strip under the card. */
    background: var(--trh-surface, #f5f8fb);
    padding-block: 32px 0;
    padding-inline: 16px;
  }
  .trh-hero__intro { gap: 14px; }
  .trh-hero__pill  { font-size: 14px; padding: 5px 12px; }
  /* Phones let it wrap: 44px nowrap would overflow 414px. */
  .trh-hero__h1    { font-size: 30px; line-height: 1.15; white-space: normal; }
  .trh-hero__slogan { font-size: 17px; }
  .trh-hero__sub   { font-size: 16px; }
  .trh-hero__chips { gap: 8px; }
  .trh-hero__chips li { font-size: 14px; padding: 6px 12px; }
  .trh-hero__sim   { margin-block: 20px 0; }
  .trh-hero__sim-foot { flex-direction: column; padding: 0; }
  .trh-hero__sim-step {
    flex-direction: row;
    gap: 8px;
    padding: 12px 20px;
    border-inline-end: 0;
    border-bottom: 1px solid #e6ecf2;
    align-items: center;
  }
  .trh-hero__sim-step:last-child { border-bottom: 0; }
}

/* Carried over, not invented: css/homepage.css hid .trh-hero__tool in print,
   and that class is gone from the markup. An eleven-screen interactive
   calculator on paper is noise, so the card it became is hidden too - the
   behaviour is unchanged, only the selector moved. */
@media print {
  .trh-hero__sim { display: none; }
}

/* Where an anchor lands, brief 2C section 7.
 *
 * theme.css:1354 already sets scroll-padding-top on html to clear the sticky
 * header. The anchor bar is sticky underneath it, so it has to be in the sum
 * too, or every in-page jump lands with its heading hidden behind the bar.
 *
 * One declaration on the scroll container rather than scroll-margin-top on each
 * target: it covers the six bar links, the four CTAs that point at #Contact
 * from the header and footer, and anything added later. This file only loads on
 * the front page, which is the only page with the bar, so the bare html
 * selector is already correctly scoped.
 */
html {
  /* Declared here, on the root, and NOT on .trh-anchors: custom properties
     inherit downward only, so a value set on the bar is invisible to this rule
     and the calc would silently fall back. One declaration, both consumers. */
  --trh-anchor-h: 48px;
  scroll-padding-top: calc(var(--tr-header-h, 105px) + var(--trh-anchor-h) + 12px);
}