@import url("../lib/bootstrap/css/bootstrap.min.css");

:root {
    --dc-footer-text-color: #ffffff;
    --dc-primary-color: #041e42;
    --dc-primary-contrast-color: #ffffff;
    --dc-secondary-color: #1e3555;
    --dc-validation-error-color: #e50000;
}

/* General Styles */

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    margin-bottom: 60px;
}

h1 {
    font-family: Montserrat, sans-serif;
}

.validator-text {
    color: var(--dc-validation-error-color);
}

/* Modify BootStrap classes */

.btn:focus-visible {
    outline-color: var(--bs-dark);
    outline-width: 4px;     
    outline-style: solid;
}

.form-check-input[type=checkbox] {
    border-color: unset;
    min-height: 24px;
    min-width: 24px;
}

.form-control {
    border-color: unset;
}

.nav-item a:hover {
    text-decoration: underline;
}

.nav-link:focus-visible {
    outline-width: 3px;
    outline-style: solid;
    text-decoration: underline;
}

/* Header, Footer, and Nav */
#usability-links {
    font-size: .8em;
}

    #usability-links a {
        color: var(--bs-dark);
        min-height: 24px;
        padding: 0px;
        padding-top: .2em;
        vertical-align: middle;
    }

        #usability-links a:focus-visible {
            outline-color: var(--bs-dark);
        }

header > div:first-child {
    background-color: var(--dc-primary-color);
}

    header > div:first-child a {
        background-color: var(--dc-primary-color);
        color: var(--dc-primary-contrast-color);
        text-decoration: none;
    }

        header > div:first-child a:focus-visible {
            outline-color: var(--dc-primary-contrast-color);
            text-decoration: underline;
        }

        header > div:first-child a:hover {
            text-decoration: underline;
        }

header div span {
    color: var(--dc-primary-color);
}

header a:focus-visible {
    outline: 3px solid var(--dc-primary-color);
}

header .navbar-toggler {
    border: 0;
}

    header .navbar-toggler:focus,
    header .navbar-toggler:focus-visible {
        outline: 3px solid var(--dc-primary-color);
    }

header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 30, 66, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


#main-navigation .nav-link {
    color: var(--bs-dark);
}

footer {
    background-color: var(--dc-primary-color);
    color: var(--dc-primary-contrast-color);
}

    footer a:focus-visible {
        outline: 3px solid var(--dc-primary-contrast-color);
    }

    footer nav {
        background-color: inherit;
    }

    footer .nav-link {
        color: var(--dc-primary-contrast-color);
    }

        footer .nav-link:focus,
        footer .nav-link:hover {
            color: var(--dc-primary-contrast-color);
        }

#maintenance-message {
    font-size: .8em;
}

    #maintenance-message a {
        color: var(--dc-header-footer-link-foreground);
        text-decoration: underline;
    }