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

a, a:visited{
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease-out;
}

body{
  margin: 0;
}

$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"]{
  position: relative;
  &>div.layout-content{
    position: relative;

    div#parallax-bg{
      position: absolute;
      z-index: -1;
      top:0;
      left: 0;
      margin-top: -40vh;
      width: 100vw;
      height:400%;


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

      // mask: linear-gradient(white, white) content-box, linear-gradient(white, white);

    }

    // div#custom-cursor{
    //   position: absolute;
    //   top:40vh; left:50vh;
    //   display: block;
    //   $wh:100px;
    //   width:$wh; height:$wh;
    //   border-radius: $wh / 2;
    //   background-color: #000;
    //   // mix-blend-mode:color;
    //   mask-composite: exclude;
    // }

    &>.wrapper{
      position:relative;
      padding-bottom: 100vh;
    }
    // next chapitre
    nav.prev-chapitre,
    nav.next-chapitre{
      position:absolute;
      top:-10em;
      
      
      padding: 0.5em 1em;
      @include menu-contenus;

      .wrapper{
        position: relative;
      }
      ul{
        margin:0;
        padding-left: 0.5em;
        li{
          list-style: none;
          display: none;
        }
      }

      // prev
      &.prev-chapitre{
        left:0;
        a:after{
          transform: rotate(180deg);
        }
        li:has(+ li.in-active-trail){
          display: block;
        }
      }

      // next
      &.next-chapitre{
        right:0;
        li.in-active-trail + li{
          display: block;
        }
      }

      // common
      label{
        background-color: $bleu_site;
        color: #fff;
        padding: 0.5em 1em; 
        z-index: 2;
        top:-3em;
      }
      a{
        display: block;
        padding:0.5em 1em;

        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.25);
        border: white 1px solid;
        transition: border-color 0.5s;
        &:hover{
          border-color: $rose;
        }
        &:after{
          content:"";
          @include arrow-white();
          position:absolute;

          box-shadow: 0 0 10px rgba(0,0,0,0.25);
          top:calc(100% + 0.5em);
          left: calc(50% - 15px);
        }
      }
    }

    // more
    ul.links{
      margin:0;
      padding:0;
      position: absolute;
      top:calc(100% - 15px);
      left: calc(50% - 15px); 
      li{
        list-style: none;
        a{
          @include arrow-blue;
        }
      }
    }


    // arrox
    nav.arrow-more{
      position: absolute;
      top:calc(100% - 15px);
      left: calc(50% - 15px); 
      a.arrow{
        @include arrow-blue;
      }

    }
    
    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-size: 1.2em;
        &>*{
          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;
          &>*>*{
            opacity: 1;
          }
        }
        @mixin back-card{
          z-index: 1;
          background-color: rgba(247,247,247,1);
          &>*>*{
            opacity: 0.6;
          }
        }

        &.field-principes-reflexion{
          @include front-card();
        }
        &.field-en-pratique{
          margin-left: -50%;
          transform: translateY(2em);
          @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;
          }
        }
      }

    }

    // FORMES
    .bg-forme{
        position: absolute;
        // background-color: red;
        width:300px; height:300px;
        top:50%;
        left:-300px;

        z-index: -1;

        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;


        // &.pyramide{ background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg'); }
        // &.infinite{ background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg'); }
        // &.prct{ background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg'); }
        // &.pi{ background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg'); }
        // &.supeg{ background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg'); }
        // &.cone{ background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg'); }
        // &.cube{ background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg'); }
        // &.diamant{ background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg'); }
        // &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
        // &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }

        svg{
        //   width: 100%;
        //   height: 100%;
          path,line,rect,circle,ellipse,polygon,polyline{
            vector-effect: non-scaling-stroke;
            stroke-width: 1px!important;
          }

        }
  }
}

// ______          _            
// |  ___|        | |           
// | |_ ___   ___ | |_ ___ _ __ 
// |  _/ _ \ / _ \| __/ _ \ '__|
// | || (_) | (_) | ||  __/ |   
// \_| \___/ \___/ \__\___|_|   
                             
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;
      }
    }
  }

}
