/*   V A R I A B L E S   for   M O B I L E   M E N U   */
:root{
    --bar-width: 40px;
    --bar-height: 6px;
    --gap: 5px;
    --animation-time: 200ms ease-in-out;
    --hamburguer-height: calc(var(--bar-height) * 3 + var(--gap) * 2);
}

/* hamburguer menu && animation from WebDevSimplified*/
header nav label{
    --h: calc(var(--hamburguer-height) * 1.41421356237);
    display: none;
    flex-direction: column;
    gap: var(--gap);
    width: max-content;
    z-index: 10;
}
    header nav label input{
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
    }
        header nav label::before,
        header nav label::after,
        header nav label input{
            content: "";
            width: var(--bar-width);
            height: var(--bar-height);
            background-color: var(--light-color);
            border-radius: 1000px;
            transform-origin: right center;
            transition: opacity var(--animation-time),
                        width var(--animation-time),
                        rotate var(--animation-time),
                        translate var(--animation-time);
        }
            header nav label input:checked{
                opacity: 0;
                width: 0;
            }
            header nav label:has(input:checked)::before{
                rotate: -45deg;
                width: var(--h);
                translate: 0 calc(var(--bar-height) / -2);
            }
            header nav label:has(input:checked)::after{
                rotate: 45deg;
                width: var(--h);
                translate: 0 calc(var(--bar-height) / 2);
            }
            header nav label:has(input:checked) + .mobile-nav{
                translate: 0;
            }
        header nav label:has(input:focus-visible)::before,
        header nav label:has(input:focus-visible)::after,
        header nav label input:focus-visible{
            border: 2px solid var(--dark-color);
        }

/* aside */
header nav .mobile-nav{
    transition: translate var(--animation-time);

    translate: 100%;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 5;
    background-color: #328e6eb9;
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;

    display: none;
    flex-direction: column;

    padding: 100px 30px;

    gap: 50px;
}
    header nav .mobile-nav ul{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }
    header nav .mobile-nav > ul{
        gap: 20px;
    }
    header nav .mobile-nav ul ul{
        gap: 10px;
    }
        header nav .mobile-nav li{
            width: 100%;
        }
            header nav .mobile-nav a{
                width: 100%;
                max-height: 60px;
                max-width: 150px;
            }
    header nav .mobile-nav ul ul{
        margin-left: 20px;
    }


/*   Q U E R I E S   */
@media (max-width: 1300px){
  footer section{
    column-gap: 100px;
  }
}
@media (max-width: 1150px){
  footer section{
    column-gap: 50px;
  }
}
@media (max-width: 1080px){
  footer section{
    grid-template-columns: 1fr;
    gap: 50px;
  }
  footer section > article{
    justify-self: center;
  }
  footer article:last-of-type{
    align-items: center;
  }
}

@media (max-width: 950px){
  header nav ul li:first-of-type{
    display: none;
  }
}
@media (max-width: 820px){
  header nav ul, header nav > .cta-button{
    display: none;
  }
  header nav label{
    display: flex;
  }
  header nav .mobile-nav{
    display: flex;
  }
  .footer-content{
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
  }

  main section ul{
    width: 80%;
  }
}

@media (max-width: 420px){
    header nav .mobile-nav{
        width: 100%;
        align-items: center;
    }
    header nav img{
        width: 90%;
    }

    table tr td a::after{
        font-size: 3rem;
        content: "\f232";
        font-family: 'Font Awesome 6 Brands';
        font-weight: 600;
        color: var(--primary-color);
    }
    td{
        padding: 10px;
    }
    table tr td a{
        background-color: transparent;
        position: relative;
    }

    header nav,
    .limit-container,
    footer section{
        padding-left: 25px;
        padding-right: 25px;
    }
}