/* assets/css/contact.css
   Contact page specific styles (improved placeholders + layout polish)
*/

.contact-section {
    padding: clamp(28px, 4vw, 44px) 0;
    background: var(--color-bg);
  }
  
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
  }
  
  @media (max-width: 980px) {
    .contact-grid { grid-template-columns: 1fr; }
  }
  
  .contact-card {
    background: var(--color-surface);
    border: 1px solid rgba(15,23,36,0.06);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 20px rgba(13,24,40,0.04);
  }
  
  /* Headline */
  .contact-card h2 {
    margin-top: 0;
    font-family: var(--brand-font);
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
    color: var(--color-primary-600);
  }
  
  /* more breathing room for the form */
  .contact-form .row.g-3 { gap: 14px; }
  
  /* Inputs: ensure placeholder is visible, inputs crisp white */
  .contact-form .form-control {
    background: #fff;
    color: var(--text-primary);
    border: 1px solid rgba(15,23,36,0.06);
    padding: .65rem .75rem;
    border-radius: 8px;
    box-shadow: none;
    transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
  }
  
  /* placeholder color contrast */
  .contact-form .form-control::placeholder {
    color: #9aa3ad;
    opacity: 1;
  }
  
  /* focus */
  .contact-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(30,58,138,0.06);
  }
  
  /* invalid feedback: slightly bolder */
  .invalid-feedback { font-weight: 500; color: var(--danger); }
  
  /* result (success / error) */
  .contact-result {
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 6px;
    font-weight: 500;
    border: 1px solid transparent;
  }
  
  /* success */
  .contact-result.success {
    background: #ecfdf5;
    color: #065f46;
    border-color: #d1fae5;
  }
  
  /* error */
  .contact-result.error {
    background: #fff7f7;
    color: #7f1d1d;
    border-color: #f5c2c2;
  }
  
  /* spinner inside button - small margin */
  .btn .btn-spinner { margin-left: 8px; }
  
  /* honeypot - keep visually-hidden but present for bots */
  .honeypot-wrapper { height: 0; overflow: hidden; position: absolute; left: -9999px; top: -9999px; }
  
  /* aside cards */
  .contact-aside .card { border-radius: 12px; border: 1px solid rgba(15,23,36,0.06); box-shadow: 0 6px 18px rgba(2,6,23,0.04); }
  
  .contact-aside a { color: var(--color-primary); text-decoration: none; }
  .contact-aside a:hover, .contact-aside a:focus { text-decoration: none; }
  
  /* small-screen tweaks */
  @media (max-width: 640px) {
    .contact-card { padding: 16px; }
    .contact-grid { gap: 16px; padding: 0 12px; }
  }
  
  /* subtle enhancement: larger clickable selects */
  .contact-form .form-select { padding: .6rem .8rem; border-radius: 8px; }
  
  /* reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .contact-card, .contact-aside { transition: none; }
  }