/* ==========================================================
   TOKENS
========================================================== */

@import url("tokens.css");

/* ==========================================================
   RESET
========================================================== */

@import url("reset.css");

/* ==========================================================
   LAYOUT
========================================================== */

@import url("layout/container.css");

/* ==========================================================
   COMPONENTS
========================================================== */

@import url("components/section.css");
@import url("components/case.css");
@import url("components/header.css");
@import url("components/navbar.css");
@import url("components/button.css");
@import url("components/hero.css");
@import url("components/stats.css");
@import url("components/about.css");
@import url("components/portfolio.css");
@import url("components/career.css");
@import url("components/contact.css");
@import url("components/footer.css");

.menu-toggle{
    display:none;
}

.menu-toggle.is-active span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}

.menu-toggle.is-active span:nth-child(2){

    opacity:0;

}

.menu-toggle.is-active span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}

body.menu-open{
    overflow:hidden;
}

/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width:768px){

   .header{
      position:sticky;
      top:0;
      z-index:var(--z-navbar);
   }

    .header .container{
        position:relative;
    }

    .menu-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:44px;
        height:44px;
    }

    .menu-toggle span{
      display:block;
      width:24px;
      height:2px;
      background:#222;
      transition:var(--transition-base);
    }

    .navbar{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        padding:2rem;
        background:var(--color-background);
        border-top:1px solid var(--color-border);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:var(--transition-base);
    }

    .navbar__list{
        flex-direction:column;
        align-items:flex-start;
        gap:1.5rem;
    }

    .navbar.is-open{
        opacity:1;
        visibility:visible;
        transform:none;
    }

}