/**
 * ----------------------------------------
 * GENERAL
 * ----------------------------------------
 */
*:focus-visible {
    outline: solid;
    outline-width: 3px;
    outline-offset: 0;
}

a:focus,
.featured .col-centered a:focus .title__heading,
.featured .col-centered-no-height a:focus .title__heading {
    background-color: var(--focus-bg);
    color: var(--focus-text) !important;
    outline: 3px solid var(--focus-text);
}

.featured .col-centered a:focus .icon,
.featured .col-centered-no-height a:focus .icon {
    background: var(--focus-bg);
    color: var(--focus-text);
}

/*#main a:not(:focus-visible) {
    color: var(--focus-text) !important;
}*/

::-moz-focus-inner {
    border: none;
    outline: none;
}

/**
 * ----------------------------------------
 * FORM
 * ----------------------------------------
 */
.form-control:focus-visible,
input[type=search]:focus-visible {
    outline: 3px solid var(--focus-bg);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px;
}

.input-group .form-control:not(:focus-visible) {
    outline-color: transparent;
    box-shadow: none;
}

.form-control.is-valid:focus-visible {
    outline-offset: 0;
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus-valid);
}

.form-control.is-invalid:focus-visible {
    outline-offset: 0;
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus-invalid)
}

/* Focused state */
.bpo-checkboxes__input:focus + .bpo-checkboxes__label:before {
    border-width: 4px;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px var(--focus-bg);
}

.bpo-checkboxes__input.is-valid:focus + .bpo-checkboxes__label:before {
    box-shadow: 0 0 0 1px var(--focus-bg), 0 0 0 2px var(--focus-valid);
}

.bpo-checkboxes__input.is-invalid:focus + .bpo-checkboxes__label:before {
    box-shadow: 0 0 0 1px var(--focus-bg), 0 0 0 2px var(--focus-invalid);
}


/**
 * ----------------------------------------
 * BUTTON
 * ----------------------------------------
 */
.btn:focus {
    border-color: var(--dark) !important;
    border-width: 2px;
    border: solid;
    box-shadow: inset 0 0 0 2px var(--focus-bg);
    outline: 3px solid transparent
}

a.btn:focus {
    color: var(--white) !important;
}

a.btn:not(focus-visible) {
    color: var(--dark) !important;
}

.btn:not(:focus-visible) {
    outline: none;
    box-shadow: 0;
}

#main a.btn-red:not(:focus-visible) {
    color: var(--white) !important;
}

    #main a.btn-red:not(:focus-visible):hover {
        color: var(--focus-red) !important;
    }

button:focus {
    outline: none;
}


/**
 * ----------------------------------------
 * NAVBAR
 * ----------------------------------------
 */
.navbar dropdown:focus-visible {
    outline: solid;
    outline-width: 3px;
    outline-color: transparent;
    color: var(--focus-text);
    background-color: var(--focus-bg);
    box-shadow: 0 -2px var(--focus-bg),0 4px var(--focus-text);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.nav-item .show a:focus-visible {
    outline: none;
    border-left: solid 4px;
    border-color: var(--dark);
    background-color: var(--focus-bg);
}

.navbar .navbar-nav .nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-dark .navbar-text a:focus-visible {
    outline: solid;
    outline-width: 3px;
    outline-color: transparent;
    background-color: var(--focus-bg);
    position: relative;
}

.navbar .navbar-nav .nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-dark .navbar-text a:focus-visible {
    color: var(--focus-text);
}

.nav-item.dropdown.show a,
.dropdown-menu.show a {
    color: var(--white) !important;
}

    .nav-item.dropdown.show a:not(:focus-visible):hover,
    .dropdown-menu.show a:not(:focus-visible):hover,
    .dropdown-menu.show a:focus-visible,
    .nav-item.dropdown.show a:focus-visible {
        color: var(--focus-text) !important;
    }

.navbar-dark button.navbar-toggler:focus-visible,
.navbar-header .navbar-toggler:focus-visible {
    outline: 3px solid transparent;
    border-color: var(--focus-bg) !important;
    border-width: 0.125rem;
    border: solid;
    border-radius: .25rem;
    box-shadow: 0 0 0 3px var(--dark), 0 0 0 0.313rem var(--focus-bg);
}

    .navbar-dark button.navbar-toggler:focus-visible .fa,
    .navbar-header .navbar-toggler:focus-visible .fa {
        color: var(--focus-bg);
    }