/*==========================================================================
  Post page
  ========================================================================== */
.post-show
  .after-menu>header
    .content
      padding-bottom: 100px
      min-height: 0

      +respond-to-width(1080)
        padding-bottom: 40px

      h1
        max-width: 500px

      .logo-wrapper
        .breadcrumb-placeholder
          .breadcrumb
            .breadcrumb-list
              li:last-child
                a
                  span
                    color: $brightBlue
                    font-weight: semi-bold()

                a
                  &:hover
                    span
                      color: rgba($brightBlue, 0.6)

                &:after
                  display: none

      .meta-block
        position: relative
        z-index: 2
        +flex(flex-start, center)
        +flex-rows

        .day, .month
          width: 42px
          height: 42px
          +flex(center, center)
          color: white
          font-size: 0.9rem
          line-height: 1
          font-weight: semi-bold()

        .day
          background-color: $flatOrange
        .month
          background-color: $darkPurple
          margin-right: 40px

        .author
          width: calc(100% - 125px)
          +flex(flex-start, center)

          figure
            display: block
            width: 80px
            height: 80px
            border-radius: 100%
            margin-right: 20px
            span
              display: block
              width: 100%
              height: 100%
              border-radius: 100%
              background-size: cover
              background-position: center

          .written-by
            font-family: rubik()
            font-weight: regular()
            font-size: 0.75rem
            font-style: italic
            color: white
            margin-top: 20px
            opacity: 0.5
            transition: opacity 0.3s

        +respond-to-width(1080)
          .author
            width: 100%
            margin-top: 25px

  .post-content
    background-color: white

    .return-to-category
      text-align: center

      .wrapper
        display: inline-block

        +respond-to-width(400)
          display: block
          a
            border-radius: 0 !important

      a
        +flex(flex-start, center)
        margin: auto
        padding: 15px 30px
        background-color: $green
        border-radius: 10px 10px 0 0
        text-decoration: none
        font-family: rubik()
        color: white
        font-size: 0.9rem
        transition: background 0.3s

        .icon
          height: 44px
          width: 44px
          margin-right: 30px
          border: 2px solid rgba(white, 0.4)
          border-radius: 100%
          +flex(center, center)
          transition: border 0.3s

          .placeholder
            opacity: 0.8
            transition: opacity 0.3s

            span
              display: block
              margin-bottom: 3px
              width: 20px
              height: 3px
              background-color: white
              +translate3d(0,0,0)
              transition: transform 0.3s

              &:last-of-type
                margin-bottom: 0

        &:hover
          background-color: $lightGreen

          .icon
            border-color: white
            .placeholder
              opacity: 1

              span
                +translate3d(2px,0,0)
                &:nth-of-type(2)
                  +translate3d(-2px,0,0)


  .previous-next-post
    +flex(center, center)
    padding: 65px 0

    .post-navigator
      width: 200px
      padding: 0 15px

      color: $purple
      font-family: rubik()
      font-size: 0.75rem
      line-height: 1

      .inactive
        opacity: 0.4

      a
        text-decoration: none
        color: $purple

      span
        +arrowPurple
        +translate3d(0,0,0)
        transition: transform 0.3s

    .previous
      +flex(flex-end, center)
      border-right: 1px solid $purple

      a:hover
        span
          +translate3dRotate(-5px, 0,0, 180deg)

      span
        transform: rotate(180deg)
        margin-right: 18px

    .next
      +flex(flex-start, center)

      a:hover
        span
          +translate3d(5px, 0,0)

      span
        margin-left: 18px