/* ============================================================
   CONTACT PAGE - ManjalKunkumam
   Uses root variables from app.css
   ============================================================ */

/* ---------- Page Heading ---------- */
.page-heading{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:3rem 1rem;
    text-align:center;
    color:var(--white);
}

.page-heading .eyebrow{
    display:inline-block;
    font-size:var(--font-size-sm);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--secondary);
    margin-bottom:0.5rem;
}

.page-heading h1{
    font-family:var(--font-primary);
    font-size:var(--font-size-2xl);
    font-weight:var(--heading-weight);
    color:var(--white);
    margin-bottom:0.4rem;
}

.page-heading p{
    font-size:var(--font-size-base);
    color:rgba(255,255,255,0.85);
}

/* ---------- Section ---------- */
.section{
    padding:3rem 0;
}

/* ---------- Contact Grid (2 columns) ---------- */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:start;
}

/* ---------- Left: Contact Info ---------- */
.contact-info{
    padding:1rem 0;
}

.contact-info h2{
    font-family:var(--font-primary);
    font-size:var(--font-size-xl);
    font-weight:var(--heading-weight);
    color:var(--dark);
    margin-bottom:0.5rem;
}

.contact-info > p{
    font-size:var(--font-size-sm);
    color:var(--text-muted);
    line-height:1.7;
    margin-bottom:2rem;
    max-width:400px;
}

/* ---------- Contact Items ---------- */
.contact-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:1.8rem;
}

.contact-item .icon-circle{
    width:46px;
    height:46px;
    min-width:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:var(--white);
    border-radius:50%;
    font-size:1rem;
    box-shadow:0 4px 12px rgba(192,57,43,0.3);
}

.contact-item .info-text strong{
    display:block;
    font-size:var(--font-size-base);
    font-weight:700;
    color:var(--dark);
    margin-bottom:0.15rem;
    font-family:var(--font-primary);
}

.contact-item .info-text p{
    font-size:var(--font-size-sm);
    color:var(--text-muted);
    line-height:1.6;
    margin:0;
}

.contact-item .info-text a{
    color:var(--primary);
    text-decoration:none;
    font-weight:500;
    transition:color .3s;
}

.contact-item .info-text a:hover{
    color:var(--primary-dark);
    text-decoration:underline;
}

/* ---------- Social Links ---------- */
.social-links{
    display:flex;
    gap:12px;
    margin-top:0.5rem;
}

.social-links a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:var(--white);
    border-radius:50%;
    text-decoration:none;
    font-size:0.9rem;
    transition:transform .3s, box-shadow .3s;
    box-shadow:0 4px 12px rgba(192,57,43,0.25);
}

.social-links a:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(192,57,43,0.4);
    color:var(--white);
}

/* ---------- Right: Contact Form ---------- */
.contact-form-section{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:2rem 2.2rem;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
    border:1px solid var(--border-light);
}

.contact-form-section h2{
    font-family:var(--font-primary);
    font-size:var(--font-size-xl);
    font-weight:var(--heading-weight);
    color:var(--primary);
    margin-bottom:1.5rem;
    text-align:center;
}

.contact-form-section .form-group{
    margin-bottom:1rem;
}

.contact-form-section label{
    display:block;
    font-size:var(--font-size-sm);
    font-weight:600;
    color:var(--dark);
    margin-bottom:0.3rem;
}

.contact-form-section label i{
    color:var(--primary);
    margin-right:4px;
    font-size:0.75rem;
}

.contact-form-section input,
.contact-form-section textarea,
.contact-form-section select{
    width:100%;
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    padding:0.75rem 1rem;
    font-size:var(--font-size-base);
    font-family:var(--font-primary);
    color:var(--text);
    background:var(--bg-light);
    outline:none;
    transition:border-color .3s, box-shadow .3s;
}

.contact-form-section input:focus,
.contact-form-section textarea:focus,
.contact-form-section select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(192,57,43,0.1);
    background:var(--white);
}

.contact-form-section input::placeholder,
.contact-form-section textarea::placeholder{
    color:var(--gray-light);
}

.contact-form-section textarea{
    resize:vertical;
    min-height:110px;
}

.contact-form-section select{
    cursor:pointer;
    appearance:auto;
}

.contact-form-section .button{
    width:100%;
    border:none;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:var(--white);
    font-weight:600;
    font-size:var(--font-size-base);
    padding:0.9rem;
    border-radius:var(--radius);
    cursor:pointer;
    font-family:var(--font-primary);
    transition:transform .2s, box-shadow .3s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:0.8rem;
    box-shadow:0 4px 15px rgba(192,57,43,0.3);
}

.contact-form-section .button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(192,57,43,0.4);
}

/* ---------- Section Heading ---------- */
.section-heading{
    text-align:center;
    margin-bottom:2rem;
}

.section-heading h2{
    font-family:var(--font-primary);
    font-size:var(--font-size-xl);
    font-weight:var(--heading-weight);
    color:var(--primary);
}

/* ---------- Map Container ---------- */
.map-container{
    border-radius:var(--radius-lg);
    overflow:hidden;
    height:400px;
    background:linear-gradient(135deg, #fdf6ec 0%, #f5e6d0 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

.map-container i{
    font-size:3.5rem;
    color:var(--primary);
    margin-bottom:1rem;
    display:block;
}

.map-container p{
    font-size:var(--font-size-sm);
    color:var(--text-muted);
    font-weight:500;
}

/* ---------- Alert Messages ---------- */
.contact-alert{
    padding:0.75rem 1rem;
    border-radius:var(--radius);
    margin-bottom:1rem;
    font-size:var(--font-size-sm);
    display:flex;
    align-items:center;
    gap:8px;
}

.contact-alert.alert-success{
    background:#eafaf1;
    color:#27ae60;
    border:1px solid #d4efdf;
}

.contact-alert.alert-danger{
    background:#fef5f4;
    color:var(--primary);
    border:1px solid #f8d7d5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media(max-width:992px){
    .contact-grid{
        gap:2rem;
    }
    .contact-info > p{
        max-width:100%;
    }
}

/* Mobile Landscape */
@media(max-width:768px){
    .contact-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .page-heading{
        padding:2.5rem 1rem;
    }
    .page-heading h1{
        font-size:var(--font-size-xl);
    }
    .contact-form-section{
        padding:1.5rem;
    }
    .section{
        padding:2.5rem 0;
    }
    .map-container{
        height:300px;
    }
}

/* Mobile Portrait */
@media(max-width:480px){
    .page-heading{
        padding:2rem 1rem;
    }
    .page-heading h1{
        font-size:var(--font-size-lg);
    }
    .page-heading .eyebrow{
        font-size:var(--font-size-xs);
        letter-spacing:1px;
    }
    .contact-info h2{
        font-size:var(--font-size-lg);
    }
    .contact-item .icon-circle{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:0.85rem;
    }
    .contact-item .info-text strong{
        font-size:var(--font-size-sm);
    }
    .contact-item .info-text p{
        font-size:var(--font-size-xs);
    }
    .social-links a{
        width:38px;
        height:38px;
        font-size:0.8rem;
    }
    .contact-form-section{
        padding:1.2rem;
        border-radius:var(--radius);
    }
    .contact-form-section h2{
        font-size:var(--font-size-lg);
    }
    .section-heading h2{
        font-size:var(--font-size-lg);
    }
    .map-container{
        height:250px;
    }
    .map-container i{
        font-size:2.5rem;
    }
}