﻿/* Exclude default non-focusable elements like h1, p, div */
h1:focus,
p:focus,
div:focus{
    outline: none !important; /* Ensure they have no outline */
    border: none !important;
}

/* Ensure buttons and links look consistent */
button:focus, input:focus, select:focus {
    outline: solid !important; /* Remove browser's default outline */
    border: 3px solid black !important; /* Add the black border */
    border-radius: 4px !important;
}

.triple-arrows-button-container a:focus {
    outline: solid !important; /* Remove browser's default outline */
    border: 4px solid white !important; /* Add the black border */
    border-radius: 4px !important;
}

[tabindex="0"]:focus {
    border: 3px solid black; /* Add a visible focus indicator */
    border-radius: 4px !important;
}

.img-not-focused:focus {
    outline: none !important;
}

.white-big-button:focus {
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: white;
    background: #354F9A;
}

/*skip to main content*/
.screen-reader-text {
    position: absolute; /* Keep it off-screen */
    left: -9999px; /* Off-screen positioning */
    top: auto; /* Reset top positioning */
    z-index: 999; /* Ensure it is above other content */
    padding: 1em; /* Provide some padding for focus visibility */
    background-color: red; /* High-contrast background */
    color: white; /* High-contrast text */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevent interaction when off-screen */
}

    .screen-reader-text:focus {
        position: absolute; /* Ensure it is absolutely positioned */
        left: 0; /* Align with the left edge of the page */
        top: 0; /* Align with the top of its container */
        transform: none; /* Remove centering transform */
        opacity: 1; /* Make it visible */
        pointer-events: auto; /* Enable interaction */
        padding: 1em; /* Maintain focusable area */
        background-color: red; /* Ensure visibility on focus */
        color: white; /* Ensure text remains readable */
        border: 2px solid white; /* Optional: Add focus outline */
    }