/* ═══════════════════════════════════════
   CONTACT-INTEGRITY-ROOFING-LOUISVILLE.CSS - contact page
   Sections: intro, then contact details beside the contact form
═══════════════════════════════════════ */

/* ── INTRO ── */
/* Navy band with white text, the same as the services overview page. */
.contact-intro {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.contact-intro .container { max-width: 900px; }
.contact-intro .eyebrow { color: var(--white); }
/* Heading styled after the logo, the same as the other page heroes: big
   block capitals, with "and Construction" in red between two red rules.
   "Contact" sits above it. */
.hero-title {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
.hero-title-pre {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.75rem);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 0.5rem;
}
/* White lettering on the navy background with a red drop shadow set just
   off the letters, the same as the light gray heroes. */
.hero-title-main {
  color: var(--white);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--navy),
    0 0 2px var(--navy),
    2px 2px 0 var(--navy),
    3px 3px 0 var(--navy),
    5px 5px 0 var(--red),
    6px 6px 0 var(--red);
}
.hero-title-sub {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  color: var(--red);
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}
.hero-title-loc {
  color: var(--white);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
  text-align: center;
}
.contact-intro .lead { font-size: 1.2rem; margin-bottom: 1.75rem; }
.contact-intro .btn-group { justify-content: center; }
/* The red button sits on navy here, so hover goes white instead of navy. */
.contact-intro .btn:not(.btn-light):hover,
.contact-intro .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ── CONTACT DETAILS AND FORM ── */
.contact-main { background: var(--light-gray); }
/* Contact details on the left, the form on the right. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
}
.contact-card,
.contact-form-card {
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 2rem;
}
.contact-card { border-left: 6px solid var(--red); }
.contact-card-title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.contact-card > p,
.contact-form-card > p { font-size: 1.1rem; line-height: 1.7; }
.contact-list {
  list-style: none;
  margin: 1.75rem 0;
  display: grid;
  gap: 1.4rem;
}
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
/* Icon in a red square, like the buttons. */
.contact-list svg {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--red);
  border-radius: 4px;
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-list div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.contact-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.contact-list a {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--red); text-decoration: underline; }
.contact-finance {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.5rem;
  border-top: var(--border);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.contact-finance img { width: 150px; }
.contact-finance:hover span { color: var(--red); text-decoration: underline; }

/* ── CONTACT FORM ── */
.contact-form { margin-top: 1.5rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
/* The street address gets more room than the zip code. */
.form-row-address { grid-template-columns: 2fr 1fr; }
.form-field {
  margin: 0 0 1.1rem;
  min-width: 0;
}
.form-field > label,
.form-choice legend {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.form-req { color: var(--red); }
.form-optional { font-weight: 600; color: var(--warm-dark-gray); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--white);
  border: var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 1px;
}
/* Fields the visitor tried to send without filling in correctly. */
.contact-form .is-invalid { border-color: var(--red); }
.form-choice {
  border: 0;
  padding: 0;
}
.form-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.form-choice input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; accent-color: var(--red); }
/* Service choices sit in two columns so they line up. */
.form-services label {
  margin: 0 0 0.6rem;
}
.form-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}
.form-services legend { grid-column: 1 / -1; }
/* Hidden from people; only bots fill it in. */
/* Turnstile spam check; keeps its space so the button does not jump. */
.form-turnstile { min-height: 65px; }
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-submit { width: 100%; margin-top: 0.4rem; }
.contact-submit:disabled { cursor: wait; }
.form-status {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4;
}
.form-status.is-success { background: var(--navy); color: var(--white); }
.form-status.is-error { background: var(--white); border: 2px solid var(--red); color: var(--red); }

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .form-row,
  .form-row-address { grid-template-columns: 1fr; }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .contact-intro { padding: 2.5rem 0; }
  .contact-grid { grid-template-columns: 1fr; }
  /* The form comes first on phones; the details follow it. */
  .contact-form-card { order: -1; }
  .contact-card,
  .contact-form-card { padding: 1.5rem; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title, matching the other main pages
══════════════════════ */
@media (max-width: 768px) {
  .hero-title-pre { font-size: clamp(2.4rem, 12vw, 3.75rem); }
  /* The main title line is allowed to break onto two lines on phones so it
     can be set much larger. The size is chosen so the longest single word in
     any page title ("Installation") still fits the width. */
  .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  .hero-title-loc { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  /* Larger hero text on phones so it reads easily, the same on every main page. */
  .contact-intro .eyebrow { font-size: 1.3rem; }
  .contact-intro .lead { font-size: 1.35rem; line-height: 1.6; }
  .contact-card > p,
  .contact-form-card > p { font-size: 1.15rem; }
  /* One service per line. */
  .form-services { grid-template-columns: 1fr; }
  /* Each contact item puts its icon and label on one row and the phone
     number, email or hours on the full width of the card below, so the long
     email address fits on one line. */
  .contact-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
  }
  .contact-list div { display: contents; }
  .contact-list svg { width: 38px; height: 38px; padding: 8px; }
  .contact-list a,
  .contact-list div > span:not(.contact-label) { grid-column: 1 / -1; }
  .contact-card { padding-inline: 1.1rem; }
  /* Sized from the screen width so the full email address always fits the
     card on one line (it is about 16.6 times as wide as its font size). */
  .contact-list a[href^="mailto:"] {
    font-size: min(1.2rem, calc((100vw - 6.25rem) / 16.6));
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .form-field > label,
  .form-choice legend { font-size: 1.05rem; }
}