/*  ==================== Styles for main nav menu  ==================== */

header .wp-block-navigation-item > a {
    padding: 15px 0 10px;
    border-bottom: solid 5px #fff;
}
header .wp-block-navigation-item > a:hover {
    border-bottom-color: #ffde59;
}
body header .wp-block-navigation-item.has-child {
    display: flex !important;
}

/* ========= Dropdown menu ========= */
header .wp-block-navigation-item > ul a {
    padding: 5px 10px;
  }

/* Housing for menu items that have dropdown */
header .wp-block-navigation-item.has-child {
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: row !important;
    display: block !important;
}
/* Main menus item that has a submenu */
header .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content {
    flex-grow: 1;
    display: block;
    float:right;
}
/* The "see more" icon */
header .wp-block-navigation .wp-block-navigation__submenu-icon {
    display: block !important;
    float:left;
}
/* Container of submenu */
body header .wp-block-navigation-item.has-child ul.wp-block-navigation__submenu-container {
    clear: both !important;
    width: 100%;
    box-sizing: border-box;
    padding: 0 !important;
    min-width: 250px !important;
    right: 0 !important;
    position: absolute;
    border:none;
}
header .wp-block-navigation-item.has-child ul.wp-block-navigation__submenu-container li {
    box-sizing: border-box;
}
/* Dropdown: Individual submenu items */
header .wp-block-navigation-item.has-child ul.wp-block-navigation__submenu-container a {
    border-bottom: none;
}

/* ========= Responsive modal menu ========= */
/* Main container */
.wp-block-navigation__responsive-container.is-menu-open { 
    padding: 20px;
    gap:10px;
}
/* Menu items that host a submenu */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child { 
    text-align: right;
}
/* Submenu container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child ul.wp-block-navigation__submenu-container { 
    flex-basis: 100%;
    gap: 10px;
    padding: 10px 0 !important;
}