/* ================================================================
   FILE PATH: public/css/Contact.css
   Brescon Family Office — Contact Section
   White surface + Brescon blue (#5BA3C9) form accents
================================================================ */

#contact { padding: var(--section-pad); background: var(--white); }

.contact-wrapper {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem; align-items: start;
}

/* ── Info Column ── */
.contact-info h3 {
  font-family: var(--font-heading); font-size: 1.55rem;
  color: var(--dark); margin-bottom: .75rem;
}
.contact-info > p {
  color: var(--gray-tag); font-size: .97rem;
  line-height: 1.85; margin-bottom: 2rem;
}

.contact-detail { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-detail-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-subtle); border: 1px solid rgba(91,163,201,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: 1.1rem; flex-shrink: 0;
  transition: all var(--t-base);
}
.contact-detail:hover .contact-detail-icon {
  background: var(--blue); color: var(--white);
}
.contact-detail-text h4 {
  font-size: .82rem; color: var(--dark); margin-bottom: 3px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.contact-detail-text p,
.contact-detail-text a {
  font-size: .93rem; color: var(--gray-tag); margin: 0;
  text-decoration: none; transition: color var(--t-fast);
}
.contact-detail-text a:hover { color: var(--blue-dark); text-decoration: underline; }

.discretion-notice {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: var(--blue-subtle); border-radius: var(--r-md);
  border-left: 3px solid var(--blue);
}
.discretion-notice p { margin: 0; font-size: .86rem; color: var(--gray-tag); line-height: 1.75; }
.discretion-notice i { color: var(--blue); }

/* ── Form Wrapper ── */
.contact-form-wrapper {
  background: var(--surface-alt); border-radius: var(--r-lg);
  padding: 2.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--gray-border);
}
.contact-form-wrapper h3 {
  font-family: var(--font-heading); font-size: 1.4rem;
  color: var(--dark); margin-bottom: 1.75rem;
  padding-bottom: 1rem; border-bottom: 2px solid var(--blue-pale);
}

.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--dark); margin-bottom: 7px;
}
.form-group label .required { color: var(--error); margin-left: 3px; }

.form-control-custom {
  width: 100%; padding: 12px 16px;
  border: 2px solid var(--gray-border); border-radius: var(--r-md);
  font-size: .95rem; font-family: var(--font-body);
  color: var(--dark); background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none; -webkit-appearance: none;
}
.form-control-custom::placeholder { color: var(--gray-muted); }
.form-control-custom:hover  { border-color: var(--blue-light); }
.form-control-custom:focus  { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,163,201,.18); }
.form-control-custom.error  { border-color: var(--error); box-shadow: 0 0 0 3px rgba(192,57,43,.10); }
textarea.form-control-custom { resize: vertical; min-height: 130px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Alert messages */
.form-alert {
  padding: 1rem 1.25rem; border-radius: var(--r-md);
  margin-bottom: 1.25rem; font-size: .93rem; font-weight: 500;
  display: none; align-items: center; gap: 8px;
}
.form-alert.success {
  background: var(--success-bg); color: var(--success);
  border: 1px solid rgba(39,174,96,.28); display: flex;
}
.form-alert.error-msg {
  background: var(--error-bg); color: var(--error);
  border: 1px solid rgba(192,57,43,.25); display: flex;
}

/* Error messages */
.form-error-msg {
  font-size: .80rem; color: var(--error);
  margin-top: 4px; display: none;
  align-items: center; gap: 4px;
}
.form-error-msg.visible { display: flex; }

/* Submit Button */
.submit-btn {
  width: 100%; padding: 14px;
  background: var(--blue); color: var(--white);
  border: none; border-radius: var(--r-md);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); transition: all var(--t-base);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; box-shadow: var(--shadow-sm); letter-spacing: .3px;
}
.submit-btn:hover, .submit-btn:focus {
  background: var(--blue-dark); box-shadow: var(--shadow-blue);
  transform: translateY(-2px); outline: none;
}
.submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 991px) { .contact-wrapper { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrapper { padding: 1.5rem; }
}