/*
 Theme Name:     WSU Spokane Theme
 Theme URI:      https://spokane.wsu.edu/
 Description:    A child theme of the Spine for WSU Spokane.
 Author:         WSU
 Author URI:     https://web.wsu.edu/
 Template:       spine
 Version:        0.1.7
*/

.header-search-wrapper-hide {
 display: none;
}

.header-search-wrapper-open {
 display: block;
}

.header-drawer-wrapper {
 display: none;
}
.header-shelf-wrapper {
 margin-top: 50px;
}

/* Duplicated "offsite" menu to match mega menu */
#spine-navigation #offsite-mega-menu .menu-item .external:after {
 display: none;
}

#spine-navigation #offsite-mega-menu .menu-item {
 font-weight: 600;
 border-bottom: 1px solid #8d959a !important;
}

/* ----- header-shelf -----*/
/* column one */
.home .fluid .header-shelf.row.triptych .column.one {
 border: 1px solid #dbdbdb;
 border-top: none;
 border-bottom: none;
 width: 25%;
}

/* column two (empty) */
.header-shelf .column.two {
 height: 1px;
}

.fluid .row.triptych .column.two {
 width: 62.5%;
}

.fluid .main-header .row.triptych.header-shelf .column.two {
 padding: 1.5rem;
 position: absolute;
 left: 25%;
 bottom: 20px;
}

.header-shelf .column.two li:after,
.header-shelf .column.two ul:after {
 content: "";
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}

/* column three */
.fluid .main-header .row.triptych .column.three {
 border: 1px solid #dbdbdb;
 border-top: none;
 border-bottom: none;
 width: 12.5%;
}

.header-shelf .column.three {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
}

.top-level-links-label,
.search-label {
 float: left;
 text-align: center;
 text-transform: uppercase;
 width: 100%;
}

.top-level-links-label {
 background: #efefef;
 position: absolute;
 top: 0;
 bottom: 55%;
 padding-top: 12%;
 font-size: .8rem;
 transition: background .3s ease;
}

.top-level-links-label:hover {
 background: #dbdbdb;
}

.search-label {
 position: absolute;
 bottom: 20px;
 font-size: .9rem;
 font-weight: 700;
 color: #981e32;
 transition: color .3s ease;
}

.search-label:hover {
 color: #5e6a71;
}

.search-label:after {
 content: "$";
 font-family: Spine-Icons;
 margin: 0 -.25rem 0 .5rem;
 position: relative;
 top: .125rem;
}


/*----- header-drawer -----*/
.header-drawer-wrapper {
 background: #363636;
 border-bottom: 5px solid #981e32;
 font-size: .8rem;
 position: relative;
}

.header-drawer .column > div {
 padding: 1.5rem;
}

.header-drawer ul,
.header-drawer li,
.mega-menu-labels-wrapper ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

/* column one */
section.single.triptych.row.header-drawer:before {
 position: absolute;
 content: "";
 visibility: visible;
 background: rgba(0,0,0,.1);
 height: 100%;
 width: 25%;
 left: 0;
}

/* mega-menu */
.wsu-mega-nav-container {
 padding-bottom: 1rem;
}

.header-drawer .two .mega-menu-wrapper > ul > li,
.mega-menu-labels-wrapper li {
 float: left;
 width: 20%;
}

#mega-menu .sub-menu {
 padding: 0 .2rem 0 0;
}

.mega-menu-labels-wrapper > ul > li > a {
 color: #404040;
 font-size: .9rem;
 font-weight: 700;
 text-transform: uppercase;
 display: block;
}

.mega-menu-labels-wrapper > ul > li > a:hover {
 color: #981e32;
}

.mega-menu-wrapper > ul > li > a {
 display: none;
}

#mega-menu .sub-menu li,
#signature-menu li {
 padding-bottom: .7rem;
}

#mega-menu .sub-menu a,
.signature-menu-wrapper a {
 color: #c8c8c8;
 display: block;
 line-height: 1.2;
 padding-right: .5rem;
}

/*--search bar--*/
.header-search-input-wrapper,
.header-search-a-z-wrapper {
 width: 70%;
 float: right;
 margin-right: 10%;
 margin-top: 2.5rem;
}

.header-search-a-z-wrapper {
 margin-top: 1rem;
 text-align: right;
}

.header-search-a-z-wrapper a {
 color: #981e32;
}

.header-search-input-wrapper label {
 display: none;
}

.header-search-input-wrapper input[type=text] {
 font-size: 1.5rem;
 font-weight: 300;
 font-family: Proxima-Nova;
 width: 100%;
}

.header-search-wrapper {
 height: auto;
 padding: 3rem 0;
 background: #dbdbdb;
}

.quick-links-label {
 color: #981e32;
 font-size: 1rem;
 margin-bottom: 1rem;
}

.menu-quick-links-search-container ul {
 list-style: none;
 padding: 0;
}

.menu-quick-links-search-container li {
 width: 50%;
 float: left;
}

.menu-quick-links-search-container li a {
 color: #5e6a71;
}

/* - closing Xs - */
.close-header-drawer,
.close-header-search {
 position: absolute;
 bottom: 1rem;
 right: 1rem;
 color: #fff;
 font-size: 2rem;
 font-weight: 300;
 cursor: pointer;
 transition: color .3s ease;
}

.close-header-drawer:hover,
.close-header-search:hover {
 color: #c60c30;
}


/*---------------- Responsive ----------------------*/
@media screen and (max-width: 1200px) {
 .header-shelf .column.three {
  bottom: inherit;
 }

 .fluid .main-header .row.triptych .column.three {
  width: auto;
  border: 1px solid #dbdbdb;
 }

 .fluid .main-header .row.triptych .column.three {
  width: 50%;
  border: none;
 }

 .top-level-links-label,
 .search-label {
  width: auto;
  bottom: inherit;
  top: 0;
  padding: .5rem 1rem;
  position: relative;
  line-height: 1;
  font-size: .8rem;
  font-weight: 400;
  float: right;
 }

 .top-level-links-label {
  border-right: 1px solid #dbdbdb;
  box-sizing: border-box;
  padding-top: calc(1px + .5rem);
  float: right;
 }

 .search-label {
  right: 0;
 }

 .fluid .main-header .row.triptych.header-shelf .column.two {
  bottom: 10px;
 }

 .fluid .main-header .row.triptych.header-shelf .column.two,
 .fluid .row.triptych .column.two {
  width: 75%;
 }
}

@media screen and (max-width: 989px) {
 #binder.fluid main {
  width: 100% !important;
  margin-left: 0;
 }
}

@media screen and (max-width: 791px) {
 .wsu-logo {
  padding: 2rem 1rem 1.3rem;
 }

 #binder.fluid main {
  margin-top: 0;
 }

 .mega-menu-labels-wrapper > ul > li > a {
  font-size: .7rem;
 }
}

@media screen and (max-width: 700px) {
 .main-header {
  display: none;
 }

 #spine {
  display: block;
 }
}

@media screen and (max-width: 550px) {
.fat-footer-menu {
  display: none;
 }
}

@media screen and (max-width: 900px){
 .fixedbg {
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
 }
}

/* ---------- Special HP Overlay styling ---------- */
.noscroll .overlay-wrapper {
 background: rgba(0,0,0,.92);
}

div.overlay-text {
 position: absolute;
 bottom: 1rem;
 width: 100%;
}

.overlay-wrapper .aligncenter {
 margin: 0 auto;
}

.overlay-image {
 margin: 0 auto;
}

.overlay-wrapper p {
 width: 100%;
 text-align: center;
}

.overlay-top-text,
.overlay-date,
.overlay-button {
 color: #fff;
 text-transform: #fff;
 width: 100%;
 text-align: center;
 text-transform: uppercase;
 font-size: .8rem;
 font-weight: 300;
 letter-spacing: 8px;
}

.overlay-text h1 {
 font-size: 3rem;
 background-color: transparent;
 padding: 0 1rem;
 width: 100%;
 margin: 0;
 box-sizing: border-box;
}

.overlay-date {
 letter-spacing: 2px;
}

.overlay-button,
.overlay-button:hover {
 border: 1px solid #fff;
 box-shadow: none;
 display: block;
 max-width: 260px;
 margin: 3rem auto 0;
 padding: .3rem;
 letter-spacing: 0;
}

.noscroll .overlay-dismiss {
 position: absolute;
 top: 1rem;
 right: 2rem;
 padding: .7rem .5rem .5rem;
 border: 1px solid transparent;
 text-transform: uppercase;
 font-size: 2rem;
 transition: border-color .3s ease;
}

.noscroll .overlay-dismiss:hover {
 border: 1px solid #fff;
}

@media screen and (max-width: 550px) {
 .overlay-image {
  width: 85%;
 }

 div.overlay-text {
  position: relative;
  margin-top: -5rem;
 }

 .overlay-text h1 {
  font-size: 1.9rem;
 }

 .overlay-top-text {
  letter-spacing: 2px;
 }
}

/* ---------- Active state for Feature section ---------- */
.features-container .home-headline-nav li.active-feature {
 background: #929292;
 background: rgba(146,146,146,1);
}

/* ---------- Fat Footer Fix for Secondary Pages ---------- */
main #fat-footer a,
main #fat-footer a:hover {
 border: none;
 box-shadow: none;
 padding: 0;
 background: none;
}