@import 'fonts.scss';

$body-margin-x: 30px;
$body-margin-y: 5px;

$sm-font-size: 0.8rem;
$m-font-size: 1.4rem;

$main-color: #1a1918;
$main-color-light: #635b58;
$light-color: #faf1eb;

body{
  font-family: 'Marianne', sans-serif;
  color: $main-color;
  margin: 0;
  padding: 0;
  .layout-container > header {
    z-index: 2;
    position: relative;
    > div {
      padding: $body-margin-y $body-margin-x 0 $body-margin-x;
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      > #block-caravane-logorepublique {
        grid-column: 1 / span 1;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-logoepau {
        grid-column: 2 / span 2;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-logocaravane {
        grid-column: 7 / span 4;
        display: flex;
        align-items: center;
        > div > div > a > img {
          width: 100%;
          height: auto;
        }
      }
      > #block-caravane-mainnavigation {
        display: flex;
        justify-content: flex-end;
        grid-column: 16 / span 1;
        width: 100%;
        > div {
          width: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          cursor: pointer;
          > h2 {
            margin-block: 0;
            font-size: $sm-font-size;
            color: $main-color-light;
            font-weight: normal;
            margin-bottom: 5px;
          }
          > #hamburger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            > div {
              width: 100%;
              height: 3px;
              margin: 4px 0;
              border-radius: 2px;
              background-color: $main-color-light;
            }
          }
          > ul {
            display: none;
          }
        }
      }
    }
  }
  .layout-container > main {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    > .layout-content {
      z-index: 1;
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      > div {
        height: 100%;
        > .layout {
          display: grid;
          grid-template-columns: repeat(16,1fr);
          align-items: center;
          height: 100%;
          > .layout__region--first {
            padding-left: $body-margin-x;
            grid-column: 1 / span 4;
            position: relative;
            z-index: 2;
            pointer-events: none;
            width: fit-content;
            > div {
              pointer-events: auto;
            }
          } 
          > .layout__region--second {
            position: absolute;
            z-index: 1;
            top: 0;
            width: 100vw;
            .leaflet-container {
              // add map style here
            }
          } 
          > .layout__region--third {
            padding-right: $body-margin-x;
            height: 100%;
            grid-column: 13 / span 4;
            position: relative;
            z-index: 2;
            background: linear-gradient(to right, transparent, #faf1eb);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            pointer-events: none;
            > div {
              pointer-events: auto;
              ul {
                list-style: none;
                > li > div {
                  display: flex;
                  justify-content: flex-end;
                  a {
                    text-decoration: none;
                    color: $main-color;
                    font-family: 'Joost', sans-serif;
                    font-weight: bold;
                    font-size: $m-font-size;
                    display: inline-block;
                    margin: 15px 0;
                    text-align: right;
                  }
                }
              }
            }
          } 
        }
      }
    }
    > #etape-modale > div {
      z-index: 2;
      position: relative;
      top: 15vh;
      left: 25vw;
      width: 50vw;
      background-color: rgba(255,255,255,0.5);
    }
  }
}