@import './base/reset';
@import './base/variables';
@import './base/colors';
@import './base/grid';
@import './base/layout';
@import './base/fonts';


body{
  color: #1a1a1a;
}

header[role="banner"]{
  div.wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  h1.site-title{
    grid-column: 1;
    margin:0;
    font-size: 1em;
  }
  nav#header-menu{
    grid-column: 2;
    text-align: right;
    >ul>li{
      display: inline-block;
      margin-right: 1em;
      position: relative;
      >ul{
        position: absolute;
        top:1em; right:0;
        overflow: hidden;
        >li{
          transition: height 0.3s ease-in-out;
          height:0.2px;
        }
      }
      &:hover{
        >ul>li{
          height:1em;
        }
      }

    }
    li>span,li>a{
      font-size: 0.9em;
    }
  }
}
section[role="main-content"]{

}
footer[role="tools"]{
  #history{
    // color: #1a1a1a;
    background-color: $or;
  }
  #results{
    // color: #1a1a1a;
    background-color: $gris;
  }
  #footer-bottom{
    #footer-tabs{
      ul{
        padding:0; margin:0;
        display: flex;
        flex-direction: column;
        li{
          flex: 1 1 auto;
          box-sizing: border-box;
          padding:0.3em;
          margin:0;
          line-height: 0.6em;
          height:2em;
          &.history{
            background-color: $or;
          }
          &.results{
            background-color: $gris;
          }
          span{
            font-size: 0.693em;
            font-weight: 400;
            text-transform: uppercase;
          }
        }
      }
    }
    #search{
      color: #fff;
      background-color: $bleuroi;
      label[for="keys"]{
        display: none;
      }
    }
  }
  h2{
    margin:0;
    font-size: 0.756em;
    font-weight: 400;
    text-transform: uppercase;
  }
}