/* CSS Document */

/*https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2*/
/* a subtle focus style for keyboard-input elements */
.text-input:focus {
    outline: 1px solid #aaa; /* Adjust to suit your tastes */
}

/* no outline for non-keyboard-inputs elements */
button:focus,
select:focus,
a:focus {
    outline: none;
}

body.user-is-tabbing *:focus {
    outline: 2px solid #7aacfe !important; /* for non-webkit browsers */
    outline: 5px auto -webkit-focus-ring-color !important;
}

/*skip to content button*/

a.skip-link {
    position: absolute;
    inset: 20px;
    transform: translateY(-150%);

    width: fit-content;
    height: fit-content;

    padding: 10px 40px;
    background: var(--blue-dk);
    border-radius: 5px;

    text-transform: uppercase;
    font-size: 20px;
    color: var(--white);
}
a.skip-link:focus {
    transform: translateY(0);
}

/*buttons*/

.btn {
    border-radius: 5px;
    padding: 10px 40px;
    transition: 0.5s ease all;
    text-transform: uppercase;
    border: none;
    font-weight: bold;
    font-size: 20px;
}

.btn-primary {
    background: #0060af !important;
    color: #fff;
    transition: 0.5s ease all;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: #00aeef !important;
    color: #fff;
}

.btn-yellow {
    background: #fcaf17;
    color: #fff;
    transition: 0.5s ease all;
    border: 3px solid #fcaf17;
}

.btn-yellow:hover,
.btn-yellow:active,
.btn-yellow:focus {
    background: #fff;
    color: #fcaf17;
}

.btn-green {
    background: #01a490;
    color: #fff !important;
    transition: 0.5s ease all;
    border: 3px solid #01a490;
}

.btn-green:hover,
.btn-green:active,
.btn-green:focus {
    background: #fff;
    color: #01a490 !important;
}

/*new button colors*/

/*white background*/
.btn-white-blue {
    background: var(--white);
    border: 3px solid var(--white);
    color: var(--blue-dk) !important;
}
.btn-white-blue:hover,
.btn-white-blue:active,
.btn-white-blue:focus {
    background: var(--blue-dk);
    color: var(--white) !important;
}

/*blues*/
.btn-blue-md {
    background: var(--blue-md);
    border: 3px solid var(--blue-md);
    color: var(--white) !important;
}
.btn-blue-md:hover,
.btn-blue-md:active,
.btn-blue-md:focus {
    background: var(--white);
    color: var(--blue-md) !important;
}

.btn-blue-dk {
    background: var(--blue-dk);
    border: 3px solid var(--blue-dk);
    color: var(--white) !important;
}
.btn-blue-dk:hover,
.btn-blue-dk:active,
.btn-blue-dk:focus {
    background: var(--white);
    color: var(--blue-dk) !important;
}

/*greens*/
.btn-green-md {
    background: var(--green-md);
    border: 3px solid var(--green-md);
    color: var(--white) !important;
}
.btn-green-md:hover,
.btn-green-md:active,
.btn-green-md:focus {
    background: var(--white);
    color: var(--green-md) !important;
}

.btn-green-dk {
    background: var(--green-dk);
    border: 3px solid var(--green-dk);
    color: var(--white) !important;
}
.btn-green-dk:hover,
.btn-green-dk:active,
.btn-green-dk:focus {
    background: var(--white);
    color: var(--green-dk) !important;
}

/*purples*/
.btn-purple-md {
    background: var(--purple-md);
    border: 3px solid var(--purple-md);
    color: var(--white) !important;
}
.btn-purple-md:hover,
.btn-purple-md:active,
.btn-purple-md:focus {
    background: var(--white);
    color: var(--purple-md) !important;
}

.btn-purple-dk {
    background: var(--purple-dk);
    border: 3px solid var(--purple-dk);
    color: var(--white) !important;
}
.btn-purple-dk:hover,
.btn-purple-dk:active,
.btn-purple-dk:focus {
    background: var(--white);
    color: var(--purple-dk) !important;
}

@media (max-width: 768px) {
    .btn {
        font-size: 15px;
        padding: 10px 30px;
    }
    .btn.btn-blue-md {
        background: var(--blue-dk);
        border: 3px solid var(--blue-dk);
    }
    .btn.btn-green,
    .btn.btn-green-md {
        background: var(--green-dk);
        border: 3px solid var(--green-dk);
    }

    .btn.btn-blue-md:hover,
    .btn.btn-blue-md:active,
    .btn.btn-blue-md:focus {
        background: #fff;
    }
    .btn.btn-green:hover,
    .btn.btn-green:active,
    .btn.btn-green:focus,
    .btn.btn-green-md:hover,
    .btn.btn-green-md:active,
    .btn.btn-green-md:focus {
        background: #fff;
    }
    .program-header-content .program-info.program-info--background-light-green .btn:hover,
    .program-header-content .program-info.program-info--background-light-green .btn:active,
    .program-header-content .program-info.program-info--background-light-green .btn:focus {
        background: #fff;
    }
    .program-header-content .program-info.program-info--background-light-green .btn {
        background: var(--green-dk);
        border: 3px solid var(--green-dk);
    }
    .program-header-content .program-info.program-info--background-medium-green .btn:hover,
    .program-header-content .program-info.program-info--background-medium-green .btn:active,
    .program-header-content .program-info.program-info--background-medium-green .btn:focus {
        background: #fff;
    }
    .program-header-content .program-info.program-info--background-medium-green .btn {
        background: var(--green-dk);
        border: 3px solid var(--green-dk);
    }
    .program-header-content .program-info.program-info--background-light-blue .btn:hover,
    .program-header-content .program-info.program-info--background-light-blue .btn:active,
    .program-header-content .program-info.program-info--background-light-blue .btn:focus {
        background: #fff;
    }
    .program-header-content .program-info.program-info--background-light-blue .btn {
        background: var(--blue-dk);
        border: 3px solid var(--blue-dk);
    }
    .program-header-content .program-info.program-info--background-medium-blue .btn:hover,
    .program-header-content .program-info.program-info--background-medium-blue .btn:active,
    .program-header-content .program-info.program-info--background-medium-blue .btn:focus {
        background: #fff;
    }
    .program-header-content .program-info.program-info--background-medium-blue .btn {
        background: var(--blue-dk);
        border: 3px solid var(--blue-dk);
    }
    .related-images a.color-3 .image-page-link .page-link-title {
        background: var(--blue-dk);
    }
    .related-images a.color-4 .image-page-link .page-link-title {
        background: var(--green-dk);
    }
    .related-images a.color-9 .image-page-link .page-link-title {
        background: var(--blue-dk);
    }
    .related-images a.color-10 .image-page-link .page-link-title {
        background: var(--green-dk);
    }
    .location-content .entry-title {
        color: var(--blue-dk);
    }
}