/**
 ************************************************************************************************
 ************************************************************************************************
 * {LESS} :: PWA (progressive web app) :: (upplication, 2018)
 ************************************************************************************************
  ***********************************************************************************************
 */

@import "../base/_common.less";
@import "../base/_timeline.less";
@import "../base/_trial.less";

/* -- (0) Title BG img -- */
.pwa-bg {
  width: 100%;
  padding-top: 50px;
}

// Heading TITLE in current (PWA) view
.pwa-header {
  width: 100%;
  top: 265px;
  .centered;
  position: absolute;
  // (block) responsive behaviour
  @media (max-width:1080px) { top: 225px; }
  @media (max-width: 980px) { top: 155px; }
  @media (max-width: 600px) { top: 125px; }
  @media (max-width: 480px) { top: 120px; }

  h4 {
    color: @main-green;
    position: relative;
    font-size: 70px;
    font-weight: 600;
    margin: .2em 0 0 0;
    padding: 0;
  }

  p {
    margin-top: 5px;
    font-size: 39.5px;
    color: @darkest-lilac;
  }

  // (Copies) responsive behaviour
  @media (max-width: 350px) {
    h4 { font-size: 60px; }
    p {  font-size: 33.5px; }
  }
  @media (max-width: 1150px) {
    h4 { font-size: 50px; }
    p {  font-size: 28px; }
  }
  @media (max-width: 980px) {
    h4 { font-size: 40px; }
    p {  font-size: 22.5px; }
  }
  @media (max-width: 480px) {
    h4 { font-size: 30px; }
    p {  font-size: 17px; }
  }
}

// (common) Paragraphs
.pwa-text {
  p {
    margin-bottom: 0;
    line-height: 30px;
    color: @dark-lilac;
    font-size: 18px;
    font-weight: 400;

    span {
      color: @main-green;
      font-weight: 500;
    }

    a {
      font-weight: 500;
      text-decoration: underline;

      &:hover {
        color: @dark-lilac;
      }
    }
  }
}

/* -- (1) WHAT IS A PWA ---------------------------- */

#what {
  padding-top: 3em;
}

@media all and (max-width: 480px) {
  #what {
    // to reset margin
    .container {
      margin-bottom: 25px;
      // Text adapted
      .company-intro {
        p {
          .font-mobile;
        }
      }
    }
  }
}

/* -- (2) PWA Are Apps that... ---------------------------------- */

.features {
  padding: 3em 0 3em 0;
  border-top: 1px solid @header-border;
  // responsive behaviour
  @media all and (max-width: 768px) {
    padding: 3em 0 1em 0;
  }

  .features-grid {
    img {
      width: 150px;
      height: 150px;
    }

    h3 {
      color: @dark-lilac;
      font-size: 1.6em;
      font-weight: 600;
      line-height: 35px;
      margin-top: 10px;

      em {
        color: @light-lilac;
        font-weight: 400;
        letter-spacing: 0.015em;
      }
    }

    p {
      text-align: left;
    }
  }
}

/* -- (3) PWA ADVANTAGES TIMELINE ---------------------- */

// overwrite ("_timeline.less") styles by default
.timeline-section {
  .timeline {
    .timeline-panel {
      .timeline-body {
        padding: 5px 15px;

        > p {
          margin: 0;
          padding: 0;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .timeline-section {
    .timeline > li {
      min-height: 150px;
    }
  }
}

@media (max-width: 768px) {
  .timeline-section {
    .timeline > li:last-child {
      margin-bottom: 100px;
    }
  }
}

/* -- (4) HOW TO INSTALL A PWA ------------------------- */

#how {
  width: 100%;
  border-top: 1px solid @header-border;
  margin-top: 0;
  padding-top: 3em;

  .pwa-text {
    .col:last-child {
      margin-top: 20px;
      // to overwrite styles above in some devices
      @media (min-width: 921px) {
        margin-top: 0;
        img {
          float: right;
          margin-top: 0;
        }
      }
    }
    // to overwrite "materialize" grid in some devices
    > .col {
      @media (max-width: 920px) {
        width: 100% !important;
        img {
          .centered;
        }
      }
    }
  }
}

/* -- (5) PWA .PDF DOWNLOAD ---------------------------- */

#summary {
  .icon-quote-left {
    font-size: 1.5em;
    color: @light-lilac;

    &:first-child {
      padding-right: 5px;
    }
    &:last-child {
      padding-left: 5px;
      &::before {
        .rotate(180deg);
      }
    }
  }
}

/* -- (6) PWA .PDF DOWNLOAD ---------------------------- */

// overwrite ("_trial.less") styles by default
.trial-block {
  &.pwa-trial-block {
    border-top: 1px solid @header-border;
    padding-top: 6em;
    padding-bottom: 0;
  }
}