/* =========================
   Home Contact Section (Decoupled)
   ========================= */

#home-contact {
    background-color: #ea580c;
    /* Deep Orange */
    color: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Container */
#home-contact .home-contact__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

/* Grid Layout */
#home-contact .home-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* Left Column Text */
.home-contact__left {
    padding-right: 24px;
}

.home-contact__heading {
    font-size: 3rem;
    /* Large display size */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #ffffff;
}

.home-contact__sub {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    /* Slightly transparent white */
    max-width: 480px;
}

/* Right Column Card */
.home-contact__card {
    background: #ffffff;
    border-radius: 24px;
    /* Very rounded */
    padding: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    color: var(--navy);
}

.home-contact__card-header {
    margin-bottom: 32px;
}

.home-contact__card-header h3 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}

.home-contact__card-header h3 .highlight {
    color: #ea580c;
    /* Match background orange */
}

.home-contact__card-header p {
    font-size: 0.9375rem;
    color: #4b5563;
    /* Dark Gray */
    line-height: 1.5;
}

/* Form Styles */
.home-contact__form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.home-contact__group {
    margin-bottom: 20px;
}

.home-contact__form input,
.home-contact__form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--navy);
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

.home-contact__form input:focus,
.home-contact__form textarea:focus {
    outline: none;
    border-color: #ea580c;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

.home-contact__label-visible {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--navy);
}

/* Phone Dropdown Overlay (Home) */
#home-contact .country-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 110px;
    padding: 0 16px 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    /* Check context, matches input */
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

#home-contact .country-select-wrapper:focus-within {
    border-color: #ea580c;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

#home-contact .country-display {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1em;
    width: 100%;
}

#home-contact .country-select-wrapper .country-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Submit Button */
.btn-pill-gray {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    background-color: #e5e7eb;
    /* Light Gray */
    color: #374151;
    /* Dark Gray text */
    font-weight: 700;
    border-radius: 9999px;
    /* Pill shape */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    letter-spacing: 0.5px;
}

.btn-pill-gray:hover {
    background-color: #d1d5db;
    transform: translateY(-1px);
}

/* Success State */
.home-contact__success {
    text-align: center;
    padding: 40px 0;
}

.success-icon {
    width: 64px;
    height: 64px;
    background-color: #ecfdf5;
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.home-contact__success h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}


/* --- Focus Mode Animation --- */
/* Default States initialized for JS control (matches existing JS logic hooks if reused, 
   but specific to this section. Note: JS targets specific classes. 
   If original JS uses .git-left, we need to decide if we reuse JS or duplicate it.
   For now, we will KEEP the animation classes from original to allow existing JS to work 
   IF the JS targets .git-left/.git-card globally. 
   
   However, user asked to DECOUPLE. If I change class names, current JS won't animate it.
   I will add the NEW classes here, and if animations break, I will update JS later.
   User request: "Keep the EXACT same UI/style".
*/

.home-contact__left,
.home-contact__card {
    transition: transform 0.1s linear, opacity 0.1s linear;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {

    .home-contact__left,
    .home-contact__card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================
   Responsive Fixes
   ========================= */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
    #home-contact .home-contact__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    #home-contact .home-contact__left,
    #home-contact .home-contact__card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Left panel (orange area) */
    #home-contact .home-contact__left {
        text-align: center;
        padding: 28px 20px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .home-contact__sub {
        margin: 0 auto;
    }

    /* Form card */
    #home-contact .home-contact__card {
        padding: 32px 24px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    #home-contact .home-contact__form {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix Name + Phone row layout */
    #home-contact .home-contact__form .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #home-contact input,
    #home-contact textarea,
    #home-contact select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #home-contact textarea {
        min-height: 120px;
        resize: vertical;
    }

    #home-contact .btn-pill-gray {
        width: 100% !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    #home-contact {
        padding: 48px 0 !important;
    }

    #home-contact .home-contact__heading {
        font-size: 1.875rem !important;
        line-height: 1.2;
    }

    #home-contact .home-contact__grid {
        gap: 20px !important;
    }

    #home-contact .home-contact__card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    #home-contact .home-contact__form .form-row {
        gap: 14px !important;
    }

    #home-contact input,
    #home-contact textarea {
        padding: 14px 12px !important;
        font-size: 16px !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    #home-contact {
        padding: 40px 0 !important;
    }

    #home-contact .home-contact__left {
        padding: 24px 16px !important;
    }

    #home-contact .home-contact__heading {
        font-size: 1.625rem !important;
    }

    #home-contact .home-contact__sub {
        font-size: 0.9375rem !important;
    }

    #home-contact .home-contact__card {
        padding: 20px 16px !important;
        margin: 0 4px !important;
    }

    #home-contact .home-contact__card-header h3 {
        font-size: 1.375rem !important;
    }

    #home-contact .home-contact__card-header p {
        font-size: 0.8125rem !important;
    }

    #home-contact .home-contact__form .form-row {
        gap: 12px !important;
    }
}