/**
 * @file
 * This file contains all Ultimenu layout and basic styling, the essiantials.
 *
 * Classes:
 * .ultimenu: the menu UL tag.
 * .ultimenu > li: the menu LI tag.
 * .ultimenu__flyout: the ultimenu region container aka flyout.
 * .ultimenu__link: the menu-link A tag.
 * @see about RTL
 *  - https://drupal.org/node/2032405
 */

/**
 * Menu list style.
 */
.ultimenu {
  list-style: none;
  margin: 0;
  min-height: 42px;
  position: relative; /* Make flyout relative to UL for wide flyout */
  z-index: 2;
}

/* Add "position: relative;" to make flyout relative to LI for smaller flyout */
.ultimenu > li {
  display: inline-block;
  margin: 0;
}

/**
 * Ugly arrows to support special_menu_items module that stripped out A classes.
 * If you don't have special_menu_items, reference it by .ultimenu__link.
 */
.ultimenu .ultimenu__link {
  display: block;
  line-height: 1.6;
  position: relative; /* To hold arrows for small device */
  text-decoration: none;
  transition: background-color 0.5s, color 0.5s;
}

/**
 * Ultimenu flyout.
 */
.ultimenu__flyout {
  /** Mobile has no :hover, safe to display: none, relies on click events. */
  /* display: none; */
  left: 0;
  line-height: 1.4;
  width: 100%;
}

/** This region is palced within .ultimenu__flyout. */
.ultimenu__region {
  background-color: #fff;
  padding: 20px;
}

/**
 * 944px+ with 16px base font.
 *
 * .ultimenu--hover is for when off-canvas is disabled for desktop.
 */
@media all and (min-width: 59em) {
  .ultimenu--hover > li {
    display: inline-block;
    vertical-align: bottom;
  }

  .ultimenu--hover .ultimenu__link .caret {
    background-color: transparent;
  }
}

.ultimenu--hover .ultimenu__flyout {
  display: block !important; /* Intentional !important to avoid overrides */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

/** Generic rules for all Ultimenu flyout being hovered. */
.ultimenu__item.is-active .ultimenu__flyout {
  overflow: visible;
  opacity: 1;
  visibility: visible;
}