/* ================================================================
   MOD: CONTACT — Formspree form
   Requires: core.css tokens. Requires: contact-formspree.js.
   Used on BOTH roofing.html and remodeling.html — the CSS is
   identical; only the hidden _subject value and the service <select>
   options differ per page.

   NOTE: this mod is reused near-verbatim from the reference
   contact-formspree.css — Inkstrim's original form already matched
   that layout almost exactly. The only real change is swapping a
   few hardcoded rgba(0,128,128,X) values for var(--accent1-rgb).

   HTML needed: <section class="contact" id="contact">
     <div class="container"><div class="contact-inner">
       <div class="contact-info reveal">
         ...eyebrow, section-heading, accent-bar, .contact-body...
         <div class="contact-details">
           <div class="contact-detail">
             <div class="contact-detail-icon">📞</div>
             <div class="contact-detail-text">
               <div class="contact-detail-label">Phone</div>
               <a href="tel:...">...</a>
             </div>
           </div>
         </div>
       </div>
       <div class="contact-form-card reveal">
         <form id="contactForm" action="https://formspree.io/f/[[FORMSPREE_ID]]" method="POST">
           <input type="hidden" name="_subject" value="..." />
           <div class="form-row">
             <div class="form-field"><label for="...">...</label><input ... /></div>
           </div>
           <div class="form-field"><label for="message">Message</label><textarea ...></textarea></div>
           <button type="submit" class="form-submit">Send Inquiry&nbsp;→</button>
           <p class="form-status" id="formStatus" role="alert"></p>
         </form>
       </div>
     </div></div>
   </section>
================================================================ */

.contact { background: var(--color-card-light); padding: var(--section-pad); scroll-margin-top: 32px; }
.contact-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.contact-info .section-heading { color: var(--text-color); }

.contact-body { font-size: clamp(.92rem,.25vw + .88rem,1rem); color: rgba(var(--fg-rgb), 0.55); line-height: 1.8; margin-bottom: clamp(1.5rem,3vw,2.5rem); max-width: 65ch; }
.contact-details { display: flex; flex-direction: column; gap: clamp(.9rem,2vw,1.35rem); }
.contact-detail { display: flex; align-items: flex-start; gap: clamp(.8rem,2vw,1.15rem); }
.contact-detail-icon {
  inline-size: clamp(2.5rem,4vw,3rem); block-size: clamp(2.5rem,4vw,3rem); aspect-ratio: 1; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--color-card); border: 1px solid rgba(var(--accent1-rgb), 0.3);
  font-size: clamp(.95rem,.5vw,1.15rem); box-shadow: var(--shadow-sm);
}
.contact-detail-text { min-width: 0; }
.contact-detail-text a { color: var(--accent1); text-decoration: none; font-weight: 600; font-size: clamp(.9rem,.3vw + .82rem,.98rem); transition: opacity var(--transition); overflow-wrap: anywhere; }
.contact-detail-text a:hover { opacity: 0.7; }
.contact-detail-label { font-size: clamp(.68rem,.2vw,.75rem); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.4); margin-bottom: .2rem; }

.contact-form-card {
  background: var(--color-card); border-radius: var(--radius-md); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-card); padding: clamp(1.25rem,3vw,2.5rem);
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(.75rem,1.5vw,1rem); margin-bottom: clamp(.75rem,1.5vw,1rem); }
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: clamp(.75rem,1.5vw,1rem); }
.form-row .form-field { margin-bottom: 0; }
.form-field label { font-size: clamp(.76rem,.2vw,.82rem); font-weight: 600; color: rgba(var(--fg-rgb), 0.5); letter-spacing: 0.12em; text-transform: uppercase; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; background: rgba(var(--fg-rgb), 0.06); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: var(--radius-sm);
  padding: clamp(.75rem,1vw,.9rem) clamp(.85rem,1.2vw,1rem); font-size: clamp(1rem,.2vw + .85rem,1.1rem);
  font-family: var(--font-body); color: var(--text-color); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(var(--fg-rgb), 0.35); }
.form-field select option { background: var(--color-card); color: var(--text-color); }
.form-field textarea { resize: vertical; min-height: clamp(8rem,18vh,12rem); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent1); box-shadow: 0 0 0 3px var(--accent1-glow);
}

.form-submit {
  inline-size: 100%; padding: clamp(.9rem,1vw,1rem) clamp(1.2rem,2vw,1.6rem); background: var(--accent1); color: var(--paper);
  border: none; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: clamp(1rem,.2vw + .86rem,1.1rem);
  font-weight: 600; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 20px var(--accent1-glow); text-transform: uppercase; letter-spacing: 0.12em;
}
.form-submit:hover { background: var(--accent1-dark); transform: translateY(-2px); box-shadow: 0 8px 28px var(--accent1-glow); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-status { margin-top: clamp(.8rem,2vw,1rem); font-size: clamp(.82rem,.2vw,.9rem); border-radius: var(--radius-sm); display: none; }
.form-status.is-success { display: block; color: #a9edc2; background: var(--accent1-glow); border: 1px solid rgba(var(--accent1-rgb),0.35); }
.form-status.is-error { display: block; color: #ffb4b4; background: rgba(220,80,80,0.14); border: 1px solid rgba(220,80,80,0.35); }