/** The home page houses a hero-section and a features sections

*/

home

/** The main hero section div
  *
  * height: The height of the section beyond 500px (min-height) will
  * increase based on its contents (for responsive-design)
  * background-image - Loads the hero background image from the
  * $home-background(main.sass) which points to an image file in assets folder
  * background-position - Centers the background image vertically
  * background-size - Cover makes sures that the image resizes with
  * the viewport size
  */
#hero-section
  width: 100%
  height: fit-content
  min-height: 500px
  background-image: linear-gradient(to top, rgba(0, 0, 10, 0.5) 0%, rgba(0, 0, 10, 0.8) 100%), url($home-background)
  background-position: center
  background-size: cover

  /** The content holds the header-content and its information
    *
    * display - Flex allows the content in this widget to be
    * vertically aligned inside a div at all resolutions
    * align-content - Aligns the entire content vertically
    * flex-direction - The default 'row' flex-direction doesn't look good
    * height: The height of the section beyond 500px (min-height) will
    * increase based on its contents (for responsive-design)
    * text-align - Aligns the text inside the hero-content at the center of
    * the div
    **/
  #hero-content
    display: flex
    align-content: center
    flex-direction: column
    width: 70%
    height: fit-content
    min-height: 500px
    margin: auto
    text-align: center

    /** The site's main header
      *
      * height: The height of the header beyond 100px (min-height) will
      * increase based on its contents (for responsive-design)
      */
    #hero-header
      height: fit-content
      min-height: 100px
      margin: auto
      margin-bottom: 10px
      font-size: 4.0rem
      font-weight: 600
      color: $color-custom-primary

    /** The site header's information
      *
      * height: The height of the header beyond 150px (min-height) will
      * increase based on its contents (for responsive-design)
      */
    #hero-paragraph
      height: fit-content
      min-height: 150px
      margin: auto
      margin-top: 0px
      font-size: 2.0rem
      color: $color-light-grey

/** The site's features section
  */
#features-section
  margin-top: 50px
  text-align: center

  /** Container holding the features
    *
    * display - Flexing allows us to choose 'column' as flex direction for
    * mobile devices
    * justify-content - Spacing around puts a certain amount of distance
    * between the feature items and to the left and right of the group
    * max-width - The container size cannot go beyond 1012px
    */
  #features-container
    display: flex
    justify-content: space-around
    width: 100%
    max-width: 1012px
    margin-left: auto
    margin-right: auto

    /** The container for the individual feature item
      */
    .feature
      width: 30%
      margin-left: 10px
      margin-right: 10px
      text-align: center

      /** The feature's icon div
        */
      .feature-icon
        width: 90px
        height: 90px
        margin: 0px
        margin-right: auto
        margin-left: auto

        /** The feature icon's SVG element that needs colouring
          */
        g
          fill: $color-custom-primary

        /** The feature icon's SVG element that needs colouring
          */
        path
          fill: $color-custom-primary

      /** The feature's main title
        */
      .feature-heading
        margin-bottom: 0px

      .feature-heading
        font-size: 22px

      /** The feature's description text
        */
      .feature-text
        margin: 0 auto 0 auto
        text-align: center

@media screen and (max-width: 768px)

#home
  #hero-section

    /** Changing the width of the hero-content to fill the width of the screen
      */
    #hero-content
      width: 100%

      /** The site's main header
        *
        * margin-top - Decreases the top margin as the width decreases
        */
      #hero-header
        margin-top: 15%
        margin-bottom: 10px
        font-size: 36px
        line-height: 1.3

      /** The site header's information
        *
        * margin-bottom - Decreases the bottom margin as the width decreases
        */
      #hero-paragraph
        margin-bottom: 20%
        font-size: 18px

  #features-section

    /** Changing the flex-direction to column for mobile devices
      */
    #features-container
      flex-direction: column

      /** The container for the individual feature item
        */
      .feature
        width: 85%
        margin: auto
        margin-bottom: 50px

        /** The feature's icon div
          */
        .feature-icon
          width: 85px
          height: 85px

        .feature-heading
          font-size: 20px

        /** The feature's description text
          */
        .feature-text
          // margin-top: 5px