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

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;
  }
  nav[role="breadcrumb"]{
    // flex: 1 1 auto; 
    position: fixed;     
    z-index: 90;
    top:$header_height + 30px;
    left: 15px;
  }
  main[role="main"]{
    // flex: 1 1 auto; 
    padding:5em 0;
    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;

      &:hover{
        color: $rose;
      }
    }
  }

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

    >div#burger-btn{
      position:relative;
      transition-duration: 0.5s;
      transition-property: transform;
      top: 8.5px;
      &, &::before, &::after{
        // position: absolute;
        width:20px; height:3px;
        background-color: $bleu_site;
        
      }
      &:hover{
        &, &::before, &::after{
          background-color: $rose;
        } 
      }
      &::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;
        @include menu-contenus;
        li{
          padding:0 0 1em 0;
          &:first-child{
            padding:0.25em 0 1em;
          }
        }
        &>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"]{


// ______                    _                           _     
// | ___ \                  | |                         | |    
// | |_/ /_ __ ___  __ _  __| | ___ _ __ _   _ _ __ ___ | |__  
// | ___ \ '__/ _ \/ _` |/ _` |/ __| '__| | | | '_ ` _ \| '_ \ 
// | |_/ / | |  __/ (_| | (_| | (__| |  | |_| | | | | | | |_) |
// \____/|_|  \___|\__,_|\__,_|\___|_|   \__,_|_| |_| |_|_.__/ 

nav[role="breadcrumb"]{ 
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
  padding:0em;

  ul{
    margin:0;
    padding-left: 0.5em;
    li{
      list-style: none;
    }
  }
  #block-mathallo-contenu-2{
    padding: 0.5em 1em;
    @include menu-contenus;
    li:not(.in-active-trail){
      display: none;
    }
    ul,li{
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 1em;
    }
    a{
      font-size: 1em;
    }
    &>ul>li>ul>li{
      padding-left: 1em;
      border-left: 2px solid $bleu_site;
    }
  }
}


// ___  ___      _       
// |  \/  |     (_)      
// | .  . | __ _ _ _ __  
// | |\/| |/ _` | | '_ \ 
// | |  | | (_| | | | | |
// \_|  |_/\__,_|_|_| |_|
                      
main[role="main"]{
  div.layout-content{
    
    article{
      
      @include card;
      
      h2{
        @include titre_h2;
        margin:0;
        a:hover{
          color: $rose;
        }
      }
      div.field-chapitre-num,
      div.field-partie-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;
        }

      }

    }
    article.node-type-chapitre{
      
    }

    // Page Chapitres
    section.parties{
      display: flex;
      gap: 2em;
      padding:1em;
    }

    // Page Partie
    section.field-card{
      @include card;

      h3{
        @include titre_h3;
      }

      &.field-en-pratique{
        div.field-label{
          text-align: right;
        }
      }

      &.field-ressources,
      &.field-plus-loin{
        .field-label{
          @include titre_h3;
          padding-bottom: 1em;
        }
        div.paragraph{
          padding-bottom: 1em;
        }
        p{
          margin: 0 0.25em;
        }
      }

      &.field-ressources{
        div.paragraph--type--ressource{
          .field_titre{
            background-color: $bleu_site;
            color: #fff;
            border-radius: 2em;
            display: inline-block;
            padding: 0.5em 1em;
            &>div{
              @include titre_h4;
              color:#fff;
            }
          }
        }
      }
      &.field-plus-loin{
        div.paragraph--type--complement{
          .field_titre{
            @include titre_h4;
            color: $bleu_site;
          }
        }
      }
    }
    div#partie-principes-pratique{
      position: relative;
      display: flex;
      gap: 0px;
      section.field-card{
        @mixin front-card{
          z-index: 2;
          background-color: #fff;
        }
        @mixin back-card{
          z-index: 1;
          background-color: #eee;
        }

        &.field-principes-reflexion{
          @include front-card();
        }
        &.field-en-pratique{
          margin-left: -50%;
          margin-top: 7em;
          @include back-card();
        }
        &.field-principes-reflexion,
        &.field-en-pratique{
          transition: background-color 0.25s ease-out;
          &.back-card{
            @include back-card();
          }
          &.front-card{
            @include front-card();
          }
        }

      }
    }

    // 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;
      }
    }
  }

}