/* ===========================================
   ACESSIBILIDADE - ESTILOS BASE
   =========================================== */

/* ---- Screen Reader Only (Leitores de Tela) ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #000;
    color: #fff;
    padding: 0.5rem;
}


/* ===========================================
   BARRA DE ACESSIBILIDADE
   =========================================== */

#acessibility-icon-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
    cursor: pointer;
}

#accessibility-icon {
    width: 40px;
    height: 40px;
}

#accessibility-bar {
    display: none;
    position: fixed;
    top: 70px;
    right: 10px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 10px;
    border-radius: 5px;
    z-index: 10000;
}

#accessibility-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 9999;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    width: auto !important;
}

#accessibility-toggle img {
    width: 32px; /* ajuste conforme necessário */
    height: auto;
    display: block;
}

.accessibility-buttons {
    display: flex;
    flex-direction: column;
}

.accessibility-buttons button {
    margin: 5px;
    padding: 8px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
}


/* ===========================================
   TOOLTIP DA BARRA
   =========================================== */

.tooltip {
    display: none;
    position: absolute;
    bottom: 10%;
    right: 0;
    transform: translateX(-50%);
    background-color: #203262;
    color: #fff;
    padding: 20px 15px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #203262 transparent transparent transparent;
}

#accessibility-icon-container:hover .tooltip {
    display: block;
}


/* ===========================================
   FOCO DE TECLADO E ACESSIBILIDADE VISUAL
   =========================================== */

a img {
    text-decoration: none;
    border: none;
}

a img:hover,
a img:focus {
    outline: 2px solid #005fcc;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #005fcc;
    outline-offset: 4px;
    background-color: transparent;
    transition: outline 0.2s ease-in-out;
}

.social-icons a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background-color: transparent;
}

summary:focus {
    outline: 2px dashed #005fcc;
}

summary a {
    color: #ffcc00;
    text-decoration: none;
}

summary a:hover {
    text-decoration: underline;
}

ul li a:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    background-color: transparent;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 1000;
    text-decoration: none;
    font-weight: bold;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ===========================================
   CONTRASTE ALTO (PRETO / AMARELO)
   =========================================== */

.high-contrast-mode {
    background-color: #000;
    color: #fff;
}

/* Títulos e elementos destacados em contraste alto */
.high-contrast-mode h1#eventos,
.high-contrast-mode section.section-eventos p.section-subtitle,
.high-contrast-mode span.dv-bold.dv-white.dv-padding-mdpi,
.high-contrast-mode .navbar-menu li .dropdown > div > a span {
    color: #FFD700 !important;
}

.high-contrast-mode img,
.high-contrast-mode .svg-icon {
    color: #FFD700;
    fill: #FFD700;
}

.high-contrast-mode img.monocromatica {
    filter: brightness(0) saturate(100%) invert(69%) sepia(65%) saturate(450%) hue-rotate(360deg) brightness(105%) contrast(105%);
}

.high-contrast-mode img[src$=".svg"]:not(.no-contrast):not([src*="vlibras"]) {
  filter: brightness(0) saturate(100%) invert(69%) sepia(65%) saturate(450%) hue-rotate(360deg) brightness(105%) contrast(105%);
}

/* Links em contraste alto */
a.high-contrast {
    color: #fff;
    background-color: #007ACC;
    padding: 5px;
    text-decoration: none;
    border-radius: 3px;
}

a.high-contrast:hover {
    background-color: #005BB5;
}

/* Inputs e backgrounds no modo contraste */
.high-contrast-mode input {
    border: solid 1px #FFD700;
    background: #171717;
    color: white;
}

/* Cards e containers */
.high-contrast-mode .trip-card,
.high-contrast-mode .noticia-card,
.high-contrast-mode .event-card,
.high-contrast-mode .gallery-card {
    background: linear-gradient(to right, #111, #222);
}

.high-contrast-mode .white-bg,
.high-contrast-mode .dv-gray-bg,
.high-contrast-mode .box2-subtitle,
.high-contrast-mode .box3-subtitle,
.high-contrast-mode .top-bar {
    background-color: black;
}

/* Texto escuro forçado */
.high-contrast-mode .event-card .card-details p,
.high-contrast-mode .plan-your-trip,
.high-contrast-mode .section-news,
.high-contrast-mode .section-eventos {
    color: #FFD700 !important;
}

/* Header / Footer */
.high-contrast-mode #menuHeader,
.high-contrast-mode .header-info-bg,
.high-contrast-mode .footer,
.high-contrast-mode .dropdown-content,
.high-contrast-mode .dark-mode .header-top {
    background: linear-gradient(to right, #111, #222);
}

/* Textos em contraste */
.high-contrast-mode p,
.high-contrast-mode strong,
.high-contrast-mode span,
.high-contrast-mode nav i,
.high-contrast-mode tr,
.high-contrast-mode h1,
.high-contrast-mode h2,
.high-contrast-mode h3,
.high-contrast-mode h4,
.high-contrast-mode h5,
.high-contrast-mode h6,
.high-contrast-mode a,
.high-contrast-mode nav,
.high-contrast-mode .tab-button,
.high-contrast-mode .footer-contact li,
.high-contrast-mode .footer-links ul li a,
.high-contrast-mode table,
.high-contrast-mode th,
.high-contrast-mode td,
.high-contrast-mode tr,
.high-contrast-mode span#word {
    color: #FFD700;
}

/* Cards e box-shadow no contraste */
.high-contrast-mode .card,
.high-contrast-mode .description {
    background-color: #000;
    box-shadow: 0 2px rgba(250, 247, 247, 0.12);
}

.high-contrast-mode .parallax {
    background-image: none !important;
    background-color: #000 !important;
}


/* Buttons no contraste */
.high-contrast-mode .btn-know-more {
    background: linear-gradient(to top, #FFD700, #ffea008a); /* De amarelo ouro para amarelo claro */
    color: #000 !important;
    border: 2px solid #FFFFFF;
    border-radius: 8px;
    box-shadow: none;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Hover: realce sutil no amarelo */
.high-contrast-mode .btn-know-more:hover {
    background: linear-gradient(to top, #FFEA00, #FFFF66); /* Tons mais claros de amarelo */
    color: #000;
}

/* Foco via teclado */
.high-contrast-mode .btn-know-more:focus {
    outline: 3px dashed #FFFFFF;
    outline-offset: 3px;
}


/* Background sections */
.high-contrast-mode .plan-your-trip, 
.high-contrast-mode .section-news, 
.high-contrast-mode .section-eventos, 
.high-contrast-mode .section-galleries, 
.high-contrast-mode .section-social,
.high-contrast-mode .contato-section,
.high-contrast-mode .rodape-section {
  background: black;
}

/* ===========================================
   MODO ESCURO (DARK MODE)
   =========================================== */

/* Switch do dark mode */
.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 40px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #203262;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    cursor: pointer;
    transition: 0.4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    width: 16px;
}

input:checked + .slider {
    background-color: #00bef2;
}

input:checked + .slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Cores gerais dark mode */
.dark-mode {
    background-color: #202124;
    color: white;
    transition-duration: 0.4s;
}

.dark-mode #menuHeader,
.dark-mode .header-info-bg,
.dark-mode .footer,
.dark-mode .dropdown-content,
.dark-mode .header-top,
.dark-mode .top-bar {
    background: #000;
}

.dark-mode .trip-card,
.dark-mode .noticia-card,
.dark-mode .event-card,
.dark-mode .gallery-card {
    background-color: var(--geoparque-bg-dark);
}

/* Buttons no dark-mode */
.dark-mode .btn-know-more {
    background: linear-gradient(to top, #070707, #03030385); 
    color: #ffffff !important;
    border: 2px solid #FFFFFF;
    border-radius: 8px;
    box-shadow: none;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Hover: realce sutil no amarelo */
.dark-mode .btn-know-more:hover {
    background: linear-gradient(to top, #070707, #03030385); 
    color: #ffffff;
}

/* Foco via teclado */
.dark-mode .btn-know-more:focus {
    outline: 3px dashed #FFFFFF;
    outline-offset: 3px;
}


/* Background sections */
.dark-mode .plan-your-trip, 
.dark-mode .section-news, 
.dark-mode .section-eventos, 
.dark-mode .section-galleries, 
.dark-mode .section-social,
.dark-mode .contato-section,
.dark-mode .rodape-section {
  background: black;
}

.dark-mode .event-card .card-details p {
    color: #fff;
}

.dark-mode .ui-degrade-transparent-bg {
    background: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(10px);
    transition: all 0.5s;
}

.dark-mode .fc-daygrid-day-number,
.dark-mode .fc-col-header-cell-cushion,
.dark-mode .blue,
.dark-mode p.menuitem,
.dark-mode .news-box p,
.dark-mode .btn-vermais a,
.dark-mode menu,
.dark-mode .section-title,
.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode strong,
.dark-mode td,
.dark-mode li,
.dark-mode ul,
.dark-mode tr,
.dark-mode span,
.dark-mode .footer-links ul li a {
    color: white;
}

.dark-mode a {
    color: white;
    text-decoration: underline;
}

.dark-mode .dv-gray-bg {
    background: #000;
}

.dark-mode .dropdown-content-tag {
    box-shadow: 0 0 1.25rem rgba(30, 34, 40, 0.06);
    background: rgba(0, 0, 0, 0.9);
}

.dark-mode .owl-nav > div {
    margin-top: -26px;
    position: absolute;
    top: 50%;
    color: white;
}

.dark-mode .popup,
.dark-mode .solucoes-container,
.dark-mode .solucao-card,
.dark-mode .leia-mais-button,
.dark-mode .ui-white-bg {
    background: #171717;
}

.dark-mode .solucao-card,
.dark-mode .leia-mais-button {
    box-shadow: 0 0px 1px #fff;
}

.dark-mode .white-bg {
    background-color: black;
}

.dark-mode .iu-skyblue {
    color: #00bef2;
}

.dark-mode .gray-bg-box {
    background: #203262;
}

.dark-mode .blue-bg,
.dark-mode .blue-dark-bg,
.dark-mode .opacity {
    background: #303134;
}

.dark-mode .iu-bluedark-bg {
    background: #171717;
}

.dark-mode .iu-gray-bg {
    background: #e0e0e0;
}

.dark-mode .iu-blue-bg {
    background: #203262;
}

.dark-mode .dv-black {
    color: white;
}

.dark-mode .dv-white-bg {
    color: black;
}


.dark-mode p.dv-padding-top-ldpi.dv-padding-right-hdpi.dv-padding-bottom-ldpi.dv-padding-left-hdpi.dv-radius.dv-bold.iu-blue-bg.dv-white {
    color: black;
    background: #f2f9ff;
}

.dark-mode .ui-degrade-bg {
    background: linear-gradient(-180deg, rgba(48, 49, 52, 0.9) 0%, rgba(32, 33, 36, 0.9) 100%) !important;
    transition: 0.3s;
}

.dark-mode .parallax {
    position: relative;
}

.dark-mode .parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.dark-mode .parallax > * {
    position: relative;
    z-index: 2;
}

.dark-mode .ui-black-bg {
    border: solid 3px #00bef2;
    background: none;
}

.dark-mode .card,
.dark-mode .description {
    background-color: #000;
    box-shadow: 0 2px rgba(250, 247, 247, 0.12);
}

.dark-mode img[src$=".svg"]:not(.no-contrast) {
    filter: invert(1);
}


/* ===========================================
   OUTRAS FERRAMENTAS DE ACESSIBILIDADE
   =========================================== */

.invert-colors {
    filter: invert(1);
    background-color: #000;
}

.disable-animations * {
    animation: none !important;
    transition: none !important;
}

.disable-animations .trip-card,
.disable-animations .noticia-card,
.disable-animations .event-card {
  animation: none !important;
  transition: none !important;
}

.low-vision {
    color: rgba(0, 0, 0, 0.9);
}

/* Aplicar a escala ao body e permitir herança via em */
body {
  font-size: 1em; /* Valor inicial controlável via JS */
}

/* ===========================================
   RESPONSIVIDADE DA BARRA
   =========================================== */

@media (max-width: 768px) {
    #accessibility-icon {
        width: 35px;
        height: 250px;
    }

    .tooltip {
        font-size: 12px;
        padding: 15px 10px;
    }
}