/* =========================================================
   FASCS — ACESSIBILIDADE
   Fundação das Artes de São Caetano do Sul
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    --fas-access-bg: #101828;
    --fas-access-text: #ffffff;
    --fas-access-border: rgba(255,255,255,.18);

    --fas-access-hover: rgba(255,255,255,.12);

}


/* =========================================================
   SCREEN READER ONLY
   ========================================================= */

.sr-only {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


/* =========================================================
   SKIP LINK
   ========================================================= */

.fas-access-skip {

    position: fixed;

    top: -100px;
    left: 15px;

    z-index: 999999;

    padding: 12px 20px;

    background: #000;
    color: #fff;

    border: 2px solid #fff;

    border-radius: 8px;

    font-weight: 700;

    text-decoration: none;

    transition: top .2s ease;

}


.fas-access-skip:focus {

    top: 15px;

}


/* =========================================================
   BARRA
   ========================================================= */

.fas-accessibility {

    width: 100%;

    min-height: 42px;

    background: var(--fas-access-bg);

    color: var(--fas-access-text);

    border-bottom: 1px solid var(--fas-access-border);

    position: relative;

    z-index: 99990;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


.fas-accessibility-inner {

    width: min(1400px, 94%);

    margin: 0 auto;

    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 16px;

}


/* =========================================================
   LABEL
   ========================================================= */

.fas-accessibility-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}


/* =========================================================
   AÇÕES
   ========================================================= */

.fas-accessibility-actions {

    display: flex;

    align-items: center;

    gap: 5px;

    flex-wrap: wrap;

}


.fas-access-btn {

    width: 34px;
    height: 30px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--fas-access-border);

    border-radius: 6px;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;

}


.fas-access-btn:hover {

    background: var(--fas-access-hover);

    border-color: rgba(255,255,255,.45);

}


.fas-access-btn:focus-visible {

    outline: 3px solid #ffdd00;

    outline-offset: 2px;

}


.fas-access-btn[aria-pressed="true"] {

    background: #fff;

    color: #000;

    border-color: #fff;

}


.fas-access-reset {

    margin-left: 5px;

}


/* =========================================================
   ATALHOS
   ========================================================= */

.fas-access-shortcuts {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 11px;

    opacity: .85;

}


.fas-access-shortcuts span {

    white-space: nowrap;

}


.fas-access-shortcuts kbd {

    display: inline-block;

    padding: 2px 5px;

    margin: 0 2px;

    background: rgba(255,255,255,.1);

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 3px;

    font-size: 10px;

    font-family: monospace;

}


/* =========================================================
   FONTES
   ========================================================= */

html.fas-font-large {

    font-size: 112.5%;

}


html.fas-font-xlarge {

    font-size: 125%;

}


/* =========================================================
   ALTO CONTRASTE
   ========================================================= */

html.fas-high-contrast {

    background: #000 !important;

}


html.fas-high-contrast body {

    background: #000 !important;

    color: #fff !important;

}


html.fas-high-contrast
body * {

    background-color: #000 !important;

    color: #fff !important;

    border-color: #fff !important;

    box-shadow: none !important;

    text-shadow: none !important;

}


html.fas-high-contrast
a {

    color: #ffff00 !important;

    text-decoration: underline !important;

}


html.fas-high-contrast
button,
html.fas-high-contrast
input,
html.fas-high-contrast
select,
html.fas-high-contrast
textarea {

    background: #000 !important;

    color: #fff !important;

    border: 2px solid #fff !important;

}


html.fas-high-contrast
img {

    background: #000 !important;

}


/* =========================================================
   ESCALA DE CINZA
   ========================================================= */

html.fas-grayscale {

    filter: grayscale(100%);

}


/* =========================================================
   LINKS DESTACADOS
   ========================================================= */

html.fas-highlight-links a {

    outline: 2px solid #ffcc00 !important;

    outline-offset: 2px !important;

    background-color: #fff200 !important;

    color: #000 !important;

    text-decoration: underline !important;

}


/* =========================================================
   ESPAÇAMENTO DE TEXTO
   ========================================================= */

html.fas-text-spacing
body {

    letter-spacing: .08em;

}


html.fas-text-spacing
p,
html.fas-text-spacing
li,
html.fas-text-spacing
a,
html.fas-text-spacing
button {

    word-spacing: .16em;

}


/* =========================================================
   ESPAÇAMENTO ENTRE LINHAS
   ========================================================= */

html.fas-line-spacing
body {

    line-height: 1.8 !important;

}


html.fas-line-spacing
p,
html.fas-line-spacing
li {

    line-height: 2 !important;

}


/* =========================================================
   CURSOR GRANDE
   ========================================================= */

html.fas-big-cursor,
html.fas-big-cursor * {

    cursor: url(
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M4 2L34 22L22 24L28 37L21 40L15 27L6 34Z' fill='white' stroke='black' stroke-width='3'/%3E%3C/svg%3E"
    ) 2 2,
    auto !important;

}


/* =========================================================
   REDUZIR ANIMAÇÕES
   ========================================================= */

html.fas-reduce-motion *,
html.fas-reduce-motion *::before,
html.fas-reduce-motion *::after {

    animation-duration: .001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .001ms !important;

    scroll-behavior: auto !important;

}


/* =========================================================
   FOCO GLOBAL
   ========================================================= */

:focus-visible {

    outline: 3px solid #005fcc;

    outline-offset: 3px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .fas-accessibility-inner {

        width: 94%;

        padding: 8px 0;

        flex-wrap: wrap;

    }


    .fas-accessibility-actions {

        width: 100%;

        order: 3;

    }


    .fas-access-shortcuts {

        margin-left: auto;

        font-size: 10px;

    }

}


@media (max-width: 600px) {

    .fas-accessibility-label {

        width: 100%;

    }


    .fas-access-shortcuts {

        display: none;

    }


    .fas-access-btn {

        width: 36px;
        height: 34px;

    }

}


/* =========================================================
   PREFERÊNCIA DO SISTEMA
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html * {

        scroll-behavior: auto !important;

        animation-duration: .001ms !important;

        transition-duration: .001ms !important;

    }

}