/* ==========================================================
   KOKO Enterprise
   Job Application
   ========================================================== */

/*--------------------------------------------------------------
# Application Section
--------------------------------------------------------------*/

.job-application-section{
    background:#ffffff;
}

/*--------------------------------------------------------------
# Application Header
--------------------------------------------------------------*/

.job-application-header{
    max-width:760px;
    margin-bottom:3rem;
}

.job-application-header .section-title{
    margin-inline:0;
    text-align:left;
}

.job-application-header .section-description{
    margin-inline:0;
    text-align:left;
}

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

.job-application-form-wrapper{
    width:100%;
    max-width:820px;

    padding:3rem;

    background:#f8f8f8;

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

/*--------------------------------------------------------------
# File Input
--------------------------------------------------------------*/

.job-application-form input[type="file"]{
    padding:.85rem;

    background:#ffffff;
}

.job-application-form input[type="file"]::file-selector-button{
    margin-right:1rem;
    padding:.75rem 1rem;

    color:var(--color-primary);
    background:#f2f2f2;

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

    font:inherit;
    font-weight:600;

    cursor:pointer;

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease;
}

.job-application-form input[type="file"]::file-selector-button:hover{
    color:#ffffff;
    background:var(--color-primary);
    border-color:var(--color-primary);
}

/*--------------------------------------------------------------
# Submit Button
--------------------------------------------------------------*/

.job-application-form .form-actions{
    margin-top:2.5rem;
}

.job-application-form .form-actions .btn{
    min-width:220px;
}

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

.job-application-form a:focus-visible,
.job-application-form button:focus-visible,
.job-application-form input:focus-visible,
.job-application-form textarea:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:3px;
}

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

@media (max-width:768px){

    .job-application-form-wrapper{
        padding:2.25rem;
    }

}

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

@media (max-width:576px){

    .job-application-header{
        margin-bottom:2.5rem;
    }

    .job-application-form-wrapper{
        padding:1.5rem;

        border-radius:12px;
    }

    .job-application-form .form-actions .btn{
        width:100%;
        min-width:0;
    }

}