/**
 * @file
 * Skin based on safe CSS file name: ultimenu--ahml.
 * To change skins, manage this block by going to:
 * https://www.ahml.info/admin/structure/block/manage/ultimenumainnavigation?destination=/admin/structure/block
 */

.ultimenu--ahml {
  background-color: #222;
  color: #999;
  font-family: GothamBook;

  /* From style.css */
  text-align: center;
  font-size: 16pt;
}

.ultimenu--ahml .ultimenu__flyout {
  background-color: white;
  border-radius: 0 0 0 0;
  padding: 0px 0px 0px 0px;
}

/* This is for the image block on the right of the flyouts. */
.ultimenu--ahml .ultimenu__flyout .block {
  padding: 13px;
}

.ultimenu--ahml .ultimenu__region {
  background-color: white;
  font-size: 14pt;
  color: rgb(102, 102, 102);
  display: flex;
  border-radius: 0 0 0 0; /* !important; */
  padding: 0px 20px 0px 20px; /* !important; */
}

.ultimenu--ahml .ultimenu__flyout .ultimenu__region {
  margin: 0;
  padding: 0px 13.25% 0px 13.25%; /* matches 77% width of ultimenu */
}

.ultimenu--ahml li .ultimenu__link {
  position: static;
  border-top: 1px solid transparent;
  color: #eaeaea;
  z-index: 103; /* Above the flyout z-index: 103 */
  padding: 1em 0.25em !important;
}

.ultimenu--ahml .ultimenu__item {
  margin: 0;
  width: 10.5%;
  cursor: pointer;
}

/* @todo is-active https://www.drupal.org/node/2281785 */
.ultimenu--ahml > li:hover > a,
/** Unfortunaly is-active is unreliable, it goes on scroll/ ajax. */
.ultimenu--ahml .is-ultimenu-active,
.ultimenu--ahml .is-active-trail > a {
  background-color: #111;
  border-top: 1px solid #444;
  color: #000;
}
.ultimenu--ahml .ultimenu__link.is-ultimenu-active,
.ultimenu--ahml.ultimenu > li:hover > .ultimenu__link {
       background-color: white;
}       

.ultimenu--ahml ul.is-ultihover li:hover > .ultimenu__flyout,
.ultimenu--ahml ul.is-ultihover li a:active + .ultimenu__flyout,
.ultimenu--ahml ul.is-ultihover li a:focus + .ultimenu__flyout,
.ultimenu--ahml ul.is-ultihover li .ultimenu__flyout:focus {
  max-height: none;
  min-height: 64px;
  padding: 20px 0;
  overflow: visible;
  opacity: 1;
  transition-delay: .1s;
  visibility: visible;
}

.ultimenu--ahml .ultimenu__region h2 {
  font-weight: 700;
  font-size: 14pt;
  text-align: left;
  color: rgb(66, 66, 66); /* Since we don't have a thinner version of GothamBook, tweaking color instead. */
  /*color: rgb(102, 102, 102);*/
  margin-top: 14px;
  margin-bottom: 0px;
  margin-right: 15px;
  padding-bottom: 7px;
  border-bottom-color:rgba(0, 0, 0, 0.1);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.ultimenu--ahml .ultimenu__region nav {
  width: 25%; /* used for the three columns of submenus */
}

.ultimenu--ahml .ultimenu__region section {
  width: 25%; /* used for the image on the right side. */
}

.ultimenu--ahml .ultimenu__region ul {
  font-weight: 400;
  font-family: GothamBook;
  text-align: left;
}

.ultimenu--ahml .ultimenu__region li {
  margin-right: 15px;
  margin-left: 7px;
}
.ultimenu--ahml ul li a {
  text-align: left;
  width: 100%;
  border-bottom-color:rgba(0, 0, 0, 0.1);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin: 0px 0px;
  padding: 4px 0px !important;
  color: rgb(150, 150, 150) !important;
  display: inline-block; /* This pushes the menu <img> flush to the top. */
  width: 100%;
}

.ultimenu--ahml .ultimenu__region h2:before {
  background-image: url(/themes/ahml/images/menu_arrow_down_gray.png);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  content: '';
  width: .6875rem;
  height: .6875rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  top: 7%;
  right: -94%;
  position: relative;
}

/** This double is another sample to work around theme compatibility issue. */
.ultimenu--ahml .button.button--ultimenu {
  background: #555;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
  float: right;
  right: 15px;
  text-align: center;
  text-indent: -999px;
  top: 15px;
  width: 42px;
  z-index: 9999;
  transition: background-color .3s, transform .2s, right .5s ease;
}

.ultimenu--ahml .button.button--ultimenu.is-ubtn-active {
  right: 84vw;
  transition: right .5s ease;
}

.ultimenu--ahml .button.button--ultimenu:hover,
.ultimenu--ahml .button.button--ultimenu:active,
.ultimenu--ahml .button.button--ultimenu:focus {
  background: #111;
}

/** Inspired by callmenick. */
.ultimenu--ahml .button--ultimenu .bars,
.ultimenu--ahml .button--ultimenu .bars::before,
.ultimenu--ahml .button--ultimenu .bars::after {
  background-color: #fff;
  content: '';
  display: block;
  height: 4px;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 32px;
}

.ultimenu--ahml .button--ultimenu .bars {
  height: 4px;
  left: 5px;
  right: 5px;
  top: 18px;
  transition: background-color 0s .3s;
}

.ultimenu--ahml .button--ultimenu .bars::before,
.ultimenu--ahml .button--ultimenu .bars::after {
  transition-duration: .3s, .3s;
  transition-delay: .3s, 0s;
}

.ultimenu--ahml .button--ultimenu .bars::before {
  transition-property: top, transform;
  top: -10px;
}

.ultimenu--ahml .button--ultimenu .bars::after {
  transition-property: bottom, transform;
  bottom: -10px;
}

.is-ultimenu--expanded .button--ultimenu .bars {
  background-color: transparent;
}

.is-ultimenu--expanded .button--ultimenu .bars::before,
.is-ultimenu--expanded .button--ultimenu .bars::after {
  transition-delay: 0s, .3s;
}

.is-ultimenu--expanded .button--ultimenu .bars::before {
  top: 0;
  transform: rotate(45deg);
}

.is-ultimenu--expanded .button--ultimenu .bars::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.is-ultimobile .ultimenu__item.is-ultimenu-expanded .ultimenu__flyout {
    height: 100%;
    overflow: visible;
    visibility: visible;
    max-height: 100%;
    opacity: 1;
}

/* Level 1: Initial Flyout State */
#navigation_mobile .ultimenu__flyout {
    display: none; /* Hidden until Level 1 is clicked */
    position: static !important;
    width: 100% !important;
    visibility: visible !important;
}

#navigation_mobile .ultimenu__item.is-active > .ultimenu__flyout {
    display: block !important;
}

/* Level 2: Section Headers (Materials, Borrowing Info, etc.) */
#navigation_mobile .ultimenu__flyout h2 {
    cursor: pointer;
    background: #f1f1f1;
    margin: 2px 0 0 0;
    padding: 12px 15px;
    font-size: 2rem;
    position: relative;
    border-left: 4px solid #c03e35; /* Brand color indicator */
}

/* Level 3: Nested Menu Lists */
#navigation_mobile .ultimenu__flyout ul.menu.nav {
    display: none; /* Hidden until H2 is clicked */
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

#navigation_mobile .ultimenu__flyout ul.menu.nav li a {
    display: block;
    padding: 10px 25px; /* Indented */
    border-bottom: 1px solid #eee;
    color: #333;
    text-decoration: none;
}

/* 1. Hide the mobile container by default on desktop */
#navigation_mobile {
    display: none !important;
}

.ultimenu__caret, .ultimenu__caret i {
    position: relative;
    z-index: 3;
    top: -7px !important;
    right: -42% !important;
    left: auto !important;
    overflow: visible !important;
}
.is-ulticaret--arrow .ultimenu__caret i::before {
    transform: translate(-2px, -50%) rotate(315deg);
}
.is-ulticaret--arrow .ultimenu__caret i::after {
    transform: translate(2px, -50%) rotate(45deg);
}
.is-ulticaret--arrow .ultimenu__caret i::before, .is-ulticaret--arrow .ultimenu__caret i::after {
    background-color: var(--ultiregion);
}
.ultimenu__caret.caret {
    display: block !important;
    border-top: 0px !important;
}

/* 2. Show it only when the mobile breakpoint is hit */
/* Match this 'max-width' to your Ultimenu Canvas Breakpoint setting */
@media (max-width: 1086px) {
    .ultimenu--ahml .ultimenu__region {
      flex-direction: column;
    }
    .ultimenu--ahml .ultimenu__region nav {
        width: 100%;
    }
    .ultimenu--ahml .ultimenu__item {
        width: 100%;
    }
    .ultimenu--ahml .ultimenu__flyout .ultimenu__region {
        padding: 0px 2% 0px 2%;
    }
    .ultimenu--ahml .ultimenu__link.is-ultimenu-active, .ultimenu--ahml.ultimenu > li:hover > .ultimenu__link {
      background-color: #222222;
    }
    #navigation_mobile .field-content {
      display: none !important;
    }
    #navigation_mobile {
        display: block !important;
    }
    
    /* Hide the desktop menu container simultaneously */
    #navigation_container {
        display: none !important;
    }
      .is-ultimenu .is-ultihover .ultimenu__flyout,
  .is-ultimenu:not(.is-ultimenu--active) .is-ulticaret .ultimenu__flyout {
    position: absolute;
  }

  .is-ultimenu .is-ultihover li .is-ulink-active + .ultimenu__flyout {
    padding: var(--ultispace) 0;
  }

  /* Hide mobile menu, if off-canvas is DISABLED for desktop. */
  html.is-ultimenu--hover .button.button--ultiburger {
    display: none;
  }

  /* Ultimenu items. */
  /* stylelint-disable */
  .is-ultimenu .is-ultihover:not(.is-ulticaret) li .ultimenu__flyout:focus,
  .is-ultimenu .is-ultihover:not(.is-ulticaret) li:hover > .ultimenu__flyout,
  .is-ultimenu .is-ultihover:not(.is-ulticaret) li a:active + .ultimenu__flyout,
  .is-ultimenu .is-ultihover:not(.is-ulticaret) li a:focus + .ultimenu__flyout {
    height: auto;
    max-height: none;
    min-height: 64px;
    padding: var(--ultispace) 0;
    overflow: visible;
    opacity: 1;
    transition-delay: 0.1s;
    visibility: visible;
  }

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

  /* stylelint-enable */
  /**
   * .is-ultihover is for when off-canvas is disabled for desktop.
   */
  .is-ultimenu .is-ultihover > li {
    display: block;
    vertical-align: bottom;
    width: 100%;
  }

  /* Carets. */
  /* .is-ultihover is for when off-canvas is disabled for desktop. */
  .is-ultimenu .is-ultihover:not(.is-ulticaret) .ultimenu__link {
    padding-right: 1.5em;
  }

  .is-ultimenu .is-ultihover .ultimenu__caret {
    background-color: transparent;
  }

  /**
   * These rules should work without javascript.
   * 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. */
  .is-ultimenu .ultimenu--htt:not(.is-ulticaret) .ultimenu__caret,
  .is-ultimenu .ultimenu--vertical:not(.is-ulticaret) .ultimenu__caret,
  .is-ultimenu .is-ultihover:not(.is-ulticaret) .ultimenu__caret {
    display: none;
  }

  .is-ultimenu .ultimenu .ultimenusub .ultimenu__caret {
    display: block;
  }
}

/**
 * Mobile (touch detection -- hover does not exist)
 */
/* @media (hover: none) { */
@media all and (max-width: 1085px) {
  .ultimenu--ahml .ultimenu__link {
    border-top: 1px solid #333;
  }
  .has-ultimenu .caret {
    border-top: none;
  }

  .ultimenu--ahml .ultimenu__region {
    background-color: white;
    display: block;
  }

  .ultimenu--ahml .ultimenu__region nav {
    width: 100%;
    padding: 2%;
  }
  #navigation_container {
    height: 76px;
  }
}

/**
 * Hide from printing
 */
@media print {
  #navigation_container,
  #navigation_mobile {
    display: none !important;
  }
}