/* Bureau A11y - Accessibility Styles
 * Version: 1.0.0
 * Author: Bureau de Tecnologia Ltda.
 *
 * Uses CSS custom properties for portability across sites.
 * Colors adapt automatically via --ucpa-color-accent or Elementor global colors.
 */

/* ==========================================================================
   A11Y MODE: High contrast + larger text
   ========================================================================== */

html.a11y {
    font-size: 22px !important;
    line-height: 1.5;
    --espiral-texto-size: 18px !important;
}

html.a11y body {
    --e-global-color-primary: color-mix(in lab, var(--ucpa-color-1) 60%, black 40%) !important;
    --e-global-color-accent: color-mix(in lab, var(--ucpa-color-2) 60%, black 40%);
    --e-global-color-secondary: color-mix(in lab, var(--ucpa-color-2) 60%, white 40%);
    --ucpa-color-main: color-mix(in lab, var(--ucpa-color-1, #000) 60%, black 40%) !important;
    --ucpa-color-offwhite: color-mix(in lab, var(--ucpa-color-3) 60%, white 40%);
    --ucpa-color-header-bg: color-mix(in lab, var(--ucpa-color-1, #000) 60%, black 40%) !important;
    --ucpa-color-white: var(--e-global-color-f589ade, #ffffff);
    --ucpa-color-black: var(--e-global-color-f7de0e8, #000000);
    --espiral-main-color: color-mix(in lab, var(--ucpa-color-1) 70%, black 30%) !important;
    --espiral-background: var(--e-global-color-primary, var(--ucpa-color-1, #000));
    --espiral-background-eixo-normal: color-mix(in lab, var(--ucpa-color-2) 60%, black 40%);
    --espiral-background-eixo-hover: color-mix(in lab, var(--ucpa-color-2) 50%, black 50%);
    --espiral-texto: #fff;
    --espiral-texto-hover: #ffffff;
    --espiral-texto-largura: 125px;
    --espiral-texto-altura: 88px;
    --espiral-texto-size: 19px;
    --espiral-texto-weight: 500;
    --espiral-texto-line-height: 1.2;
    --espiral-animation-duration: 0;
    --espiral-animation-delay: 0;
    --espiral__divisor: #1d1d1b;
    --espiral-bg-1: transparent;
    --espiral-bg-2: #0055aaff;
    --espiral-bg-3: #0055aacc;
    --espiral-sombra-interna: #4d5141;
    --espiral-sombra-externa: #4d5141;
    --espiral-borda-externa: #c86f47;
    --ucpa-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23dddddd' stroke-width='4' aria-hidden='true' display='block' overflow='visible' style='height:16px; width:16px' viewBox='0 0 32 32'%3E%3Cpath d='M13 24a11 11 0 1 0 0-22 11 11 0 0 0 0 22zm8-3 9 9' /%3E%3C/svg%3E");
    --ucpa-transition-duration: 0;
}

html.a11y nav.elementor-element-efccded {
    background-color: color-mix(in lab, var(--e-global-color-603dd02) 60%, black 40%) !important;
}

html.a11y :placeholder {
    color: #dddddd !important;
}

html.a11y .elementor-flip-box__layer {
    transition: none !important;
}

html.a11y h3.elementor-flip-box__layer__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

html.a11y .elementor-element-355414e4 {
    font-size: 1rem !important;
    line-height: 1 !important;
}

html.a11y nav.elementor-nav-menu--main {
    width: -moz-max-content;
    width: max-content;
}

html.a11y nav.elementor-nav-menu--main a {
    transition: all 0.3s;
}

/* ==========================================================================
   A11Y BUTTONS: Fixed position controls
   ========================================================================== */

aside#a11yButtons {
    z-index: 9999999;
}

aside#a11yButtons button.a11y-button {
    --size: 38px;
    --color1: var(--ucpa-color-accent, var(--e-global-color-accent, #174538));
    --color2: color-mix(in lab, var(--ucpa-color-accent, var(--e-global-color-accent, #174538)) 80%, black 20%);
    --radius: 0.5rem;
    font-size: 0.8rem;
    border: 0 !important;
    border-radius: var(--radius) !important;
    width: var(--size);
    height: var(--size);
    position: fixed;
    padding: 0.3rem;
    line-height: 1;
    background-image: linear-gradient(45deg, var(--color1), var(--color2)) !important;
    color: white;
    z-index: 9999;
    right: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
}

aside#a11yButtons button.a11y-button:hover {
    filter: saturate(1.3);
}

aside#a11yButtons button.a11y-button:focus {
    outline: none;
    outline-color: transparent;
    filter: saturate(1.3);
}

aside#a11yButtons button.a11y-button:focus-visible {
    outline: 3px solid var(--color1, brown);
    outline-offset: 1px;
    filter: saturate(1.3);
}

/* Main toggle button */
aside#a11yButtons button.a11y-button--main {
    top: 44vh;
}

/* Play/pause button */
aside#a11yButtons button.a11y-button--play svg rect {
    scale: 0;
    fill: var(--color1);
    transition: scale 0.3s;
    transition-timing-function: var(--ucpa-transition-timing-function);
    transform-origin: center;
}

aside#a11yButtons button.a11y-button--play.playing svg rect {
    scale: 1;
}

aside#a11yButtons button.a11y-button--play::before {
    content: attr(aria-label);
    position: absolute;
    scale: 0;
    top: 0;
    right: 48px;
    height: var(--size);
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    text-transform: uppercase;
    padding-inline: 0.6rem;
    border-radius: var(--radius);
    background-image: linear-gradient(45deg, var(--color1), var(--color2)) !important;
    transition: all 0.3s;
    transform-origin: right;
}

aside#a11yButtons button.a11y-button--play:hover::before,
aside#a11yButtons button.a11y-button--play.hover::before {
    scale: 1;
}

html.a11y aside#a11yButtons button.a11y-button--main {
    outline: 2px solid var(--color1, blue);
    outline-offset: 1px;
}

html.a11y aside#a11yButtons button.a11y-button--play {
    top: calc(44vh - 47px);
}

aside#a11yButtons button.a11y-button svg {
    width: 100%;
    aspect-ratio: 1;
    fill: white;
}

/* Back to top button */
aside#a11yButtons button.a11y-button--top {
    top: unset;
    bottom: 58px;
    opacity: 0;
    transition: opacity 0.3s;
}

aside#a11yButtons button.a11y-button--top svg {
    scale: 0.7;
}

/* VLibras section */
aside#a11yButtons section[data-aside-section="VLIBRAS"] [vw] {
    opacity: 0 !important;
    scale: 0 !important;
}

html.a11y aside#a11yButtons section[data-aside-section="VLIBRAS"] [vw] {
    opacity: 1 !important;
    top: calc(44vh + 66px) !important;
    scale: 1 !important;
}

aside#a11yButtons section[data-aside-section="VLIBRAS"] [vw] [vw-access-button] svg.a11y-button--SVG-hands {
    z-index: 9;
}

/* ==========================================================================
   A11Y GROUP: Show/hide elements when a11y is active
   ========================================================================== */

.a11y-group {
    opacity: 0;
    scale: 0;
    pointer-events: none;
}

html.a11y .a11y-group {
    opacity: 1;
    scale: 1;
    pointer-events: all;
    transform: translate(0, 0);
}

/* ==========================================================================
   MOTION & LANGUAGE
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    html {
        --ucpa-transition-timing-function: cubic-bezier(1, -0.125, 0.31, 1.46);
        transition: all 0.3s;
    }
}

/* Hide play + VLibras for English pages */
html[lang=en-US] #a11y-Play-Stop-Button,
html[lang=en-US] [data-aside-section="VLIBRAS"] {
    display: none;
}

/* A11y fix for JetSmartFilters checkbox labels */
.a11y span.jet-checkboxes-list__label {
    word-break: break-all;
}

/* Ensure header stays above a11y buttons */
html > body > header {
    position: relative;
    z-index: 9999999999;
}