/* ==========================================================================
   Contact page (and its thank-you and error pages).
   Requires tokens.css, typography.css, layout.css, components.css, and
   sections.css (Certifications).
   ========================================================================== */


/* ---------- Hero ----------

   Smoke. Left: "Contact" (H1), the contact form 60px below it, and the
   address, phone, and fax 60px below the form. Right: the grayscale aerial
   photo with the "Find us on Google Maps" card centered on it.

   Desktop (901px+)
   - The text column starts 130px below the header; the section ends 140px
     below the fax line (the design's measurements).
   - The photo fills the right half, from the middle of the frame to the
     right frame line, and runs up behind the header. The map card is
     centered on the whole photo (header included), as in the design.

   Tablet and mobile (up to 900px)
   - The heading and the address are centered; the form is centered as a
     block, with its labels left-aligned.
   - The photo runs the full width below (square on phones, 4:3 from 600px)
     with the map card centered on it. */

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);     /* the column never grows past the screen */
  padding-bottom: 0;                         /* the photo sits on the bottom edge */
  overflow-x: clip;                          /* nothing in it can widen the page */
}

.contact-hero__text {
  display: grid; justify-items: center;
  text-align: center;                        /* centered when stacked */
}
.contact-hero__text > .contact-form { margin-top: var(--space-60); }
.contact-hero__text > .contact-hero__details { margin-top: var(--space-60); }

/* Address, phone, fax. The design sets these at 24px Medium: the H3 style
   at its phone size, used here at every size. */
.contact-hero__details {
  display: grid; gap: var(--space-24);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--text-h4-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}
.contact-hero__details p a {                 /* plain, as in the design; underlined on hover */
  color: inherit;
  text-decoration: none;
}
.contact-hero__details p a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.contact-hero__media {
  position: relative;
  display: grid; place-items: center;        /* centers the map card */
  min-width: 0;
  margin: var(--space-60) calc(-1 * var(--section-pad-x)) 0;   /* bleeds to both frame lines */
  padding: var(--space-20);
  aspect-ratio: 1;
}
/* Positioned, so the photo's own size can't stretch its box (Safari would
   otherwise size the box from the image's 1440px width). */
.contact-hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (min-width: 600px) {
  .contact-hero__media { aspect-ratio: 4 / 3; }
}

@media (min-width: 901px) {
  .contact-hero {
    position: relative;
    overflow-x: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-top: calc(-1 * var(--header-height));   /* the photo runs up behind the header */
    padding-block: calc(var(--header-height) + 130px) 140px;   /* as in the design */
  }
  .contact-hero__text { justify-items: start; text-align: left; }
  .contact-hero__media {
    position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
    margin: 0;
    aspect-ratio: auto;
  }
}


/* ---------- Contact form ----------
   Up to 460px wide: Name and Email side by side, then Company and
   "I'm Interested In", 20px apart; Message across the full width (120px
   tall); then Submit (primary button). One column below 600px.

   Labels are H5. Fields are 48px tall, white, with a 1px Border Gray outline (Black when
   focused) and
   Body text 16px in from the left; placeholders are Text Gray. A label
   sits 18px above its field; rows are 20px apart. */

.contact-form {
  display: grid; gap: var(--space-20);
  width: 100%; max-width: 460px;
  text-align: left;
}
@media (min-width: 600px) {
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form__field--wide,
  .contact-form__status,
  .contact-form__submit { grid-column: 1 / -1; }
}

.contact-form__field { display: grid; gap: 18px; min-width: 0; }   /* label to field, as in the design */

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 var(--space-16);
  border: var(--line-width) solid var(--color-line);   /* Border Gray, like the frame lines */
  border-radius: 0;
  background: #FFFFFF;                       /* white fields, as in the design (not a palette color) */
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);         /* 16px keeps iPhones from zooming in on focus */
  line-height: 1.5;
}
.contact-form textarea {
  height: 120px; min-height: 120px;
  padding-block: 12px;
  resize: vertical;
}
.contact-form ::placeholder { color: var(--color-text-muted); opacity: 1; }   /* Text Gray: meets WCAG AA */

/* Select: the browser's arrow is replaced by the design's chevron; the
   "Select" prompt is gray like a placeholder until a choice is made. */
.contact-form select {
  -webkit-appearance: none; appearance: none;
  padding-right: calc(var(--space-16) * 2 + 14px);
  background: #FFFFFF url("../assets/icons/icon-chevron-down.svg") right var(--space-16) center / 14px 8px no-repeat;
  cursor: pointer;
}
.contact-form select:has(option[value=""]:checked) { color: var(--color-text-muted); }
.contact-form select option { color: var(--color-text); }

/* Focus: the border turns Black (no outline, for keyboard users too; the
   border change is the indicator). */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--color-black); outline: none; }
.is-keyboard .contact-form input:focus-visible,
.is-keyboard .contact-form select:focus-visible,
.is-keyboard .contact-form textarea:focus-visible { outline: none; }

/* Shown only after a field has been tried and left invalid. */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }

.contact-form__submit { justify-self: start; }
.contact-form__submit[disabled] { opacity: .6; cursor: progress; }

/* Spam trap: kept off screen (not display:none, which some bots skip). */
.contact-form__trap {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Messages after sending (site.js) */
.contact-form__status { margin: 0; }
.contact-form__status.is-error { color: #B3261E; }
.contact-form.is-sent > :not(.contact-form__status) { display: none; }
.contact-form.is-sent .contact-form__status {
  grid-column: 1 / -1;
  padding: var(--space-20);
  border: var(--line-width) solid var(--color-line);
  background: var(--color-light-gray);
}


/* ---------- Map card ----------
   A Sand card, 241px wide, centered on the photo. Plus marks (16px) sit
   20px in from each corner. Inside, 20px in, with 56px top and bottom
   (clearing the marks): the title (24px Medium, as the address above),
   the address (H5) 24px below, and "Open in Maps" (outlined button, full
   width) 24px below that. */

.map-card {
  position: relative;
  display: grid; justify-items: stretch; gap: var(--space-24);
  width: 241px; max-width: 100%;
  padding: calc(2 * var(--space-20) + 16px) var(--space-20);   /* 20px, the 16px mark, 20px */
  background-color: var(--color-sand);
  background-image:
    url("../assets/icons/icon-plus.svg"), url("../assets/icons/icon-plus.svg"),
    url("../assets/icons/icon-plus.svg"), url("../assets/icons/icon-plus.svg");
  background-position:
    left var(--space-20) top var(--space-20), right var(--space-20) top var(--space-20),
    left var(--space-20) bottom var(--space-20), right var(--space-20) bottom var(--space-20);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  text-align: left;
}
.map-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-h4-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}
.map-card__address { margin: 0; }
.map-card__button:hover,
.map-card__button:focus-visible { background: var(--color-dark-sand); }   /* the card is already Sand */


/* ---------- Thank-you and error pages ----------
   A Smoke section: H1, a paragraph, and a button back, 40px apart. */

.contact-result {
  display: grid; justify-items: start; gap: var(--space-40);
  min-height: 60vh; align-content: center;
}
.contact-result p { max-width: var(--text-max); }