/* =======================================
   Global Overrides and Resets
   ======================================= */
html.theme-dark *:focus-visible {
    box-shadow: 0 0 0 var(--4px) var(--TA-focusvisible-darktheme);
}
html.theme-dark {
    background: rgb(var(--TA-background-gray-darkest));
    color: rgb(var(--TA-textcolor-gray-light));
}
html.theme-dark a,
html.theme-dark a:active,
html.theme-dark a:visited,
html.theme-dark a:focus,
html.theme-dark a:focus-visible {
    color: rgb(var(--TA-linkcolor-light));
}
html.theme-dark a:hover {
    color: rgb(var(--TA-linkcolor-light));
}
html.theme-dark a>svg {
    fill: rgb(var(--TA-linkcolor-light));
}
html.theme-dark a:hover>svg {
    fill: rgb(var(--TA-linkcolor-light));
}

html.theme-dark .border,
html.theme-dark .border-start,
html.theme-dark .border-end,
html.theme-dark .border-bottom,
html.theme-dark .border-top {
    border-color: rgb(var(--TA-border-gray-medium)) !important; /* boostrap override */
}

html.theme-dark button.btn:hover,
html.theme-dark button.btn:focus-visible,
html.theme-dark button:hover,
html.theme-dark button:focus-visible {
    background: rgb(var(--TA-background-gray-darker));
}
html.theme-dark button.btn:focus-visible,
html.theme-dark button:focus-visible {
    box-shadow: 0 0 0 var(--4px) var(--TA-focusvisible-darktheme);
}
html.theme-dark input,
html.theme-dark input:focus-visible,
html.theme-dark input::placeholder,
html.theme-dark select,
html.theme-dark checkbox,
html.theme-dark textarea {
    background: rgb(var(--TA-background-gray-medium));
    color: rgb(var(--TA-textcolor-gray-darkest));
}
html.theme-dark .form-control {
    border-color: rgb(var(--TA-border-gray-medium));
}

/* =======================================
   Component: Header
   ======================================= */
html.theme-dark header#site-header button.btn {
    color: rgb(var(--TA-linkcolor-light));
}

/* =======================================
   Component: Header Top
   ======================================= */

html.theme-dark header#site-header .header-top {
    background: rgb(var(--TA-background-gray-darkest));
}

html.theme-dark header#site-header .header-top a.navbar-brand img#logo-img {
    filter: contrast(0) brightness(0) invert(0.9);
}

html.theme-dark header#site-header .header-top .navbar .navbar-toggler:focus-visible {
    box-shadow: inset 0px 0px 0px 3px var(--TA-focusvisible-darktheme);
}

html.theme-dark header#site-header .header-top .navbar-toggler .custom-toggler .line {
    background-color: rgb(var(--TA-linkcolor-light));
}

/* =======================================
   Component: Header Bottom
   ======================================= */

html.theme-dark header#site-header .header-bottom {
    background: rgb(var(--TA-background-gray-darker));
}
/*
html.theme-dark header#site-header .header-bottom .theme-toggler {
    
}*/
html.theme-dark header#site-header .header-bottom ul.navbar-nav a,
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:active,
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:visited,
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:focus,
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:focus-visible {
    color: rgb(var(--TA-linkcolor-light));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:focus-visible {
    box-shadow: inset 0 0 0 var(--4px) var(--TA-focusvisible-darktheme);
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown a {
    border-right: solid 1px rgb(var(--TA-border-gray-dark));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav a:hover {
    color: rgb(var(--TA-linkcolor-darkest));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav .submenu-toggler i.bi {
    color: rgb(var(--TA-linkcolor-light));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav .submenu-toggler:hover {
    background-color: rgb(var(--TA-background-gray-hover-dark));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav .submenu-toggler:focus-visible {
    box-shadow: inset 0 0 0 var(--4px) var(--TA-focusvisible-darktheme);
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu {
    background: rgb(var(--TA-background-gray-darker));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu li a:hover {
    background: rgb(var(--TA-background-gray-medium));
}
html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item {
    border-color: rgb(var(--TA-border-gray-dark));
}

html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item {
    border-color: rgb(var(--TA-border-gray-medium));
    background: rgb(var(--TA-background-gray-darkest));
}

/* =======================================
   Media Query: Desktop only
   ======================================= */

@media (min-width: 62rem) {
    html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item a:hover {
        color: rgb(var(--TA-linkcolor-lightest));
    }
    html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu {
        border-color: rgb(var(--TA-border-gray-medium));
    }
    html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu>li.nav-item a:focus-visible {
        box-shadow: inset 0 0 0 var(--4px) var(--TA-focusvisible-darktheme);
    }
    html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown a {
        border-right: none;
    }
    html.theme-dark header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown>ul.dropdown-menu>li.nav-item a:hover {
        color: rgb(var(--TA-linkcolor-darkest));
    }
    html.theme-dark header#site-header .header-bottom ul.navbar-nav li.nav-item>ul.dropdown-menu.show>li.nav-item.nav-item-last a,
    html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown:hover ul.dropdown-menu>li.nav-item.nav-item-last a,
    html.theme-dark header#site-header .header-bottom ul.navbar-nav li.dropdown:has(:focus-visible) ul.dropdown-menu>li.nav-item.nav-item-last a {
        border-bottom-color: rgb(var(--TA-border-gray-medium));
    }
}