/* =====================================================
   typography.css — Hebrew Typography Excellence (A2)
   Builds on design-tokens.css; loads BEFORE component CSS
   ===================================================== */
@layer base {

  /* ─────────────────────────────────────────────
     Variable font handling
     (font itself loaded by Google Fonts <link>)
     ───────────────────────────────────────────── */
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

  body { font-family: var(--font-family); font-feature-settings: "kern", "liga"; }

  /* ─────────────────────────────────────────────
     Optical tuning per role
     ───────────────────────────────────────────── */

  /* Display — hero, big headings */
  .display-text,
  .display { font-family: var(--font-family);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  /* Body — paragraphs */
  .body-text,
  .body { font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-relaxed);
  }

  /* Eyebrow — small uppercase labels above headings */
  .eyebrow { font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold-700);
  }

  /* Tabular numerals — for prices, stats, dates */
  .numerals,
  .price,
  .stat-value,
  [data-tnum] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* ─────────────────────────────────────────────
     Headings (auto-apply tighter tracking)
     ───────────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  h1 { letter-spacing: var(--tracking-tighter); }

  /* ─────────────────────────────────────────────
     Reading measure & rhythm for long-form content
     ───────────────────────────────────────────── */
  .article-body,
  .prose,
  article > .container,
  article .content {
    max-width: var(--content-narrow);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }
  .article-body p,
  .prose p {
    margin-block-end: 1.2em;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
  .article-body h2,
  .prose h2 {
    margin-block: 2em 0.5em;
    max-width: 30ch;
  }
  .article-body h3,
  .prose h3 {
    margin-block: 1.5em 0.4em;
    max-width: 35ch;
  }

  /* ─────────────────────────────────────────────
     Pull-quote (call-out for important phrases)
     ───────────────────────────────────────────── */
  .pull-quote,
  blockquote.pull {
    font-size: var(--text-xl);
    font-weight: var(--fw-medium);
    line-height: var(--leading-snug);
    color: var(--navy-700);
    max-width: 40ch;
    margin-inline: auto;
    margin-block: 2em;
    padding-inline-start: var(--space-6);
    border-inline-start: 4px solid var(--gold-500);
    text-wrap: balance;
  }

  /* ─────────────────────────────────────────────
     Drop cap — first letter of first paragraph
     (opt-in via .drop-cap class on the article body)
     ───────────────────────────────────────────── */
  .drop-cap > p:first-of-type::first-letter,
  .article-body.drop-cap > p:first-of-type::first-letter {
    font-size: 4em;
    font-weight: var(--fw-extrabold);
    color: var(--gold-600);
    float: right; /* RTL */
    line-height: 0.85;
    margin-inline-start: 0.1em;
    margin-block-start: 0.05em;
    padding-inline-end: 0.1em;
  }

  /* ─────────────────────────────────────────────
     Mixed Hebrew + Latin / digits
     <bdi> wraps Latin or numeric content so it
     renders LTR within RTL text — avoids the
     classic "phone number flips" bug.
     ───────────────────────────────────────────── */
  bdi { unicode-bidi: isolate; }
  .ltr { direction: ltr; unicode-bidi: isolate; }

  /* Phone numbers, prices, dates render LTR digits */
  .phone, .price, time, .stat-value {
    unicode-bidi: isolate;
  }

  /* ─────────────────────────────────────────────
     Links inside copy — gold underline slide-in
     ───────────────────────────────────────────── */
  .article-body a,
  .prose a {
    color: var(--navy-700);
    background-image: linear-gradient(to bottom, var(--gold-500), var(--gold-500));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size var(--motion) var(--ease-out);
    text-decoration: none;
  }
  .article-body a:hover,
  .article-body a:focus-visible,
  .prose a:hover,
  .prose a:focus-visible {
    background-size: 100% 2px;
  }

  /* ─────────────────────────────────────────────
     Selection within long-form retains brand
     ───────────────────────────────────────────── */
  .article-body ::selection,
  .prose ::selection { background: var(--gold-100); color: var(--navy-900); }

  /* ─────────────────────────────────────────────
     Reduced motion: remove link slide-in animation
     ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .article-body a, .prose a { transition: none; background-size: 100% 1px; }
  }
}