/* ==================================================================================
    Accessability Styles
-----------------------------------------------------------------------------------*/


/*==================================================================================
    Outline for focused elements 
-----------------------------------------------------------------------------------*/
:is(a, button, input, textarea, summary) {
    --outline-size: max(2px, 0.08em);
    --outline-style: solid;
    --outline-color: currentColor;
    --outline-offset: 2px;
}

:is(a, button, input, textarea, summary):focus-visible {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
}
/* Fallback for browsers without :focus-visible support (old safari) */
@supports not selector(:focus-visible) {
    :is(a, button, input, textarea, summary):focus {
        outline: var(--outline-size) var(--outline-style) var(--outline-color);
        outline-offset: var(--outline-offset, var(--outline-size));
    }
}

/*-----------------------------------------------------------------------------------
Existing schoolzine accesiblity style
====================================================================================
    DIY Newsletters
-----------------------------------------------------------------------------------*/
#access {background: #000; color: #fff; float: left; width: 100%; margin: 0; padding: 0; clear: both; font-size: 80%; text-align: left; position: fixed; z-index: 1000; font-size: 14px;}

#access ul {list-style-type: none; margin: 0; padding: 0;}
#access li {float: left;}
#access a {position: absolute;}
#access a:focus, #access.visible a{position:static; }
#access a {float: left; display: block; color: #fff; padding: .2em .5em; margin: .2em .5em .3em; position: absolute; left: -9999px;}

.accessibilityActive #access a:focus, #access a:focus {
    outline-color:yellow !important;
}