/* ==========================================================
   SONARIA CONTACT
   ========================================================== */


/* ==========================================================
   HERO
   ========================================================== */

.contact-hero {

    min-height:
        62vh;

    padding-top:
        calc(
            var(--navbar-height) +
            var(--space-4xl)
        );

    padding-bottom:
        var(--space-4xl);

    display:
        flex;

    align-items:
        center;

    background:
        var(--color-primary);

}


.contact-hero-content {

    max-width:
        820px;

}


.contact-hero-content h1 {

    max-width:
        800px;

    color:
        var(--color-background);

}


.contact-hero-content p {

    max-width:
        680px;

    margin-top:
        var(--space-lg);

    font-size:
        var(--fs-body-lg);

    color:
        var(--color-accent);

}



/* ==========================================================
   CONTACT FORM SECTION
   ========================================================== */

.contact-form-section {

    padding-block:
        var(--space-4xl);

    background:
        var(--color-surface);

}


.contact-layout {

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        var(--space-4xl);

    align-items:
        start;

    transition:
        grid-template-columns
        700ms cubic-bezier(.22,1,.36,1);

}



/* ==========================================================
   INTRO
   ========================================================== */

.contact-intro {

    max-width:
        520px;

    transition:
        opacity 450ms ease,
        transform 700ms cubic-bezier(.22,1,.36,1);

}


.contact-intro h2 {

    margin-top:
        var(--space-md);

}


.contact-intro > p {

    margin-top:
        var(--space-lg);

    color:
        var(--color-secondary);

    line-height:
        1.75;

}


.contact-note {

    display:
        flex;

    gap:
        var(--space-md);

    margin-top:
        var(--space-3xl);

    padding-top:
        var(--space-lg);

    border-top:
        1px solid
        var(--color-border);

}


.contact-note-number {

    color:
        var(--color-accent);

    font-weight:
        var(--fw-semibold);

}


.contact-note p {

    color:
        var(--color-secondary);

    font-size:
        var(--fs-small);

    line-height:
        1.7;

}



/* ==========================================================
   FORM WRAPPER
   ========================================================== */

.contact-form-wrapper {

    width:
        100%;

    max-width:
        680px;

    margin-left:
        auto;

    transition:
        opacity 450ms ease,
        transform 700ms cubic-bezier(.22,1,.36,1);

}



/* ==========================================================
   FORM
   ========================================================== */

.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-lg);

}


.form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-xs);

}


.form-field label,
.contact-preference legend {

    font-size:
        var(--fs-small);

    font-weight:
        var(--fw-medium);

}


.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

    padding:
        15px 16px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--color-background);

    color:
        var(--color-primary);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-body);

    outline:
        none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}


.form-field textarea {

    resize:
        vertical;

    min-height:
        140px;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        var(--color-secondary);

    opacity:
        .65;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color:
        var(--color-accent);

    box-shadow:
        0 0 0 3px
        rgba(176,122,69,.10);

}



/* ==========================================================
   FIELD VALIDATION
   ========================================================== */

.form-field input.is-valid,
.form-field textarea.is-valid {

    border-color:
        #5f8f70;

}


.form-field input.is-invalid,
.form-field textarea.is-invalid {

    border-color:
        #a65d5d;

}


.form-field input.is-valid:focus,
.form-field textarea.is-valid:focus {

    box-shadow:
        0 0 0 3px
        rgba(95,143,112,.10);

}


.form-field input.is-invalid:focus,
.form-field textarea.is-invalid:focus {

    box-shadow:
        0 0 0 3px
        rgba(166,93,93,.10);

}



/* ==========================================================
   CONTACT PREFERENCE
   ========================================================== */

.contact-preference {

    margin:
        var(--space-sm) 0 0;

    padding:
        0;

    border:
        0;

}


.contact-preference legend {

    margin-bottom:
        var(--space-md);

    padding:
        0;

}


.contact-method-options {

    display:
        flex;

    gap:
        var(--space-xl);

}


.contact-method {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    cursor:
        pointer;

    color:
        var(--color-primary);

    font-size:
        var(--fs-body);

}


.contact-method input {

    position:
        absolute;

    opacity:
        0;

    width:
        1px;

    height:
        1px;

}


.contact-radio {

    position:
        relative;

    width:
        18px;

    height:
        18px;

    flex-shrink:
        0;

    border:
        1.5px solid
        var(--color-secondary);

    border-radius:
        50%;

    transition:
        border-color var(--transition-fast);

}


.contact-method input:checked + .contact-radio {

    border-color:
        var(--color-accent);

}


.contact-method input:checked + .contact-radio::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--color-accent);

    transform:
        translate(-50%, -50%);

}


.contact-method:hover .contact-radio {

    border-color:
        var(--color-accent);

}



/* ==========================================================
   DYNAMIC CONTACT FIELDS
   ========================================================== */

.contact-method-field[hidden] {

    display:
        none;

}


.contact-method-field {

    margin-top:
        var(--space-lg);

    animation:
        contactFieldIn
        400ms
        cubic-bezier(.22,1,.36,1);

}


@keyframes contactFieldIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



/* ==========================================================
   SUBMIT
   ========================================================== */

.contact-submit {

    align-self:
        flex-start;

    margin-top:
        var(--space-sm);

}


.contact-submit:disabled {

    opacity:
        .65;

    cursor:
        default;

}



/* ==========================================================
   FORM STATUS
   ========================================================== */

.form-status {

    min-height:
        24px;

    margin-top:
        var(--space-xs);

    color:
        var(--color-secondary);

    font-size:
        var(--fs-small);

    opacity:
        0;

    transform:
        translateY(-4px);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);

}


.form-status.visible {

    opacity:
        1;

    transform:
        translateY(0);

}



/* ==========================================================
   SUCCESS STATE
   ========================================================== */

.contact-success {

    grid-column:
        1 / -1;

    width:
        100%;

    max-width:
        780px;

    margin:
        0 auto;

    padding:
        var(--space-4xl)
        var(--space-lg);

    text-align:
        left;

    opacity:
        0;

    transform:
        translateY(18px);

    pointer-events:
        none;

    display:
        none;

}



/* ==========================================================
   SUCCESS STATE — ACTIVE
   ========================================================== */

.contact-layout.is-success {

    grid-template-columns:
        1fr;

}


.contact-layout.is-success
.contact-intro {

    display:
        none;

}


.contact-layout.is-success
.contact-form-wrapper {

    display:
        none;

}


.contact-layout.is-success
.contact-success {

    display:
        block;

    pointer-events:
        auto;

    animation:
        contactSuccessReveal
        800ms
        cubic-bezier(.22,1,.36,1)
        forwards;

}



/* ==========================================================
   SUCCESS LABEL
   ========================================================== */

.contact-success .section-label {

    display:
        block;

    margin-bottom:
        var(--space-lg);

    color:
        var(--color-accent);

}



/* ==========================================================
   SUCCESS HEADING
   ========================================================== */

.contact-success h2 {

    max-width:
        780px;

    margin-inline:
        auto;

    margin-bottom:
        var(--space-lg);

}



/* ==========================================================
   SUCCESS LEAD
   ========================================================== */

.contact-success .success-lead {

    max-width:
        780px;

    margin-inline:
        auto;

    margin-top:
        var(--space-md);

    color:
        var(--color-primary);

    font-size:
        var(--fs-body-lg);

    line-height:
        1.7;

}


.contact-success .success-lead strong {

    font-weight:
        var(--fw-semibold);

}



/* ==========================================================
   SUCCESS BODY
   ========================================================== */

.contact-success p {

    max-width:
        780px;

    margin-inline:
        auto;

    margin-top:
        var(--space-lg);

    color:
        var(--color-secondary);

    line-height:
        1.75;

}



/* ==========================================================
   SUCCESS FINAL STATEMENT
   ========================================================== */

.contact-success .success-final {

    max-width:
        780px;
    
    margin-top:
        var(--space-2xl);

    color:
        var(--color-primary);

    font-weight:
        var(--fw-medium);

}



/* ==========================================================
   SUCCESS ANIMATION
   ========================================================== */

@keyframes contactSuccessReveal {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .contact-layout {

        transition:
            none;

    }


    .contact-success {

        animation:
            none !important;

        opacity:
            1;

        transform:
            none;

    }

}



/* ==========================================================
   CTA
   ========================================================== */

.contact-cta {

    padding-block:
        var(--space-4xl);

    background:
        var(--color-primary);

    color:
        var(--color-background);

}


.contact-cta-content {

    max-width:
        760px;

}


.contact-cta h2 {

    margin-top:
        var(--space-sm);

}


.contact-cta p {

    max-width:
        620px;

    margin-top:
        var(--space-md);

    color:
        rgba(245,243,239,.72);

}



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

@media (max-width: 992px) {

    .contact-layout {

        grid-template-columns:
            1fr;

        gap:
            var(--space-3xl);

    }


    .contact-intro {

        max-width:
            680px;

    }


    .contact-form-wrapper {

        max-width:
            680px;

        margin-left:
            0;

    }


    .contact-layout.is-success {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 768px) {

    .contact-hero {

        min-height:
            auto;

        padding-top:
            calc(
                var(--navbar-height) +
                var(--space-3xl)
            );

        padding-bottom:
            var(--space-3xl);

    }


    .contact-form-section {

        padding-block:
            var(--space-3xl);

    }


    .contact-method-options {

        gap:
            var(--space-lg);

    }


    .contact-submit {

        width:
            100%;

    }


    .contact-success {

        padding:
            var(--space-3xl)
            var(--space-md);

    }

}