/* FONT Gotham */
@font-face {
    font-family: 'Gotham Regular'; /*a name to be used later*/
    src: url("./font/Gotham/Gotham-Medium.otf"); /*URL to font*/
}

@font-face {
    font-family: 'Gotham Bold'; /*a name to be used later*/
    src: local("./font/Gotham/Gotham/Gotham-Bold"); /*URL to font*/
}

body {
  font-family: 'Gotham Regular', sans-serif;
}

h1 {
  font-size: 48px;
  line-height: 48px;
}

.home-image {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  max-width: 70%;
  justify-content: flex-end;
  
  @media (max-width: 991px) {
    position: static;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: block;
    margin-top: 20px;
  }
  
  img {
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    
    @media (max-width: 991px) {
      width: 100%;
      max-height: none;
      object-fit: cover;
    }
  }
}

/* Lo metto a transparent così posso comunque sfruttare il css già settato per quello inverse */
.navbar.navbar-inverse{
  background-color: transparent;
  border: none;

}

.navbar-inverse .navbar-nav{
  & > li > a {
    color: #dcdee0;
  }
}

.px-75 {
  padding-left: 75px;
  padding-right: 75px;

  @media (max-width: 991px) {
    padding-left: 40px;
    padding-right: 40px;
  }

  @media (max-width: 768px) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;

  @media (max-width: 768) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.home {
  #wrapper {
    background-color: #528DC9;
  }
  
  .article {
    margin-bottom: 0 !important;
  }

  .navbar {
    .custom-li {
      a {
        color: #528DC9;
        font-size: 20px;

        @media (max-width: 991px) {
          color: #dcdee0;
        }
      }
    }

    #search-query {
      color: white;
    }

    #search.search-result-open {
      & + .nav {
        .custom-li {
          a {
            color: white
          }
        }
      }
    }
  }

  footer {
    display: none !important;
  }
}

.custom-article {

  .home-image {
    display: none;
  }

  header {
    background-color: #528DC9;
    .navbar {
      #search {
        #search-query {
          color: white;
          border-width: 0px;
          &::placeholder {
            color: white;
          }
        }
      }
    }
  }

  #wrapper {
    background-color: #EDF2F4;
  }

  #_content {
    padding: 50px 33% 0 35px;
    img {
      border-radius: 10px;
    }

    @media (max-width: 991px) {
      padding: 0
    }
  }

  .article.row.grid-right {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    
    @media (max-width: 768px) {
      margin-left: -15px; /* Riapplichiamo il margin sx della row... */
      margin-top: 0 !important;
    }
  }

  .sideaffix {
    right: 0;
    width: 16.66666667%;
    margin-top: 100px;
    overflow-y: scroll;

    scrollbar-width: none; /* for Firefox */
    -ms-overflow-style: none; /* for Internet Explorer, Edge */

    ::-webkit-scrollbar {
      display: none; /* for Chrome, Safari, and Opera */
    }

    #affix {
      h4 {
        font-size: 20px;
        margin-bottom: 10px;
      }

      ul > li.active {
        & > a {
          color: #9EAFD1;
        }
      }

      ul > li > a { 
        padding: 0 0 12px 0;

        &::before {
          display: none;
        }
        & + ul > li > a {
          margin-left: 15px;
        }
      }
    }
  }

  .sidenav {

    a[data-toggle="collapse"]{
      margin: 0 15px 15px 15px;
    }

    .sidefilter {
      top: 105px; /* Altezza dell'header */
      left: 0;
      padding: 30px 50px 0 50px;
      width: 284px;
      background-color: #97BBDF;
      border: 0;
      color:black;

      @media (max-width: 768px) {
        width: 100%;
        padding: 30px 20px 30px 20px;
      }

      .toc-filter {
        background: #edf2f460;
        height: 41px;
        border-radius: 10px;

        & > .clear-icon {
          top: 14px;
        }
      }
      #toc_filter_input {
        background-color: transparent;
        color: white;
        padding-left: 16px;
        padding-right: 16px;
        height: 100%;
        &::placeholder {
          color: white;
        }
      }
    }
    
    .sidetoc {
      background-color: #97BBDF;
      top: calc(105px + 71px); /* Altezza header + .sidefilter */
      left: 0;
      width: 284px;
      border: none;

      @media (max-width: 768px) {
        width: 100%;
      } 
      
      scrollbar-width: none; /* for Firefox */
      -ms-overflow-style: none; /* for Internet Explorer, Edge */

      ::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
      }

      /* Override classe shiftup */
      &.shiftup {
        bottom: 51px /* Altezza footer */
      }
      
      #toc {
        background-color: transparent;
        padding: 0 30px 30px 30px;

        .nav.level1 {
          .custom-li {
            color: white;
            font-size: 20px;
          }

        }
        .nav.level2 {
          .custom-li {
            font-size: inherit;
            margin-top: 10px;
          }
        }
        .custom-li {
          margin-top: 22px;
          
          a {
            color:black;
          }

          &.active {
            a.active {
              color: white;
            }
          }
        }
        .expand-stub {
          display: none;
        }
      }
    } 
  }
}

.navbar {

  .navbar-header {
    margin-top: 17px;

    & + #navbar {
      border: none;
      box-shadow: none;
    }

    .navbar-toggle {
      margin-right: 0;
      @media (max-width: 768px) {
        margin-top: 5px; /* Match navbar-toggle */
      } 
    }

    .navbar-brand {
      color: #EF233C;
      display: flex;
      align-items: center;
      height: fit-content;

      img {
        cursor: pointer;
      }

      @media (max-width: 768px) {
        margin-top: 8px; /* Match navbar-toggle */
      } 
    }
  }

  ul.navbar-nav {
    float: right;
    @media (max-width: 768px) {
      float: none;
    } 
  }

  .custom-li {
    a {
      line-height: 35px;
    }
    &.active {
      a {
        background-color: transparent !important;
        color:white
      }
    }
  }

  #search {
    margin-top: 17px;
    border: none;
    box-shadow: none;
    #search-query {
      background-color: #CBDDEF;
      border-radius: 10px;
      border-width: 0;
      box-shadow: none;
      &::placeholder {
        color: #528DC9;
      }
    }
  }
}