/* contact.html (C2, 7.11.2026: docs/design/mockups/mockup-contact.webp). Loaded after tokens/base/components.
   Sky background with the statue (left) and the flag (right) fading toward the middle, a big centred
   "צרו קשר" with the red swoosh, then two columns: the ways to reach us (right, first on phones) and
   the form card (left, after the cards on phones). */

/* S (7.11, final design review 11): the sky, the side decorations and the opening come from
   css/page-hero.css (.sky-page, .sky-deco, .page-hero__*), the one source shared with about, reviews
   and 404. That file also lets the sky run into the footer wave (body colour + no margin above the
   footer, as F2 did here). Only what is special to this page stays below. */
.contact-page { padding-bottom: var(--space-7); }
.contact-page .page-hero { padding-block: var(--space-5); }
.contact-page .page-hero__lead { max-width: 46rem; font-size: 1.1rem; line-height: 1.55; }

/* The page has its own WhatsApp card and button, so the floating button is not needed here
   (on phones it sat on "שירות אישי…"). Without it, the room kept for it at the bottom goes too. */
.whatsapp-fab { display: none; }
@media (max-width: 639px) {
  .contact-page::after { display: none; }
  .site-footer__bottom { padding-bottom: var(--space-4); }
}

/* ---------- Two columns ---------- */
.contact-layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .contact-ways { padding-top: var(--space-3); }
  .contact-form { margin-top: 46px; }   /* room for the half of the badge that sits above the card */
}
@media (max-width: 899.98px) {
  .contact-form { margin-top: 22px; }   /* the 32px column gap + this = the badge's upper half and air */
}

/* ---------- The ways to reach us ---------- */
.contact-ways { display: grid; gap: var(--space-4); }
.contact-way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 63, 140, .09);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.contact-way__icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #E5EFFC;
  color: var(--navy-700);
  box-shadow: inset 0 0 0 1px rgba(15, 63, 140, .05);
}
.contact-way__icon svg { width: 30px; height: 30px; }
.contact-way__icon--wa { background: #E3F7EA; color: #1FAF54; }
.contact-way__icon--wa svg { width: 34px; height: 34px; }
.contact-way__body { min-width: 0; }
.contact-way__title { font-size: 1.2rem; color: var(--navy-900); margin-bottom: 2px; }
.contact-way__text { color: #3E4E6A; line-height: 1.5; }
.contact-way__mail {
  display: inline-block;
  margin-top: 2px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.contact-way__mail:hover { color: var(--blue-900); }
@media (pointer: coarse) { .contact-way__mail { padding-block: 8px; } }   /* a 44px target on touch screens (S, 7.11) */
/* WhatsApp button: under the text on phones, at the end of the row on wide screens */
.contact-way__btn { grid-column: 1 / -1; width: 100%; font-weight: 700; }
@media (min-width: 480px) {
  .contact-way--wa { grid-template-columns: auto minmax(0, 1fr) auto; }
  .contact-way__btn { grid-column: auto; width: auto; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  /* narrow desktop: the button needs the whole row again */
  .contact-way--wa { grid-template-columns: auto minmax(0, 1fr); }
  .contact-way__btn { grid-column: 1 / -1; width: 100%; }
}

/* opening hours: each part unbroken, a thin divider between them */
.contact-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 1.02rem; color: #22324D; }
.contact-hours__part { white-space: nowrap; }
.contact-hours__sep { width: 1px; height: 1.1em; background: #B9CDEA; }

/* the big tinted card */
.contact-way--support {
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(160deg, #EEF5FE 0%, #DFEBFB 100%);
  border-color: #CFE0F6;
}
.contact-way__icon--bare { width: 56px; height: 56px; background: none; box-shadow: none; }
.contact-way__icon--bare svg { width: 48px; height: 48px; }
.contact-way--support .contact-way__title { font-size: 1.35rem; margin-bottom: 6px; }
.contact-way--support .contact-way__text { font-size: 1.05rem; color: #2B3B57; }

.contact-ways__cancel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: var(--space-2);
  color: #3E4E6A;
  font-size: .98rem;
}
.contact-ways__cancel svg { width: 20px; height: 20px; flex: none; color: var(--navy-700); }
.contact-ways__cancel a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The form card ---------- */
.contact-form {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid rgba(15, 63, 140, .09);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 18px 50px rgba(15, 63, 140, .12), 0 2px 8px rgba(15, 63, 140, .05);
  text-align: center;
}
@media (min-width: 640px) {
  .contact-form { padding: var(--space-5) var(--space-6) var(--space-6); }
}
/* the plane badge sits on the card's top edge, half above it (mockup-contact.webp) */
.contact-form__badge {
  position: relative;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  margin: calc(-1 * var(--space-5) - 34px) auto var(--space-3);
  border-radius: 50%;
  background: #E5EFFC;
  color: var(--navy-700);
  box-shadow: 0 0 0 8px rgba(229, 239, 252, .55), 0 6px 16px rgba(15, 63, 140, .12);
}
.contact-form__badge svg { width: 34px; height: 34px; transform: scaleX(-1); }   /* the plane flies "forward" in RTL */
.contact-form__title { font-size: 1.75rem; color: var(--navy-900); margin-bottom: 4px; }
.contact-form__lead { color: #4A5A75; margin-bottom: var(--space-5); text-wrap: balance; }
@media (min-width: 768px) {
  .contact-form__title { font-size: 2rem; }
}
.contact-form__fields { text-align: start; }
.contact-form__demo { margin-bottom: var(--space-5); font-size: .92rem; line-height: 1.5; padding: 10px 14px; }
.contact-form__demo svg { width: 20px; height: 20px; }
.contact-form .field__label { font-weight: 700; color: var(--navy-900); }
.contact-form textarea.input { min-height: 112px; }

.contact-form__submit {
  min-height: 56px;
  margin-top: var(--space-2);
  font-size: 1.2rem;
  gap: 12px;
  transition: background-color var(--transition), box-shadow var(--transition), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-form__submit:active { transform: scale(.98); }
.contact-form__submit .contact-form__plane { width: 24px; height: 24px; transform: scaleX(-1); }
.contact-form__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}
.contact-form__privacy svg { width: 18px; height: 18px; flex: none; }
.contact-form__privacy a { text-decoration: underline; }
.contact-form__fail { margin-top: var(--space-4); }
.contact-form__fail a { text-decoration: underline; font-weight: 500; }

/* ---------- After sending: the fields give way to a "saved" panel ---------- */
.contact-form.is-sent .contact-form__fields { display: none; }
.contact-form__done {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-2);
  outline: none;
  animation: contact-done-in 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.contact-form__done-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ok-100);
  color: var(--ok);
  margin-bottom: var(--space-2);
}
.contact-form__done-icon svg { width: 32px; height: 32px; }
.contact-form__done-title { font-size: 1.35rem; color: var(--navy-900); }
.contact-form__done-text { color: #3E4E6A; max-width: 26rem; }
.contact-form__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
@keyframes contact-done-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form__done { animation: none; }
}

/* ---------- Phones (the decorations and the tag spacing: page-hero.css) ---------- */
@media (max-width: 899.98px) {
  .contact-page .page-hero { padding-top: var(--space-6); }
}
@media (max-width: 479.98px) {
  .contact-page .page-hero__lead { font-size: 1.02rem; }
  .contact-way { padding: var(--space-4) var(--space-3); gap: var(--space-3); }
  .contact-way__icon { width: 52px; height: 52px; }
  .contact-way__icon svg { width: 26px; height: 26px; }
  .contact-way--support { padding: var(--space-4); }
  .contact-way--support .contact-way__title { font-size: 1.2rem; }
  /* hours: one part per line, no divider */
  .contact-hours { flex-direction: column; align-items: flex-start; gap: 2px; }
  .contact-hours__sep { display: none; }
}