/* ==========================================================
   SPARK DESIGN SYSTEM™
   BUTTONS
   v2.1
========================================================== */

/* ==========================================================
   BASE BUTTON
========================================================== */

.btn,
button,
input[type="submit"] {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 26px;

    border: none;
    border-radius: var(--radius-sm);

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;

    text-decoration: none !important;

    cursor: pointer;

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

}

/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.btn-primary,
button,
input[type="submit"] {

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

}

.btn-primary:hover,
button:hover,
input[type="submit"]:hover {

    background: var(--color-primary-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);

}

/* ==========================================================
   OUTLINE BUTTON
========================================================== */

.btn-outline {

    background: transparent;

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

    color: var(--color-primary);

}

.btn-outline:hover {

    background: var(--color-primary);

    color: #fff;

    transform: translateY(-2px);

}

/* ==========================================================
   ACTIVE STATE
========================================================== */

.btn:active,
button:active,
input[type="submit"]:active {

    transform: translateY(0);

}

/* ==========================================================
   FOCUS
========================================================== */

.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 3px;

}

/* ==========================================================
   WPForms
========================================================== */

.contact-form .wpforms-submit {

    width: 100%;
    margin-top: 10px;

}