/**
 * Divi primary header / desktop flyout menu fixes (site-wide).
 *
 * @package Divi_Child_Theme
 */

/* Do not clip nested flyouts inside the fixed header stack. */
#main-header,
#main-header .container,
#main-header .et_menu_container,
#et-top-navigation,
#top-menu-nav,
#top-header {
  overflow: visible !important;
}

@media screen and (min-width: 981px) {
  /* Flex layout replaces Divi's full-width absolute logo overlay crowding the nav. */
  #main-header .container.et_menu_container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .et_header_style_left #main-header .logo_container {
    position: relative !important;
    width: auto !important;
    height: auto;
    flex: 0 0 auto;
    max-width: min(200px, 22vw);
  }

  .et_header_style_left #main-header .logo_container .logo_helper {
    display: none;
  }

  .logo_container #logo {
    max-height: 54px;
    width: auto;
    height: auto;
  }

  /*
   * Divi custom.js sets inline padding-left = logo width + 30px for left header.
   * That duplicates space once the logo sits in normal flex flow — reset it.
   */
  .et_header_style_left #et-top-navigation {
    flex: 1 1 auto;
    min-width: 0;
    float: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Divi default is 33px top; we zeroed this earlier and crushed the menu upward. */
    padding-top: 32px !important;
    padding-left: 0 !important;
    padding-right: 32px !important;
    margin: 0;
  }

  .et_header_style_left #main-header.et-fixed-header #et-top-navigation {
    padding-top: 22px !important;
  }

  #top-menu-nav,
  #top-menu {
    float: none !important;
  }

  #top-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 4px;
    line-height: 1.2;
  }

  #top-menu > li {
    display: block;
    float: none;
    padding-right: 14px;
  }

  #top-menu > li:last-child {
    padding-right: 0;
  }

  .et_header_style_left #top-menu > li > a {
    white-space: nowrap;
    padding-bottom: 32px;
  }

  .et_header_style_left #main-header.et-fixed-header #top-menu > li > a {
    padding-bottom: 22px;
  }

  /* 3rd-level flyouts: stay above page content and header siblings. */
  #top-menu li ul.sub-menu,
  #top-menu .nav li li ul {
    z-index: 100001;
  }

  /* Per-item flip (set by wdi-header-nav.js) when a nested panel would overflow right. */
  #top-menu li li.menu-item-has-children.wdi-submenu-flip-left > ul.sub-menu,
  #top-menu li li.menu-item-has-children.wdi-submenu-flip-left > ul {
    left: auto !important;
    right: 100% !important;
  }

  /* Divi's top-level reverse class (resize handler) — keep behavior explicit. */
  #top-menu li.et-reverse-direction-nav li ul {
    left: auto !important;
    right: 240px !important;
  }
}

@media screen and (min-width: 981px) and (max-width: 1400px) {
  #main-header .container.et_menu_container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #top-menu > li {
    padding-right: 10px;
  }

  #top-menu > li > a {
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media screen and (min-width: 981px) and (max-width: 1200px) {
  #top-menu > li {
    padding-right: 6px;
  }

  #top-menu > li > a {
    font-size: 12px;
  }
}