/* ===========================
   typography.css
   Hebrew RTL Typography System
   =========================== */

/*
   גופנים self-hosted: Frank Ruhl Libre (סריף עברי, כותרות) + Heebo (גוף)
   נטענים מ-assets/fonts/fonts.css דרך functions.php
*/

/* ===========================
   Base Typography
   =========================== */
body {
    font-family: var(--font-main);   /* Heebo - Hebrew body */
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: 400;
}

/* ===========================
   Heading Scale - Luxury Serif
   =========================== */
h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400; /* Frank Ruhl Libre נטען ב-400/500 */
}
h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
}
h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
}
h4 { font-size: 1.5rem;  font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 600; }
h6 { font-size: 1rem;    font-weight: 600; }

/* ===========================
   Text Utilities
   =========================== */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }
.text-4xl  { font-size: var(--font-size-4xl); }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

.leading-tight  { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-loose  { line-height: var(--line-height-loose); }

/* ===========================
   RTL Text Direction
   =========================== */
[dir="rtl"],
.rtl { direction: rtl; text-align: right; }

/* Hebrew specific adjustments */
:lang(he) {
    word-spacing: 0.05em;
    font-feature-settings: "kern" 1;
}

/* ===========================
   Links
   =========================== */
.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
.entry-content a:hover {
    color: var(--color-brand-light);
    text-decoration-color: var(--color-brand-light);
}

/* ===========================
   Prose / Article Content
   =========================== */
.prose { max-width: 760px; }
.prose p  { line-height: var(--line-height-loose); margin-bottom: var(--space-5); }
.prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--color-primary); }
.prose h3 { margin-top: var(--space-8);  margin-bottom: var(--space-3); }
.prose ul { padding-right: var(--space-6); list-style: disc;    margin-bottom: var(--space-5); }
.prose ol { padding-right: var(--space-6); list-style: decimal; margin-bottom: var(--space-5); }
.prose li { margin-bottom: var(--space-2); line-height: var(--line-height-loose); }

.prose blockquote {
    border-right: 4px solid var(--color-accent);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-6);
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text-muted);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
}
.prose th, .prose td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    text-align: right;
}
.prose th { background: var(--color-bg-alt); font-weight: 700; }
.prose tr:nth-child(even) { background: var(--color-bg); }

.prose hr {
    border: none;
    border-top: 2px solid var(--color-border);
    margin-block: var(--space-8);
}

/* ===========================
   Highlighted Text
   =========================== */
mark {
    background: linear-gradient(120deg, rgba(212,168,83,.3) 0%, rgba(212,168,83,.15) 100%);
    color: inherit;
    padding: 0 var(--space-1);
    border-radius: 2px;
}

/* ===========================
   Lead Paragraph
   =========================== */
.lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-loose);
    color: var(--color-text-muted);
    font-weight: 300;
}

/* ===========================
   Animated gradient text
   =========================== */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}