/* ============================================================================
   FORMS — enquiry form
   ----------------------------------------------------------------------------
   Loaded by : contact.html
   Depends on: base/tokens.css
   Scripted by: js/contact.js

   Structure:
     .cf         the form card
     .form-row   two .fg fields side by side (collapses to one column ≤640px)
     .fg         one label + control pair
   ============================================================================ */

/* The card is stretched to its column's full height by .contact-inner. These
   flex rules hand the leftover height to the form, which passes it to the
   submit button's auto margin, so the button sits on the card's bottom edge
   instead of leaving a dead gap below it. */
.cf{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:2.5rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.cf h3{font-size:1.25rem;font-weight:800;color:var(--text-dark);margin-bottom:1.5rem;}
.cf form{display:flex;flex-direction:column;flex:1;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.fg{margin-bottom:1.1rem;}
.fg label{
  display:block;font-size:0.75rem;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text-mid);margin-bottom:5px;
}
.fg input,.fg select,.fg textarea{
  width:100%;background:var(--white);border:1.5px solid var(--border);
  border-radius:5px;padding:11px 13px;color:var(--text-dark);
  font-size:0.9rem;font-family:'Inter',sans-serif;outline:none;
  transition:border-color 0.25s,box-shadow 0.25s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,122,0.08);
}
.fg select option{background:var(--white);}
.fg textarea{resize:vertical;min-height:120px;}

/* The message field takes the card's spare height. Without this the slack
   collects into one dead gap above the submit button; here it becomes a
   roomier textarea, which suits pasting a part list. */
.cf .fg-grow{flex:1;display:flex;flex-direction:column;min-height:0;}
.cf .fg-grow textarea{flex:1;}

.f-submit{
  width:100%;padding:13px;background:var(--navy);color:var(--white);
  border:none;border-radius:5px;font-size:0.92rem;font-weight:700;
  cursor:pointer;font-family:'Inter',sans-serif;
  transition:background 0.25s,box-shadow 0.25s;margin-top:0.4rem;
}
.f-submit:hover{background:var(--blue);box-shadow:var(--shadow-md);}

/* Revealed by js/contact.js after the mailto: draft is handed to the mail app. */
.success-msg{
  display:none;background:#f0fdf4;border:1px solid #86efac;
  border-radius:6px;padding:1rem;margin-top:1rem;
  color:#166534;font-size:0.88rem;font-weight:600;text-align:center;
}
.success-msg.is-visible{display:block;}

@media(max-width:640px){
  .form-row{grid-template-columns:1fr;}
}