/*
 * 07 Contact.
 *
 * The prototype used container queries and cqw units against a wrapper this
 * theme does not have, so the breakpoints are media queries at 640px and the
 * fluid heading uses vw. The recon records no 1100px change for this section,
 * so there is none here.
 *
 * Logical properties throughout: this section is two columns beside each
 * other and a label above every field, and all of it mirrors in Hebrew.
 */

.ad-contact {
  padding: var(--ad-space-section) var(--ad-space-page);
  border-block-start: 1px solid var(--ad-color-hairline);
  /* The only section besides the hero with a gradient, and it runs the hero's
     gradient in reverse so the page closes on the same colour it opened. */
  background: linear-gradient(180deg, var(--ad-color-bg) 0%, var(--ad-color-hero-grad) 100%);
}

.ad-contact__inner {
  display: grid;
  /* minmax with a zero minimum so a long unbroken word cannot blow a column out. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  max-width: 1240px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ intro */

.ad-contact__intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.ad-contact__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

/*
 * The only h2 on the page with this tracking and leading. Every other section
 * heading is -.04em / lh 1; this one is -.05em / lh .95, and that is
 * deliberate in the artwork.
 */
.ad-contact__title {
  font-size: min(80px, 8.5vw);
  letter-spacing: -.05em;
  line-height: .95;
  color: var(--ad-color-text);
}

/* The last word and its full stop are one unit and never break across lines. */
.ad-contact__keep { white-space: nowrap; }

.ad-contact__dot { color: var(--ad-color-accent); }

.ad-contact__sub {
  max-width: 440px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
}

/* ------------------------------------------------------- contact channels */

.ad-contact__rows {
  margin-block-start: 12px;
  border-block-start: 1px solid var(--ad-color-hairline);
}

.ad-contact__row {
  display: flex;
  /* Wrapping keeps the label and the value legible at 320px and at 400% zoom
     instead of forcing a horizontal scroll (SC 1.4.10). */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  /* SC 2.5.8: the row is the target, not the 12px label inside it. */
  min-height: 44px;
  padding-block: 18px;
  border-block-end: 1px solid var(--ad-color-hairline);
  transition: color .2s ease;
}

.ad-contact__row:hover,
.ad-contact__row:focus-visible {
  color: var(--ad-color-accent);
}

.ad-contact__row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ad-color-text-muted);
  transition: color .2s ease;
}

.ad-contact__row:hover .ad-contact__row-label,
.ad-contact__row:focus-visible .ad-contact__row-label {
  color: var(--ad-color-accent);
}

.ad-contact__row-icon {
  display: inline-flex;
  flex: none;
  color: var(--ad-color-accent);
}

.ad-contact__row-value {
  font-family: var(--ad-font-mono);
  font-size: 15px;
}

/* ------------------------------------------------------------------- form */

/*
 * The form is a flex column, not the grid itself, so the two live regions can
 * sit above the fields and take up no height while they are empty. As grid
 * items they would each add a 28px gap row to the resting layout.
 */
.ad-contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ad-contact__msg:not(:empty) {
  margin-block-end: 24px;
  padding-inline-start: 12px;
  font-size: 15px;
  line-height: 1.5;
  /* A rule plus the message text, so the state is never colour alone
     (SC 1.4.1). There is no red in the palette and none is invented. */
  border-inline-start: 2px solid var(--ad-color-accent);
}

.ad-contact__msg--error:not(:empty) { color: var(--ad-color-text); }

.ad-contact__msg--status:not(:empty) { color: var(--ad-color-text-secondary); }

/*
 * minmax with a zero minimum, and min-width:0 on the field and the control.
 * A text input reports an intrinsic minimum of roughly 170px (its default
 * size=20), and a plain 1fr track is floored by that, so between 640px and
 * about 920px the two-column form was forcing the whole page to scroll
 * sideways (SC 1.4.10 Reflow). Above that width nothing about the layout
 * changes.
 */
.ad-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 24px;
  align-content: start;
}

.ad-contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ad-contact__field--wide { grid-column: 1 / -1; }

.ad-contact__label {
  /* Matches the input's inline padding so label and value line up. */
  padding-inline: 12px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ad-color-text-muted);
}

.ad-contact__input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  /*
   * The field had no inline padding, so typed text sat flush against the
   * edge. Visible the moment anything paints a box behind the input, which
   * autofill does. The label carries the same inset so the two stay aligned.
   */
  padding-block: 12px;
  padding-inline: 12px;
  /* 16px at every width: anything smaller makes iOS zoom the page on focus. */
  font-size: 16px;
  text-align: start;
  color: var(--ad-color-text);
  background: transparent;
  border: 0;
  /*
   * The prototype drew this underline at 1.48:1, and on a transparent field
   * with no box and no placeholder it is the only sign a field exists at all.
   * The token is the corrected boundary colour (SC 1.4.11).
   */
  border-block-end: 1px solid var(--ad-color-border-input);
  transition: border-color .2s ease;
}

/*
 * The underline change is the supplementary signal. The focus ring itself
 * comes from the :focus-visible rule in base.css, which the prototype had
 * nowhere on the page (SC 2.4.7).
 */
.ad-contact__input:focus {
  border-block-end-color: var(--ad-color-accent);
}

/*
 * Chrome paints autofilled fields with a hardcoded pale blue and near-black
 * text. On a #07090C page that is a white slab with unreadable content, and
 * it cannot be overridden with background-color: the only lever is an inset
 * shadow large enough to cover the field, plus -webkit-text-fill-color.
 *
 * The long transition delay stops Chrome re-applying its own colour after
 * the field is edited.
 */
.ad-contact__input:-webkit-autofill,
.ad-contact__input:-webkit-autofill:hover,
.ad-contact__input:-webkit-autofill:focus,
.ad-contact__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ad-color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ad-color-bg) inset;
  box-shadow: 0 0 0 1000px var(--ad-color-bg) inset;
  caret-color: var(--ad-color-text);
  transition: background-color 100000s ease-in-out 0s;
}

.ad-contact__textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Off screen but still rendered, so a bot fills it and a person never sees it. */
.ad-contact__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ad-contact__send {
  grid-column: 1 / -1;
  justify-self: start;
  gap: 10px;
  min-height: var(--ad-size-btn-send);
  padding-inline: 32px;
  font-size: 15px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
  .ad-contact {
    padding: var(--ad-space-section-mobile) var(--ad-space-page-mobile);
  }

  .ad-contact__inner {
    grid-template-columns: minmax(0, 1fr);
    /* 80px between the copy and the form reads as a gap on a phone rather
       than as a column rule. The recon flags this one for reduction. */
    gap: 56px;
  }

  .ad-contact__title { font-size: 34px; }

  .ad-contact__grid { grid-template-columns: minmax(0, 1fr); }

  .ad-contact__send {
    justify-self: stretch;
    justify-content: center;
  }
}

/*
 * This section adds no ambient loop, so there is nothing here that runs past
 * five seconds and nothing to redefine for [data-reveal], which hero.css
 * owns. What is left is the hover and focus colour transitions, and they stop
 * on request for the same reason everything else does (SC 2.2.2).
 */
@media (prefers-reduced-motion: reduce) {
  .ad-contact__row,
  .ad-contact__row-label,
  .ad-contact__input {
    transition: none;
  }
}

[data-ad-motion="off"] .ad-contact__row,
[data-ad-motion="off"] .ad-contact__row-label,
[data-ad-motion="off"] .ad-contact__input {
  transition: none;
}

/*
 * The staggered entrance is the other thing the pause control owes the
 * visitor: the row list waits .15s and the form .2s, so with the toggle set
 * they would still slide in. hero.css covers prefers-reduced-motion for every
 * [data-reveal] on the page and that rule is not repeated here, but it does
 * not cover the explicit toggle (SC 2.2.2). Same treatment services.css
 * gives its own stagger; the attribute selector keeps this above
 * `.js [data-reveal]` in the cascade whatever the stylesheet order.
 */
[data-ad-motion="off"] .ad-contact [data-reveal] {
  transition: none;
}