@use '../helpers/variables' as vars;
@use 'sass:map';
@use 'sass:color';
.footer-section{
    padding-top: 50px;
    .footer-content{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        gap: 70px;
        .content-wrapper{
            position: relative;
            .footer-content-block{
                position: relative;
                width: 100%;
                min-width: 200px;
                // no min-width on small screens
                @media (max-width: 735px) {
                    min-width: auto;
                }
                .contact-list{
                    .contact-block{
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        @media (max-width: 600px) {
                            flex-direction: column;
                            align-items: flex-start;
                        }
                        .display-icon{
                            font-size: 24px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 40px;
                            height: 40px;
                            border: 1px solid var(--white);
                        }
                        .block-content{
                            h5{
                                margin: 0;
                                font-size: map.get(vars.$font-sizes, large);
                                font-weight: map.get(vars.$font-weights, medium);
                                span{
                                    font-size: map.get(vars.$font-sizes, small);
                                    font-weight: map.get(vars.$font-weights, normal);
                                }
                            }
                            p{
                                margin: 0;
                                font-size: map.get(vars.$font-sizes, small);
                                font-weight: map.get(vars.$font-weights, normal);
                            }
                        }
                    }
                }
                
                .social-handlers{
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    svg{
                        font-size: map.get(vars.$font-sizes, xxlarge);
                        cursor: pointer;
                        transition: color 0.3s ease;
                        &:hover{
                            color: vars.$primary-color;
                        }
                    }
                }
            }
            .sub-section{
                .section-divide{
                    display: flex;
                    align-content: center;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    .rectangle{
                        width: 40px;
                        height: 2px;
                        background-color: var(--text-color);
                    }
                    .hr{
                        // flex-grow: 1;
                        width: 100%;
                        height: 1px;
                        // text-color 50% opacity
                        background-color: color.adjust(vars.$text-color, $lightness: -10%);
                    }
                }
                .sub-section-flex{
                    display: flex;
                    gap: 40px;
                }
            }
        }
    }
    .copyright-section{
        border-top: 1px solid color.adjust(vars.$text-color, $lightness: -10%);
    }
}

/* ===============================
   FOOTER RESPONSIVENESS
================================ */

@media (max-width: 1400px) {
  .footer-section {
    .footer-content {
      gap: 40px;
    }

    .sub-section-flex {
      gap: 25px;
    }
  }
}

/* Tablets */
@media (max-width: 1200px) {
  .footer-section {
    .footer-content {
    //   flex-wrap: wrap;
      justify-content: flex-start;
      gap: 40px;
    }

    .content-wrapper {
      width: 48%;
    }

    .sub-section-flex {
      flex-wrap: wrap;
      gap: 25px;
    }
  }
}

/* Large Phones */
@media (max-width: 768px) {
  .footer-section {
    padding-top: 30px;

    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
    }

    .content-wrapper {
      width: 100%;
    }

    .sub-section-flex {
      flex-direction: column;
      gap: 20px;
    }

    .social-handlers {
      justify-content: flex-start;
    }

    .copyright-section {
      text-align: center;
      padding-top: 20px;
    }
  }
}



/* Small Phones */
@media (max-width: 480px) {
  .footer-section {
    .classic-heading {
      font-size: 16px;
    }

    .contact-block {
      align-items: flex-start;

      .display-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
      }

      h5 {
        font-size: 14px;
      }

      p {
        font-size: 13px;
      }
    }

    .footer-links a {
      font-size: 13px;
    }

    .social-handlers svg {
      font-size: 22px;
    }

    .copyright-section p {
      font-size: 12px;
    }
  }
}
