/* ============================================================
   Yozmot Atid — Colors & Type
   The visual foundation: a charity that helps women launch small
   businesses. Hebrew-first (RTL). Optimistic, warm, approachable.
   Hero brand mark is a bright pink-red triangle/arrow on white.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Heebo:wght@100..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* ---------- Brand / accent ---------- */
  --ya-red:        #ED4C4C;   /* The triangle. Hero CTAs. */
  --ya-red-deep:   #D63838;   /* Hover / pressed red. */
  --ya-coral:      #FF6666;   /* Active nav pill, soft accent. */
  --ya-pink-soft:  #FFD9D9;   /* Tints, badges, surfaces. */

  /* ---------- Playful supporting palette (the dots motif) ---------- */
  --ya-mint:       #50F8CD;   /* Mint dot. Tags, links on dark. */
  --ya-mint-deep:  #38B5A2;   /* Headings on light, icons. */
  --ya-yellow:     #F9B601;   /* Yellow dot. Highlights, donations. */
  --ya-yellow-soft:#FFE9A8;
  --ya-pink-dot:   #FBC4D2;   /* The pink dot in the trio. */

  /* ---------- Neutrals ---------- */
  --ya-ink:        #1F1F1F;   /* Logo ink, body. */
  --ya-ink-2:      #333333;   /* Secondary text. */
  --ya-ink-3:      #5B5B5B;   /* Tertiary text / captions. */
  --ya-ink-4:      #828282;   /* Hint text. */
  --ya-line:       #E0E0E0;   /* Default border. */
  --ya-line-soft:  #EEEEEE;
  --ya-bg:         #FFFFFF;
  --ya-bg-soft:    #FAFAF7;   /* Section backgrounds. */
  --ya-bg-cream:   #FFF7EE;   /* Warm panel bg. */

  /* ---------- Semantic ---------- */
  --fg-1:    var(--ya-ink);
  --fg-2:    var(--ya-ink-2);
  --fg-3:    var(--ya-ink-3);
  --fg-mute: var(--ya-ink-4);
  --bg-1:    var(--ya-bg);
  --bg-2:    var(--ya-bg-soft);
  --bg-3:    var(--ya-bg-cream);
  --border:  var(--ya-line);
  --link:    var(--ya-mint-deep);
  --link-hover: var(--ya-red);
  --focus-ring: var(--ya-red);

  /* ---------- Type families ----------
     Hebrew: Assistant (UI/body) + Heebo (display). Latin: Poppins.
     Lora (serif italic) is used sparingly for editorial pull-quotes. */
  --font-sans:    'Assistant', 'Heebo', 'Poppins', 'Arial Hebrew', Arial, sans-serif;
  --font-display: 'Heebo', 'Assistant', 'Poppins', 'Arial Hebrew', Arial, sans-serif;
  --font-latin:   'Poppins', 'Assistant', Arial, sans-serif;
  --font-serif:   'Lora', Georgia, serif;

  /* ---------- Type scale (mobile-first; comfy for Hebrew) ---------- */
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1:      clamp(32px, 4.5vw, 52px);
  --fs-h2:      clamp(26px, 3vw, 36px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---------- Spacing (8pt grid, with a couple of half-steps) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* ---------- Shadows (soft, low-contrast) ---------- */
  --shadow-1: 0 1px 2px rgba(31,31,31,.06), 0 1px 1px rgba(31,31,31,.04);
  --shadow-2: 0 4px 14px rgba(31,31,31,.08);
  --shadow-3: 0 12px 32px rgba(31,31,31,.10);
  --shadow-pop: 0 8px 24px rgba(237,76,76,.18); /* red-tinted, hero CTA */

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(.2,.7,.2,1);
  --ease-in-out:  cubic-bezier(.4,0,.2,1);
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;

  /* ---------- Layout ---------- */
  --content-max: 1200px;
  --gutter:      24px;
}

/* ============================================================
   Semantic element styles — apply these by tag, no class needed.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "kern", "ss01";
  -webkit-font-smoothing: antialiased;
}

[lang="en"], .latin { font-family: var(--font-latin); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); color: var(--fg-2); text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ya-red);
  font-weight: 700;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-6) 0;
}

::selection { background: var(--ya-pink-soft); color: var(--ya-ink); }

/* ============================================================
   Utilities
   ============================================================ */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.text-red    { color: var(--ya-red); }
.text-mint   { color: var(--ya-mint-deep); }
.text-yellow { color: var(--ya-yellow); }
.bg-cream    { background: var(--ya-bg-cream); }
.bg-soft     { background: var(--ya-bg-soft); }

/* RTL-aware logical inline padding for arrow buttons (e.g. fas fa-angle-left in RTL) */
[dir="rtl"] .arrow-after::after { content: "←"; margin-inline-start: .4em; }
[dir="ltr"] .arrow-after::after { content: "→"; margin-inline-start: .4em; }