/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
}

body {
line-height: 1.5;
font-family: Arial, sans-serif;
}

ul, ol {
list-style: none;
}

img {
max-width: 100%;
height: auto;
display: block;
}

a {
text-decoration: none;
color: inherit;
}

button, input {
border: none;
background: none;
font: inherit;
}

table {
border-collapse: collapse;
width: 100%;
}

blockquote, q {
quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
content: '';
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Black.ttf') format('truetype');
font-weight: 900;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-ExtraBold.ttf') format('truetype');
font-weight: 800;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-ExtraLight.ttf') format('truetype');
font-weight: 200;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Medium.ttf') format('truetype');
font-weight: 500;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Regular.ttf') format('truetype');
font-weight: 400;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-SemiBold.ttf') format('truetype');
font-weight: 600;
}

@font-face {
font-family: 'Outfit';
src: url('../fonts/Outfit/Outfit-Thin.ttf') format('truetype');
font-weight: 100;
}

body {
font-family: 'Outfit', sans-serif;
}

/* ACESSIBILIDADE */

.a11y {
position: fixed;
width: 48px;
height: 48px;
cursor: pointer;
border: none;
border-radius: 50%;
transition: transform 0.2s ease; /* Transição suave */
z-index: 999;
}

#a11y_modal {
display: none;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 400px;
max-height: 100vh;
z-index: 9999999999;

width: auto;

box-shadow: 10px 0 20px rgba(0, 0, 0, 0.2); /* Sombra à direita */
}

.a11y_header {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 auto;
    background-color: #00508C;
}

.plugin_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.a11y_footer {
    background-color: rgb(231, 231, 231);
    padding: 1.5rem;
    flex: 0 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.a11y_footer svg {
    width: 20px;
}

.a11y_footer a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.a11y_header h1 {
    color: white;
    font-size: 2rem;
    margin-bottom: 0;
}

.a11y_header .reset {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.a11y_header .reset:hover {
    cursor: pointer;
}

.a11y_close {
width: 48px;
border: none;
background-color: transparent;
cursor: pointer;
transition: transform 0.2s ease; /* Transição suave */
}

.a11y_main {

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: -15px;


    background-color: rgb(238, 238, 238);
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.a11y_audio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.a11y_audio h3 {
    font-weight: 500;
}

.a11y_audio_btns {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
}

.a11y_audio_lang_container {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.a11y_audio_lang {
    background-color: inherit;
    border: none;
    cursor: pointer;
}

.a11y_audio_lang.active {
    font-weight: 700;
}

.a11y_audio_lang:hover {
    text-decoration: underline;
}

.a11y_rest {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
}


.a11y_rest button, #play_audio {
    cursor: pointer;

    border-radius: 10px;
    background-color: white;
    padding: 15px 20px;
    border: 2px solid white;

    color: black;
    font-weight: 700;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.a11y_rest button:hover, #play_audio:hover {
    border: 2px solid #00508C;
}

.a11y_main button svg {
    width: 30px;
    height: 30px;
}

.A11y_contrast_1 {
filter: invert(100%) !important;
-webkit-filter: invert(100%) !important;
}

/* Estado 2: Todas as divs com fundo preto, fontes brancas e botões com fundo preto e fontes amarelas */
.A11y_contrast_2 div, .A11y_contrast_2 p, .A11y_contrast_2 span, .A11y_contrast_2 h1, .A11y_contrast_2 h2, .A11y_contrast_2 h3, .A11y_contrast_2 h4, .A11y_contrast_2 h5, .A11y_contrast_2 h6, .A11y_contrast_2 i, .A11y_contrast_2 b, .A11y_contrast_2 small {
background-color: #000 !important;
color: #fff !important;
}

.A11y_contrast_2 button {
background-color: #000 !important;
color: #FFD700 !important; /* Cor amarela */
}

/* Estado 3: Fundo branco com fontes pretas */
.A11y_contrast_3 div, .A11y_contrast_3 p, .A11y_contrast_3 span, .A11y_contrast_3 h1, .A11y_contrast_3 h2, .A11y_contrast_3 h3, .A11y_contrast_3 h4, .A11y_contrast_3 h5, .A11y_contrast_3 h6, .A11y_contrast_3 i {
background-color: #fff !important;
color: #000 !important;
}

.A11y_contrast_3 div {
background-color: #fff !important;
color: #000 !important;
}

.A11y_contrast_3 button {
background-color: #fff !important;
color: #000 !important;
border: 1px solid #000 !important; /* Borda para diferenciar */
}

/* Nível 1 */
.A11y_letterSpacing_1 {
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}

/* Nível 2 */
.A11y_letterSpacing_2 {
letter-spacing: 0.24em !important;
word-spacing: 0.32em !important;
}

/* Nível 3 */
.A11y_letterSpacing_3 {
letter-spacing: 0.36em !important;
word-spacing: 0.48em !important;
}

/* Nível 1 */
.A11y_lineHeight_1, .A11y_lineHeight_1 p, .A11y_lineHeight_1 span, .A11y_lineHeight_1 h1, .A11y_lineHeight_1 h2, .A11y_lineHeight_1 h3, .A11y_lineHeight_1 h4, .A11y_lineHeight_1 h5, .A11y_lineHeight_1 h6, .A11y_lineHeight_1 i {
line-height: 36px !important;
}

/* Nível 2 */
.A11y_lineHeight_2, .A11y_lineHeight_2 p, .A11y_lineHeight_2 span, .A11y_lineHeight_2 h1, .A11y_lineHeight_2 h2, .A11y_lineHeight_2 h3, .A11y_lineHeight_2 h4, .A11y_lineHeight_2 h5, .A11y_lineHeight_2 h6, .A11y_lineHeight_2 i {
line-height: 42px !important;
}

/* Nível 3 */
.A11y_lineHeight_3, .A11y_lineHeight_3 p, .A11y_lineHeight_3 span, .A11y_lineHeight_3 h1, .A11y_lineHeight_3 h2, .A11y_lineHeight_3 h3, .A11y_lineHeight_3 h4, .A11y_lineHeight_3 h5, .A11y_lineHeight_3 h6, .A11y_lineHeight_3 i {
line-height: 48px !important;
}

/* Texto alinhado à esquerda */
.A11y_textAlign_left {
text-align: left !important;
}

/* Texto alinhado ao centro */
.A11y_textAlign_center {
text-align: center !important;
}

/* Texto alinhado à direita */
.A11y_textAlign_right {
text-align: right !important;
}

/* Texto justificado */
.A11y_textAlign_justify {
text-align: justify !important;
}


/* Classe para destacar links comuns */
.A11y_highlight_link a {
background-color: #000 !important; /* Fundo preto */
color: #fff !important; /* Texto branco */
padding: 2px 4px !important; /* Espaçamento interno para destacar */
border-radius: 4px !important; /* Bordas arredondadas */
text-decoration: none !important; /* Remove sublinhado para melhorar a legibilidade */
}

/* Classe específica para botões com href */
.A11y_highlight_link a[href] button, .A11y_highlight_link a[href] button {
background-color: #000 !important; /* Fundo preto */
color: #FFD700 !important; /* Texto amarelo */
text-decoration: underline !important; /* Texto sublinhado */
padding: 4px 8px !important; /* Espaçamento maior para os botões */
border-radius: 4px !important; /* Bordas arredondadas */
}

/* Baixa Saturação */
.A11y_saturation_low {
filter: saturate(0.5);
}

/* Saturado */
.A11y_saturation_high {
filter: saturate(3);
}

/* Dissaturado */
.A11y_saturation_none {
filter: saturate(0);
}