/* ================================================================
   MOD: CONTACT — Formspree form
   Requires: core.css tokens. Requires: contact-form.js.
   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">
           <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 Message</button>
           <p class="form-status" id="formStatus" role="alert"></p>
         </form>
       </div>
     </div></div>
   </section>

   NOTE ON SPACING: .form-row has its own margin-bottom, AND
   .form-row .form-field zeroes out its own margin-bottom — this
   avoids doubled spacing between rows (a bug from an earlier
   version where both margins stacked). A lone .form-field NOT
   inside a .form-row (e.g. the Message field) keeps its margin,
   since there's no row-level margin to provide that spacing instead.
================================================================ */

.contact { background: var(--color-bg-alt); 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-body { font-size:clamp(.92rem,.25vw + .88rem,1rem); color: rgba(var(--fg-rgb), 0.62); 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-bg-alt); border:1px solid var(--color-border); 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-lg); border: 1px solid var(--color-border);
  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-field label { font-size: clamp(.76rem,.2vw,.82rem); font-weight: 600; color: rgba(var(--fg-rgb), 0.65); letter-spacing: 0.12em; text-transform: uppercase; }
.form-row .form-field { margin-bottom: 0; }
.form-field input,
.form-field select,
.form-field textarea { width:100%; background:var(--color-bg-alt); border:1px solid var(--color-border); 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 textarea { resize: vertical; min-height: clamp(8rem,18vh,12rem); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-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:var(--shadow-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.form-submit:hover { background: var(--accent1-dark); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.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: #175a17; background: rgba(var(--accent2-rgb),0.2); border: 1px solid rgba(var(--accent2-rgb),0.4); }
.form-status.is-error { display: block; color: #8a2c2c; background: rgba(220,80,80,0.1); border: 1px solid rgba(220,80,80,0.25); }

[data-theme="dark"] .contact-detail-icon { background: var(--color-bg-alt); }
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea { background: var(--color-bg); }
[data-theme="dark"] .form-field input::placeholder,
[data-theme="dark"] .form-field textarea::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .form-status.is-success { color: #a9edc2; background: rgba(var(--accent2-rgb),0.14); border-color: rgba(var(--accent2-rgb),0.35); }
[data-theme="dark"] .form-status.is-error { color: #ffb4b4; background: rgba(220,80,80,0.14); border-color: rgba(220,80,80,0.35); }