/* DVTK + BVI integration. Header eye markup/icon is intentionally untouched. */
body.bvi-active [data-dvtk-special-trigger]{
    display:none !important;
}

/* The original DVTK mobile layout hides the header eye on small screens.
   Keep that design, but restore the existing footer accessibility button so BVI is reachable. */
@media (max-width:768px){
    body:not(.bvi-active) .dvtk-footer__mobile-tools{
        display:block !important;
    }
    body:not(.bvi-active) .dvtk-footer-a11y-btn{
        display:flex !important;
    }
}

/* BVI changes the whole page; force deferred sections to render while accessibility mode is active. */
@supports (content-visibility:auto){
    body.bvi-active .dvtk-section,
    body.bvi-active .dvtk-resource-showcase,
    body.bvi-active .dvtk-footer--dark,
    body.bvi-active .site-post,
    body.bvi-active .post-body{
        content-visibility:visible !important;
        contain-intrinsic-size:auto !important;
    }
}

/* Keep the BVI controls above the site's own fixed widgets. */
body .bvi-panel,
body .bvi-link-fixed-top{
    z-index:2147483000 !important;
}


/* Mobile BVI compatibility fix 2026-09-01.
   BVI wraps the whole body in .bvi-body. On iOS the DVTK mobile overflow/
   deferred rendering rules can leave that wrapper visually empty. */
@media (max-width:768px){
    body.bvi-active{
        overflow-x:hidden !important;
        overflow-y:auto !important;
        height:auto !important;
        min-height:100% !important;
    }

    body.bvi-active .bvi-panel{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        width:100% !important;
        margin-bottom:0 !important;
    }

    body.bvi-active .bvi-body{
        display:block !important;
        position:relative !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        min-height:1px !important;
        overflow:visible !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
    }

    body.bvi-active .simply-viewport{
        display:flex !important;
        flex-direction:column !important;
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
    }

    body.bvi-active .simply-main{
        display:block !important;
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
    }

    body.bvi-active .dvtk-featured-story-wrap,
    body.bvi-active .dvtk-section,
    body.bvi-active .dvtk-resource-showcase,
    body.bvi-active .dvtk-footer--dark,
    body.bvi-active .site-post,
    body.bvi-active .post-body{
        content-visibility:visible !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}

/* DVTK + BVI breakpoint fix 2026-09-01.
   At <=1180px the theme enables .dvtk-mobile. It is a fixed full-screen shell.
   BVI paints every element with the selected theme background, so the normally
   transparent mobile shell becomes an opaque layer covering the entire site. */
@media (max-width:1180px){
    html body.bvi-active .bvi-body[data-bvi-theme] .dvtk-mobile.dvtk-mobile{
        background:transparent !important;
        background-color:transparent !important;
    }

    /* Closed mobile menu must stay visually transparent. */
    html body.bvi-active:not(.dvtk-menu-open):not(.has-menu) .bvi-body[data-bvi-theme] .dvtk-mobile__overlay.dvtk-mobile__overlay{
        background:transparent !important;
        background-color:transparent !important;
        opacity:0 !important;
    }
}