/* #mainMenu ul[role="menu"] {
    display: none;  Hide submenus by default 
} */

/* #mainMenu a[role="menuitem"][aria-expanded="true"] + ul[role="menu"] {
    display: block;  Show submenu when its trigger has aria-expanded="true" 
} */

/* Basic focus styles for visibility - adjust as needed */




#mainMenu a[role="menuitem"]:focus,
#mainMenu ul[role="menu"] a[role="menuitem"]:focus {
    outline: 2px solid blue; /* Example focus style */
    outline-offset: 2px;
}

.header .burger-menu:focus {
    outline: 2px solid dodgerblue; /* Focus style for burger menu */
    outline-offset: 2px;
}

/* Ensure parent LIs don't break layout if they only contain the hidden submenu initially */
#mainMenu > li {
    position: relative; /* Or any other styling that ensures layout integrity */
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}

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