/*=========================================================
    Sugamya Foundation
    accessibility.css
    Version : 1.0
==========================================================*/

/*---------------------------------------------------------
SKIP TO CONTENT
---------------------------------------------------------*/

.skip-link {
    position: absolute;
    left: -9999px;
    top: 10px;
    background: #005A9C;
    color: #ffffff;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 99999;
}

.skip-link:focus {
    left: 10px;
}


/*---------------------------------------------------------
KEYBOARD FOCUS
---------------------------------------------------------*/

*:focus {
    outline: 3px solid #ff9900;
    outline-offset: 2px;
}


/*---------------------------------------------------------
ACCESSIBILITY TOOLBAR
---------------------------------------------------------*/

.accessibility-toolbar {
    background: #f2f2f2;
    border-bottom: 1px solid #dddddd;
    padding: 6px 12px;
    text-align: right;
}

.accessibility-toolbar button {
    background: #ffffff;
    border: 1px solid #cccccc;
    padding: 6px 12px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.accessibility-toolbar button:hover {
    background: #005A9C;
    color: #ffffff;
}


/*=========================================================
HIGH CONTRAST MODE
==========================================================*/

body.high-contrast {
    background: #000000 !important;
    color: #FFFFFF !important;
}

body.high-contrast header,
body.high-contrast nav,
body.high-contrast section,
body.high-contrast article,
body.high-contrast aside,
body.high-contrast footer,
body.high-contrast div,
body.high-contrast main {
    background: #000000 !important;
    color: #FFFFFF !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast li,
body.high-contrast span {
    color: #FFFFFF !important;
}

body.high-contrast a {
    color: #00FFFF !important;
}

body.high-contrast button {
    background: #FFFF00 !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

body.high-contrast table {
    background: #000000 !important;
    color: #FFFFFF !important;
}

body.high-contrast td,
body.high-contrast th {
    border: 1px solid #FFFFFF !important;
}


/*=========================================================
DARK MODE
==========================================================*/

body.dark-mode {
    background: #1e1e1e !important;
    color: #eeeeee !important;
}

body.dark-mode header,
body.dark-mode nav,
body.dark-mode section,
body.dark-mode article,
body.dark-mode aside,
body.dark-mode footer,
body.dark-mode div,
body.dark-mode main {
    background: #1e1e1e !important;
    color: #eeeeee !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode a {
    color: #4da6ff !important;
}

body.dark-mode button {
    background: #333333;
    color: #ffffff;
    border: 1px solid #666666;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #333333;
    color: #ffffff;
    border: 1px solid #666666;
}

body.dark-mode table {
    color: #ffffff;
}

body.dark-mode td,
body.dark-mode th {
    border-color: #666666;
}


/*=========================================================
SMOOTH TRANSITION
==========================================================*/

body,
header,
nav,
section,
article,
aside,
footer,
div,
main,
button,
input,
textarea,
select,
table {
    transition: background-color .25s ease,
                color .25s ease,
                border-color .25s ease;
}