/* ============================================================================
   Arova · טיפוגרפיה
   ----------------------------------------------------------------------------
   טוען את שלושת הפונטים הפעילים ומגדיר את סגנונות הטקסט של האתר.
   צירוף ד: Noto Serif Hebrew (כותרות עברית) · Marcellus (כותרות אנגלית) · Rubik (טקסט)
   ============================================================================ */

/* שאריות מאב-הטיפוס: כאן היה @import של קובץ הפונטים.
   בתבנית וורדפרס הקובץ כבר נטען כ-<link> מ-functions.php, ולכן
   ה-@import גרם לטעינה שנייה של אותו קובץ בדיוק. גרוע מכך —
   דפדפן מגלה @import רק אחרי שהוריד ופירסר את הקובץ שמכיל אותו,
   ולכן הפונטים הגיעו באיחור והטקסט נצבע מחדש מול עיני המשתמש. */


/* ============================================================================
   החלפת פונט הכותרות לפי שפת העמוד.
   Marcellus הוא פונט לטיני בלבד ואין בו עברית — לכן החלפה אוטומטית
   לפי תגית lang היא היחידה שמונעת כותרת שבורה באמצע המשפט.
   ============================================================================ */

html[lang="he"] { --font-heading: var(--font-heading-he); }
html[lang="en"] { --font-heading: var(--font-heading-en); }


/* ============================================================================
   איפוס בסיסי
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* מונע הגדלת טקסט אוטומטית בסיבוב מסך באייפון */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* תכונת hidden חייבת לנצח כל display שנקבע ברכיב.
   בלי !important, כלל כמו `.mobile-menu { display: flex }` דורס אותה,
   והאלמנט נשאר בסדר הניווט במקלדת למרות שהוא מוסתר מהעין. */
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }


/* ============================================================================
   כותרות
   ============================================================================ */

h1, h2, h3, h4,
.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-wrap: balance;   /* מונע "מילה יתומה" בשורה האחרונה של כותרת */
}

.h-display { font-size: var(--text-display); }                                  /* כותרת היירו */
h1, .h1    { font-size: var(--text-4xl); }
h2, .h2    { font-size: var(--text-3xl); line-height: var(--leading-snug); }
h3, .h3    { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4, .h4    { font-size: var(--text-xl);  line-height: var(--leading-snug); font-weight: var(--weight-medium); }

/* Marcellus קיים במשקל אחד בלבד — הדגשה מלאכותית מעוותת אותו.
   לכן באנגלית הכותרות נשארות תמיד במשקל רגיל. */
html[lang="en"] h1, html[lang="en"] h2,
html[lang="en"] h3, html[lang="en"] h4 { font-weight: var(--weight-regular); }


/* ============================================================================
   טקסט
   ============================================================================ */

p { max-width: var(--measure); line-height: var(--leading-relaxed); color: var(--color-text-soft); }

/* ⚠ מידת הקריאה חלה על טקסט, לא על טפסים.
   WooCommerce ו-Contact Form 7 מרנדרים כל שורת טופס כ-p, ולכן
   הכלל שלמעלה חתך כל שדה באתר ל-691 פיקסלים — גם בתוך תא רשת
   רחב יותר. נמדד בעמוד הכתובות: תא של 740 פיקסלים ובתוכו שדה
   של 691, בלי שום כלל שמסביר את ההפרש. */
p.form-row,
p.woocommerce-form-row,
.wpcf7 p,
.woocommerce form p,
.woocommerce-page form p { max-width: none; }

.lead {                       /* פסקת פתיחה — גדולה יותר, מובילה את העין פנימה */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
  max-width: var(--measure);
}

.text-sm    { font-size: var(--text-sm); }
.text-muted { color: var(--color-text-muted); }

/* תווית קטנה מעל כותרת — האלמנט שהכי מזוהה עם מיתוג יוקרה */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
  margin-block-end: var(--space-3);
  display: block;
}

/* ריווח אותיות ואותיות גדולות — באנגלית בלבד.
   בעברית אין אותיות גדולות, וריווח אותיות פוגע בקריאות. */
html[lang="en"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}


/* ============================================================================
   קישורים
   ============================================================================ */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

/* קישור בתוך פסקה חייב סימון חזותי מעבר לצבע — דרישת נגישות */
p a, .prose a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
p a:hover, .prose a:hover { color: var(--color-text); }


/* ============================================================================
   פוקוס מקלדת
   חובה לנגישות: מי שמנווט ב-Tab חייב לראות תמיד איפה הוא נמצא.
   :focus-visible מציג את הטבעת רק בניווט מקלדת, לא בלחיצת עכבר.
   ============================================================================ */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================================
   טקסט על רקע כהה
   ============================================================================ */

.on-dark                                  { color: var(--color-text-invert); }
.on-dark h1, .on-dark h2,
.on-dark h3, .on-dark h4                  { color: var(--color-text-invert); }
.on-dark p                                { color: rgba(234, 219, 206, .78); }
.on-dark .eyebrow                         { color: var(--color-accent-soft); }
.on-dark :focus-visible                   { outline-color: var(--color-accent-soft); }


/* ============================================================================
   עזרי נגישות
   ============================================================================ */

/* מסתיר טקסט מהעין אך משאיר אותו לקורא מסך */
/* וורדפרס פולט את screen-reader-text בעצמו — ב-the_posts_pagination
   ובעוד מקומות. בלי הכלל הזה טקסט שאמור להיות מוסתר הופיע על המסך. */
.screen-reader-text,
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* קישור "דלג לתוכן" — נחשף רק כשמגיעים אליו ב-Tab */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  z-index: var(--z-toast);
  background: var(--color-surface-dark);
  color: var(--color-text-invert);
  padding: var(--space-3) var(--space-5);
  transition: inset-block-start var(--duration-fast) var(--ease-out);
}
.skip-link:focus { inset-block-start: var(--space-4); }