@import "partials/colors";
@import "partials/fonts";

a, a:visited{
  text-decoration: none;
  color: inherit;
}

body{
  margin: 0;
  background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
  background-repeat: repeat;
  background-position: center;
}

$header_height: 50px;

div.layout-container{
  // display: flex;
  // flex-direction: column;
  // height: 100vh;
  // overflow: hidden;
  header[role="banner"]{
    padding: 0.5em;
    // flex: 0 1 content; 
    z-index: 100;
    position: fixed;
    top:0;
    width: 100vw;
    height: $header_height;
  }
  main[role="main"]{
    // flex: 1 1 auto; 
    overflow-y: scroll;
  }
  footer[role="contentinfo"]{
    // flex: 0 1 content; 
    z-index: 100;
    position: fixed;
    bottom: 0;
    width: 100vw;
  }
}




header[role="banner"]{ 
  background-color: #fff;
  box-shadow: 0 -5px 15px #000;
  
  .header-middle{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0.2em 2em;
  }
  
  #block-mathallo-formulairederecherche{
    form{
      display: flex;
      align-items: baseline;
    }
  }
  
  #block-mathallo-identitedusite{
    a{
      color: $bleu_site;
      text-decoration: none;
      font-family: 'Fredoka';
      font-size: 2em;
      text-transform:uppercase;
      font-weight: 500;
    }
  }

  .header-right{
    // position: relative;
    height:20px; width:20px;
    cursor: pointer;
    // background-color: green;

    >div#burger-btn{
      position:relative;
      transition-duration: 0.5s;
      top: 8.5px;
      &, &::before, &::after{
        // position: absolute;
        width:20px; height:3px;
        background-color: $bleu_site;
      }
      &::before, &::after{
        content: "";
        position: absolute;
        left: 0;
        // background-color: red;
      }
      &::before{
        top:6px;
      }
      &::after{
        bottom: 6px;
      }

      &[opened]{
        transform: rotate(90deg);
      }
    }
    

    &>div.wrapper{
      position:absolute;
      top:$header_height; left:0;
      // z-index: 99;
      background-color: rgba(0,0,0,0.75);

      width:100vw;
      height: 0;
      overflow: hidden;
      transition-duration: 0.5s;
      &[opened]{
        height: calc(100vh - $header_height);
      }
      &>nav{
        padding-top: 10px;
        background-color: #fff;
        >ul{
          margin: 0;
        }
      }

      nav#block-mathallo-contenu{
        padding: 1em;
        ul,li{
          padding: 0;
          margin:0;
          list-style: none;
        }
        li{
          padding:0 0 1em 0;
          &:first-child{
            padding:0.25em 0 1em;
          }
        }
        label{
          color:$bleu_site;
          font-weight: 600;
          display: block;
          font-size: 0.756em;
          padding:0 0 0.25em 0;
          &:has(+ a:hover){
            color: $rose;
          }
        }
        a{
          font-size: 1.13em;
        }
        &>ul{ // chapitres
          display: flex;
          flex-direction: row;
          gap: 2em;
         >li{
          >ul{ // parties
            margin:0.75em 0 0;
            padding:0 0 0 1em;
            border-left: 2px solid $bleu_site;
            >li{
            }
          }

         }
        }
      }
      nav#block-mathallo-navigationprincipale{
        padding: 2em 1em;
        ul{
          display: flex;
          justify-content: flex-end;
          list-style: none;
          li{
            margin-right: 1em;
            background-color: $bleu_site;
            color: #fff;
            padding:0.5em 1em;
            &:not(:last-child){
            }
          }
        }
      }
    }

  }
} // end of header[role="banner"]{

main[role="main"]{
  div.layout-content{
    padding:5em 0;
    article{
      position: relative;
      background-color: #fff;
      padding:2em;
      box-shadow: 0 0 10px rgba(0,0,0,0.25);
      max-width: 50em;
      margin: 5em auto 0;

      h2{
        @include titre_h2;
        margin:0;
      }
      div.field-chapitre-num{
        background-color: $bleu_site;
        color: #fff;
        display: inline-flex;
        gap: 0.5em;
        padding: 0.5em 1em;
        // transform: translateY(-3em);
        position: absolute;
        top:-1em;
        &>*{
          font-weight: 600;
        }
      }

    }
    // HOME
    div.views-home-chapitres{
      display: flex;
      gap: 2em;
      padding:1em;
      >.views-row{
        max-width: 700px;

        article.node-type-chapitre{
          h2{
            @include titre_h3;
          }
        }
      }

    }
  }
}


footer[role="contentinfo"]{
  background-color: #fff;
  box-shadow: 0 5px 15px #000;
  padding: 0.2em 2em;  
  #block-mathallo-navigationprincipale-2{
    ul{
      display: flex;
      list-style: none;
      padding: 0;
      li:not(:first-child){
        margin-left: 1em;

      }
      a{
        color: $bleu_typo;
      }
    }
  }

}