/* ==========================================================================
   Hindsight Farms - page-contact.css (Contact rebuild, step 3, 2026-10-01)
   Contact page only. Linked right after main.css, so a rule here with the
   same specificity as a main.css rule wins by source order.

   Sizes and rhythm come from the site tokens in main.css ("SITE TYPE,
   SPACING, HEADER AND CLOSING BAND"): --t-h1 page title, --t-h2 section
   heads, --t-card card titles (24px desktop / 22px phone), --t-section
   section padding. The older ".page--contact .contact-hero",
   ".contact-inquiry" and ".contact-layout" rules in main.css no longer
   match any markup on this page.

   Layout: a short opener, then the form card (about 7/12) beside the visit
   card and the daytime photo (about 5/12) from 1000px up. Below 1000px
   everything stacks with the form first. Breakpoints: 600px (phone to
   tablet), 1000px (columns), 1200px (two-up form fields in the column).
   ========================================================================== */

.page--contact {
  /* Error red for invalid fields: 6.4:1 on paper, 5.9:1 on the focus tint.
     The one color outside the logo palette, used only for form errors. */
  --contact-error: #9e3a26;
  /* Field outline: tan-deep at 80%, which renders #987e60 on paper (3.6:1,
     above the 3:1 minimum for control borders). Plain tan measured 2.6:1. */
  --contact-field-line: rgba(128, 96, 60, .8);
}

/* Contact links across the site open this page at the form
   (contact.html#note). main.css scrolls smoothly by default, which on
   arrival would show the opener and then slide down to the form. On this
   page the jump is instant instead. */
html:has(body.page--contact) { scroll-behavior: auto; }

/* 1) OPENING ---------------------------------------------------------------- */
.page--contact .contact-opening {
  /* The opener (.contact-hero, main.css) is back above this section since
     2026-10-04, so this one no longer clears the fixed header itself. */
  padding-top: var(--t-section);
  padding-bottom: var(--t-section);
  background: var(--paper);
}

/* 2) COLUMNS: form 7/12, visit card and photo 5/12 ------------------------- */
.page--contact .contact-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 0;
}
.page--contact .contact-side {
  display: grid;
  gap: 24px;
  align-content: start;
}
@media (min-width: 1000px) {
  .page--contact .contact-columns {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: start;
  }
}

/* 3) FORM CARD -------------------------------------------------------------- */
/* An opaque paper surface (main.css keeps its border and soft shadow); the
   head is tighter than before so the first field reaches the first screen. */
.page--contact .contact-form-card { padding: 30px 36px 36px; }
.page--contact .contact-form-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* Both card titles are H2s (the page has no section H2 above them now),
   set at the card size. */
.page--contact .contact-form-card__head h2,
.page--contact .contact-visit-card > h2 {
  font-family: var(--font-display);
  font-size: var(--t-card);
  line-height: 1.15;
  font-weight: 600;
  color: var(--bark);
}

/* Fields: one column on phones and in the narrow 1000-1199px column; two
   columns on tablets and wide desktops. Program and Message always span
   the full width, so "Morgan Caplane Equestrian" fits from 360px up (on a
   320px phone the closed select ends it with an ellipsis). */
.page--contact .form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 16px;
}
.page--contact .field--wide { grid-column: 1 / -1; }
@media (min-width: 600px) and (max-width: 999px), (min-width: 1200px) {
  .page--contact .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inputs stay 17px (var(--fs-body), set in main.css) so iPhones never zoom
   on focus. Borders meet 3:1; focus keeps the bark border and outline. */
.page--contact .field input,
.page--contact .field select,
.page--contact .field textarea { border-color: var(--contact-field-line); }
.page--contact .field input:hover,
.page--contact .field select:hover,
.page--contact .field textarea:hover { border-color: var(--tan-deep); }
.page--contact .field input:focus,
.page--contact .field select:focus,
.page--contact .field textarea:focus { border-color: var(--bark); }

/* Selects: drawn the same in every browser (square corners, the same
   border) with a bark chevron. Windows high-contrast mode gets the native
   control back, since background images are dropped there. */
.page--contact .field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23563b26' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 18px 18px;
  cursor: pointer;
  text-overflow: ellipsis;
}
@media (forced-colors: active) {
  .page--contact .field select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
    padding-right: .9rem;
  }
}

/* The message hint sits under its label and is tied to the textarea with
   aria-describedby. */
.page--contact .field__hint {
  margin-top: -2px;
  color: var(--stone);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Errors: :user-invalid only matches after the visitor has edited a field
   or tried to send, so an untouched form never starts out red. The border
   doubles (inset shadow, no layout shift) and the label turns red, so the
   cue is not color alone; the browser's own message names the problem. */
.page--contact .field input:user-invalid,
.page--contact .field select:user-invalid,
.page--contact .field textarea:user-invalid {
  border-color: var(--contact-error);
  box-shadow: inset 0 0 0 1px var(--contact-error);
}
.page--contact .field:has(:user-invalid) > label,
.page--contact .field:has(:user-invalid) .form-required { color: var(--contact-error); }

.page--contact .form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}
.page--contact .form__actions .btn { width: auto; min-height: 48px; }

/* 4) VISIT CARD AND PHOTO --------------------------------------------------- */
.page--contact .contact-visit-card {
  max-width: none;
  padding: 30px 32px 32px;
}
.page--contact .contact-visit-card > .eyebrow { margin-bottom: 8px; }
.page--contact .contact-visit-card > h2 + .contact-detail { margin-top: 20px; }
.page--contact .contact-visit-card .contact-detail { padding-top: 14px; }
.page--contact .contact-visit-card .contact-detail + .contact-detail { margin-top: 14px; }
.page--contact .contact-visit-card__note { margin-top: 20px; padding: 16px 18px; }
.page--contact .contact-visit-card .textlink { margin-top: 18px; }

/* Matted like the map below it: a paper mat inside a tan hairline. */
.page--contact .contact-photo { margin: 0; }
.page--contact .contact-photo img {
  width: 100%;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--tan);
}

/* Wide desktops: the two columns end on one line. The row stretches the
   form card to the side column's height (visit card plus photo frame; the
   caption hangs below the frame out of flow), and the extra height goes to
   the message box rather than to empty space. With taller form content the
   form simply sets the height and the message box keeps its 176px minimum.
   The fields grid has four rows here: Name|Email, Phone|Interest, Program,
   Message. */
@media (min-width: 1200px) {
  .page--contact .contact-columns { align-items: stretch; }
  .page--contact .contact-form-card { display: flex; flex-direction: column; }
  .page--contact .contact-form-card > .form {
    flex: 1 1 auto;
    grid-template-rows: 1fr auto auto;
  }
  .page--contact .form__fields { grid-template-rows: auto auto auto 1fr; }
  .page--contact .field--message { grid-template-rows: auto auto 1fr; }
  .page--contact .field--message textarea { height: 100%; }
  .page--contact .contact-photo { position: relative; }
  .page--contact .contact-photo figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* 5) DIRECTIONS ------------------------------------------------------------- */
/* Section head at the site scale (replaces the interim step 1 size). */
.page--contact .contact-directions__head .display {
  font-size: var(--t-h2);
  line-height: 1.1;
  font-weight: 600;
}

/* 6) TABLET, 600-999px: the visit card spans the width under the form, with
   its details on the left and the appointment note plus directions link
   (one wrapper, .contact-visit-card__more) on the right; the photo runs
   full width beneath it. */
@media (min-width: 600px) and (max-width: 999px) {
  .page--contact .contact-visit-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }
  .page--contact .contact-visit-card > .eyebrow,
  .page--contact .contact-visit-card > h2 { grid-column: 1 / -1; }
  .page--contact .contact-visit-card .contact-detail { grid-column: 1; }
  .page--contact .contact-visit-card__more { grid-column: 2; grid-row: 3 / span 3; }
}

/* 7) PHONES ------------------------------------------------------------------ */
@media (max-width: 599px) {
    .page--contact .contact-columns { margin-top: 24px; }
  .page--contact .contact-form-card { padding: 22px 20px 24px; }
  .page--contact .contact-form-card__head { margin-bottom: 18px; padding-bottom: 12px; }
  .page--contact .contact-visit-card { padding: 22px 20px 24px; }
  .page--contact .field textarea { min-height: 150px; }
  .page--contact .form__actions .btn { width: 100%; }
}
@media (max-width: 360px) {
  .page--contact .contact-form-card,
  .page--contact .contact-visit-card { padding-left: 16px; padding-right: 16px; }
  /* keeps boarding@hindsightfarms.com on one line in a 320px card; the
     <wbr> after the @ is the fallback break if a font runs wider */
  .page--contact .contact-detail p,
  .page--contact .contact-detail address { font-size: 16px; }
}