/* ==========================================================================
   assets/lead-aside.css — the sticky lead form that rides alongside every
   article and every tool.
   --------------------------------------------------------------------------
   One card, two host backgrounds: articles are light, tools are dark. It is
   deliberately opaque white on both rather than a translucent panel that
   inherits the page — a form that changes colour from page to page reads as a
   different form, and this one has to be recognisably the same offer as the
   homepage.

   Sticky, not fixed. Fixed would need a viewport gutter to live in, and the
   content containers here (max-w-4xl on the tax calculator, max-w-6xl on the
   rest) leave under 200px of margin on a 1280px screen — not enough for a
   form. Sticking inside a real grid column is what makes it fit at all.

   A card that does not fit the viewport is never squeezed in anyway — see the
   "Sticky host column" section for what replaced the old height cap and why.
   ========================================================================== */

.lead-aside {
  background: #fff;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: 1.35rem;
  box-shadow: 0 0 38px rgba(252, 176, 65, .28), 0 18px 40px -28px rgba(4, 47, 71, .65);
  overflow: hidden;
  text-align: right;
}
.lead-aside__bar { height: 5px; background: linear-gradient(to left, #FCB041, #f59a1f, #FCB041); }
.lead-aside__body { padding: 1.15rem 1.15rem 1rem; }

.lead-aside__title {
  margin: 0; font-weight: 800; font-size: 1.08rem; line-height: 1.35; color: #042F47;
}
.lead-aside__sub { margin: .35rem 0 0; font-size: .8rem; line-height: 1.55; color: #64748b; }

.lead-aside form { margin-top: .85rem; }
.lead-aside__row { margin-bottom: .6rem; }
.lead-aside label {
  display: block; font-size: .76rem; font-weight: 700; color: #042F47; margin-bottom: .25rem;
}
.lead-aside label .req { color: #8A4308; }
.lead-aside input[type="text"],
.lead-aside input[type="tel"],
.lead-aside input[type="email"],
.lead-aside select {
  width: 100%; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: .7rem;
  padding: .5rem .7rem; font-size: .88rem; color: #0f172a; font-family: inherit;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lead-aside input::placeholder { color: #94a3b8; }
.lead-aside input:focus, .lead-aside select:focus {
  outline: none; background: #fff; border-color: #FCB041; box-shadow: 0 0 0 3px rgba(252, 176, 65, .3);
}
/* Latin-only fields read left to right even on an RTL page, but stay aligned
   with the rest of the form. */
.lead-aside input[dir="ltr"] { text-align: right; }

.lead-aside__consents { margin: .7rem 0 .2rem; display: grid; gap: .4rem; }
.lead-aside__check { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.lead-aside__check input {
  margin-top: .15rem; flex: none; width: .95rem; height: .95rem;
  accent-color: #d97706; cursor: pointer;
}
.lead-aside__check span { font-size: .69rem; line-height: 1.5; color: #475569; }
.lead-aside__check a { text-decoration: underline; font-weight: 600; color: #475569; }
.lead-aside__check a:hover { color: #8A4308; }

.lead-aside__btn {
  width: 100%; margin-top: .6rem; border: 0; cursor: pointer; border-radius: .7rem;
  padding: .7rem .8rem; font-family: inherit; font-weight: 800; font-size: .92rem; color: #042F47;
  background: linear-gradient(135deg, #FCB041, #f59a1f);
  box-shadow: 0 10px 24px -12px rgba(245, 158, 11, .9);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.lead-aside__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(245, 158, 11, 1); }
.lead-aside__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.lead-aside__btn:focus-visible { outline: 3px solid #042F47; outline-offset: 2px; }

.lead-aside__msg {
  margin: .55rem 0 0; font-size: .74rem; line-height: 1.5; border-radius: .55rem;
  padding: .45rem .6rem; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
}
/* #64748b, not the #94a3b8 this started as: at 10px on white that was 2.56:1
   and cost the page its accessibility 100. Computed, not eyeballed — see
   lighthouse.md §2. */
.lead-aside__legal { margin: .55rem 0 0; font-size: .63rem; line-height: 1.5; color: #64748b; }
.lead-aside__legal a { text-decoration: underline; color: #64748b; }

.lead-aside__done { padding: 1.4rem 1.15rem; text-align: center; }
.lead-aside__done b { display: block; color: #042F47; font-size: 1rem; margin-bottom: .3rem; }
.lead-aside__done span { font-size: .82rem; color: #64748b; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Placement. The mount is a plain <div data-lead-aside> in whatever column the
   page has; everything positional lives here so no page has to know how.
   -------------------------------------------------------------------------- */
[data-lead-aside] { margin-bottom: 1.25rem; }

/* Below lg the host column is usually display:none (the article sidebars are
   `hidden lg:block`), so the mobile copy is a second mount inside the content
   flow. It must never try to stick. */
@media (max-width: 1023px) {
  [data-lead-aside] { position: static !important; max-height: none !important; overflow: visible !important; }
  .lead-aside { margin: 1.75rem 0; }
}

/* --------------------------------------------------------------------------
   Sticky host column.

   What this replaces, and why. The column itself used to be the sticky
   element, capped at `max-height: 100vh - offsets` with `overflow-y: auto`.
   The cap is what hid things: on any viewport shorter than the card — a 768px
   laptop is shorter, the card is ~640px and the offsets take another 184px —
   the submit button, the legal line and the WhatsApp card sat below the fold
   of an inner scroll container that nothing announced, and
   `overscroll-behavior: contain` meant a wheel over the sidebar would not move
   the page either. On the articles the same cap swallowed the table of
   contents and the side CTAs whole: 1387px of column inside 584px of box.

   Nothing is capped or clipped any more. Instead:

     * the column stretches to the full height of its grid row;
     * the form sits in a .lead-aside-slot that takes all the leftover height,
       so its sticky range covers the whole column bar the tail;
     * whatever follows the slot — the WhatsApp card, the TOC, the side CTAs —
       lands at the bottom of the column and is read by scrolling the page.
       A sticky element cannot cover what comes after it, only what comes
       before, which is why the tail goes after the slot and not inside it;
     * and the form turns sticky only when it actually fits on screen.
       lead-aside.js measures the rendered card and adds .is-stuck, plus
       .is-compact when the fit needs the tighter card. On a viewport too short
       for either, it stays in the flow and scrolls with the page — visible in
       full for part of the scroll beats pinned and cut off for all of it.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Doubled class on purpose: Tailwind's `lg:block` on the article sidebars
     has the same specificity and would otherwise win on source order. */
  .lead-aside-host.lead-aside-host {
    display: flex;
    flex-direction: column;
    align-self: stretch;   /* the grids say items-start; this column wants the row */
  }

  /* No `min-height: 0` here. The flex default of `auto` is what stops the slot
     shrinking under the card and letting the tail slide up into it. */
  .lead-aside-slot { flex: 1 1 auto; }

  .lead-aside-host.is-stuck [data-lead-aside],
  [data-lead-aside][data-lead-sticky].is-stuck {
    position: sticky;
    top: var(--lead-aside-top, 6rem);
  }

  /* Matches TOP_TIGHT in lead-aside.js: enough to clear the sticky header and
     nothing more, because in this band every pixel is the difference between
     sticky and not. */
  .lead-aside-host.is-compact { --lead-aside-top: 4.75rem; }
}

/* --------------------------------------------------------------------------
   The compact card.

   Only ever applied when the roomy card would not fit and the choice is
   between shaving ~100px off it and giving up the sticky altogether. The
   sub-line is the one thing dropped rather than shrunk — it restates the offer
   the title already makes, and at this height the submit button is worth more
   than a second sentence.
   -------------------------------------------------------------------------- */
.is-compact .lead-aside__body { padding: 1rem 1.1rem .85rem; }
.is-compact .lead-aside__title { font-size: 1.22rem; }
.is-compact .lead-aside__sub { display: none; }
.is-compact .lead-aside form { margin-top: .7rem; }
.is-compact .lead-aside__row { margin-bottom: .45rem; }
.is-compact .lead-aside label { margin-bottom: .15rem; }
.is-compact .lead-aside input[type="text"],
.is-compact .lead-aside input[type="tel"],
.is-compact .lead-aside input[type="email"],
.is-compact .lead-aside select { padding: .45rem .7rem; font-size: .9rem; }
.is-compact .lead-aside__consents { margin: .5rem 0 .15rem; gap: .3rem; }
.is-compact .lead-aside__btn { padding: .65rem .8rem; font-size: .95rem; margin-top: .45rem; }
.is-compact .lead-aside__legal { margin-top: .4rem; }

/* --------------------------------------------------------------------------
   Why the sidebar never actually stuck.

   These pages carry `overflow-x-hidden` on <html> and <body>. On <body> that
   quietly turns it into a scroll container, and `position: sticky` resolves
   against the nearest scroll container rather than the viewport — so every
   `lg:sticky` on these pages has been inert since it was written, the CTA
   cards included. Nothing looked broken, it just scrolled away.

   `clip` does the same job (no horizontal scrollbar, and these pages have no
   horizontal overflow to hide anyway) without creating a scroll container.
   `hidden` stays as the first declaration so a browser without `clip` keeps
   today's behaviour instead of gaining a horizontal scrollbar.
   -------------------------------------------------------------------------- */
html.overflow-x-hidden, body.overflow-x-hidden {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   WIDE PAGE SHELL
   --------------------------------------------------------------------------
   The old shell topped out at max-w-6xl (1152px), which left deep empty
   margins on a normal desktop and squeezed the article column and the form
   into far less room than the screen had. 1600px is the ceiling because the
   prose column is 8/12 of it — about 1030px — and past that a Hebrew line
   gets long enough that the eye loses the start of the next one.

   Widening the column is only half of it: the same text at the same size in
   a wider column reads worse, not better. The body size therefore steps up
   with the width, so the characters-per-line stays roughly where it was.
   ========================================================================== */
.page-wide { max-width: 1600px; }

@media (min-width: 1280px) {
  .art-prose { font-size: 1.16rem; }
  .art-prose p { line-height: 1.9; }
}
@media (min-width: 1536px) {
  .art-prose { font-size: 1.24rem; }
}

/* --------------------------------------------------------------------------
   The card gets the room too, and its offer line leads.
   -------------------------------------------------------------------------- */
.lead-aside__body { padding: 1.5rem 1.4rem 1.25rem; }
.lead-aside__title {
  font-size: 1.5rem; line-height: 1.25; font-weight: 900; letter-spacing: -.01em;
}
.lead-aside__sub {
  margin-top: .55rem; font-size: .97rem; line-height: 1.6; font-weight: 600; color: #475569;
}
.lead-aside label { font-size: .82rem; }
.lead-aside input[type="text"],
.lead-aside input[type="tel"],
.lead-aside input[type="email"],
.lead-aside select { padding: .6rem .8rem; font-size: .95rem; }
.lead-aside__check span { font-size: .74rem; }
.lead-aside__btn { font-size: 1rem; padding: .85rem .8rem; }

@media (min-width: 1280px) {
  .lead-aside__title { font-size: 1.68rem; }
  .lead-aside__sub { font-size: 1.02rem; }
}

/* ==========================================================================
   CLICK-TO-HIGHLIGHT PULSE
   --------------------------------------------------------------------------
   The card is sticky and on screen almost all the time, so a `data-lead-jump`
   click usually has nowhere to scroll to — the pulse is what answers the
   click instead. lead-aside.js adds/removes .lead-aside--pulse per click.
   Ring + soft glow stay inside the 16px padding the sticky host now carries
   (see "Placement" above), so neither clips.
   ========================================================================== */
@keyframes lead-aside-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(252, 176, 65, 1), 0 0 30px 4px rgba(252, 176, 65, .65), 0 18px 40px -28px rgba(4, 47, 71, .65); }
  55%  { box-shadow: 0 0 0 12px rgba(252, 176, 65, 0), 0 0 55px 14px rgba(252, 176, 65, .35), 0 18px 40px -28px rgba(4, 47, 71, .65); }
  100% { box-shadow: 0 0 0 0 rgba(252, 176, 65, 0), 0 0 38px rgba(252, 176, 65, .28), 0 18px 40px -28px rgba(4, 47, 71, .65); }
}
.lead-aside--pulse { animation: lead-aside-pulse 1.15s ease-out 2; border-color: #FCB041; }
@media (prefers-reduced-motion: reduce) {
  .lead-aside--pulse {
    animation: none;
    border-color: #FCB041;
    box-shadow: 0 0 0 8px rgba(252, 176, 65, .5), 0 0 45px 10px rgba(252, 176, 65, .4), 0 18px 40px -28px rgba(4, 47, 71, .65);
  }
}

/* ==========================================================================
   WHATSAPP OPPORTUNITIES GROUP
   --------------------------------------------------------------------------
   Rides under the form in the same component, so it reaches every article and
   tool for free and lands at the bottom on mobile with the form rather than
   needing its own placement rule on every page.

   Green, not the site's gold: it is a different destination with a different
   commitment (a group you join, not a meeting you book), and giving it the
   primary CTA colour would make the two compete.
   ========================================================================== */
.lead-wa {
  display: flex; align-items: center; gap: .8rem; margin-top: .9rem;
  padding: .9rem 1rem; border-radius: 1.1rem; text-decoration: none;
  background: #ffffff; border: 1px solid #cfe9d6;
  box-shadow: 0 10px 26px -20px rgba(4, 47, 71, .6);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lead-wa:hover { border-color: #25D366; transform: translateY(-1px); box-shadow: 0 16px 32px -20px rgba(37, 211, 102, .8); }
.lead-wa:focus-visible { outline: 3px solid #128C7E; outline-offset: 3px; }
.lead-wa__icon {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 9999px; color: #fff;
  display: grid; place-items: center; background: linear-gradient(135deg, #25D366, #128C7E);
}
.lead-wa__text { flex: 1; min-width: 0; }
.lead-wa__text b { display: block; color: #042F47; font-size: 1rem; font-weight: 800; line-height: 1.3; }
.lead-wa__text span { display: block; margin-top: .2rem; font-size: .8rem; line-height: 1.55; color: #475569; }
.lead-wa__go { flex: none; color: #128C7E; font-size: 1.25rem; font-weight: 800; }

/* ==========================================================================
   IN-CONTENT CTA BUTTONS
   --------------------------------------------------------------------------
   What replaced the phone numbers. `data-lead-jump` is handled in
   lead-aside.js, which sends the reader to whichever copy of the form is
   actually rendered at this width.
   ========================================================================== */
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem; border-radius: .85rem; font-weight: 800; font-size: 1rem;
  text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Two classes deep on purpose. These buttons land inside sections that style
   their own descendant anchors — one of those was repainting the WhatsApp
   button's text #b45309 on #25d366, which is 2.53:1 and cost the page its
   accessibility score. A single class lost the cascade. */
.cta-row .cta-btn--lead {
  background: linear-gradient(135deg, #FCB041, #f59a1f); color: #042F47;
  box-shadow: 0 14px 30px -14px rgba(245, 158, 11, .95);
  text-decoration: none;
}
.cta-row .cta-btn--lead:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(245, 158, 11, 1); }
.cta-row .cta-btn--wa { background: #25D366; color: #06281a; text-decoration: none; box-shadow: 0 14px 30px -16px rgba(37, 211, 102, .95); }
.cta-row .cta-btn--wa:hover { transform: translateY(-1px); background: #1fbe5b; }
.cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 520px) { .cta-row { flex-direction: column; } .cta-btn { width: 100%; } }

/* ==========================================================================
   RELATED CARDS
   --------------------------------------------------------------------------
   These were a bulleted list of bare titles — "למחשבון מס רכישה ←" — which
   tells a reader nothing about whether the click is worth making. Each card
   now says what the destination actually does, which is also what makes the
   internal link worth something rather than an anchor with no context.
   ========================================================================== */
.rel-grid { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .rel-grid { grid-template-columns: 1fr 1fr; } }

.rel-card {
  display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: .75rem;
  padding: 1.05rem 1.15rem; border-radius: 1.1rem; text-decoration: none;
  background: #fff; border: 1px solid #e2e8f0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rel-card:hover { border-color: #FCB041; transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(4, 47, 71, .7); }
.rel-card:focus-visible { outline: 3px solid #8A4308; outline-offset: 3px; }
.rel-card__title { grid-column: 1; font-weight: 800; color: #042F47; font-size: 1.02rem; line-height: 1.4; }
.rel-card__desc  { grid-column: 1; margin-top: .35rem; font-size: .87rem; line-height: 1.65; color: #475569; }
.rel-card__go    { grid-column: 2; grid-row: 1; color: #b45309; font-size: 1.2rem; font-weight: 800; }

/* Only the dark tool pages. tax-calculator is light, so keying this off
   .tool-related alone would have put dark cards on a cream page. */
.tool-related.on-dark .rel-card { background: rgba(15, 23, 42, .72); border-color: #1e293b; }
.tool-related.on-dark .rel-card__title { color: #fff; }
.tool-related.on-dark .rel-card__desc { color: #cbd5e1; }
.tool-related.on-dark .rel-card__go { color: #fcd34d; }
.tool-related.on-dark .rel-card:hover { border-color: #f59e0b; }