/*	ACESSIBILIDADE
*	jBility
* https://github.com/urielcaire/jbility
*/

:root {
    --primary: #377494;
    --secondary: #595959;
    --white: #ffffff;
    --dark: #000000;
    --success: #008000;
    --border-dark: 1px solid var(--dark);
    --body-bg: var(--white);
    --body-color: var(--dark);
    --box-shadow-dark: 0px 0px 0px 5px #00000080;
    --transition-base: all 250ms ease-in-out;
    --btn-bg: var(--primary);
    --btn-bg-hover: var(--secondary);
    --btn-color: var(--white);

    /* Button Accessibility Settings */
    --btn-settings-bg: var(--primary);
    --btn-settings-bg-hover: var(--secondary);
    --btn-settings-width-sm: 60px;
    --btn-settings-width: 70px;
    --btn-settings-border: 2px solid var(--btn-settings-bg);
    --btn-settings-border-radius: 20px;
}

/* Accessibility Settings/Buttons */
.accessibility-wrapper {
    background-color: transparent !important;
    cursor: pointer;
    display: flex;
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 999999999;
    gap: 10px;
}

@media screen and (min-width: 768px) {

    .accessibility-wrapper,
    .accessibility-wrapper.accessibility-on {
        left: 20px;
        bottom: 20px;
    }
}

#btn-accessibility-settings {
    position: relative;
}

#btn-accessibility-settings:after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    top: -5px;
    right: -5px;
    background-color: var(--success) !important;
    background-image: url(/wp-content/themes/Divi-child/accessibility/accessibility-icon-check.svg) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
    border-radius: 11px;
    transform: scale(0);
    transition: all 200ms ease-in-out;
}

.accessibility-on #btn-accessibility-settings:after {
    transform: scale(1);
}

.accessibility-icon {
    background-color: var(--btn-settings-bg) !important;
    border: var(--btn-settings-border) !important;
    float: left;
    width: var(--btn-settings-width-sm);
    height: var(--btn-settings-width-sm);
    border-radius: var(--btn-settings-border-radius);
    transition: var(--transition-base);
}

.accessibility-icon:hover {
    background-color: var(--btn-settings-bg-hover) !important;
}

.accessibility-icon:focus,
.accessibility-icon:focus-visible {
    box-shadow: var(--box-shadow-dark) !important;
}

@media screen and (min-width: 768px) {
    .accessibility-icon {
        width: var(--btn-settings-width) !important;
        height: var(--btn-settings-width) !important;
    }
}

#accessibility-settings {
    display: none;
}

/* Accessibility On: Page Settings */

.accessibility-on .teaser-overlay::after {
    background: linear-gradient(180deg, rgba(0, 17, 43, 1) 0%, rgba(0, 17, 43, 0.85) 20%, rgba(0, 17, 43, 0.85) 100%);
}

.accessibility-on .lightbackgroundfix h1, .accessibility-on .lightbackgroundfix h2, .accessibility-on .lightbackgroundfix h3, .accessibility-on .lightbackgroundfix h4, .accessibility-on .lightbackgroundfix p, .accessibility-on .lightbackgroundfix li  {
    color: #00112b !important;
}

.accessibility-on .bgswitch {
    background-color: #00112B !important;
}

.accessibility-on p, .accessibility-on li, .accessibility-on a {
    font-weight: 500 !important;
}

.accessibility-on a:focus, .accessibility-on a:hover, .accessibility-on input:focus, .accessibility-on select:focus, .accessibility-on textarea:focus {
    outline: 2px solid #b3110e;
}

.accessibility-on .btn-primary:focus, .accessibility-on .btn-primary:hover {
    background-color: white !important;
    color: #b3110e !important;
    outline: none !important;
}

.accessibility-on #top-menu li.submenu-open > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible;
}