/**
 * @file
 * CSS styles for the official Iowa State Navbar
 *
 * It is strongly recommended that the Iowa State Navbar be included in all
 * Iowa State University websites. If it is not desired or relevant, remove or
 * disable it. Never repurpose or modify in any way.
 *
 * The ISU Navbar does not require any external CSS frameworks.
 *
 * Other required files:
 * - templates/parts/isu-navbar.html.twig
 * - js/isu-navbar.js
 */

:root {
	--cardinal: #c8102e;
	--gold: #f1be48;
	--burgundy: #7c2529;
	--dk-gray: #4a4a4a;
	--lt-gray: #f5f5f5;
	--md-gray: #ebebeb;
	--midnight: #003d4c;
	--green: #008540;
}

.isu-navbar {
  display: flex;
  font-size: 0.875rem;
  background: #ffffff;
  align-items: flex-end;
}
.isu-navbar a {
  color: var(--cardinal);
  line-height: 1.625;
  font-weight: 400;
  text-decoration: none;
  transition: 0.2s color ease-in-out;
  cursor: pointer;
}
.isu-navbar ul {
	display: flex;
	padding-top: 10px;
	padding-bottom: 10px;
}
.isu-navbar li {
	margin: 0 0.5rem;
}
.isu-navbar li:last-child {
	margin-right: 0;
}
.isu-navbar a:hover,
.isu-navbar a:focus,
.isu-navbar_dropdown.has-focus {
  color: var(--burgundy);
  text-decoration: none;
  background-color: transparent;
}
.isu-navbar_container { /* This is a ul */
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-right: 15px;
  padding-left: 15px;
  list-style-type: none;
}
.isu-navbar-responsive {
	display: none;
}

/* --------------------------------------  */
/* ## Responsive
/* --------------------------------------  */
  /* Breakpoints mimic Bootstrap 4 */
  @media (min-width: 576px) {
    .isu-navbar_container {
      width: 540px;
    }
  }
  
  @media (min-width: 768px) {
    .isu-navbar_container {
      width: 720px;
    }
  }

  @media (min-width: 992px) {
    .isu-navbar_container {
      width: 960px;
    }
  }

  @media screen and (max-width : 1199px) {
    .isu-navbar_container{
      width: inherit;
    }
    .isu-navbar {
      display: none;
    }
  }

  @media (min-width: 1200px) {
    .isu-navbar_container {
      width: 1140px;
    }
  }

  @media screen and (max-width : 1200px) {
  .isu-navbar-responsive {
		display: flex;
		font-size: 0.875rem;
		align-items: flex-end;
	}
	.isu-navbar-responsive ul {
		display: flex;
		padding-top: 10px;
	}
	.isu-navbar-responsive li {
		margin: 0 0.5rem;
	}
  .isu-navbar-responsive a {
		color: #fff;
		font-family: Nimbus Sans, sans-serif;
		font-size: 18px !important;
		font-weight: 700;
		text-decoration: underline;
	}
  .isu-navbar-responsive a:hover {
		color: var(--gold);
	}
}

/* Forces list items to break */
.isu-navbar_break {
  width: 100%;
}

/* --------------------------------------  */
/* ## Responsive
/* --------------------------------------  */
  @media screen and (min-width: 576px) {
    .isu-navbar_break {
      width: 0px;
      flex-grow: 1;
    }
  }

.isu-navbar_dropdown {
  position: relative;
}
.isu-navbar_dropdown-toggle:after {
  content: "\f107";
  display: inline-block;
  margin: 0 0 0 6px;
  text-align: center;
  vertical-align: top;
  font-family: "FontAwesome";
}

/* --------------------------------------  */
/* ## Responsive
/* --------------------------------------  */
  @media screen and (max-width: 1199px) {
    .isu-navbar_dropdown-toggle:after {
      display: none;
    }
  }

.isu-navbar_dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%; left: 0;
  margin: 0;
  padding: 0;
  background-color: #555555;
  z-index: 9999;
}
.isu-navbar_alpha {
  display: flex;
  min-width: 675px; /* Needs to be set manually for IE11 */
}
.isu-navbar_dropdown-menu a:hover,
.isu-navbar_dropdown-menu a:focus,
.isu-navbar_dropdown-menu.has-focus {
  background-color: #757575;
}
.navbar-nav .dropdown-menu {
	box-shadow: 0px 2px 3px 0px #aaa;
}

/* -------------------------------------- */
/* Dropdown menus
/* -------------------------------------- */

.isu-navbar_dropdown[aria-expanded='false'] .isu-navbar_dropdown-menu {
  display: none;
}

/* --------------------------------------  */
/* ## Responsive
/* --------------------------------------  */
@media (min-width: 992px) {
  .isu-navbar_dropdown_alpha:hover > .isu-navbar_alpha {
    display: flex;
  }
  .isu-navbar_dropdown_signons:hover > .isu-navbar_signons {
    display: block;
  }
}