/*
Header for SMCM.edu
Contains:
	Utility Menu (search bar, quick links)
	Megamenu (Top tier websites)
*/

/*
	GENERAL HEADER
*/
#common-navigation {
	position:fixed;
  z-index:1;
  width:100%;
  top:0;
  right:0;
}
/*
	UTILITY MENU
*/
#utility-navigation {
	background:#00205c;
	color:#fff;
  font-size: .85em;
}
#utility-navigation ul {
	display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items:center;
}
#utility-navigation ul li {
	list-style-type:none;
	border-right: 1px solid rgba(255, 255, 255, .15);
}
#utility-navigation ul li a {
	background:#00205c;
	color:#fff;
	display:block;
	padding: .5em 1em;
}
#utility-navigation ul li a:hover,
#utility-navigation ul li a:focus,
#utility-navigation ul li a:active {
	filter: brightness(1.1);
}
/*
	UTLITY MENU - SEARCH BAR
*/
#search-toggle-input {
  background: #00205c;
  box-shadow: inset 0 -30px 50px rgba(0, 0, 0, 0.05);
  display: none;
  box-shadow: none;
}
#search-toggle-input .google-search-form {
  margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
#search-toggle-input .google-search-form .search-field {
  background: transparent;
  color: #fff;
  font-size: 2.5em;
  padding: .25em .5em;
  border: none;
  box-shadow:none;
}
#search-toggle-input .google-search-form .search-field:active, #search-toggle-input .google-search-form .search-field:focus {
  outline: 0;
}
#search-toggle-input .google-search-form .search-field::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}
/*
	UTILITY MENU - QUICKLINKS
*/
#quicklinks-toggle-output {
  display:none;
  background: #eee;
  overflow:hidden;
}
#quicklinks-toggle-output ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#quicklinks-toggle-output li {
	list-style-type:none;
	min-width: 120px;
    max-width: 120px;
    min-height: 120px;
    max-height: 120px;
    flex-basis: auto;
    flex-grow: 1;
}
#quicklinks-toggle-output li:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
#quicklinks-toggle-output li a {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  padding: 2em 1.25em;
  font-size: .85em;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.45);
}
#quicklinks-toggle-output li a:hover,
#quicklinks-toggle-output li a:focus,
#quicklinks-toggle-output li a:active {
  background: #847870;
  color: #fff;
}
#quicklinks-toggle-output li i {
	font-size:2.5em;
	margin-bottom:.25em;
}
/*
  WP ADMIN TOOLBAR FIX
*/
.admin-bar #common-navigation {
  top: 32px;
}
/*
  Media Queries
*/
@media only screen and (max-width: 959px) {
  #common-navigation {
    position:relative;
  }
  .admin-bar #common-navigation {
  top: 0;
}
  #utility-navigation ul {
    flex-wrap:nowrap!important;
  }
    /*UTLITY MENU - SEARCH BAR*/
  #search-toggle-input .google-search-form .search-field {
    font-size:2em!important;
  }
  #quicklinks-toggle-output li {
     min-width: 33%!important;
     max-width: 33%!important;
  }
}
@media only screen and (max-width: 520px) {
  /*WP ADMIN TOOLBAR FIX*/
  .admin-bar #common-navigation {
    top: 46px;
  }
  #search-toggle-input .google-search-form .search-field {
    font-size:1.5rem!important;
  }
}