/* =========================================================================
   Contact. Values transcribed from final_html/Contact.dc.html.
   The WPForms markup is styled here to the approved field design:
   #FFFEF9 fields, 1px #C8D8CC borders, placeholder-only look.
   ========================================================================= */

.contact-reach-h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px; font-weight: 700; color: #2C2218; margin: 0 0 24px;
}
.contact-reach {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.reach-card {
  background: #2D5441; border: 1px solid #234135; border-radius: 12px;
  padding: 24px 24px 26px; display: block;
  transition: background .15s ease;
}
a.reach-card:hover { background: #3A6B52; }
.reach-card__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #C8E6D8;
}
.reach-card__value { font-size: 15px; font-weight: 700; color: #FFFBE6; margin-top: 8px; line-height: 1.4; }
.reach-card__value--serif {
  font-family: "Playfair Display", Georgia, serif; font-size: 20px;
}
.reach-card__note { font-size: 13px; color: #C8E6D8; margin-top: 8px; line-height: 1.5; }
.reach-card__note--gold { color: #F7B51C; font-weight: 600; }
.reach-card__hours { font-size: 14px; color: #FFFBE6; margin-top: 8px; line-height: 1.6; }

/* ---- Form + directions split -------------------------------------------- */
.contact-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px;
  align-items: start;
}
.contact-form {
  background: #EAF3EC; border: 1px solid #C8E6D8; border-radius: 12px;
  padding: 32px 34px;
}
.contact-form h2, .contact-directions h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px; font-weight: 700; color: #2C2218; margin: 0;
}
.contact-form > p, .contact-directions > p {
  font-size: 14.5px; line-height: 1.65; color: #3A4A40; margin: 10px 0 18px !important;
}
.contact-directions strong { color: #2C2218; }
.contact-map { border-radius: 12px; overflow: hidden; border: 1px solid #C8E6D8; }
.contact-map iframe { width: 100%; min-height: 300px; border: 0; display: block; }
.contact-directions__cta { margin-top: 16px; }

/* ---- WPForms Pro (modern-full), forced onto the brand ------------------- */
/* WPForms 1.9 ships its styling as CSS custom properties on the container
   plus #id-specificity rules — the earlier class-level skin lost every fight
   (blue button, floated half-width fields; John's screenshot 2026-08-16).
   Override at the SAME variable layer, then pin the few states vars miss. */
.contact-form .wpforms-container {
  --wpforms-field-background-color: #FFFEF9;
  --wpforms-field-border-color: #C8D8CC;
  --wpforms-field-border-radius: 6px;
  --wpforms-field-text-color: #2C2218;
  --wpforms-field-menu-color: #FFFEF9;
  --wpforms-label-color: #3A4A40;
  --wpforms-label-sublabel-color: #7A6E65;
  --wpforms-label-error-color: #A54A2A;
  --wpforms-button-background-color: #F7B51C;
  --wpforms-button-text-color: #2D5441;
  --wpforms-button-border-radius: 6px;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-font-size: 15px;
  --wpforms-field-size-input-height: 48px;
  --wpforms-page-break-color: #2D5441;
}
.contact-form .wpforms-container .wpforms-field { padding: 6px 0; }
.contact-form .wpforms-container input[type="text"],
.contact-form .wpforms-container input[type="tel"],
.contact-form .wpforms-container input[type="email"],
.contact-form .wpforms-container select,
.contact-form .wpforms-container textarea {
  background: #FFFEF9 !important; border: 1px solid #C8D8CC !important;
  border-radius: 6px !important; color: #2C2218 !important;
  font-family: inherit !important; font-size: 14.5px !important;
}
.contact-form .wpforms-container textarea { min-height: 120px; }
.contact-form .wpforms-container ::placeholder { color: #7A6E65; opacity: 1; }
/* First/Last as an even two-column row at desktop, stacked on phone. */
.contact-form .wpforms-container .wpforms-field-name .wpforms-field-row {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
}
.contact-form .wpforms-container .wpforms-field-row-block,
.contact-form .wpforms-container .wpforms-first,
.contact-form .wpforms-container .wpforms-last {
  float: none !important; width: 100% !important; margin: 0 !important;
}
/* The submit button. Gold, pine text, pine hover — never blue. */
.contact-form .wpforms-container button[type="submit"],
.contact-form .wpforms-container .wpforms-submit {
  background-color: #F7B51C !important; color: #2D5441 !important;
  border: 0 !important; border-radius: 6px !important;
  font-weight: 700 !important; width: 100%;
  transition: background-color .15s ease, color .15s ease;
}
.contact-form .wpforms-container button[type="submit"]:hover,
.contact-form .wpforms-container .wpforms-submit:hover {
  background-color: #2D5441 !important; color: #FFFBE6 !important;
}
.contact-form .wpforms-container input:focus-visible,
.contact-form .wpforms-container select:focus-visible,
.contact-form .wpforms-container textarea:focus-visible,
.contact-form .wpforms-container button:focus-visible {
  outline: 2px solid #F7B51C !important; outline-offset: 2px;
  box-shadow: none !important;
}
.contact-form .wpforms-container .wpforms-error,
.contact-form .wpforms-container em.wpforms-error { color: #A54A2A !important; }
.contact-form .wpforms-confirmation-container-full {
  background: #FFFEF9; border: 1px solid #C8D8CC; border-radius: 8px;
  padding: 18px 20px; color: #2D5441; font-size: 15px;
}

/* ---- (superseded class-level skin removed) ------------------------------ */

@media (max-width: 1024px) {
  .contact-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .contact-reach-h2 { font-size: 25px; }
  .contact-reach { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 20px; }
  /* Phone: the name row stacks, per the approved 100%-on-phone rule. */
  .contact-form .wpforms-container .wpforms-field-name .wpforms-field-row { grid-template-columns: 1fr; }
  .closing-ctas a { width: 100%; text-align: center; }
}