/**
 * @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: 97;
}

/* Add "position: relative;" to make flyout relative to LI for smaller flyout */
.ultimenu > li {
  display: 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 .5s, color .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%;
  z-index: 102;
}

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

/**
 * 944px below with 16px base font.
 */
@media all and (max-width: 58.999em) {
  .ultimenu > li,
  .ultimenu .ultimenu__link {
    min-width: 100%;
    width: 100%;
  }

  /** Reset all Ultimeu flyout positioning for off-canvas, in case defined. */
  .ultimenu__flyout,
  .ultimenu--vertical .ultimenu__flyout,
  .ultimenu--htt .ultimenu__flyout {
    bottom: auto;
    height: auto;
    left: auto;
    margin: 0;
    right: auto;
    top: auto;
    width: 100%;
  }
}

/**
 * 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;
  }

  /** We still have .caret to toggle flyout here. */
  .ultimenu--hover .ultimenu__flyout {
    position: absolute;
  }

  /** To hold caret, tablet up. */
  .ultimenu.ultimenu--hover .ultimenu__link {
    padding-right: 64px;
  }

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

  .ultimenu--hover li .is-ultimenu-active + .ultimenu__flyout {
    padding: 20px 0;
  }
}

/**
 * 1025px with 16px base font, assumes no-touch devices.
 * Use Modernizr.js to have correct touch detection.
 */
@media only screen and (min-width: 64.063em) {
  /* Ultimenu flyout: Never display: none, bad for animation. */
  .ultimenu--hover .ultimenu__flyout {
    display: block !important; /* Intentional !important to avoid overrides */
    /** Fixed for unwanted hover. Or target .ultimenu selector. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    top: 100%;
    transition: all .2s;
    visibility: hidden;
  }

  /** Generic rules for all Ultimenu flyout being hovered. */
  .ultimenu--hover li:hover > .ultimenu__flyout,
  .ultimenu--hover li a:active + .ultimenu__flyout,
  .ultimenu--hover li a:focus + .ultimenu__flyout,
  .ultimenu--hover li .ultimenu__flyout:focus {
    max-height: none;
    min-height: 64px;
    padding: 20px 0;
    overflow: visible;
    opacity: 1;
    transition-delay: .1s;
    visibility: visible;
  }

  /** Ultimenu placed in the footer, htt: horizontal to top. */
  .ultimenu--htt li:hover > .ultimenu__flyout,
  .ultimenu--htt li a:active + .ultimenu__flyout,
  .ultimenu--htt li a:focus + .ultimenu__flyout,
  .ultimenu--htt li .ultimenu__flyout:focus {
    bottom: 100%;
    max-height: none;
    top: auto;
  }

  /* Unless you want to show caret for laptop up, hide the caret.
     Remove this if you want to have clickable Ultimenu for all devices.
     Be sure to remove the hover rules above. */
  .ultimenu--htt .caret,
  .ultimenu--vertical .caret,
  .is-ultimenu-canvas--hover .ultimenu__link .caret {
    display: none;
  }

  .ultimenu.ultimenu--hover .ultimenu__link {
    padding-right: 1.5em;
  }
}