/* HeadHoncho marketing site — the Hebrew layer.
   Added 2026-09-26. Loaded ONLY by the pages under /he/, after styles.css,
   and it does two jobs and no others:

     1. Swaps the two type variables for faces that have Hebrew in them.
        styles.css routes every family through --font-display and --font-text
        exactly so this swap is two lines rather than a fork of the sheet.
     2. Mirrors the finite set of declarations in styles.css that name a
        physical side. Flex and grid flip on their own under dir="rtl"; what
        does not flip is absolute left/right, text-align, one-sided padding,
        one-sided borders, and the arrow glyph.

   It is an OVERRIDE sheet, never a copy. Nothing here restates a value that
   styles.css already gets right, so the English site stays the one source of
   layout and this file stays short enough to audit. If a Hebrew page looks
   wrong, the fix belongs here or in the page, never in styles.css.

   The media-query boundaries below are copied from styles.css on purpose:
   .rc-jobs / .rc-margin / .fp-table set different physical values at three
   breakpoints, so the mirror has to answer at the same three. If a breakpoint
   moves over there, it moves here. */

[dir="rtl"] {
  /* Rubik carries the titles (it is the Hebrew face closest to Figtree's
     geometry) and Assistant carries the reading. Both ship Latin as well, so
     Google Ads, CallRail, WhatsApp and every dollar figure inside a Hebrew
     sentence stay in one family instead of falling back mid-line. */
  --font-display: "Rubik", "Figtree", "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
  --font-text: "Assistant", "Rubik", "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
}

/* Hebrew letters are distinct shapes, and a tracking value pulls them apart
   into something the eye has to reassemble. styles.css tracks a dozen
   small-caps labels and tightens every display heading; neither applies to a
   script with no capitals. The override is blanket rather than a list of
   class names because those names are scattered across 2,500 lines and a
   missed one reads as a typo rather than as a bug. This sheet only ever
   loads on Hebrew pages, so the blast radius is the Hebrew pages. */
[dir="rtl"] * { letter-spacing: normal !important; }

/* Hebrew sits a little lower in its line than Latin and has no descender
   rhythm to break up a paragraph, so it wants a touch more leading. */
[dir="rtl"] body { line-height: 1.68; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.28; }

/* Latin runs inside Hebrew text — a price, a phone number, an address bar,
   a gclid — are neutral or weakly-typed to the bidi algorithm and end up
   reordered. Anything wearing dir="ltr" is isolated by the UA sheet already;
   this is the belt for the places the markup uses a class instead. */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------- the arrow */
/* #arrow-forward points right. Forward is the other way here. */
[dir="rtl"] .ic.arrow { transform: scaleX(-1); }
[dir="rtl"] .cta .ic.arrow { margin-left: 0; margin-right: -8px; }
[dir="rtl"] .cta:hover .ic.arrow,
[dir="rtl"] .cta:focus-visible .ic.arrow { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------- the store buttons stay */
/* Apple and Google publish their badges as fixed lockups. A mirrored "App
   Store" is not a translation, it is a broken trademark, so the two buttons
   keep their own direction inside an otherwise Hebrew page. */
[dir="rtl"] .store-btn { direction: ltr; }
[dir="rtl"] .store-lines { text-align: left; }
[dir="rtl"] .hero-center .store-line { text-align: right; }

/* ------------------------------------------------------------ type blocks */
[dir="rtl"] .result-card { text-align: right; }
[dir="rtl"] ul.checks { text-align: right; }
[dir="rtl"] .tier li .q { text-align: left; }
[dir="rtl"] .fp-total { text-align: left; }

/* ---------------------------------------------------------------- tables */
[dir="rtl"] .rate-table th,
[dir="rtl"] .rate-table td,
[dir="rtl"] .doc-table th,
[dir="rtl"] .doc-table td,
[dir="rtl"] .fp-table th,
[dir="rtl"] .fp-table td,
[dir="rtl"] .xfer-table th,
[dir="rtl"] .xfer-table td,
[dir="rtl"] .cmp-table tbody th,
[dir="rtl"] .closer tbody th { text-align: right; }

[dir="rtl"] .rate-table td:last-child,
[dir="rtl"] .rate-table th:last-child,
[dir="rtl"] .fp-table th:last-child,
[dir="rtl"] .fp-table td:last-child { text-align: left; }

[dir="rtl"] .fp-table th:first-child,
[dir="rtl"] .fp-table td:first-child { padding-left: 12px; padding-right: 28px; }
[dir="rtl"] .fp-table th:last-child,
[dir="rtl"] .fp-table td:last-child { padding-right: 12px; padding-left: 28px; }

/* ------------------------------------------------------- one-sided rules */
[dir="rtl"] .flow-link { margin-left: 0; margin-right: 18px; }
[dir="rtl"] .bub.out { margin-left: 0; margin-right: auto; }

[dir="rtl"] .benefit-list li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .benefit-list li::before { left: auto; right: 0; }

[dir="rtl"] .doc-shot .shot-keys li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .doc-shot .shot-keys li::before { left: auto; right: 0; }

[dir="rtl"] .docs-nav a {
  border-left: 0;
  border-right: 2px solid var(--border);
}
[dir="rtl"] .docs-nav a[aria-current="page"] {
  border-left-color: transparent;
  border-right-color: var(--primary);
}

[dir="rtl"] .doc-note {
  border-left: 1px solid var(--border);
  border-right: 3px solid var(--primary);
}
[dir="rtl"] .doc-note.limit { border-right-color: var(--warn-text); border-left-color: var(--border); }
[dir="rtl"] .doc-note.aside { border-right-color: var(--faint); border-left-color: var(--border); }

[dir="rtl"] .qa-feature { border-left: 0; border-right: 3px solid var(--primary); }

/* The caret on the typed answer trails the text, so it swaps sides. */
[dir="rtl"] .tw.typing {
  border-right: 0; padding-right: 0;
  border-left: 2px solid var(--primary); padding-left: 2px;
}

/* The speech-bubble tail points back at the face beside it. */
[dir="rtl"] .qbub::before {
  left: auto; right: -6px;
  border-left: 0; border-bottom: 0;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------- absolutely positioned */
/* The two specimen cards floating on the hero film, and the month labels
   under the rising bars. Three breakpoints each, mirroring styles.css. */
[dir="rtl"] .rc-jobs { left: auto; right: -60px; }
[dir="rtl"] .rc-margin { right: auto; left: -60px; }

[dir="rtl"] .ms-from { left: auto; right: 0; }
[dir="rtl"] .ms-to { right: auto; left: 0; }

@media (max-width: 1080px) {
  [dir="rtl"] .rc-jobs { left: auto; right: 12px; }
  [dir="rtl"] .rc-margin { right: auto; left: 12px; }
}

@media (max-width: 720px) {
  [dir="rtl"] .rc-margin { right: auto; left: 8px; }
  [dir="rtl"] .fp-table th:first-child,
  [dir="rtl"] .fp-table td:first-child { padding-left: 12px; padding-right: 20px; }
  [dir="rtl"] .fp-table th:last-child,
  [dir="rtl"] .fp-table td:last-child { padding-right: 12px; padding-left: 20px; }
}

@media (max-width: 980px) {
  [dir="rtl"] .fp-table th:first-child,
  [dir="rtl"] .fp-table td:first-child { padding-left: 12px; padding-right: 20px; }
  [dir="rtl"] .fp-table th:last-child,
  [dir="rtl"] .fp-table td:last-child { padding-right: 12px; padding-left: 20px; }
}

@media (min-width: 1081px) {
  [dir="rtl"] .hero.hero-home { text-align: right; }
  [dir="rtl"] .rc-jobs { left: auto; right: -48px; }
  [dir="rtl"] .rc-margin { right: auto; left: -22px; }
  [dir="rtl"] .hero-center .store-line { text-align: right; }
}

/* ---------------------------------------------------------- money and IDs */
/* "$92,340" has no strongly-directional character in it: the dollar sign is
   a bidi terminator, the digits are weak. Dropped into a Hebrew paragraph
   the algorithm resolves the whole run to the paragraph's direction and
   prints it 92,340$. These are the elements whose entire content is a
   figure, an amount or an identifier, so they are isolated wholesale;
   figures inside a sentence carry dir="ltr" on the span instead. */
[dir="rtl"] .fr-rows dd,
[dir="rtl"] .fr-total strong,
[dir="rtl"] .cb-val,
[dir="rtl"] .pf-val,
[dir="rtl"] .fp-left,
[dir="rtl"] .fp-total strong,
[dir="rtl"] .xf-num,
[dir="rtl"] .xf-id,
[dir="rtl"] .closing-price .price,
[dir="rtl"] .tier .price,
[dir="rtl"] .result-card strong,
[dir="rtl"] .browser-url { direction: ltr; unicode-bidi: isolate; }

/* Deliberately NOT in that list, and each for the same reason: the element
   holds Hebrew as well as the figure, so isolating the whole box would fix
   the number and break the words around it. In these the markup wraps the
   amount itself in dir="ltr" instead.
     .proof-fig    "+14% more money, on the same budget"
     .qv-row em    "41% book"
     .tier li .q   a quota, then its overage price in words  */