/*
 * EdGEL page masthead
 * --------------------------------------------------
 */

.page-head {
  position: relative;
  background: #fff;

  padding:    @page-head-padding-xs 0;
  @media screen and (min-width: @screen-sm-min) {
    padding-top:    @page-head-padding;
    padding-bottom: @page-head-padding;
  }
}

.page-head-text {
  font-size:        @page-head-font-size;
  line-height:      @page-head-line-height;

  margin:           @page-head-padding-xs 0;
  @media screen and (min-width: @screen-sm-min) {
    margin:         0 0 (@page-head-padding-xs * 1.25);
  }

}

.form-control-page-head {
  height:           @page-head-input-height;
  font-size:        .px-rem(16px)[];
}
.btn-page-head {
  .button-variant(@brand-bg-text; @brand-color; @brand-color);
  height:           @page-head-input-height;
  font-size:        .px-rem(14px)[];
}

.uoe-logo {
  height: auto;
  width: 100%;
  max-width: (.px-rem(332px)[] / 1.05);
  max-height: (.px-rem(79px)[] / 1.05);
}

/* Show/hide the search form */
.page-head-search-trigger {
  display: none;
  position: absolute;
  font-size: .px-rem(21px)[];
  right: 0;
  top: 0;
  cursor: pointer;
  padding: .px-rem(10px)[];

  .glyphicon {
    color: #333;
  }
}

@media only screen and (max-width: @screen-xs-max) {
  .page-head-search-trigger {
    display: block;
  }
  .page-head-search {
    padding-bottom: .px-rem(5px)[];
  }
}

/* Ensure search form always open on larger screens whatever slideToggle() has done. */
// stylelint-disable declaration-no-important
@media only screen and (min-width: @screen-sm-min) {
  .page-head-search {
    display: block !important;
  }
}
// stylelint-enable

// Stop the search toggle button and logo overlapping
.js .page-head-logo-collapsible-search {
  padding-right: .px-rem(45px)[];
}

/* Hero image */
.page-head-hero {
  background-color: @brand;
  img {
    width: 100%;
    height: auto;
    .shade;
  }
  position: relative;
}

/* Bootstrap container modifier for positioning the brand logo */
.container-page-head-brand {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

/* Brand image has a top line */
.page-head-brand {
  border-top: 4px solid @brand;
}

/* Title block */
.page-head-title {
  display: table-cell;
  vertical-align: middle;
  height: 70px; /* Min-height for table-cell */
  font-size: 1em;
  padding-top: .8em;
  padding-bottom: .6em;
  position: relative;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    display: block;
    font-family: @font-family-serif;
    font-weight: 400;
  }
  .h1,
  h1 {
    font-size: 1.6em;
    font-style: normal;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
  }
  .h2,
  h2 {
    font-size: 1.4em;
    font-style: italic;
    margin: 0 0 8px;
  }

  a,
  a:visited {
    color: @brand-bg-text;
  }
}

@media screen and (min-width: @screen-sm-min) {
  .page-head-title {
    font-size: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 1.3em;
  }
}
