/* ===================================================================
   en.css — loaded only by the pages under /en/, last in the head.
   23.9.2026.

   The Hebrew site is the design. This file makes the English pages read
   the same way in the other direction: the same hierarchy, the same
   spacing, the same accents, with text blocks on the left and media on
   the right. Nothing here redesigns; every rule answers a specific
   difference that was measured against the Hebrew page.
   =================================================================== */

/* ---------- 1. type ---------- */
/* OhYaelLeibushor has Hebrew glyphs only. Afek is the site's own face and
   carries Latin, so the handwritten marks stay in the family. Afek is a
   text face, not a script face, so it is set a step smaller than the Hebrew
   handwriting was. */
html.en .deco-script,
html.en .deco-hand,
html.en .hero-press__hand-text,
html.en .about-circle__invite {
  font-family: 'Afek', 'Assistant', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* 10.10.2026: the invite that closes "the circle of giving". Same rule as
   every other handwritten mark here, and for the same reason: Afek is a
   text face, so it is set a step smaller than the Hebrew script was
   (27 to 48px there, 21 to 37px here) or it reads as a heading. */
html.en .about-circle__invite { font-size: clamp(21px, 2.5vw, 37px); line-height: 1.32; }
html.en .deco-script,
html.en .deco-hand {
  --script-fs: clamp(14px, 1.2vw, 20px);
  font-size: var(--script-fs);
  line-height: 1.2;
}
/* Both handwritten marks in the hero share one size, the partnership
   note's (--note-fs, set below for 901px and up), and both are set at
   partial ink: Afek bold at full colour reads as a label, not a note.
   The note's opacity is its own variable (the reveal mask leaves it
   alone); the press mark takes the same value directly. */
html.en body.hero-v2 .hero .hero-press__hand-text { font-size: var(--note-fs); white-space: nowrap; opacity: .58; }
html.en body.hero-v2 .hero .hero-handnote .deco-hand { --script-op: .58; opacity: .58; }

/* ---------- 2. the hero ---------- */
/* The partnership note stays on the right, exactly where it is in Hebrew:
   an explicit exception to the mirroring rule. Only its measure changes,
   because the English line is nine words to the Hebrew six: a narrower
   column, wrapped, at the same anchor. */
html.en body.hero-v2 .hero .hero-handnote .deco-hand {
  width: 150px;
  white-space: normal;
  text-align: center;
}
/* The press mark sits to the left of the logos in both languages, and its
   drawn arrow curves right, towards them. It is not mirrored. */

/* ---------- 3. writing animations run left to right ---------- */
/* The handwritten lines are revealed by a gradient mask sliding across
   them. The Hebrew mask runs `to left` from 0% to 100%, so the line is
   written right to left. Both the gradient and the two positions are
   reversed here; easing and delays are untouched. */
html.en .hero-pre .hero .hero-press__hand-text,
html.en .hero.hero-armed .hero-press__hand-text,
html.en .hero-pre .hero .deco-hand,
html.en .hero.hero-armed .deco-hand {
  -webkit-mask-image: linear-gradient(to right, #000 0 34%, rgba(0, 0, 0, 0) 66%);
          mask-image: linear-gradient(to right, #000 0 34%, rgba(0, 0, 0, 0) 66%);
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
}
html.en .hero.hero-armed.hero-in .hero-press__hand-text,
html.en .hero.hero-armed.hero-in .deco-hand {
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
}

/* ---------- 4. arrows and icons ---------- */
/* "Forward" is leftwards in Hebrew and rightwards here. Only arrows that
   mean forward are mirrored; logos, play marks and symbols are not. */
html.en .arrow-circle svg,
html.en .dj-start svg,
html.en .dj-skip svg,
html.en .dj-restart svg,
html.en .dj-continue svg,
html.en .blog-card__arrow svg {
  transform: scaleX(-1);
  transform-origin: center;
}
/* The carousel pairs (.vl-nav) already point outward in Hebrew, the left
   button left and the right button right, in an ltr row. They are the same
   in English, so they are not mirrored. */

/* In a call-to-action the icon follows the text in English. The Hebrew
   markup puts the icon first in some buttons and last in others; ordering
   the icon last covers both without reversing rows, and a bare text node
   keeps its default order. Gap and alignment are the button's own. */
html.en .roee-action--join,
html.en .join-submit,
html.en .ft-btn,
html.en .cta-btn,
html.en .blog-help-btn { flex-direction: row; }
html.en .roee-action--join > svg,
html.en .join-submit > svg,
html.en .ft-btn > svg,
html.en .cta-btn > svg,
html.en .blog-help-btn > svg { order: 9; }
html.en .roee-section.roee-card .roee-action--join span { direction: ltr; }

/* ---------- 5. alignment inside text blocks ---------- */
/* Text blocks read from the left. Centred sections stay centred. */
html.en .stats-title,
html.en .give-title,
html.en .join-copy,
html.en .join-title,
html.en .join-body,
html.en .field-copy,
html.en .field-title,
html.en .ft-cols,
html.en .ft-col,
html.en .roee-section.roee-card .roee-copy,
html.en .roee-section.roee-card .roee-title,
html.en .roee-section .roee-icons li,
html.en .about-first-new__caption,
html.en .about-first-new__caption h2,
html.en .about-first-new__caption p,
html.en .about-first-new__trust,
html.en .roei-story-copy,
html.en .roei-biography,
html.en .roei-story-title,
html.en .transparency-fact,
html.en .faq-item,
html.en .faq-group-heading,
html.en .contact-card { text-align: left; }

/* ---------- 6. text left, media right ---------- */
/* The Roei card on the home page positions its parts absolutely against
   the card, so each anchor is moved to the opposite edge at the same
   distance. Measured on the Hebrew card at 1440: photo 214px from the left,
   copy 184px from the right, arc 48px from the left, blob on the right. The
   photo itself is moved, not mirrored. */
@media (min-width: 1025px) {
  /* the photo sits 44px further in than the Hebrew mirror would put it, to
     leave the copy its wider left margin (below) without touching it */
  html.en .roee-section.roee-card .roee-photo { left: auto; right: 170px; }
  /* the copy is a flex child placed by its logical inline margins, which
     already swap sides in ltr: the photo clearance moves to the right with
     the photo. The English lines run longer than the Hebrew ones (905px
     against 554px at 45px), so the block starts nearer the card's edge and
     is set smaller, with the last line broken in two: five lines that take
     the height of the Hebrew four and stop short of the photo. */
  /* 150px in from the card's edge (24.9.2026: at least 70px more than the
     first cut, per Chen) */
  html.en .roee-section.roee-card .roee-copy  { margin-inline-start: 150px; }
  html.en .roee-section.roee-card .roee-title { font-size: 30px; line-height: 1.22; }
  /* the highlighted line carries its own size variable; it follows the title */
  html.en .roee-section.roee-card .roee-title .roee-mark { font-size: 30px; }
  /* (the card's arc and quarter-circle are gone in both languages, 24.9.2026) */
  /* the sky drifts in from the photo's edge and fades before the text; with
     the photo on the right it drifts in from the right, so it is anchored
     there and flipped so the fade still faces the copy */
  html.en .roee-section.roee-card .roee-sky {
    left: auto; right: 0;
    transform: scaleX(-1);
    transform-origin: center;
  }
  /* the icon list sets direction:rtl on itself; released so it packs left */
  html.en .roee-section.roee-card .roee-icons { direction: ltr; }
  html.en .roee-section.roee-card .roee-icons,
  html.en .roee-section.roee-card .roee-desktop-actions { justify-content: flex-start; }
}

/* Below 1025 the Roei card stacks and centres its title, and Hebrew keeps
   every line unbroken. The English lines would run past the card, so they
   are allowed to wrap and set a step smaller; the highlight follows. */
@media (max-width: 1024px) {
  /* the stacked card keeps its phone width (about 360px) up to 1024, and its
     height is fixed, so the block cannot grow: 16.5px keeps the longest line,
     the memorial one, on one line inside it. !important only because the
     Hebrew phone rule below 480 uses it too. */
  html.en .roee-section.roee-card .roee-title { font-size: 16.5px !important; line-height: 1.25; }
  /* the action row runs rtl in the stacked card, which drags a trailing
     arrow to the front of "Read about Roei" */
  html.en .roee-section .roee-desktop-actions,
  html.en .roee-section .roee-action,
  html.en .roee-section .roee-action span { direction: ltr; }
  html.en .roee-section.roee-card .roee-title > span,
  html.en .roee-section.roee-card .roee-title .roee-mark-line,
  html.en .roee-section.roee-card .roee-title .roee-mark { white-space: normal; }
  html.en .roee-section.roee-card .roee-title .roee-mark { font-size: inherit; }
}

/* Photos and videos of people: the gallery moves to the right, the copy to
   the left. field-wrap is written ltr in Hebrew with the gallery first, so
   the whole row is mirrored by running it rtl: the gallery packs against
   the right edge, the copy sits to its left with the same gap, and the
   children run ltr again for their own text. The track keeps its own
   direction; the carousel is not touched. */
html.en .field-wrap > * { direction: ltr; }
@media (min-width: 901px) {
  html.en .field-wrap { direction: rtl; }
  html.en .field-copy { align-items: flex-start; text-align: left; }
  html.en .field-copy > .section-tag { margin-left: 0 !important; margin-right: auto !important; align-self: flex-start; }
  html.en .field-copy .field-title { align-self: flex-start; text-align: left; }
  html.en .field-nav-row { align-self: flex-start; }
}
/* below 901 the section stacks and the title is centred; the tag, which the
   Hebrew pins to the right edge, is centred with it so its longer English
   text is never cut at the edge */
@media (max-width: 900px) {
  html.en .field-copy > .section-tag { margin-left: auto !important; margin-right: auto !important; align-self: center; }
}
/* the open card's caption: icon first, text beside it, slid in from the left */
html.en .field-foot { direction: ltr; }
html.en .field-text { text-align: left; transform: translateX(10px); }

/* About: the video goes to the right column, the text to the left. The grid
   keeps its two tracks and its gap; only the assignment swaps. */
@media (min-width: 1025px) {
  html.en .about-first-new__video   { grid-column: 2; }
  html.en .about-first-new__details { grid-column: 1; }
  html.en .about-first-new__donate  { justify-self: start; }
}

/* Roei's page: copy left, figure right. The clouds belong to the figure
   column only; site-refinements.js sizes them from that column outward to
   the right edge, never across the text. */
@media (min-width: 1025px) {
  html.en .roei-story-copy { grid-column: 1; grid-row: 1; }
  html.en .roei-figure     { grid-column: 2; grid-row: 1; }
  html.en .roei-sky { transform: scaleX(-1); transform-origin: center; }
  html.en .roei-light { left: auto; right: -37%; transform: scaleX(-1); }
}

/* ---------- 6b. explicit rtl left in shared components ---------- */
/* A few components set direction:rtl on themselves rather than inheriting
   it, so the document direction never reaches them. Each is released here;
   the rule is matched at the component's own specificity so it wins. */
/* the donation section pins its title, its card row and its trust row to
   rtl at component specificity; in ltr the title reads in order, the ₪36
   card leads the row and the trust badges read left to right */
html.en .act-donation[data-donation-section] .donation-title,
html.en .act-donation[data-donation-section] .donation-cards,
html.en .act-donation[data-donation-section] .donation-trust { direction: ltr; }
html.en .donation-button { direction: ltr; }
html.en .about-page .about-first-new__caption,
html.en .about-page .about-first-new__caption p,
html.en .about-page .about-first-new__caption h2 { direction: ltr; text-align: left; }
html.en .about-page .about-first-new__trust { direction: ltr; justify-content: flex-start; text-align: left; }

/* Afek's Hebrew regular sits visually heavier than its Latin regular; the
   Roei headline is set at 400 in Hebrew and reads bold. 700 matches it. */
html.en .roee-section.roee-card .roee-title { font-weight: 700; }
/* the highlight behind the memorial line is faint where the line begins and
   opens in the reading direction; both start at the left here */
html.en .roee-section.roee-card .roee-title .roee-mark {
  background: linear-gradient(90deg, transparent 0%, var(--ry-mark-bg) 34%, var(--ry-mark-bg) 100%);
  transform-origin: left center;
}

/* the footer arrows point forward */
html.en .ft-btn svg { transform: scaleX(-1); }

/* the trust strip: the English blocks are longer than the Hebrew ones and
   would wrap to a second row; sharing the row keeps it one line as designed */
html.en .footer-section .give-strip { text-align: left; }
html.en .footer-section .give-strip-title { text-align: left; }
html.en .footer-section .give-trust { flex: 0 1 auto; min-width: 0; text-align: left; }
html.en .give-trust-text { text-align: left; }
/* each block takes the width of its heading; the line below wraps to two
   lines under it, as the Hebrew line does at its <br> */
@media (min-width: 1025px) {
  html.en .footer-section .give-trust-text h3 { white-space: nowrap; }
}
html.en .footer-section .give-trust-text p { white-space: normal; max-width: 30ch; }
/* "Give / with confidence" is wider than "תרמו / בביטחון": the title takes
   its own width instead of the Hebrew measure, and the highlight fades at
   the start of the word, which is now its left end */
html.en .footer-section .give-strip-title { width: auto; font-size: 25px; }
/* the three blocks must share one row as they do in Hebrew; the English
   headings are longer, so the type steps down two pixels instead of wrapping */
html.en .footer-section .give-trust-text h3 { font-size: 16px; }
html.en .footer-section .give-trust-text p { font-size: 14px; }
html.en .give-strip-title .gv-mark {
  right: auto; left: 0;
  background: linear-gradient(90deg, rgba(241, 106, 44, 0) 0%, #F16A2C 46%, #F16A2C 100%);
}

/* the give route: en-runtime.js re-anchors the stops from the right, so
   the first option sits by the title, and the page redraws its own path
   through them. Nothing to mirror here. */

/* the join headline keeps its two lines: both spans stay unbroken, as the
   first one does in Hebrew */
@media (min-width: 1025px) {
  html.en .join-copy { max-width: 720px; }
  html.en .join-title > span { white-space: nowrap; }
}
html.en .join-num-label { text-align: left; }
/* the dashed arrow that points at the form sits between the copy and the
   form: on the form's left here, flipped so it still points at the form.
   Its hint animation moves it with `translate`, so the flip is untouched. */
html.en .join-arrow { right: auto; left: var(--jn-arrow-x); transform: scaleX(-1); }

/* ---------- 4b. room inside the buttons ---------- */
/* the English labels run longer; the pills get a little more air, and the
   header pills swap their padding so the text side keeps the wide side */
html.en .cta-btn { padding-left: 24px; padding-right: 9px; }
html.en .roee-section.roee-card .roee-desktop-actions .roee-action { padding-inline: 28px; }
html.en .ft-btn { padding-inline: 28px; }

/* the contact page's quick actions end in a typed arrow; en-runtime.js
   sets it to point forward */

/* the partner wordmark next to the initiative's emblem is the partner's
   logo: it stays in Hebrew, as the welfare ministry's logo does, and keeps
   its own direction inside the ltr row */
html.en .mizam-text { direction: rtl; text-align: right; }

/* the custom select caret sits at the field's end */
html.en .join-select-wrap::after { left: auto; right: 20px; }

/* ---------- 6c. the about page below 1025 ---------- */
/* the stacked layout sets rtl on the story and the trust row at component
   specificity; released here, with the partner captions reading left */
html.en .about-page .about-story__mobile,
html.en .about-page .about-story__mobile *,
html.en .about-page .about-trust,
html.en .about-page .about-trust * { direction: ltr; }
/* the registration number is boxed to the width of its two Hebrew lines;
   the English line takes its own width */
@media (max-width: 1024px) {
  html.en .about-page .about-trust__number { width: auto; max-width: 120px; text-align: left; }
}
/* the trust row under the story sits exactly on the text column: no wider,
   and starting where the text starts */
@media (min-width: 1025px) {
  /* the column is written rtl by the Hebrew grid, which parks the narrower
     caption at its right edge; ltr puts caption and trust row on the same
     left edge, and the row takes the caption's measure */
  html.en .about-page .about-first-new__details { direction: ltr; }
  html.en .about-page .about-first-new__trust { justify-self: start; width: 100%; max-width: 614px; margin-inline: 0; flex-wrap: wrap; row-gap: 6px; }
}

/* the hero note: the 901px block sets --note-fs on the hero; this is where
   the English size belongs, not on the element */
@media (min-width: 901px) {
  html.en body.hero-v2 .hero { --note-fs: clamp(13px, 1.12vw, 17px); }
  html.en body.hero-v2 .hero .hero-handnote .deco-hand { width: 215px; }
}

/* ---------- 7. the donation journey ---------- */
/* donation-journey.css pins every line to direction:rtl for Hebrew
   punctuation; on an English line that drags the full stop to the wrong
   end and, on the letter-animated <em>, renders the words backwards. */
html.en .dj,
html.en .dj-line,
html.en .dj-headline,
html.en .dj-intro-headline,
html.en .dj-intro-headline em,
html.en .dj-headline em,
html.en .dj-letter,
html.en .dj-stop-label,
html.en .dj-emotion,
html.en .dj-impact { direction: ltr; }
/* the story lines run longer in English; a tenth smaller keeps the widest
   of them inside the text column at laptop widths */
@media (min-width: 1025px) {
  html.en .dj .dj-headline { font-size: clamp(2.35rem, 4.25vw, 3.15rem); }
}
/* "Skip to the donation ›": label first, chevron after, pointing on */
html.en .dj-skip { direction: ltr; }
html.en .dj-skip svg { order: 9; }
/* The route runs right-to-left in Hebrew; here it travels the other way.
   The track is mirrored and each stop mirrored back so it stays readable,
   composed onto the stop's own centring translate. */
html.en .dj-route-svg,
html.en .dj-route-track { transform: scaleX(-1); }
html.en .dj-stop { transform: translate(-50%, -50%) scaleX(-1); }

/* ---------- 7a. the activity pages' gallery ---------- */
/* the arrow pair is written prev/next and reversed for Hebrew; in ltr the
   plain order puts "previous" on the left and "next" on the right */
html.en .ah-nav { flex-direction: row; }
/* 5.10.2026: the hand-written partnership line and its arrow are dropped from
   the English hero at Chen's request. The Hebrew script carries the whole line
   on two tight lines; set in a Latin face at the same size it ran over the
   carousel and read badly. The partnership is still named in the footer. */
html.en body.hero-v2 .hero .hero-handnote { display: none !important; }
/* the donation pill over the video: its arrow is pinned to the left end
   with the padding to match; in English it sits at the right end */
@media (min-width: 1025px) {
  html.en .activity-page .ah-video .ah-give { padding: 0 48px 0 14px; }
  html.en .activity-page .ah-video .ah-give .arrow-circle { left: auto; right: 7px; }
}
@media (max-width: 1024px) {
  html.en .activity-page .ah-video .ah-give,
  html.en .activity-page .ah .ah-video .ah-give,
  html.en body:not(.desktop-preview).activity-page .ah-video .ah-give { padding: 0 4px 0 8px !important; }
}

/* ---------- 7b. form fields ---------- */
/* fields are typed and read from the left; the Hebrew rules align them right */
html.en input:not([type="checkbox"]):not([type="radio"]),
html.en textarea,
html.en select { direction: ltr; text-align: left; }

/* ---------- 8. runs that are always ltr ---------- */
html.en [dir="ltr"] { unicode-bidi: normal; }
html.en .donation-card__amount,
html.en .stat-value { direction: ltr; }

/* the "Remembering Roei" tab shares its key with the page title, whose
   value marks "Roei" as an accent; in the tab the word keeps the tab's colour */
html.en .nav-roei .is-accent { color: inherit; }

/* ---------- 9. language switcher ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch__link {
  display: inline-grid; place-items: center;
  width: 26px; height: 18px; border-radius: 3px; overflow: hidden;
  opacity: .45; filter: grayscale(1);
  transition: opacity .18s ease, filter .18s ease, box-shadow .18s ease;
}
.lang-switch__link:hover,
.lang-switch__link:focus-visible { opacity: 1; filter: none; }
.lang-switch__link[aria-current="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px #F16A2C; }
.lang-switch__link svg { display: block; width: 100%; height: 100%; }
.lang-switch__link:focus-visible { outline: 2px solid #431F10; outline-offset: 2px; }

/* ===================================================================
   8.10.2026 · כפתורי הכרטיס החום של רועי באנגלית
   -------------------------------------------------------------------
   חן דיווחה שהם נדחסים זה על זה באנגלית. נמדד:

     390px   "Read about Roei" [226,613,119,28]
             "Join us"        [45,613,172,28]   →  9px בלבד ביניהם
     1280px  [190,540,240,46] ו-[444,540,331,46]

   כלומר הם בשורה אחת עם תשעה פיקסלים של אוויר. בעברית התוויות
   קצרות יותר ולכן זה מחזיק; באנגלית הן ארוכות, וכל הבדל במטריקות
   הגופן — iOS מול Edge, או גופן חלופי שנטען — דוחף אותם להתנגשות.
   במדידה שלי הם עוד לא חופפים, אצלה כן, וזה אותו הפרש.

   הפתרון שהיא ביקשה: כפתור מתחת לכפתור. במקום לקבע גובה, הקונטיינר
   מקבל רשות לעבור שורה, והכפתורים נמתחים לרוחב מלא — כך אין מצב
   שבו שני כפתורים חולקים שורה בלי מקום.

   ⚠️ עד 900px בלבד. בדסקטופ רחב יש להם מקום בשפע (254px אוויר
   ב-1280), ושינוי שם היה מקלקל קומפוזיציה שעובדת.
   =================================================================== */
@media (max-width: 900px) {
  html.en .roee-section.roee-card .roee-desktop-actions {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  html.en .roee-section.roee-card .roee-desktop-actions .roee-action {
    flex: 1 1 100%;
    justify-content: center;
  }
}