/* ==========================================================================
   Big blue header
   specific CSS for the Cases header can be found in case.sass
   ========================================================================== */

/**
 * Main header
 *
 * 1. Set up the height on 70% of viewport for now, maybe adjust later
 */
header.main
  position: relative
  z-index: 1
  margin-bottom: columnVw(.5)
  background: $blue

  /**
   * Large intro text
   */
  .intro
    position: relative
    padding: column(2) 0
    color: #fff
    font-size: 2rem
    font-weight: medium()
    line-height: 1.25

    /**
     * Page title
     */
    h1
      margin: 0 0 60px 0

      color: #4D6EFF
      font-size: .9rem
      font-weight: bold()
      text-transform: uppercase

    p
      margin: 0

    a
      color: $brightBlue
      text-decoration: none

    .arrow
      +position(absolute, null null column(2) 50%)
      display: block
      width: 14px
      height: 32px
      margin-left: -7px

      +sprite(0 -20px)
      cursor: pointer
      +transition(transform 200ms ease-out )

      &:hover
        +transform(translateY(5px))


  /* Responsive header
   ========================================================================== */

  +respond-to-width($mdGridBreakpoint)
    .intro
      width: column(11)

  +respond-to-width($smGridBreakpoint)

    h1
      margin-bottom: 30px

    .intro
      font-size: 1.5rem

      .arrow
        display: none

  +respond-to-width($xsGridBreakpoint)

    .intro
      width: 100%
      padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace

      p
        font-size: 1.2rem
        line-height: 1.3

/* Header drips
 ========================================================================== */

.header-drip
  +position(absolute, 0 null null 0)
  background: $pastelBlue

  &.top
    width: 100%
    height: columnVw(.5)
    max-height: $gridMaxWidth / 28

  &.left, &.right
    top: 0
    width: column(.5)
    max-width: $gridMaxWidth / 28
    height: 100%
    background: linear-gradient(to bottom, $pastelBlue 0%,$blue 100%)
    border-bottom-left-radius: 500px
    border-bottom-right-radius: 500px

  &.right
    left: auto
    right: 0

  // Gets replaced by a mobile menu
  +respond-to-width($xsGridBreakpoint)
    &.top
      height: 0
  +respond-to-width($xsGridBreakpoint)
    display: none