/* ============================================================================
   Arova · יצירת קשר
   ============================================================================ */

.page-head__service {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: var(--space-9);
  align-items: start;
}

@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

.contact__lead {
  margin-block-end: var(--space-7);
  font-size: var(--text-lg);
  max-width: 52ch;
}


/* ============================================================================
   הטופס
   ============================================================================ */

/* שני שדות בשורה במסך רחב, אחד מתחת לשני במובייל */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* סיכום השגיאות מעל הטופס — קורא מסך מקריא אותו מיד עם ההגשה */
.form-errors {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(176, 52, 75, .08);
  border: var(--border-hair) solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field--check { margin-block-start: var(--space-2); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* אזור לחיצה נוח — התווית כולה לוחצת על התיבה */
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  cursor: pointer;
}
.check input {
  width: 20px; height: 20px;
  margin-block-start: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.contact__submit { margin-block-start: var(--space-5); }

.contact__privacy {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
}


/* ============================================================================
   מצב "מוכן לשליחה"
   ============================================================================ */

.contact__ready {
  border: var(--border-thin) solid var(--color-accent);
  background: var(--color-surface-raised);
  padding: var(--space-7);
}
.contact__ready h2 { font-size: var(--text-2xl); margin-block-end: var(--space-3); }
.contact__ready h2:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* תצוגה מקדימה של ההודעה — הגולש רואה בדיוק מה נשלח בשמו */
.contact__preview {
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;      /* שומר על שבירות השורות של ההודעה */
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

.contact__send {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

.contact__proto-note {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-hair) solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============================================================================
   פרטים ישירים
   ============================================================================ */

.contact__direct {
  background: var(--color-surface-alt);
  padding: var(--space-6);
  border-block-start: var(--border-thin) solid var(--color-accent);
}

.contact__direct-title {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-text);
  margin-block-end: var(--space-5);
}

.contact__details dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-start: var(--space-4);
}
.contact__details dt:first-child { margin-block-start: 0; }

.contact__details dd {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}
/* אזור לחיצה נגיש לטלפון ולדוא״ל */
.contact__details dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
}
.contact__details dd a[href]:hover { color: var(--color-accent-text); }

.contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}

.contact__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: var(--border-hair) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  transition: var(--transition-base);
}
.contact__social-link:hover { border-color: var(--color-text); color: var(--color-text); }


/* ============================================================================
   דחיסת העמוד — כדי שהטופס כולו ייכנס למסך הראשון
   ----------------------------------------------------------------------------
   נמדד לפני: השדה הראשון התחיל ב-664px וכפתור השליחה ב-1574px, כלומר
   המשתמש נדרש לגלול פעמיים כדי להשאיר פרטים. שלושה גורמים אכלו את
   המקום: ריפוד מקטע של 144px, ראש עמוד בן 259px שהכפיל את הכותרת,
   ופסקת פתיחה שחזרה על מה שכבר נכתב בראש.
   ============================================================================ */

.page-head--tight {
  padding-block: var(--space-6) var(--space-5);
}

.page-head--tight h1 {
  font-size: var(--text-3xl);
  margin-block-end: var(--space-3);
}

.page-head--tight .lead {
  font-size: var(--text-base);
  max-width: 56ch;
}

/* ריפוד המקטע הכללי הוא 144px — נכון למקטע תוכן, מוגזם לטופס */
.section.contact {
  padding-block: var(--space-6) var(--space-9);
}

/* השדות מתקרבים זה לזה. 48px לגובה השדה נשאר מעל סף הנגישות
   של 44px לאזור לחיצה, ולכן הדחיסה אינה פוגעת בנגישות. */
.contact .field        { margin-block-end: var(--space-4); }
.contact .field__label { margin-block-end: var(--space-1); }
.contact .field__hint  { margin-block-start: var(--space-1); font-size: var(--text-xs); }
.contact .field-row    { gap: var(--space-4); }

/* אזור ההודעה — שלוש שורות במקום חמש. מי שרוצה לכתוב יותר
   פשוט ממשיך, השדה גדל. */
.contact textarea.field__control { min-height: 92px; }

.contact .contact__submit { margin-block-start: var(--space-4); }
.contact .contact__privacy { margin-block-start: var(--space-3); }

/* פסקת הפתיחה של הטופס — נשארת, אך קומפקטית. הראש כבר מסר את
   אותה הבטחה, ושתי פסקאות הרגעה לפני טופס הן פסקה אחת יותר מדי. */
.contact__form-side > p:first-child {
  font-size: var(--text-base);
  max-width: 58ch;
  margin-block-end: var(--space-5);
}



/* ----------------------------------------------------------------------------
   הידוק אחרון — כדי שגם כפתור השליחה ייכנס למסך הראשון
   ---------------------------------------------------------------------------- */

.page-head--tight { padding-block: var(--space-5) var(--space-4); }
.section.contact  { padding-block: var(--space-4) var(--space-9); }

.contact .field { margin-block-end: var(--space-3); }
.contact textarea.field__control { min-height: 76px; }

/* האישור וכפתור השליחה על שורה אחת. שניהם קצרים, ושורה נפרדת לכל
   אחד עלתה כ-60 פיקסלים בלי להוסיף שום בהירות. */
.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-block-start: var(--space-4);
}
.form-foot .field--check { margin: 0; flex: 1 1 22ch; }

/* Contact Form 7 עוטף את כפתור השליחה ב-<p> ריק. פריט ה-flex הוא
   העטיפה ולא הכפתור, ולכן כללי רוחב שכוונו לכפתור עצמו לא השפיעו. */
.form-foot > p { margin: 0; flex: 0 0 auto; }
.form-foot .contact__submit { margin-block-start: 0; }

/* במסך צר הם חוזרים להיערם, ואז הכפתור נפרש לרוחב מלא */
@media (max-width: 560px) {
  .form-foot > p { flex: 1 0 100%; }
  .form-foot .contact__submit { width: 100%; }
}

/* ----------------------------------------------------------------------------
   מסך נמוך — מחשב נייד של 768 פיקסלים ומטה
   ----------------------------------------------------------------------------
   הפריסה עד כה לא הגיבה לגובה המסך כלל: כפתור השליחה נמדד ב-869
   פיקסלים גם במסך של 900 וגם במסך של 768. כאן נחסכים כ-100 פיקסלים
   בדיוק במקומות שבהם אובדן הריווח פוגע הכי מעט.
   ---------------------------------------------------------------------------- */
@media (max-height: 820px) {

  .page-head--tight { padding-block: var(--space-4) var(--space-3); }
  .page-head--tight h1 { font-size: var(--text-2xl); margin-block-end: var(--space-2); }

  /* הפסקה בראש העמוד יורדת. אותה הבטחה בדיוק כבר מופיעה בטור
     הצדדי כמשפט ההרגעה, ולכן זו הסרת כפילות ולא אובדן מידע. */
  .page-head--tight .lead { display: none; }

  .section.contact { padding-block: var(--space-3) var(--space-8); }
  .contact .field  { margin-block-end: var(--space-2); }
  .contact textarea.field__control { min-height: 60px; }
}

/* ההידוק האחרון למסך נמוך — 27 הפיקסלים שנשארו */
@media (max-height: 820px) {
  .contact .field__label { margin-block-end: 2px; }
  .contact textarea.field__control { min-height: 48px; }
  .form-foot { margin-block-start: var(--space-2); }
  .contact .contact__privacy { margin-block-start: var(--space-2); }
}

/* 11 הפיקסלים האחרונים במסך של 768 */
@media (max-height: 800px) {
  .section.contact { padding-block-start: var(--space-2); }
  .form-foot { margin-block-start: var(--space-1); }
}


/* ============================================================================
   נוכחות וקריאות בטופס
   ----------------------------------------------------------------------------
   נמדד: שדות הטקסט בגובה 48px והתפריט הנפתח בגובה 54 — הפרש שנראה
   כשורות לא מיושרות. בנוסף התוויות היו קטנות ובצבע מרוכך, והריווח
   ביניהן לשדה צומצם ל-4px בסבב הדחיסה — מה שגרם להן להיראות מנותקות
   ולא צמודות לשדה שלהן.
   ============================================================================ */

/* גובה אחיד לכל סוגי השדות. select מקבל ריפוד שונה מהדפדפן,
   ולכן appearance: none נדרש כדי לשלוט בו בכלל. */
/* הגובה מגיע מ---field-height, אותו אסימון שמשרת את טפסי
   WooCommerce. מספר קשיח כאן היה מפצל את הטפסים לשתי שפות. */
.contact .field__control {
  min-height: var(--field-height);
  font-size: var(--text-base);
}

.contact select.field__control {
  appearance: none;
  -webkit-appearance: none;
  height: var(--field-height);
  padding-inline-end: var(--space-7);   /* מקום לחץ */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
                    linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: left var(--space-5) center, calc(left + 6px) var(--space-5) center;
}

/* בעברית החץ יושב משמאל; המיקום נקבע לפי כיוון הקריאה */
html[dir="rtl"] .contact select.field__control {
  background-position: left var(--space-5) center, left calc(var(--space-5) + 6px) center;
}
html[dir="ltr"] .contact select.field__control {
  background-position: right calc(var(--space-5) + 6px) center, right var(--space-5) center;
}

/* התווית צמודה לשדה שלה וברורה יותר — היא ההוראה, לא קישוט */
.contact .field__label {
  margin-block-end: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* גבול נראה יותר. הקודם היה עדין מדי והשדה לא נקרא כשדה */
.contact .field__control {
  border-width: var(--border-thin);
  background: var(--color-surface-raised);
}

/* מצב מיקוד ברור — טבעת ולא רק שינוי גוון */
.contact .field__control:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(62, 44, 31, .12);
  outline: none;
}

/* רווח נושם בין שדות, אחרי שהדחיסה הקודמת הידקה אותם מדי */
.contact .field { margin-block-end: var(--space-5); }
.contact .field-row { gap: var(--space-5); }

.contact .field__hint {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* אזור ההודעה — גובה שמזמין לכתוב */
.contact textarea.field__control { min-height: 120px; }

/* במסך נמוך חוזרים לדחיסה, אך לא על חשבון גובה השדה */
@media (max-height: 820px) {
  .contact .field { margin-block-end: var(--space-4); }
  .contact textarea.field__control { min-height: 88px; }
  .contact .field__label { margin-block-end: var(--space-2); font-size: var(--text-sm); }
}

/* גובה מפורש ולא min-height בלבד.
   נמדד: השדות יצאו 55px בעוד התפריט 52 — line-height של 28 בתוספת
   ריפוד 12+12 וגבול 3 חורג מהמינימום, ו-min-height אינו מגביל כלפי
   מעלה. הפער של 3 פיקסלים הוא בדיוק מה שנראה כשורות לא מיושרות. */
.contact input.field__control,
.contact select.field__control {
  height: var(--field-height);
  line-height: normal;
}