/* en/ltr.css - minimal LTR overrides for the English pages only.
   styles.css is written RTL-first; only physical (non-logical) properties that
   would visibly break on a left-to-right page are overridden here. Everything
   else in the shared stylesheets already uses flex/grid/logical properties and
   mirrors on its own. Loaded LAST, and scoped under html[dir="ltr"]. */

/* .cmp-table (home "compare" section): table text was hard right-aligned */
html[dir="ltr"] .cmp-table {
  text-align: left;
}

/* .plan-compare-table (home plan comparison): first-column and row headers
   were hard right-aligned */
html[dir="ltr"] .plan-compare-table thead th:first-child,
html[dir="ltr"] .plan-compare-table tbody th,
html[dir="ltr"] .plan-compare-table tfoot th {
  text-align: left;
}

/* .story-chapters button (home scroll story): chapter labels were hard
   right-aligned */
html[dir="ltr"] .story-chapters button {
  text-align: left;
}

/* .story-progress-wrap + .story-progress i (home scroll story): the RTL page
   pins the "1 of 5" counter to the visual left and fills the bar from the
   right; mirror both for LTR */
html[dir="ltr"] .story-progress-wrap {
  text-align: right;
  direction: ltr;
}
html[dir="ltr"] .story-progress i {
  transform-origin: left;
}

/* .split-copy .mini-list (home splits, narrow screens): the centered copy
   keeps a hard right-aligned checklist in RTL; mirror it for LTR */
@media (max-width: 960px) {
  html[dir="ltr"] .split-copy .mini-list {
    text-align: left;
  }
}

/* ---------------------------------------------------------------------------
   Header. Every English string in it is longer than the Hebrew it replaced,
   and .brand-lockup was the flex item absorbing the difference, so the logo
   was silently crushed (0px at 320px, 47px at 375px, 27px at 961px). Pin the
   logo, stop the nav labels breaking mid-label, then buy back the width in
   three bands: phones (nav hidden), tablet, and desktop.
   --------------------------------------------------------------------------- */
html[dir="ltr"] .main-nav a { white-space: nowrap; }
html[dir="ltr"] .brand-lockup { flex-shrink: 0; }

/* Phones. .main-nav is already hidden here, but "Log in" + "Open an account"
   are still ~50px wider than the Hebrew pair, and the logo was the flex item
   absorbing it: it rendered 47px wide at 375px and collapsed to 0px at 320px.
   Pinning the logo (above) and shrinking the two pills fits both instead. */
@media (max-width: 640px) {
  html[dir="ltr"] .header-inner { gap: 6px; }
  html[dir="ltr"] .nav-cta { padding: 8px 10px; font-size: 12px; }
  html[dir="ltr"] .nav-login { padding: 8px 8px; font-size: 12px; }
}

/* Narrower than any current mainstream phone: the secondary "Log in" pill
   steps aside so the logo and the primary CTA both survive. Login stays one
   tap away inside the CTA flow and in the footer. */
@media (max-width: 359px) {
  html[dir="ltr"] .nav-login { display: none; }
}

@media (min-width: 961px) {
  html[dir="ltr"] .header-inner { gap: 14px; }
  html[dir="ltr"] .main-nav { gap: 14px; }
  html[dir="ltr"] .nav-cta { padding: 9px 16px; font-size: 14px; }
  html[dir="ltr"] .nav-login { padding: 9px 12px; font-size: 14px; }
}

/* Tablet / small laptop. Six full-size English labels plus the action pills
   plus the logo genuinely do not fit here. The WhatsApp icon yields first: it
   is the one duplicated affordance (also the floating bot and a footer link),
   and the shared stylesheet already drops it below 640px for both languages. */
@media (min-width: 961px) and (max-width: 1099px) {
  html[dir="ltr"] .header-inner { gap: 12px; }
  html[dir="ltr"] .main-nav { gap: 12px; }
  html[dir="ltr"] .main-nav a { font-size: 13.5px; }
  html[dir="ltr"] .brand-lockup img.brand-logo { height: 38px; }
  html[dir="ltr"] .nav-wa { display: none; }
}

/* Guided tour (demo.html) top bar, phones. The English pair of action pills is
   ~45px wider than the Hebrew pair, which pushed the primary CTA past the
   viewport where body{overflow-x:hidden} silently clipped it. */
@media (max-width: 640px) {
  html[dir="ltr"] .demo-bar-actions { gap: 8px; }
  html[dir="ltr"] .demo-bar .demo-ghost,
  html[dir="ltr"] .demo-bar .demo-solid { padding: 9px 12px; font-size: 12.5px; }
}

/* Header side order. The shell's DOM order is actions, nav, brand, which puts
   the Kampi mark on the screen-left in Hebrew. A plain mirror flips it to the
   right in English, the one place where every reader expects the logo. Reversing
   the flex row restores logo-left / actions-right without touching the markup,
   the Hebrew rule, or the shared stylesheet. `.main-nav`'s `margin-inline: auto`
   keeps centring the links either way. */
html[dir="ltr"] .header-inner { flex-direction: row-reverse; }
/* The shared rule pushes the logo to the inline-end with `margin-inline-start:
   auto`, which is what pins it left in Hebrew. Reversed, that same auto margin
   would pull it back toward the middle, so the spacer moves to the other side. */
html[dir="ltr"] .header-inner > .brand-lockup { margin-inline-start: 0; margin-inline-end: auto; }
html[dir="ltr"] .header-left { margin-inline-start: 0; margin-inline-end: auto; }