/* ===================== צור קשר — 10.9.2026 =====================
   אותה שפה כמו שאר האתר: קרם, חום, גרדיאנט כתום, פינות רכות,
   קו מקווקו וכתב יד. ההירו הוא הקומפוננטה המשותפת של העמודים
   הפנימיים (internal-page-hero.css); כאן רק התוכן שמתחתיו. */
.contact-page .internal-hero { background:#3a2015; color:#fffdf9; }
.contact-lead { max-width:640px; margin:0 auto; font-size:clamp(16px,1.25vw,20px); line-height:1.5; color:#fffdf9; }

.contact-wrap { width:min(1240px, calc(100% - 48px)); margin:0 auto; padding-block:8px 84px; color:var(--ink); }

/* ----- ארבע דרכים ליצור קשר ----- */
.contact-ways { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.contact-way {
  position:relative; display:flex; flex-direction:column; gap:6px; min-height:196px;
  padding:26px 24px 22px; border-radius:26px; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid rgba(67,31,16,.08);
  box-shadow:0 10px 30px rgba(67,31,16,.06);
  transition:transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.contact-way:hover, .contact-way:focus-visible { transform:translateY(-4px); box-shadow:0 18px 40px rgba(241,106,44,.16); border-color:rgba(241,106,44,.35); }
.contact-way__icon {
  display:grid; place-items:center; width:54px; height:54px; margin-bottom:8px; border-radius:18px;
  background:var(--grad-accent); color:#fff; box-shadow:0 8px 18px rgba(241,106,44,.28);
}
.contact-way__icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.contact-way__label { font-size:14px; font-weight:700; color:#8a6a5b; }
.contact-way__value { font-size:clamp(16px,1.2vw,19px); font-weight:800; line-height:1.25; min-width:0; overflow-wrap:anywhere; }
.contact-way__cta { margin-top:auto; padding-top:10px; font-size:14px; font-weight:700; color:var(--orange); }
.contact-way__cta i, .contact-quick__list i, .contact-submit i, .contact-map__link i { font-style:normal; display:inline-block; transition:transform .25s ease; }
.contact-way:hover .contact-way__cta i { transform:translateX(-4px); }
.contact-ltr { direction:ltr; unicode-bidi:isolate; text-align:right; }
/* The e-mail is the longest value: a touch smaller, tighter, and allowed to
   break anywhere so it can never leave its card. */
.contact-way__value.contact-ltr { display:block; max-width:100%; font-size:clamp(14px,1.05vw,16.5px); letter-spacing:-.01em; word-break:break-all; }

/* ----- טופס + צד ----- */
/* The side column stretches to the form's height: the quick-links card keeps
   its natural height and the map fills whatever remains. */
.contact-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:26px; margin-top:26px; align-items:stretch; }

.contact-message {
  position:relative; padding:clamp(26px,3vw,44px); border-radius:32px;
  background:linear-gradient(160deg,#fff6ee 0%,#fffdf9 60%);
  border:1.5px dashed rgba(241,106,44,.55);
}
.contact-message__hand {
  position:absolute; inset-inline-start:34px; top:-16px; padding:2px 12px; border-radius:999px;
  background:var(--cream); color:var(--orange); font-family:'OHYaelLeibushor2.0','Afek',sans-serif;
  font-size:22px; line-height:1;
}
.contact-message h2 { margin:6px 0 8px; font-size:clamp(28px,2.6vw,40px); line-height:1.1; }
.contact-message > p { margin:0 0 20px; font-size:16px; line-height:1.55; color:#5b4136; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-field { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; color:#5b4136; }
.contact-field--full { grid-column:1 / -1; }
.contact-field input, .contact-field textarea {
  width:100%; box-sizing:border-box; padding:13px 16px; border-radius:16px; border:1px solid rgba(67,31,16,.16);
  background:#fff; color:var(--ink); font:inherit; font-size:16px; font-weight:400;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-field textarea { min-height:140px; resize:vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(241,106,44,.15); }
/* היה ‎#a08c82‎ — 3.2:1 מול הלבן, מתחת לנדרש. */
.contact-field input::placeholder, .contact-field textarea::placeholder { color:#7a6155; }
.contact-submit {
  display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding:0 26px; min-height:50px;
  border:0; border-radius:var(--button-radius,999px); background:var(--grad-accent); color:#fff;
  font:700 18px 'Afek',Arial,sans-serif; cursor:pointer; box-shadow:0 10px 24px rgba(241,106,44,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-submit:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(241,106,44,.36); }
.contact-submit:hover i { transform:translateX(-4px); }
.contact-note { margin:14px 0 0; font-size:13px; color:#8a6a5b; }
.contact-note a { color:inherit; }

.contact-side { display:grid; grid-template-rows:auto minmax(0,1fr); gap:22px; min-height:0; }
.contact-quick { padding:clamp(22px,2.4vw,32px); border-radius:28px; background:#431f10; color:#fffdf9; }
.contact-quick h2 { margin:0 0 14px; font-size:clamp(22px,1.8vw,26px); line-height:1.15; }
.contact-quick__list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.contact-quick__list a {
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  padding:12px 16px; border-radius:16px; text-decoration:none; color:inherit; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); transition:background .2s ease, border-color .2s ease;
}
.contact-quick__list a:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
.contact-quick__list strong { font-size:17px; }
.contact-quick__list span { grid-column:1; font-size:13.5px; color:rgba(255,253,249,.72); }
.contact-quick__list i { grid-column:2; grid-row:1 / span 2; color:#FB8C2E; font-size:20px; }
.contact-quick__list a:hover i { transform:translateX(-4px); }

.contact-map { position:relative; min-height:240px; border-radius:28px; overflow:hidden; background:#efe7e0; box-shadow:0 10px 30px rgba(67,31,16,.08); }
.contact-map iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; filter:saturate(.85); }
.contact-map__link {
  position:absolute; inset-inline-start:14px; bottom:14px; padding:8px 14px; border-radius:999px;
  background:#fff; color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(67,31,16,.16);
}

.contact-wrap :is(a,button,input,textarea):focus-visible { outline:2px solid var(--orange); outline-offset:4px; }

@media (max-width:1024px) {
  .contact-ways { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .contact-way { min-height:0; padding:22px 20px 18px; }
  .contact-grid { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:640px) {
  .contact-wrap { width:calc(100% - 32px); padding-bottom:56px; }
  .contact-ways { grid-template-columns:1fr; }
  .contact-way { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:14px; padding:16px 18px; }
  .contact-way__icon { width:46px; height:46px; margin:0; border-radius:15px; }
  .contact-way__label { width:calc(100% - 60px); }
  .contact-way__value { order:3; width:100%; font-size:17px; }
  .contact-way__cta { order:4; width:100%; margin:0; padding-top:6px; }
  .contact-fields { grid-template-columns:1fr; }
  .contact-message { border-radius:24px; }
  .contact-message__hand { font-size:19px; inset-inline-start:22px; }
  .contact-submit { width:100%; justify-content:center; }
  .contact-map { min-height:220px; }
}
@media (max-width:1024px) {
  .contact-side { grid-template-rows:auto auto; }
  .contact-map { min-height:260px; }
}

/* ===================== טופס המייל (14.9.2026) =====================
   הטופס עצמו מגיע מ-join-form.css, בדיוק כמו בדף הבית. כאן רק
   ההתאמות לעמוד: שדה הודעה רחב, ורוחב שמתאים לעמודה. */
.contact-mail-form { align-self: start; }
/* 17.9.2026: רקע, מסגרת, צל ופינות כמו כרטיסי דרכי ההתקשרות שמעליו (‎.contact-way‎) */
.contact-page .contact-mail-form {
  background: #fff; border: 1px solid rgba(67,31,16,.08);
  border-radius: 26px; box-shadow: 0 10px 30px rgba(67,31,16,.06);
}
.contact-mail-form .join-field--message { flex: 1 1 100%; width: 100%; }
.contact-mail-form .join-field--message textarea {
  width: 100%; box-sizing: border-box; min-height: 116px; resize: vertical;
  padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(67,31,16,.18);
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5;
}
/* היה כאן outline:none, וההילה בשקיפות 15% נתנה ניגודיות של 1.04 מול
   1 — כלומר לא היה סימון מיקוד אמיתי בשדה ההודעה. */
.contact-mail-form .join-field--message textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.contact-mail-form .join-field--message textarea:focus {
  border-color: var(--orange); box-shadow: 0 0 0 4px rgba(241,106,44,.15);
}
.contact-mail-form .join-status { display: block; min-height: 0; margin-top: 10px; font-size: 13px; color: #7A6154; }
.contact-lead { white-space: nowrap; }
@media (max-width: 900px) { .contact-lead { white-space: normal; } }

/* ===================== טופס ועמודת צד באותו גובה (15.9.2026) =====================
   בדסקטופ העמודה שליד הטופס ("מה אפשר לעשות כבר עכשיו" + המפה) לא
   קובעת את גובה השורה: contain:size מבטל את התרומה שלה לגובה, והיא
   נמתחת בדיוק לגובה הטופס. הכרטיס שומר על הגובה הטבעי שלו, והמפה
   ממלאת את מה שנשאר — כך העמודה אף פעם לא יורדת מתחת לטופס. */
@media (min-width: 1025px) {
  .contact-grid { align-items: stretch; }
  .contact-side { contain: size; align-self: stretch; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  .contact-map { min-height: 0; }
  /* הכרטיס מעט צפוף יותר, כדי שלמפה יישאר גובה שאפשר לראות בו משהו. */
  .contact-quick { padding: 22px 26px; }
  .contact-quick h2 { margin-bottom: 10px; }
  .contact-quick__list { gap: 6px; }
  .contact-quick__list a { padding: 9px 14px; }
}