/* Magnetrix - single dropdown indicator.
   Loaded after chrome.css.

   Three things were drawing an arrow on the Services item:
     1. Astra's nav walker injects .ast-header-navigation-arrow
     2. Xpro adds its own .xpro-dropdown-menu-toggle
     3. chrome.css had an ::after chevron

   Astra's and chrome.css's are suppressed here. Xpro's is kept, because it
   doubles as the tap target that opens the submenu on touch, and restyled so
   it matches the brand rather than the plugin default. */

/* Kill the duplicates. */
.xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a::after { content: none !important; display: none !important; }
.xpro-elementor-horizontal-navbar-nav .ast-header-navigation-arrow,
.xpro-elementor-horizontal-navbar-nav .dropdown-menu-toggle:not(.xpro-dropdown-menu-toggle),
.xpro-elementor-horizontal-navbar-nav .ast-menu-toggle { display: none !important; }

/* The one that stays. */
.xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 7px;
  vertical-align: middle;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  transition: transform .18s;
}

/* Clear whatever glyph Xpro ships, then draw one chevron from borders so it
   inherits the link colour on hover and active states. */
.xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle::after { content: none; }
.xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .75;
  font-family: inherit;
}

/* Rotate on open. */
.xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:hover > a .xpro-dropdown-menu-toggle,
.xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:focus-within > a .xpro-dropdown-menu-toggle {
  transform: rotate(-180deg);
}

/* In the mobile drawer the toggle is a real control, so give it a hit area. */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle {
    width: 34px;
    height: 34px;
    margin-left: auto;
  }
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------
   Refit for the 14px nav.

   The chevron was drawn against a 15px label. When the header was
   tightened to fit Amazon Brands and Amazon Agencies the labels
   dropped to 14px and the arrow did not follow, so it now reads as
   oversized and set too far off the word.

   It also sat low. A chevron made from two borders has its visual
   mass in the bottom-right corner, so centring the box leaves the
   shape looking dropped -- it needs lifting by about a quarter of
   its height to sit on the optical centre of the cap height.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
  /* Centre the chevron against the label rather than the line box. */
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center;
  }

  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
  }

  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle::before {
    width: 5px;
    height: 5px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    border-radius: 0 0 1px 0;
    transform: translateY(-1.5px) rotate(45deg);
    opacity: .8;
  }

  /* Match the label on hover instead of staying dimmed. */
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:hover > a .xpro-dropdown-menu-toggle::before,
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:focus-within > a .xpro-dropdown-menu-toggle::before {
    opacity: 1;
  }

  /* Rotating the box would swing the lifted chevron off centre, so the
     flip is anchored to the middle of the box. */
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:hover > a .xpro-dropdown-menu-toggle,
  .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:focus-within > a .xpro-dropdown-menu-toggle {
    transform-origin: 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle { transition: none; }
}

/* ---------------------------------------------------------------
   Masked chevron.

   The border-triangle trick is the root of the fiddliness: two
   borders give square ends, the arms are only as even as the box
   is square, and the visual centre never sits where the box
   centre does, so it always needs an eyeballed nudge.

   Drawn as a real chevron instead and used as a mask, so the shape
   is exact, the ends are round, it is centred by construction, and
   it still inherits the link colour through currentColor. Inline
   data URI: no request, nothing to cache-bust.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle {
    width: 10px;
    height: 10px;
    margin-left: 6px;
  }

  .xpro-elementor-horizontal-navbar-nav .xpro-dropdown-menu-toggle::before {
    width: 10px;
    height: 10px;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M2.6%204.9%20L6%208.1%20L9.4%204.9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 10px 10px no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M2.6%204.9%20L6%208.1%20L9.4%204.9%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 10px 10px no-repeat;
    opacity: 1;
  }
}