@layer components {
  /**
 * @file
 * Visual styles for menu.
 */

  ul.menu {
    margin-left: 1em; /* LTR */
    padding: 0;
    list-style: none outside;
    text-align: left; /* LTR */
  }
  [dir="rtl"] ul.menu {
    margin-right: 1em;
    margin-left: 0;
    text-align: right;
  }
  .menu-item--expanded {
    list-style-type: circle;
    list-style-image: url(../../images/icons/menu-expanded.png);
  }
  .menu-item--collapsed {
    list-style-type: disc;
    list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */
  }
  [dir="rtl"] .menu-item--collapsed {
    list-style-image: url(../../images/icons/menu-collapsed-rtl.png);
  }
  .menu-item {
    margin: 0;
    padding-top: 0.2em;
  }
  ul.menu a.is-active {
    color: #000;
  }
  /* dropdown behaviours */

  /* add the region with a menu in it to convert to a dropdown */
  /* check the menu js behaviour when adding new dropdowns */
  header {
    .menu {
      display: flex;
    }
    .menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .menu > ul {
      display: flex;
      gap: 1rem;
    }

    .menu li {
      position: relative;
    }

    /* Hide submenus */
    .menu li ul {
      position: absolute;
      top: 100%;
      left: 0;
      display: none;
      min-width: 200px;
      background: white;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Show submenu on hover */
    .menu li:hover > ul {
      display: block;
    }

    /* Optional styling */
    .menu a {
      display: block;
      padding: 0.75rem 1rem;
      text-decoration: none;
    }

    .menu li ul li a {
      padding: 0.5rem 1rem;
    }
  }
}