/* ==========================================================================
   Navigation
   #menu-main-menu   - main menu <ul>
   #menu-utility-nav - utility menu <ul> above it
                       (IDs are generated by WordPress from the menu names, so
                       they change if a menu is renamed)
   .utility-nav      - utility menu <nav> (CSS Class on the Avada Menu element)
   ========================================================================== */


/* Main nav: submenu (dropdown)
   Avada's menu CSS reads these variables. Setting them on the <ul> overrides
   the values the Menu element writes on the <nav> around it. */
#menu-main-menu {
  --awb-submenu-bg: #e9ebf8;            /* item background */
  --awb-submenu-color: #212934;         /* item text */
  --awb-submenu-active-bg: #f9f9fb;     /* hover/current background */
  --awb-submenu-active-color: #f03a01;  /* hover/current text */
  --awb-submenu-sep-color: #e9ebf8;     /* separator between items */
}


/* Both navs: round the dropdown, plus its first and last items so their
   backgrounds follow the corners (no overflow: hidden, so deeper flyouts
   aren't clipped) */
#menu-main-menu,
#menu-utility-nav {
  --nav-submenu-radius: 5px;
}

:is(#menu-main-menu, #menu-utility-nav) .awb-menu__sub-ul {
  border-radius: var(--nav-submenu-radius);
}

:is(#menu-main-menu, #menu-utility-nav) .awb-menu__sub-ul > .awb-menu__sub-li:first-child {
  border-top-left-radius: var(--nav-submenu-radius);
  border-top-right-radius: var(--nav-submenu-radius);
}

:is(#menu-main-menu, #menu-utility-nav) .awb-menu__sub-ul > .awb-menu__sub-li:last-child {
  border-bottom-left-radius: var(--nav-submenu-radius);
  border-bottom-right-radius: var(--nav-submenu-radius);
}


/* Utility nav: lift its container above the main header container
   (position: absolute; z-index: 9999), which otherwise covers the dropdown
   and steals the hover */
.fusion-fullwidth:has(#menu-utility-nav) {
  position: relative;
  z-index: 10000;
}


/* Utility nav: submenu (dropdown), same approach as the main nav above */
#menu-utility-nav {
  --awb-submenu-active-color: #f03a01;  /* hover/current text */
  --utility-submenu-offset: 28px;       /* drop below the link, to the bar's bottom edge */
}

/* Push the dropdown down (desktop only; on mobile it sits in the list) */
.awb-menu_desktop > #menu-utility-nav > .awb-menu__main-li > .awb-menu__sub-ul {
  margin-top: var(--utility-submenu-offset);
}

/* Invisible bridge over the gap so the hover isn't lost on the way down.
   It's part of the dropdown, so it's hidden whenever the dropdown is. */
.awb-menu_desktop > #menu-utility-nav > .awb-menu__main-li > .awb-menu__sub-ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--utility-submenu-offset);
}


/* Utility nav: no dropdown chevron (desktop; mobile uses its own toggle button).
   !important because Avada's compiled CSS loads after this file. */
.utility-nav.awb-menu_desktop .awb-menu__open-nav-submenu-hover {
  display: none !important;
}


/* Utility nav: phone item */

/* Animate colour once, on the link */
.utility-nav a[href^="tel:"] {
  transition: color 0.3s ease;
}

/* Text and icon follow the link's colour, so they change together */
.utility-nav a[href^="tel:"] .menu-text,
.utility-nav a[href^="tel:"] .awb-menu__i_main,
.utility-nav a[href^="tel:"] .awb-menu__i_main i {
  color: inherit;
  transition: none;
}

/* Icon size */
.utility-nav a[href^="tel:"] .awb-menu__i_main i {
  font-size: 0.85em;
}

/* Separator between Contact Us and the phone number (desktop only) */
.utility-nav.awb-menu_desktop a[href^="tel:"] {
  --sep-extra: 10px; /* extra space added on each side of the separator */
  position: relative;
  margin-left: calc(var(--sep-extra) * 2);
}

.utility-nav.awb-menu_desktop a[href^="tel:"]::before {
  content: "";
  position: absolute;
  left: calc(-15px - var(--sep-extra)); /* centred in the widened gap */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;
  background: rgba(255, 255, 255, 0.35);
}

/* Small screens (Avada's small breakpoint): no separator and no space for it,
   so the number and icon sit centred */
@media screen and (max-width: 640px) {
  .utility-nav.awb-menu_desktop a[href^="tel:"] {
    margin-left: 0;
  }

  .utility-nav.awb-menu_desktop a[href^="tel:"]::before {
    display: none;
  }
}


.header-nav-col > .fusion-column-wrapper {
	align-content: center;
}