@import 'fonts.scss';

$body-margin-x: 30px;
$body-margin-y: 5px;
$body-margin-bottom: 4vh;

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

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

$menu-width: 15vw;
$menu-margin: 2rem;

body{
  font-family: 'Marianne', sans-serif;
  color: $main-color;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  .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: 10vw;
          margin-top: 1.8vh;
          position: fixed;
          right: $body-margin-x;
          > #menu-title {
            display: flex;
            z-index: 2;
            background-color: $brand-color;
            position: fixed;
            width: $menu-width;
            right: 0;
            top: 0;
            padding-top: 2.8vh;
            margin-right: $body-margin-x;
            padding-bottom: 10px;
            max-height: 0vh;
            overflow: hidden;
            height: 5vh;
            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
            opacity: 0;
            align-items: center;
            > p {
              padding-left: $menu-margin;
              margin: 10px 0;
              color: white;
              font-size: $l-font-size;
              font-family: 'Joost', sans-serif;
              font-weight: bold;
            }
          }
          > #menu-title.open {
            opacity: 1;
            max-height: 5vh;
          }
          > #menu {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            > h2 {
              z-index: 2;
              margin-block: 0;
              font-size: $sm-font-size;
              color: $main-color-light;
              font-weight: normal;
              margin-bottom: 5px;
            }
            > h2 {
              display: none;
            }
            > #hamburger {
              position: fixed;
              height: 5vh;
              right: 0;
              top: 0;
              margin-right: $body-margin-x;
              padding-top: 2.8vh;
              padding-bottom: 10px;
              z-index: 2;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 2.4rem;
              transition: transform 0.3s ease-out;
              > div {
                width: 100%;
                height: 3px;
                margin: 4px 0;
                border-radius: 2px;
                background-color: $main-color-light;
                opacity: 1;
                transition: transform 0.5s, opacity 0.2s;
              }
            }
            > #hamburger:hover {
              transform: scale(1.1);
            }
            > #hamburger.open {
              transform: scale(0.7) translateX(-20px);
              > div {
                background-color: white;
              }
              > div:first-of-type {
                transform: rotate(45deg);
                margin-top: 50%;
              }
              > div:last-of-type {
                transform: rotate(-45deg);
                margin-top: -50%;
              }
              > div:nth-child(2) {
                opacity: 0;
              }
            }
            > #hamburger.open:hover {
              transform: scale(0.75) translateX(-20px);
            }
            > ul {
              list-style-type: none;
              background-color: white;
              position: fixed;
              width: $menu-width;
              right: $body-margin-x;
              padding: 0;
              padding-top: 1.5rem;
              padding-bottom: 1.5rem;
              top: -5vh;
              opacity: 0;
              transition: top 0.3s ease-out, opacity 0.2s ease-out;
              z-index: 1;
              > li {
                padding-left: $menu-margin;
                margin: 15px 0;
                > a {
                  color: $main-color;
                  text-decoration: none;
                }
                > a.is-active::before,
                > a:hover::before {
                  content: '→';
                  color: $brand-color;
                  width: 2rem;
                  display: inline-block;
                  opacity: 1;
                }
                > a::before {
                  content: '→';
                  color: $brand-color;
                  opacity: 0;
                  display: inline-block;
                  width: 0rem;
                  transition: width 0.2s ease-out, opacity 0.2s ease-out;
                }
              }
            }
            > ul.open {
              opacity: 1;
              top: 7vh;
            }
          }
        }
      }
    }
    > 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
                .leaflet-control-zoom {
                  border: none;
                  margin: 0;
                  left: $body-margin-x;
                  bottom: $body-margin-bottom;
                  > a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: $m-font-size;
                    font-family: 'marianne', sans-serif;
                    font-weight: lighter;
                    width: 4vh;
                    height: 4vh;
                  }
                  > a:first-of-type {
                    border-top-left-radius: 2vh;
                    border-top-right-radius: 2vh;

                  }
                  > a:last-of-type {
                    border-bottom-left-radius: 2vh;
                    border-bottom-right-radius: 2vh;
                    > span {
                      padding-bottom: 10px;
                    }
                  }
                }
                .leaflet-right {
                  right: unset;
                  left: 0;
                }
                .leaflet-map-divicon {
                  width: 10px;
                  height: 30px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  transition: transform 0.3s ease-out;
                  > div {
                    background-color: red;
                    display: block;
                    width: 20px;
                    height: 10px;
                    }
                  > div:first-of-type {
                    height: 8px;
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                    transform: rotate(180deg);
                  }
                  > div:last-of-type {
                    height: 8px;
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                  }
                }
              }
              .leaflet-tooltip-center {
                width: 20vw;
                padding: 0;
                border-radius: none;
                box-shadow: none;
                opacity: 1 !important;
                border-radius: 0 !important;
                background-color: transparent;
                border: none;
                pointer-events: none;
                > div {
                  display: grid;
                  grid-template-columns: minmax(10px, 10vw) 10vw;
                  grid-template-rows: 1.5fr 0.5fr;
                  transform: translateY(-60%);
                  background-color: white;
                  opacity: 0;
                  transition: opacity 0.3s ease-out;
                  > div:first-of-type {
                    grid-column: 1 / span 1;
                    grid-row: 1 / span 1;
                    font-family: 'Joost', sans-serif;
                    font-size: $m-font-size;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding-top: 10px;
                    padding-left: 20px;
                    padding-right: 20px;
                    text-wrap: wrap;
                    > a {
                      font-weight: bold;
                      text-decoration: none;
                      color: $main-color;
                      padding-right: 10px;
                    }
                  }
                  > div:nth-of-type(2) {
                    grid-column: 1 / span 1;
                    grid-row: 2 / span 1;
                    text-align: center;
                    padding: 10px 0;
                    > time {
                      font-size: $sm-font-size;
                      font-family: 'Marianne', sans-serif;
                      font-weight: lighter;
                    }
                  }
                  > a {
                    display: block;
                    grid-column: 2 / span 1;
                    grid-row: 1 / span 2;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    > div {
                      width: 100%;
                      display: block;
                      padding: 0;
                      background-color: blue;
                      max-height: 0;
                      > img {
                        padding: 0;
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                        margin: 0;
                        display: block;
                      }
                    }
                  }

                }
              }
            } 
            > .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 {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    margin: 30px 0;
                    transform: scale(1);
                    opacity: 1;
                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                    cursor: pointer;
                    > .infos-arret {
                      display: grid;
                      grid-template-columns: auto auto;
                      grid-template-rows: auto auto;
                      justify-content: end;
                      margin-right: 20px;
                      p {
                        margin: 0;
                      }
                      > .views-field-title {
                        grid-column: 1 / span 1;
                        grid-row: 1 / span 1;
                        margin-right: 10px;
                        a {
                          text-decoration: none;
                          color: $main-color;
                          font-family: 'Joost', sans-serif;
                          font-weight: bold;
                          font-size: $m-font-size;
                          display: inline-block;
                          text-align: right;
                        }
                      }
                      > .views-field-field-adresse-postal-code {
                        grid-column: 2 / span 1;
                        grid-row: 1 / span 1;
                        color: $main-color;
                        font-family: 'Joost', sans-serif;
                        font-weight: lighter;
                        font-size: $m-font-size;
                        align-self: end;
                        > span {
                          > p::before {
                            content: '(';
                          }
                          > p::after {
                            content: ')';
                          }
                        }
                        
                      }
                      > .views-field-field-dates {
                        grid-column: 1 / span 2;
                        grid-row: 2 / span 1;
                        font-size: $sm-font-size;
                        font-family: 'Marianne', sans-serif;
                        font-weight: lighter;
                        text-align: right;
                        margin-top: 7px;
                      }
                      > .views-field-field-couleur {
                        display: none;
                      }
                    }
                    > .icone-arret {
                      width: 10px;
                      height: 30px;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      > div {
                        background-color: red;
                        display: block;
                        width: 20px;
                        height: 10px;
                        }
                      > div:first-of-type {
                        height: 8px;
                        clip-path: polygon(0 0, 100% 0, 50% 100%);
                        transform: rotate(180deg);
                      }
                      > div:last-of-type {
                        height: 8px;
                        clip-path: polygon(0 0, 100% 0, 50% 100%);
                      }
                    }
                  }
                  > li:hover {
                    transform: scale(1.05);
                  }
                  > li.inactive {
                    opacity: 0.6;
                  }
                }
              }
            } 
          }
        }
      }
      > #content-modale > div {
        z-index: 2;
        position: relative;
        top: 15vh;
        left: 25vw;
        width: 50vw;
        background-color: white;
        img {
          width: 100%;
          height: auto;
        }
        > div {
          width: 100%;
          overflow: hidden;
        }
      }
    }
  } 
}