/* /style/contact.css */ 

/* ============================================================
   Contact Page — UI v2 "Warm Modern" (design tokens only)
   Form controls use global .tch-field/.tch-input/.tch-btn from
   style/components.css; this file is page scaffolding only.
   ============================================================ */

.ContactUs { padding-bottom: var(--tch-space-8); }

/* ── Page title ───────────────────────────────────────────── */
.ContactUs .ContactTitle {
  text-align: center;
  padding: var(--tch-space-3) 0 var(--tch-space-5) 0;
}
.ContactUs .ContactTitle h1 {
  font-family: var(--tch-font-display);
  font-size: var(--tch-text-xl);
  font-weight: 500;
  color: var(--tch-ink);
  margin: 0 0 var(--tch-space-2) 0;
  position: static;
  line-height: 1.2;
}
.ContactUs .ContactTitle h1::after { display: none; }

/* Phone line + caller-id tooltip (was inline styles / page <style>) */
.ContactUs .ContactTitle .contact-phone {
  font-family: var(--tch-font-body);
  font-size: var(--tch-text-xs);
  margin-top: 0;
  color: var(--tch-muted);
  display: inline-block;
  position: relative;
  line-height: 1.5;
}
#contactpagenumButton { position: relative; }
#contactpagenumButton .contactpagenumTooltip {
  display: none; background: var(--tch-ink); position: absolute; top: 0px; width: 165px; padding: 5px; font-weight: normal;
  font-size: 12px; line-height: 16px; border-radius: var(--tch-radius-sm); left: 171px; min-height: auto; color: var(--tch-on-dark); }
#contactpagenumButton .contactpagenumTooltip:after {
  content: "";
  width: 0; height: 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent;
  border-right: 8px solid var(--tch-ink);
  position: absolute; top: 5px; left: -7px;}
#contactpagenumButton:hover .contactpagenumTooltip {
  display: block;
}

/* ── Topic switcher row (pill buttons come from .tch-btn) ─── */
.ContactUs .IssueBtn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tch-space-3);
  justify-content: center;
  align-items: center;
  padding: 0 0 var(--tch-space-5) 0;
}
.ContactUs .IssueBtn .tch-btn { white-space: normal; text-align: center; }
.ContactUs .IssueBtn .IssueBtn-or {
  font-size: var(--tch-text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--tch-muted);
}

/* ── Form card ────────────────────────────────────────────── */
.ContactUs .ContactFormLeft {
  background: var(--tch-surface);
  border: 1px solid var(--tch-line);
  border-radius: var(--tch-radius-lg);
  box-shadow: var(--tch-shadow-sm);
  max-width: 680px;
  padding: var(--tch-space-5) var(--tch-space-6);
  margin: 0 auto;
}

.ContactUs .ContactFormLeft h3 {
  font-family: var(--tch-font-display);
  font-size: var(--tch-text-lg);
  font-weight: 600;
  color: var(--tch-ink);
  margin: 0 0 var(--tch-space-1) 0;
  text-transform: none;
}

.ContactUs .ContactFormLeft > p {
  font-size: var(--tch-text-sm);
  color: var(--tch-muted);
  margin: 0 0 var(--tch-space-4) 0;
}

/* Required-field marker inside .tch-field__label */
.ContactUs .tch-field__label span { color: var(--tch-brand); margin-left: 2px; }

.ContactUs .ContactForm b {
  font-size: 13px;
  font-weight: 600;
  color: var(--tch-ink-2);
  display: block;
  margin-bottom: var(--tch-space-1);
}

.ContactUs .ContactForm .SubmitBtn { text-align: center; padding-top: var(--tch-space-4); }

.ContactUs .captcha { padding-top: var(--tch-space-4); text-align: center; }
.captcha .g-recaptcha div { margin: 0 auto; }

/* Stack the shared float-grid columns on small screens (footer.css
   defines .FormRow/.colum2/.colum3 as 48%/31.3% floats — too narrow
   at phone widths). Scoped to this page only. */
@media (max-width: 640px) {
  .ContactUs .FormRow .colum1,
  .ContactUs .FormRow .colum2,
  .ContactUs .FormRow .colum3 { width: 100%; float: none; padding: 0; }
  .ContactUs .ContactFormLeft { padding: var(--tch-space-4); }
}

/* ── Address / hours block ────────────────────────────────── */
.ContactUs .AddrPhn {
  display: flex;
  justify-content: center;
  gap: 0;
  padding-top: var(--tch-space-5);
  text-align: center;
  flex-wrap: wrap;
}
.ContactUs .AddrPhn .hours,
.ContactUs .AddrPhn .voice,
.ContactUs .AddrPhn .mail {
  float: none;
  width: auto;
  flex: 1;
  min-width: 180px;
  padding: var(--tch-space-4) var(--tch-space-5);
  border: none;
}
.ContactUs .AddrPhn .voice {
  border-left: 1px solid var(--tch-line);
  border-right: 1px solid var(--tch-line);
}

.ContactUs .AddressPhone h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tch-ink);
  text-transform: none;
  margin: 0 0 var(--tch-space-1) 0;
}
.ContactUs .AddressPhone h3 i { margin-right: 6px; color: var(--tch-brand); }
.ContactUs .AddressPhone p {
  font-size: 14px;
  color: var(--tch-ink-2);
  margin: 0 0 var(--tch-space-3) 0;
  line-height: 1.6;
}
.ContactUs .AddressPhone b { font-size: 13px; color: var(--tch-ink); }

.ContactUs .SubmitSupportTicket {
  padding-bottom: var(--tch-space-4);
  border-bottom: 1px solid var(--tch-line);
  margin-bottom: var(--tch-space-5);
}