/* ============================================================
   contact.css
   Contact page styles.
   Depends on landing-base.css for CSS variables.
   Scoped under .contact-page.
   ============================================================ */

.contact-page {
    min-height: 100vh;
    background: var(--bg-light);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Hero ────────────────────────────────────────────────────── */
.contact-page .contact-hero {
    padding: calc(var(--section-padding) + 80px) 0 4rem;
    background: var(--gradient-overlay);
    text-align: center;
}
.contact-page .contact-hero-content { max-width: 800px; margin: 0 auto; }
.contact-page .contact-hero-badge {
    display: inline-block; padding: 0.6rem 1.5rem;
    background: white; border: 2px solid var(--primary-yellow);
    border-radius: 50px; font-weight: 700; font-size: 0.9rem;
    color: var(--primary-orange); margin-bottom: 1.5rem;
}
.contact-page .contact-hero-title {
    font-size: clamp(2.5rem,5vw,4rem);
    font-weight: 900; line-height: 1.2; margin-bottom: 1.5rem;
}
.contact-page .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-page .contact-hero-description {
    font-size: 1.25rem; color: var(--text-medium); line-height: 1.8;
}

/* ── Contact Section ─────────────────────────────────────────── */
.contact-page .contact { padding: var(--section-padding) 0; background: white; }
.contact-page .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem; align-items: start;
}

/* Info side */
.contact-page .contact-info h2    { font-size: 2rem; font-weight: 900; color: var(--text-dark); margin-bottom: 1rem; }
.contact-page .contact-info > p   { color: var(--text-medium); margin-bottom: 2.5rem; font-size: 1.05rem; }
.contact-page .info-cards         { display: grid; gap: 1.5rem; }
.contact-page .info-card          { background: var(--gradient-overlay); padding: 2rem; border-radius: 20px; border: 2px solid rgba(244,121,32,0.1); transition: var(--transition-smooth); }
.contact-page .info-card:hover    { border-color: var(--primary-orange); box-shadow: var(--shadow-md); }
.contact-page .info-icon          { font-size: 3rem; margin-bottom: 1rem; }
.contact-page .info-card h3       { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.75rem; }
.contact-page .info-card a        { display: block; color: var(--primary-orange); text-decoration: none; font-weight: 600; margin-bottom: 0.5rem; transition: var(--transition-smooth); }
.contact-page .info-card a:hover  { transform: translateX(-5px); }
.contact-page .info-card p        { color: var(--text-medium); line-height: 1.7; }

/* Form side */
.contact-page .contact-form .form-container {
    background: white; padding: 3rem; border-radius: 30px;
    box-shadow: var(--shadow-xl); border: 2px solid rgba(244,121,32,0.1);
}
.contact-page .contact-form .form-container h2 { font-size: 2rem; font-weight: 900; color: var(--text-dark); margin-bottom: 0.75rem; }
.contact-page .contact-form .form-container > p { color: var(--text-medium); margin-bottom: 2.5rem; font-size: 1.05rem; }
.contact-page .form-group         { margin-bottom: 2rem; }
.contact-page .form-row           { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-page label               { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.75rem; font-size: 1.05rem; }
.contact-page .label-icon         { font-size: 1.5rem; }
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="tel"],
.contact-page select,
.contact-page textarea {
    width: 100%; padding: 1.25rem 1.5rem;
    border: 2px solid var(--bg-secondary); border-radius: 15px;
    font-family: inherit; font-size: 1rem; color: var(--text-dark);
    transition: var(--transition-smooth); background: var(--bg-light);
}
.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus { outline: none; border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(244,121,32,0.1); }
.contact-page select  { cursor: pointer; }
.contact-page textarea { resize: vertical; min-height: 150px; }
.contact-page .form-error { display: block; color: #dc2626; font-size: 0.9rem; margin-top: 0.5rem; }
.contact-page .form-error-alert {
    padding: 1rem 1.25rem; margin-bottom: 1.5rem;
    background: #fef2f2; border: 2px solid #dc2626; border-radius: 15px;
    color: #dc2626; font-weight: 600; font-size: 0.95rem;
}
.contact-page .btn-submit {
    width: 100%; display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; padding: 1.5rem 2.5rem;
    background: var(--gradient-primary); color: white; border: none;
    border-radius: 50px; font-family: inherit; font-weight: 700; font-size: 1.15rem;
    cursor: pointer; transition: var(--transition-bounce); box-shadow: var(--shadow-lg);
}
.contact-page .btn-submit:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.contact-page .form-note { text-align: center; color: var(--text-medium); font-size: 0.95rem; margin-top: 1.5rem; font-weight: 600; }

/* Success state */
.contact-page .form-success { text-align: center; padding: 3rem; }
.contact-page .success-icon { font-size: 5rem; margin-bottom: 1.5rem; }
.contact-page .form-success h3 { font-size: 2rem; font-weight: 900; color: var(--text-dark); margin-bottom: 1rem; }
.contact-page .form-success p  { font-size: 1.15rem; color: var(--text-medium); line-height: 1.7; margin-bottom: 2rem; }
.contact-page .btn-back {
    display: inline-block; padding: 1rem 2rem;
    background: var(--gradient-primary); color: white; border: none;
    border-radius: 50px; font-family: inherit; font-weight: 700; font-size: 1rem;
    text-decoration: none; cursor: pointer; transition: var(--transition-smooth);
}
.contact-page .btn-back:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: white; }
.contact-page .btn-back:focus { outline: none; }

/* ── Quick Links ─────────────────────────────────────────────── */
.contact-page .quick-links { padding: var(--section-padding) 0; background: var(--gradient-overlay); text-align: center; }
.contact-page .quick-links h2 { font-size: 2.5rem; font-weight: 900; color: var(--text-dark); margin-bottom: 3rem; }
.contact-page .links-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2rem; }
.contact-page .link-card   { background: white; padding: 2.5rem; border-radius: 25px; border: 2px solid rgba(244,121,32,0.1); text-decoration: none; transition: var(--transition-smooth); box-shadow: var(--shadow-sm); }
.contact-page .link-card:hover { transform: translateY(-10px); border-color: var(--primary-orange); box-shadow: var(--shadow-lg); color: inherit; }
.contact-page .link-icon   { font-size: 3.5rem; margin-bottom: 1.25rem; }
.contact-page .link-card h3 { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.75rem; }
.contact-page .link-card p  { color: var(--text-medium); font-size: 1rem; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .contact-page .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
    .contact-page .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-page .contact-form .form-container { padding: 2rem; }
    .contact-page .links-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .contact-page .contact-hero-title { font-size: 2rem; }
    .contact-page .contact-form .form-container { padding: 1.5rem; }
    .contact-page .form-success { padding: 2rem 1.5rem; }
}