/* ===========================================================================
   contact.css — צור קשר (form + contact info + map)
   Agent 20 (2026-06-01): aligned to actual #contact markup
   (.contact__grid > .contact__form + .contact__details). Section uses
   .section-rail--end on its inner wrapper for weblove-motion alignment.
   ========================================================================= */


.contact {
  padding-block: var(--section-pad);
  background: var(--bg);
}

/* When .contact uses a section-rail, gutter is handled by the rail. */
.contact > :not(.section-rail--start):not(.section-rail--end) {
  padding-inline: var(--gutter);
  max-inline-size: var(--container-max);
  margin-inline: auto;
}

.contact__grid {
  display: grid;
  gap: var(--space-12);
  margin-block-start: var(--space-12);
}

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 7fr 5fr; }
}

/* ----- Form ----- */

.contact__form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__field--full {
  grid-column: 1 / -1;
}

.contact__field label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

.contact__field-optional {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
  margin-inline-start: var(--space-1);
  /* No extra opacity: the smaller size + regular weight + --fg-muted already
     de-emphasize this "(optional)" hint; a 0.7 layer on muted gray pushed it
     under the AA legibility floor. (polish 2026-06-10) */
}

.contact__field input,
.contact__field select,
.contact__field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out-cinema);
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.contact__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* .contact__submit skin removed 2026-06-15 (unify pass) — the primary submit
   CTA now uses the canonical `.btn .btn--filled .btn--primary-lg`
   (css/components/buttons.css): brass fill, larger padding + --text-md size,
   one focus ring + one press-scale. `.contact__submit-wrap` above owns layout. */

.contact__feedback {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin: 0;
}

.contact__feedback[data-kind="ok"]  { color: var(--cocoa); }
.contact__feedback[data-kind="err"] { color: var(--accent-cta); }

/* ----- Inline field errors (agent-23 Phase D1) ----- */

.contact__field-error {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-cta);
  margin-block-start: var(--space-1);
}

.contact__field input.is-invalid,
.contact__field select.is-invalid,
.contact__field textarea.is-invalid {
  border-color: var(--accent-cta);
}

/* "שלחו במייל במקום" fallback link rendered after a successful submit. */
.contact__mailto-fallback {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-base) var(--ease-out-cinema);
}

.contact__mailto-fallback:hover { color: var(--accent); }

/* Inline WhatsApp fallback link (rendered if window.open is blocked). */
.contact__wa-fallback {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-inline-start: var(--space-2);
}

@media (max-width: 600px) {
  .contact__form { grid-template-columns: 1fr; }
}

/* ----- Aside (channels + CTA + map) ----- */

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact__details-title {
  font-family: var(--font-display-he);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--fg);
  margin: 0;
}

.contact__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

/* Each channel row = icon + a vertical text stack (label over value). Flex
   (not grid) keeps the icon glued to its text so the LTR phone/email values
   never fly off to the far edge — fixes the "jumps" between icon and words.
   Icons added 2026-06-02; layout reworked 2026-06-10. */
.contact__channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contact__channel-icon {
  inline-size: 22px;
  block-size: 22px;
  display: block;
  flex: none;               /* never shrink — keeps text alignment stable */
  color: var(--accent);     /* phone + mail + pin strokes use currentColor */
}

/* WhatsApp icon ships with its own brand green (#25D366) baked into the SVG
   fill — keep currentColor inheritance off so the green isn't overridden. */
.contact__channel-icon--whatsapp {
  color: #25D366;
}

/* Vertical stack: label on top, value beneath, both start-aligned so every
   row's text begins at the same inline offset right next to the icon. */
.contact__channel-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-inline-size: 0;
}

.contact__channel-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.contact__channel-value {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--fg);
  text-decoration: none;
}

.contact__channel-value:hover { color: var(--accent); }

/* ----- Accessibility note (2026-06-10, Maron copy). A short "100% נגיש"
   block under the contact channels. A brass start-border sets it apart from
   the channel list without adding a heavy card. ----- */
.contact__access {
  border-inline-start: 2px solid var(--brass);
  padding-inline-start: var(--space-4);
}

.contact__access-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2) 0;
}

.contact__access-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  margin: 0;
  max-inline-size: 48ch;
}

/* ----- Scroll cue → the branded #routes map below (replaces the old Waze /
   Google CTA buttons, removed 2026-06-10). Animated down-arrow. ----- */
.contact__scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-block-start: var(--space-2);
  text-decoration: none;
  color: var(--cocoa);
  transition: color var(--dur-base) var(--ease-out-cinema);
}

.contact__scroll-cue:hover { color: var(--accent-hover); }

.contact__scroll-cue:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.contact__scroll-cue-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}

.contact__scroll-cue-arrow {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-circle, 50%);
  border: 1px solid var(--accent);
  color: var(--accent);
  animation: contact-cue-bob 1.8s var(--ease-out-cinema) infinite;
}

.contact__scroll-cue-arrow svg {
  inline-size: 20px;
  block-size: 20px;
}

.contact__scroll-cue:hover .contact__scroll-cue-arrow {
  background: var(--accent);
  color: var(--ink-deep);
}

@keyframes contact-cue-bob {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .contact__scroll-cue-arrow { animation: none; }
  /* .contact__submit:active press feedback is now nulled by the canonical
     .btn reduced-motion rule (css/components/buttons.css). */
}

/* NOTE: the generic Google Maps iframe (.contact__map) was removed 2026-06-10
   — the branded interactive #routes map (css/sections/directions.css) now
   serves the "where are we / how to get here" job. */

/* ---------------------------------------------------------------------------
   #routes — מסלולי הגעה (extracted from #contact 2026-06-03 so the
   sticky-reveal pair effect can slide #contact up over #routes).
   2026-06-10: the old 3-PNG .routes__grid was replaced by the branded
   Leaflet map in css/sections/directions.css. Only the section shell rules
   (.routes / .routes__container / header) stay here — the grid rules are gone.
   --------------------------------------------------------------------------- */

.routes {
  background: var(--bg);
  padding-block: var(--section-pad);
}

.routes__container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.routes .section-header {
  text-align: center;
  margin-block-end: var(--space-10);
}

/* ---------------------------------------------------------------------------
   .reveal-pair — sticky reveal between #contact and #routes
   ---------------------------------------------------------------------------
   Effect cloned from olivierlarose/sticky-footer:
   #routes is position:sticky pinned to bottom:0, sitting at z-index:0.
   #contact above it has z-index:1 and a solid --bg background, so it
   covers #routes until the user scrolls. As the wrapper scrolls past
   #contact, #contact slides UP off the viewport while #routes stays
   pinned at the bottom — gradually revealed underneath, like lifting
   a sheet of paper to expose the desk below. Pure CSS, no JS.

   The wrapper itself doesn't need any positioning — both children just
   share its scroll context.
   --------------------------------------------------------------------------- */
.reveal-pair {
  position: relative;
}

.reveal-pair__top {
  position: relative;
  z-index: 1;
  background: var(--bg);                  /* MUST be opaque to occlude #routes */
}

.reveal-pair__bottom {
  position: sticky;
  inset-block-end: 0;
  z-index: 0;
  /* Limit height so the reveal completes within one viewport. If routes
     is taller than 100vh the user has to scroll past contact AND through
     routes; capping it at viewport height + giving the inner container
     scroll keeps the moment self-contained. */
  min-block-size: 100vh;
  display: flex;
  align-items: center;
}

.reveal-pair__bottom .routes__container {
  inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  /* No transition logic to disable — the reveal is a scroll-position
     consequence, not an animation. Effect stays identical. */
}