/** Setting the main header background strip at the top

*
* position - This will fix the header at the top even while scrolling
*/

site-header

position: fixed
width: 100%
height: 110px
background: $color-custom-secondary

/** The vegburger toggle box and the mobile expanded mode
  * header background div are turned off for the moment
  */
#header-vegburger-toggle, #mobile-header-extended-background
  display: none

/** The main navigation control container holds the logo
  * and navigation icons
  *
  * max-width - The navgiation container won't expand beyond 1012px
  * margin - Set to auto to center the container inside the header
  */
#header-nav-container
  width: 85%
  height: 100%
  max-width: 1012px
  margin: auto

  /** Setting up the site's logo text
    *
    * margin - Removing the default margins set in the standard overrides
    * line-height - Vertically aligns the text (by setting to height of the div)
    */
  #logo-text
    float: left
    width: 320px
    height: 100%
    margin: auto
    line-height: 110px
    font-weight: 700
    font-size: 3rem

    /** Couldn't change the color of the text from the parent h1 tag for some
      * reason
      */
    a
      color: $color-white

    &:hover
      a
        color: $color-light-grey

  /** The vegburger icon is turned off for the moment
    *
    * user-select - Stops highlighting the vegburger icon when selected
    */
  #vegburger
    display: none
    user-select: none

  /** Setting up the sub container which holds the navigation icons and menu
    */
  #header-nav-menu-icons-container
    float: right
    width: 300px
    height: 100%

    /** Handling the individual menu items
      *
      * float - Not sure why this is required, without it the menu
      * items overflow from the container
      */
    .header-nav-menu-item
      float: left
      width: 75px
      height: 110px

      &:hover
        /** Moves the menu icon up when the mouse hovers over the menu item
          */
        .header-nav-menu-icon
          position: relative
          bottom: 10px

        /** Displays the menu name when the mouse hovers over the menu item
          */
        .header-nav-menu-text
          display: block

      /** Sets up the navigation icon
        *
        * margin - Set to auto to center the icon inside the div
        * fill - Gives a color to the svg icon
        */
      .header-nav-menu-icon
        width: 60%
        height: 100%
        margin: auto
        fill: $color-white

      /** Sets up the menu name text
        *
        * position - Set to relative to move the text inside the menu-icon
        * display - Sets the text to none until mouse hover
        * bottom - Offset required to move the text so that it overlaps
        * with the menu icon
        */
      .header-nav-menu-text
        display: none
        position: relative
        bottom: 33px
        width: 100%
        height: 30%
        margin: 0px
        text-align: center
        font-size: 14px
        color: $color-white

/**

* Since the header is positioned to be fixed, the content in the page
* can slip behind the header at the top as one scrolls down.
* So, a header-spacer is required to make the content
* appear after the header at the top.
*/

.header-spacer

height: 110px

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

/** Changing the header size
  */
#site-header
  height: 80px

  /** When the vegburger icon is pressed, it sets the toggle (checkbox)
    * input to checked. This triggers the nav bar to go into the expanded
    * mode in mobile devices
    *
    * display - The flat black background is made visible
    * position - Fixed so that it moves with the header until it is closed
    * height & width - vh and vw allows for the background to be set to
    * the height and width of the viewport
    * z-index - Puts the background behind the logo and vegburger icon in DOM
    * stack
    */
  #header-vegburger-toggle:checked + #mobile-header-extended-background
    display: block
    position: fixed
    z-index: 1
    width: 100%
    height: 100%
    width: 100vw
    height: 100vh
    background-color: $color-custom-secondary

  /** On toggle behind checked, the menu icons and text need to be
    * shown in mobile devices.
    */
  #header-vegburger-toggle:checked + #mobile-header-extended-background + #header-nav-container
    /** Resetting the height to make the container ready to hold
      * header-nav-menu-icons-container
      */
    height: 500px
    position: relative
    z-index: 1

    /** Resets the height of the logo text
      */
    #logo-text
      height: 80px

    /** The navigation icons can now be showed
      */
    #header-nav-menu-icons-container
      display: block
      width: 100%
      height: 300px

      /** The menu items now need to appear like in a list
        * under the main header
        *
        * border-top: Demarcation between the menu items
        */
      .header-nav-menu-item
        display: block
        width: 100%
        height: 50px
        margin: 10px 0px 10px 0px
        border-top: 1px solid $color-secondary

        /** Sets the menu icon
          */
        .header-nav-menu-icon
          position: static
          float: left
          width: 35px
          height: 100%

        /** Sets the menu text
          */
        .header-nav-menu-text
          display: block
          position: static
          float: right
          width: 80%
          height: 100%
          text-align: left
          font-size: 20px
          line-height: 50px

  /** Sets up the initial look for the header-nav-container
    */
  #header-nav-container
    #logo-text
      width: 200px
      font-size: 2rem
      line-height: 80px

    /** Setting up the vegburger icon
      *
      * cursor - Turns the cursor to a pointer while hovering over the icon
      */
    #vegburger
      display: block
      float: right
      width: 30px
      height: 80px
      margin: 0px
      line-height: 80px
      text-align: center
      font-size: 2.5rem
      color: $color-white
      cursor: pointer

    /** Icons are not displayed until the vegburger is selected
      */
    #header-nav-menu-icons-container
      display: none

/** Resetting the header-spacer height to match new header's height
  */
.header-spacer
  height: 80px