header {
    position: relative;
    background-color: var(--clr-bk-header);
    color: var(--clr-header);

    text-transform: uppercase;
    text-decoration:none;
    text-decoration-line: none;


    a {
        color: currentColor;
        text-decoration: none;;
    }
 
    * {
        margin: 0;
        padding: 0;
        font: inherit;
      }

      .logo{
        display: flex;
        justify-content: center;

        vertical-align: middle;

      }

      .logo .title{
        line-height: 1.5em;
        font-size: 1.2em;
        letter-spacing: 0.00em;
        font-weight: 700;
        padding-block: 1rem;
        text-wrap: nowrap;
      }

      li.active{
       /* background-color: red;*/
      }


      input.expanded {
        display: none;
      }  

      &:has(input.expanded:checked) nav {
        display: block;
        position: absolute;
      }
     nav {
        position: relative;
        background-color: var(--clr-bk-header);
        width: 100%;
        display: none;
        ul{
          margin-left: 1em;
        }
        li {
          list-style: none;
          padding-block: 0.5em;
        }
     }

    .burger-bar {
      position: absolute;
      top:0;
      position:0;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 1em;
      /*background-color: red;*/
    }

    .burger-bar span,
    .burger-bar span::before,
    .burger-bar span::after{
        display: block;
        background: white;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
     }
     
     .burger-bar  span::before,
     .burger-bar  span::after {
       content: '';
       position: absolute;
     }
     
     .burger-bar  span::before {
       bottom: 7px;
     }
     
     .burger-bar  span::after {
       top: 7px;
     }

}

@media  (min-width: 600px) {
    header {

        display:grid;
        grid-template-columns:1fr auto  minmax(600px, 12fr) 1fr;

        ul {
            list-style: none;
        }
        
        .logo {
          grid-column: 2 / 3;
        }

        label.header--label{
            display: none;
        }
        
        nav{

            grid-column: 3 / 4;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            
            margin-block: auto;
            ul {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap:1rem;
            }
        }

        .nav--item {
            box-sizing: border-box;
            padding: 1em;
            padding: 0.5em;
            border-width:2px;
            border: 2px solid transparent;
        }
        .nav--item:hover{
            transition: border 0.3s;
            border: 2px solid #ffffff;
        }
    }

    

}