/* Reset & Base Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f9f9f9;
    }

    /* Skip Link for Keyboard Users */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 0;
      background: #005a9c;
      color: white;
      padding: 10px 20px;
      z-index: 100;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
    }

    /* Navbar Container */
    .navbar {
      background-color: #1a1a1a;
      padding: 0 20px;
    }

    /* Semantic Unordered List */
    .nav-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .nav-item {
      position: relative;
    }

    /* Links & Buttons */
    .nav-link, .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      color: #ffffff;
      text-decoration: none;
      padding: 5px 10px;
      margin: 1px 1px;
      background: transparent;
      border: solid 2px #929090;
      font-size: 1.02em;
      cursor: pointer;

    }

.nav-submenu-item {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 10px;
    background: transparent;
    border: none;
    font-size: 1.02em;
    cursor: pointer;
}

.nav-submenu-item:hover {
    background-color: #999999;
    border: solid 2px #cccccc;
    margin: 1px 1px;
}

.nav-link:hover, .dropdown-toggle:hover {
    background-color: #999999;
    border: solid 2px #cccccc;
    margin: 1px 1px;
}

    /* Critical Requirement: Visible Focus Indicator */
.nav-link:focus-visible, .dropdown-toggle:focus-visible, .submenu-link:focus-visible, .nav-submenu-item:focus-visible {
    xoutline: 3px solid #ffcc00;
    outline: 3px solid #ffffff;
    outline-offset: -3px;
    background-color: #333333;
}

    /* Visual Indicator for Dropdown */
    .dropdown-toggle::after {
      content: '';
      margin-left: 8px;
      border: solid white;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      transition: transform 0.2s;
    }

    .dropdown-toggle[aria-expanded="true"]::after {
      transform: rotate(-135deg);
    }

    /* Submenu Behavior */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1.5);
      list-style: none;
      margin: 0;
      padding: 0;
      min-width: 200px;
      z-index: 10;
    }

    /* Toggle visibility via JS state */
    .dropdown-toggle[aria-expanded="true"] + .submenu {
      display: block;
    }

.dropdown-toggle[aria-expanded="true"] {
    border:solid 3px #888888;
}

    .submenu-link {
      display: block;
      color: #333333;
      padding: 12px 20px;
      text-decoration: none;
    }

        .submenu-link:hover {
            background-color: #f0f0f0;
            
        }

    /* Main Content Container */
    main {
      padding: 40px 20px;
    }

.menubar-navigation > li {
    display: inline-block;
    position: relative;
    xcolor: #dde4ec;
}

    /* from the other one */













    .menubar-navigation [role="menu"] {
        display: none;
        position: absolute;
        margin: 0;
        padding: 0;
        padding: 7px 4px;
        border: 2px solid #034575;
        xbackground-color: #eee;
        background-color: #465c71;
    }

  

    /* aria-current styling */

 

    /* focus styling */

    .menubar-navigation.focus {
        padding: 0;
        border: #034575 solid 3px;
    }

    .menubar-navigation > li > [aria-expanded="true"],
    .menubar-navigation > li > [role="menuitem"]:focus,
    .menubar-navigation > li > [role="menuitem"]:hover {
        xoutline: none;
        xxbackground-color: #ccc;
        background-color: #bfcbd6;
        color: #465c71;
    }

    .menubar-navigation > li > [role="menuitem"]:focus,
    .menubar-navigation > li > [role="menuitem"]:hover {
        xpadding: 2px;
        xpadding-bottom: 4px;
        border: 1px solid #034575;
    }

    .menubar-navigation [role="menu"] [aria-expanded="true"],
    .menubar-navigation [role="menu"] [role="menuitem"]:focus,
    .menubar-navigation [role="menu"] [role="menuitem"]:hover {
        outline: none;
        xbackground-color: #ccc;
        background-color: #bfcbd6;
        color: #465c71;
    }