@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0 - site-footer
 * 2.0 - site-footer__widgets
 	* 2.1  - widgets-area
 	* 2.2  - widget
 * 3.0 - site-footer__copy
 */


/* 1.0 - site-footer */
.site-footer {
     padding: 0 50px 50px 50px;
	 
	 .navbar-brand{
	 	  width: 180px;
	 }

     @include media-max(1200px) {
          padding: 0;
     }

     .tnp-subscription {
          height: 100%;
          background: #fff;
          padding: 40px 50px;

          .title {
               font-size: 25px;
               letter-spacing: 2px;
               color: #000;
               margin-bottom: 10px;
          }

          input[type=text],
          input[type=email],
          select {
               width: 100%;
               height: 50px;
               padding: 10px;
               display: block;
               border: 1px;
               border-bottom: 1px solid #B1B1B1;
               background-color: transparent;
               background-image: none;
               text-shadow: none;
               color: #B1B1B1;
               font-size: 14px;
               line-height: 20px;
               margin: 0;
               line-height: normal;
               box-sizing: border-box;
          }

          input[type=submit] {
               margin-top: 40px;
               border: 2px solid #000 !important;
               background: transparent;
               color: #000;
               position: relative;
               font-family: 'gilroy-regular', sans-serif;
               font-size: 15px;
               line-height: 18px;
               font-weight: 300;
               padding: 13px 28px;
               border-radius: 0;
               letter-spacing: 1px;
               text-transform: uppercase;
               text-decoration: none;
               cursor: pointer;
               display: inline-block;
               text-align: center;
               background: transparent;
               position: relative;
               width: auto;
               transition: $transition;

               &:hover {
                    color: #fff !important;
                    background: #000;
               }
          }
     }

     hr {
          margin: 10px 0;
     }

     .footer__links {
          display: flex;

          @include media-max(1200px) {
               flex-direction: column;
          }

          .right__side {
               margin-left: 40px;

               @include media-max(1200px) {
                    margin-left: 0;
               }
          }
     }


     /* 2.0 - site-footer__widgets */
     &__widgets {
          padding: 30px 30px 10px 30px;
          background: #beb5ab;
          color: #000;

          @include media-max(1200px) {
               padding: 50px 0;
          }

          a:not(.navbar-brand) {
               color: #000;
               @extend %link-color;
          }

          #custom_html-6 {
               margin-top: 60px;
          }


          /* 2.1  - widgets-area */
          .widgets-area {
               flex: 1 1 0;
               padding-left: 15px;
               padding-right: 15px;
			   
			   &.area-1{
			   		.svg-icon{
						height: 15px;
						margin-right: 5px;
						margin-top: -5px;
					}
					
					a{
							background-size: 100% 1px;
							
							&:hover{
									background-size: 0% 1px;
							}
					}
			   }

               &.area-3 {
                    @include media-max(1200px) {
                         margin-top: 50px;
                    }
               }

               @include media-max(md) {
                    flex: 1 1 auto;
                    width: 100%;
               }
          }


          /* 2.2  - widget */
          .widget {
               &-title {
                    font-size: 20px;
                    text-transform: uppercase;
                    font-family: 'gilroy-regular', sans-serif;
                    letter-spacing: 4px;
                    margin-bottom: 10px;
               }
          }
     }


     /* 3.0 - site-footer__copy */
     &__copy {
          padding: 20px 40px 20px 0;
          background: #beb5ab;
          color: #000;
          border-top: 1px solid rgba(#000, 25%);

          @include media-max(1600px) {
               font-size: 14px;
          }

          @include media-max(1200px) {
               padding: 20px;
          }

          .container {
               display: flex;
               justify-content: space-between;

               @include media-max(1200px) {
                    flex-direction: column;
               }

               #menu-menu-stopka,
               #menu-menu-stopka-1 {
                    display: flex;
                    list-style: none;
                    margin-bottom: 0;

                    @include media-max(1200px) {
                         padding-left: 0;
                         margin-bottom: 30px;
                    }

                    li {
                         position: relative;

                         &:last-of-type {
                              &:after {
                                   border-right: unset;
                              }
                         }

                         &:after {
                              content: "";
                              @include absolute(0, 15px, 0, auto);
                              border-right: 1px solid rgba(#000, 25%);
                              width: 1px;
                              height: 20px;
                              margin-top: auto;
                              margin-bottom: auto;

                              @include media-max(1200px) {
                                   display: none;
                              }
                         }

                         a {
                              padding: 0;
                              margin-right: 30px;
                              font-size: 16px;

                              @include media-max(1600px) {
                                   font-size: 14px;
                              }

                              @include media-max(1200px) {
                                   margin-right: 0;
                                   font-size: 16px;
                              }
                         }
                    }

                    @include media-max(1200px) {
                         flex-direction: column;
                    }
               }
          }

          a {
               color: #000;
               @extend %link-color;

               @include media-max(1600px) {
                    font-size: 14px;
               }

               @include media-max(1200px) {
                    font-size: 16px;
               }
          }
     }
}