/*
 * OpsMed — Contact Page Styles
 * WCAG 2.2 AA Compliant
 */

/* Hero */
.page-hero { background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%); color: var(--white); padding: var(--space-4xl) 0 var(--space-3xl); text-align: center; }
.page-hero h1 { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: var(--space-md); }
.page-hero__subtitle { font-size: 1.15rem; color: var(--blue-100); max-width: 680px; margin: 0 auto; line-height: 1.7; }

/* Shared */
.section { padding: var(--space-4xl) 0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }

/* Contact Layout */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-3xl); align-items: start; }

/* Form */
.contact-form-wrap h2 { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-xl); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-weight: 600; color: var(--slate-800); font-size: 0.9rem; }
.required { color: var(--red-600); }
.form-group input,
.form-group select,
.form-group textarea { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 1rem; padding: 0.75em 1em; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); color: var(--slate-800); background: var(--white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); outline: none; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.5em; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-privacy-note { font-size: 0.85rem; color: var(--slate-500); }
.form-privacy-note a { color: var(--blue-600); }

/* Success & Error */
.contact-success { text-align: center; padding: var(--space-3xl) var(--space-xl); background: var(--green-100); border-radius: var(--radius-lg); }
.contact-success svg { color: var(--green-600); margin-bottom: var(--space-lg); }
.contact-success h2 { font-family: 'Inter', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-md); }
.contact-success p { color: var(--slate-600); line-height: 1.7; margin-bottom: var(--space-xl); max-width: 500px; margin-left: auto; margin-right: auto; }
.contact-error { background: var(--red-100); color: var(--red-600); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); font-weight: 500; margin-bottom: var(--space-lg); }

/* Info Sidebar */
.contact-info { display: flex; flex-direction: column; gap: var(--space-xl); }
.contact-info__card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: var(--space-xl); }
.contact-info__card--cta { background: var(--blue-50); border-color: var(--blue-100); }
.contact-info__card h3 { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--slate-900); margin-bottom: var(--space-lg); }
.contact-info__card--cta p { color: var(--slate-600); font-size: 0.95rem; line-height: 1.7; }
.contact-info__item { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.contact-info__item:last-child { margin-bottom: 0; }
.contact-info__item svg { flex-shrink: 0; color: var(--blue-600); }
.contact-info__item a { color: var(--slate-800); text-decoration: none; font-weight: 500; }
.contact-info__item a:hover { color: var(--blue-700); }
.contact-info__item span { color: var(--slate-700); }

/* Buttons */
.btn { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); cursor: pointer; border: none; }
.btn--primary { background: var(--blue-600); color: var(--white); padding: 0.85em 2em; font-size: 1rem; }
.btn--primary:hover { background: var(--blue-700); }
.btn--secondary { background: var(--white); color: var(--blue-800); border: 2px solid var(--blue-800); padding: 0.75em 1.8em; font-size: 1rem; }
.btn--secondary:hover { background: var(--blue-50); }
.btn--large { padding: 1em 2.5em; font-size: 1.05rem; }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* Responsive */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { order: -1; }
}
@media (max-width: 600px) {
  .page-hero { padding: var(--space-3xl) 0 var(--space-2xl); }
  .section { padding: var(--space-3xl) 0; }
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }