/* contact.css — page-scoped styles for contact.html (based on about.css template) */

/* Ensure compatibility with existing #cards helpers */
#cards, .cards { display: block; width: 100%; box-sizing: border-box; }

/* Layout: place the contact form and contact info cards side-by-side on wide screens */
/* Strong page-scoped flex layout for the two contact cards. Use !important so
   later global styles (index/theme) do not override placement. */
body.page-contact .contact-grid {
  display: flex !important;
  gap: 10px !important; /* user requested 10px space */
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important; /* keep side-by-side at desktop sizes */
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 1rem 0 !important;
  box-sizing: border-box !important;
}

/* Helper: small fixed-width wrapper to avoid global .ninehundred flex rules
   Use this on card wrappers that must not be treated as the site's 900px container. */
body.page-contact .threefifty {
  display: block !important;
  box-sizing: border-box !important;
  max-width: 440px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Primary card (form) — take most of the width */
/* Fixed width cards: both should be 350px with a 10px gap */
body.page-contact .contact-form-card,
body.page-contact .contact-info-card {
  max-width: 400px !important;
  width: 400px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Make cards visually match the About page: outer background stays, inner card is eggshell */
/* page-scoped main-card wrapper archived (moved to css/unused-archive.css) */
/* body.page-contact .main-card { background: transparent !important; } */
/* body.page-contact .main-card .card-inner { archived } */

/* Ensure contact cards inherit the same site font and consistent heading style */
/* Ensure the inner card area used on this page renders as its own eggshell
   panel (some pages use .main-card>.card-inner; contact uses .card-inner
   directly so we target it here). */
body.page-contact .card-inner {
  font-family: inherit !important;
  background: var(--background-eggshell) !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
  color: var(--brand-black) !important;
}

h1.contact-title {  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  border-bottom: 2px solid var(--brand-red) !important;
  white-space: normal !important;
}
h2.contact-title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  color: var(--brand-blue) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}
/* h2.contact-title-white archived and moved to css/unused-archive.css */

/* Emergency heading: duplicate of h1.contact-title but in brand red */
h1.contact-emergency, h1.contact-emergency a {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  white-space: normal !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
}

/* Ensure the emergency link inherits the heading styles and removes default link decor */
h1.contact-emergency a {
  color: inherit !important;
  text-decoration: none !important;
}
h1.contact-emergency a:hover {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  white-space: normal !important;
  text-transform: uppercase !important;
}

/* Contact info links: mirror the contact form H4 header style but centered */
body.page-contact .contact-info-card .h4,
body.page-contact .contact-info-card a.h4 {
  display: block !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  text-decoration: none !important;
}

body.page-contact .contact-info-card a.h4:hover {
  text-decoration: none !important;
  color: var(--brand-gold) !important;
}

/* Remove extra large top padding on the contact page ninehundred wrapper if present */
body.page-contact .ninehundred { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }

/* Center the submit button under the form like other pages (archived) */
/* body.page-contact .submit-button { archived to css/unused-archive.css } */

/* Responsive: stack the two cards on narrow viewports */
@media (max-width: 900px) {
  body.page-contact .contact-grid { flex-direction: column; gap: 12px; padding: 0.5rem 0; }
  body.page-contact .contact-form-card, body.page-contact .contact-info-card { 
    flex-basis: 100% !important; max-width: 100% !important; }
}

/* Tidy FAQ/contact follow-up card spacing (archived) */
/* body.page-contact #faq-card-contact { archived to css/unused-archive.css } */

/* Accessibility: ensure form fields are full width within eggshell inner card */
body.page-contact .card-inner input[type="text"],
body.page-contact .card-inner input[type="tel"],
body.page-contact .card-inner input[type="email"],
body.page-contact .card-inner textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Contact-specific input styles — mirror the look of the service-locations search input */
.contact-input {
  display: block;
  width: 100% !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 1rem !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--brand-blue) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

.contact-input:focus {
  outline: 3px solid rgba(210,188,115,0.18) !important; /* subtle gold focus */
  border-color: var(--brand-gold) !important;
}

/* Make textarea visually match single-line inputs: fixed min-height, same padding, vertically resizable only */
textarea.contact-input {
  /* Match single-line inputs exactly */
  min-height: 140px !important;
  max-height: 400px !important;
  resize: vertical !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 1rem !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--brand-blue) !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
  font-weight: 400 !important;
}

/* Make textarea placeholder match muted text */
textarea.contact-input::placeholder {
  color: rgba(0,0,0,0.45) !important;
  opacity: 1 !important;
}

/* Legacy vendor placeholders */
textarea.contact-input:-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }
textarea.contact-input::-ms-input-placeholder { color: rgba(0,0,0,0.45) !important; }

/* Use the H4 tag for field titles (service-locations style). Add a small utility
   so if labels are wrapped in H4 they align with the search bar title spacing. */
.contact-field-title, .contact-cta, h4 { 
margin-bottom: 0.5rem; 
  color: var(--brand-blue) !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 1rem !important;
  text-align: left !important;
}

/* Restore h4 label styling for contact form only: keep labels blue and left-aligned */
body.page-contact .card-inner h4 {
  margin-bottom: 0.5rem !important;
  color: var(--brand-blue) !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 1rem !important;
  text-align: left !important;
}
.contact-detail a {
  margin-bottom: 0.5rem;
  color: var(--brand-blue) !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 1rem !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
}

/* Utility class: give vertical spacing to stacked contact rows */
.contact-row {
  margin-bottom: 1rem !important;
}
.contact-row:last-child {
  margin-bottom: 0 !important;
}

/* Center submit CTA */
.contact-cta { text-align: center; margin-top: 1rem; }

.contact-cta .general-button { min-width: 180px; }

/* Stronger centering override to defeat ancestor flex rules (page-scoped) */
#cards .ninehundred.contact-page-card .contact-cta,
body.page-contact #cards .ninehundred.contact-page-card .contact-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#cards .ninehundred.contact-page-card .contact-cta .general-button,
body.page-contact #cards .ninehundred.contact-page-card .contact-cta .general-button {
  margin: 0 !important;
  display: inline-flex !important;
}