/* ==========================================================
   KOKO Enterprise
   Contact
   ========================================================== */

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

.contact-section{
    background:#ffffff;
}

/*--------------------------------------------------------------
# Contact Layout
--------------------------------------------------------------*/

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);
    gap:5rem;
    align-items:start;
}

/*--------------------------------------------------------------
# Contact Content
--------------------------------------------------------------*/

.contact-content{
    min-width:0;
}

.contact-header{
    max-width:720px;
    margin-bottom:2.5rem;
}

.contact-title{
    margin:0 0 1.5rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:clamp(2.4rem,5vw,4rem);
    font-weight:500;
    line-height:1.1;
    letter-spacing:-.025em;
}

.contact-intro{
    margin:0;

    color:var(--color-text-light);

    font-size:1.1rem;
    line-height:1.85;
}

.contact-page-content{
    margin-bottom:2.5rem;

    color:var(--color-text);
    line-height:1.85;
}

/*--------------------------------------------------------------
# Contact Form Wrapper
--------------------------------------------------------------*/

.contact-form-wrapper{
    max-width:760px;
}

/*--------------------------------------------------------------
# Form Notices
--------------------------------------------------------------*/

.form-notice{
    margin-bottom:1.5rem;
    padding:1rem 1.25rem;

    border:1px solid transparent;
    border-radius:var(--radius-sm);

    font-size:.95rem;
    line-height:1.6;
}

.form-notice-success{
    color:#176b3a;
    background:#edf8f1;
    border-color:#b9dfc8;
}

.form-notice-error{
    color:#8f1d16;
    background:#fff1f0;
    border-color:#f0bbb7;
}

/*--------------------------------------------------------------
# Honeypot
--------------------------------------------------------------*/

.form-honeypot{
    position:absolute !important;
    left:-9999px !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;
}

/*--------------------------------------------------------------
# Contact Details
--------------------------------------------------------------*/

.contact-details{
    position:sticky;
    top:110px;

    padding:2.5rem;

    background:#f8f8f8;

    border:1px solid var(--color-border);
    border-radius:16px;
}

.contact-details-title{
    margin:0 0 2rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:1.65rem;
    font-weight:600;
    line-height:1.25;
}

.contact-detail{
    padding:1.5rem 0;
    border-bottom:1px solid var(--color-border);
}

.contact-detail:first-of-type{
    padding-top:0;
}

.contact-detail:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.contact-detail h3{
    margin:0 0 .75rem;

    color:var(--color-primary);

    font-family:var(--font-body);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.contact-detail p{
    margin:0;

    color:var(--color-text-light);
    line-height:1.75;
}

.contact-detail a{
    color:var(--color-accent);

    font-weight:600;
    text-decoration:none;

    overflow-wrap:anywhere;
}

.contact-detail a:hover{
    color:var(--color-primary);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.contact-page a:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
    border-radius:4px;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .contact-layout{
        grid-template-columns:1fr;
        gap:3.5rem;
    }

    .contact-details{
        position:static;
        top:auto;
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .contact-header{
        margin-bottom:2rem;
    }

    .contact-title{
        font-size:clamp(2.25rem,9vw,3.25rem);
    }

    .contact-intro{
        font-size:1rem;
        line-height:1.8;
    }

    .contact-details{
        padding:2rem;
        border-radius:12px;
    }

}