/* code voor skipliks te tonen en verbergen */ 
/* CSS voor skiplink functionaliteit */
.fs-skiplink-menu{
    position: absolute !important;
    overflow: hidden;
    padding-top: 0.5rem;
    padding-left: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none; /* prevent mouse interaction when hidden */
    z-index: 999;
}

/* Reveal the menu when any child element receives focus (keyboard users) */
.fs-skiplink-menu:focus-within{
    overflow: visible !important;
    pointer-events: auto !important;
    background-color: white !important;
    width: 100% !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}

.fs-skiplink {
    font-size: 1.2em;
    padding: 0.4em 0.8em;
    margin-right: 0.4em;
    z-index: 100;
    transform: translateY(-0.75rem) scale(0.95);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    background: transparent;
    border-radius: 4px;
}
.fs-skiplink-menu:focus-within .fs-skiplink {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.fs-skiplink:hover {
    background-color: var(--fs-main);
}
.fs-skiplink a, .fs-skiplink > a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto !important;
}
/* .fs-skiplink:focus-within, .fs-skiplink:focus {
    outline: 2px dashed;
    outline-offset: 2px;
} */

/* Keep generic focus styles for keyboard users */
a:focus{
    outline: 2px dashed;
    outline-offset: 2px;
}
button:focus{
    outline: 2px dashed;
    outline-offset: -5px;
}