/**
 * @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__link {
  border-top: 1px solid transparent;
  color: #eaeaea;
  z-index: 103; /* Above the flyout z-index: 102 */
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

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

.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__region nav {
  width: 25%; /* used for the three columns of submenus */
}

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

.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); /* Since we don't have a thinner version of GothamBook, tweaking color instead. */
  /*color: rgb(102, 102, 102);*/
  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;
}

/**
 * 944px below with 16px base font.
 */
@media all and (max-width: 58.999em) {
  .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__region nav {
    width: 100%;
    padding: 2%;
  }

}

/** 944px with 16px base font. */
@media only screen and (min-width: 59em) {
  .ultimenu--hover.ultimenu--ahml li:hover > .ultimenu__flyout,
  .ultimenu--hover.ultimenu--ahml li a:focus + .ultimenu__flyout,
  .ultimenu--hover.ultimenu--ahml li .ultimenu__flyout:focus-within {
    margin-top: 0px;
  }
}
