/*==========================================================================
  Page layout
  ========================================================================== */

/**
  * Image header
  *
  */
.image-header
  position: relative

  .wave
    margin-bottom: -1px
    width: 100%
    position: absolute
    bottom: 0
    overflow: hidden

    img
      width: 105%
      margin-left: -2%
      margin-top: -1px

.image-header-content
  min-height: 750px
  background:
    repeat: no-repeat
    size: cover
    position: center

  +respond-to-width($mdGridBreakpoint)
    min-height: 0
    height: 650px

  +respond-to-width($smGridBreakpoint)
    min-height: 0
    height: 500px

/**
  * Page header
  *
  * 1. Pulls the entire page content up (over image-header)
  * 2. Centers the title vertically and horizontally
  * 3. Smaller font sizes on smaller screens
  */

.page-header
  position: relative
  background: $yellow
  margin-top: -200px /* 1 */
  z-index: 10

  +respond-to-width($mdGridBreakpoint)
    margin-top: -100px

  +respond-to-width($smGridBreakpoint)
    margin-top: 0

.page-header-wrapper
  +flex(center, center) /* 2 */
  +flex-direction(column)
  padding: 75px column(2)
  +respond-to-width($mdGridBreakpoint)
    padding: 45px column(1.5)

  h1
    text-align: center
    font-size: 2.0rem
    +respond-to-width($mdGridBreakpoint) /* 3 */
      font-size: 1.6rem
    font-family: 'Coda Caption', sans-serif
    color: $white
    margin-bottom: 30px

  p
    max-width: 750px
    padding: 0
    margin: 0
    font-size: 1.2rem
    +respond-to-width($mdGridBreakpoint) /* 3 */
      font-size: 1rem
    text-align: center

/**
  * Page header on parent pages
  *
  * 1. Centers the title vertically and horizontally
  * 2. Pulls the entire page content up (over image-header)
  */

.parent-page
  background:
    color: $white

  h1
    color: $blue