/**
 * @file
 * This file contains all Ultimenu layout and very basic styling.
 *
 * 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
 */

/* Remove this box-sizing if your theme is already using one globally */
.ultimenu *,
.ultimenu *:before,
.ultimenu *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

.block .ultimenu {
  padding: 0;
}

.ultimenu .ultimenu__link {
  line-height: 1.6;
}

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

/**
 * Ultimenu flyout.
 */
.ultimenu__flyout {
  left: 0; /* LTR */
  line-height: 1.4;
  padding: 20px 0;
  width: 100%;
  z-index: 102;
}

[dir="rtl"] .ultimenu__flyout {
  left: 0;
}

.ultimenu__flyout .block {
  max-width: 100%;
}

/**
 * Orientation.
 * -vtr: vdertical to right
 * -vtl: vertical to left
 * -htt: horizontal to top
 * -htb: horizontal to bottom
 */
.ultimenu--horizontal {
  padding: 0; /* Overrides bartik .block ul padding */
  z-index: 9;
}

.ultimenu--vertical {
  height: auto;
  z-index: 8;
}

.ultimenu--vertical > li {
  display: block;
  float: none;
  position: relative;
}

.ultimenu--vtr .ultimenu__flyout {
  left: 100%; /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtr .ultimenu__flyout {
  left: auto;
  right: 100%;
}

.ultimenu--vtl .ultimenu__flyout {
  left: auto; /* LTR */
  right: 100%;  /* LTR */
  top: 0;
}

[dir="rtl"] .ultimenu--vtl .ultimenu__flyout {
  left: 100%;
  right: auto;
}

.ultimenu--htt .ultimenu__flyout {
  bottom: 100%;
  margin-bottom: 20px;
  top: auto;
}

/**
 * Smaller medium.
 */
@media all and (max-width: 48.125em) {
  /* Ultimenu flyout. Mobile version has no :hover, so safe to display: none,
  and relies on click events via jQuery. */
  .ultimenu {
    overflow: hidden;
  }

  .ultimenu__flyout {
    display: none;
  }

  .ultimenu > li,
  .ultimenu .ultimenu__link {
    /*min-width: 100%;*/
    width: 98%;
  }

  /* Mobile needs a handler for click event. */
  .ultimenu--main  .ultimenu__link {
    color: #fff;
    padding: 1em 1.75em;
    min-height: 42px;
  }

  .has-ultimenu .caret {
    background-color: rgba(0,0,0, .2);
    display: block;
    height: 100%;
    min-height: 34px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .has-ultimenu .caret:before {
    border: 8px solid transparent;
    border-top: 12px solid #fff;
    content: '';
    display: block;
    height: 0;
    margin-top: -6px;
    position: absolute;
    right: 16px; /* LTR */
    top: 50%;
    width: 0;
    z-index: 2;
  }

  .has-ultimenu  .js-ultimenu-active .caret:before {
    border-bottom: 12px solid #fff;
    border-top: 0;
  }

  [dir="rtl"] .has-ultimenu .caret:before {
    left: 10px;
    right: auto;
  }

  .ultimenu__flyout,
  .ultimenu--vtl .ultimenu__flyout,
  .ultimenu--vtr .ultimenu__flyout,
  .ultimenu--htt .ultimenu__flyout {
    bottom: auto;
    height: auto;
    left: auto;
    margin: 0;
    right: auto;
    top: auto;
    width: 100%;
  }
}

/**
 * Larger medium ~ 770px
 */
@media all and (min-width: 48.125em) {
  .ultimenu .ultimenu__link {
    line-height: 1.4;
  }

  /* Ultimenu flyout: Never display: none, bad for animation. */
  .ultimenu__flyout {
    border-radius: 0;
    -moz-transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease;
    -ms-transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease;
    -o-transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease;
    -webkit-transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease;
    display: block !important; /* Intentional !important to avoid overrides */
    margin: 20px 0 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: visibility 0s linear 0.5s, opacity .5s linear, margin .5s ease;
    visibility: hidden;
  }

  .ultimenu > li {
    display: inline-block;
    margin: 0 -4px 0 0; /* LTR */
  }

  [dir="rtl"] .ultimenu > li {
    margin: 0 0 0 -4px;
  }

  .ultimenu li.hover > .ultimenu__flyout,
  .ultimenu li:hover > .ultimenu__flyout {
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    display: block;
    margin-top: 0;
    opacity: 1;
    transition-delay: 0s;
    visibility: visible;
  }

  .ultimenu--vertical .ultimenu__flyout {
    margin-top: 0;
  }

  .ultimenu--htt li:hover .ultimenu__flyout {
    margin-bottom: 10px;
  }

  .ultimenu__link .caret {
    display: none;
  }

  /* Fixed for unwanted hovered far below the menu */
  .ultimenu--htb .ultimenu__flyout {
    -webkit-transform: translateY(-1000%);
    transform: translateY(-1000%);
  }

  .ultimenu--htb li.hover > .ultimenu__flyout,
  .ultimenu--htb li:hover > .ultimenu__flyout {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.ultimenu .ultimenu__link {
  -moz-transition: background-color .5s, color .5s;
  -ms-transition: background-color .5s, color .5s;
  -o-transition: background-color .5s, color .5s;
  -webkit-transition: background-color .5s, color .5s;
  display: block;
  padding: .5em 1.25em;
  position: relative; /* To hold arrows for small device */
  transition: background-color .5s, color .5s;
  text-decoration: none;
}

.ultimenu--vertical .ultimenu__link {
  padding: .5em 0;
}

/**
 * Menu description.
 */
.ultimenu .ultimenu__link small {
  display: block;
  font-size: 70%;
  line-height: 1;
}

/**
 * Core bartik do not have clearfix for region, add support for floating blocks
 * with micro clearfix.
 */
.ultimenu__flyout:after,
.ultimenu .region:after {
  clear: both;
  content: " ";
  display: table;
}