@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/Proxima-Nova-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    "Proxima Nova",
    Arial,
    sans-serif,
    serif;
  line-height: 1.5;
}

.main-header {
  background-color: var(--primary-color);
}

body {
  color: var(--primary-text-color);
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-standart);
}

h2 {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-standart);
}

h3 {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-standart);
}

h4 {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-standart);
}

h5 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-standart);
}

a {
  color: var(--external-link-color);
  text-decoration: none;
}

.nav-path {
  display: none;
  color: var(--secondary-text-color);

  @media (min-width: 768px) {
    display: flex;
    align-items: center;
    margin: 0.5rem 1rem 0rem 1rem;
    gap: 0.25rem;
  }
}

.main-nav {
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--tertiary-text-color);
    font-size: var(--font-size-m);
  }

  .nav-desktop {
    display: none;

    @media (min-width: 768px) {
      display: inline-flex;
      font-size: var(--font-size-m);
    }
  }

  .nav-mobile {
    display: flex;

    @media (min-width: 768px) {
      display: none;
    }
  }

  .main-nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    list-style: none;

    .logo-item {
      a {
        img {
          width: 5.5rem;
          height: auto;
        }
      }
    }

    .nav-account {
      a {
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;

        @media (min-width: 1024px) {
          flex-direction: row;
          text-align: center;
        }

        img {
          width: 1.5rem;
          height: 1.5rem;
        }

        span {
          font-size: var(--font-size-xs);

          @media (min-width: 1024px) {
            font-size: var(--font-size-m);
          }
        }
      }
    }

    nav-item {
      img {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
}

.bottom-image-pictures {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-bottom: 1px solid var(--primary-border-color);
  gap: 1rem;

  @media (min-width: 768px) {
    display: none;
  }

  .bottom-plattegrond-pictures {
    .media-options {
      li {
        list-style-type: none;
      }
      .media-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        width: 3.9rem;
        height: 4rem;
        overflow: hidden;
        border-radius: 0.25rem;

        .svg-wrapper {
          position: absolute;
          top: 1rem;
          width: 2rem;
          height: 2rem;
          padding: 0.25rem;
          background-color: var(--primary-svg-background-color);
          border-radius: 50%;
        }
      }
    }
  }

  .bottom-360-picture {
    .media-options {
      li {
        list-style-type: none;
      }
      .media-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        width: 3.9rem;
        height: 4rem;
        overflow: hidden;
        border-radius: 0.25rem;

        .svg-wrapper {
          position: absolute;
          top: 1rem;
          width: 2rem;
          height: 2rem;
          padding: 0.25rem;
          background-color: var(--primary-svg-background-color);
          border-radius: 50%;
        }
      }
    }
  }

  .bottom-video-picture {
    .media-options {
      li {
        list-style-type: none;
      }
      .media-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        width: 3.9rem;
        height: 4rem;
        overflow: hidden;
        border-radius: 0.25rem;

        .svg-wrapper {
          position: absolute;
          top: 1rem;
          width: 2rem;
          height: 2rem;
          padding: 0.25rem;
          background-color: var(--primary-svg-background-color);
          border-radius: 50%;
        }
      }
    }
  }

  .bottom-3dtour {
    .media-options {
      li {
        list-style-type: none;
      }
      .media-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        width: 3.9rem;
        height: 4rem;
        overflow: hidden;
        border-radius: 0.25rem;

        .svg-wrapper {
          position: absolute;
          top: 1rem;
          width: 2rem;
          height: 2rem;
          padding: 0.25rem;
          background-color: var(--primary-svg-background-color);
          border-radius: 50%;
        }
      }
    }
  }
}

.main-listing-info {
  position: relative;
  margin: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--primary-border-color);

  .listing-price-info-mobile {
    @media (min-width: 768px) {
      display: none;
    }
  }

  a {
    display: flex;
    gap: 0.188rem;
  }

  dl {
    display: flex;
    gap: 0.25rem;

    dd {
      @media (min-width: 768px) {
        font-weight: var(--font-weight-standart);
      }
      span {
        display: none;
        color: var(--secondary-text-color);
        font-weight: 500;

        @media (min-width: 768px) {
          display: inline-flex;
        }
      }
    }
  }

  .new-span {
    padding: 0.188rem 0.5rem;
    color: var(--tertiary-text-color);
    margin-bottom: 0.5rem;
    background-color: var(--primary-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-standart);
    border-radius: 0.25rem;
  }

  .listing-adress-info {
    span {
      color: var(--external-link-color);
    }
  }

  .monthly-payments-desktop {
    display: none;
    align-items: center;
    gap: 1rem;
    @media (min-width: 768px) {
      display: flex;
    }
  }

  .mortage-calculator-link {
    @media (min-width: 768px) {
      display: none;
    }
  }
}

.listing-description {
  position: relative;
  margin: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--primary-border-color);
}

.features {
  .small-advertisement-section {
    padding: 1rem;
    background-color: rgb(238 239 245);
    border: 1px solid var(--primary-border-color);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;

    .advertisement-link {
      display: inline-block;
      margin-top: 0.5rem;
      padding: 3px 12px;
      border: 1px solid var(--external-link-color);
      border-radius: 0.25rem;
    }

    img {
      width: auto;
      height: 24px;
    }

    @media (min-width: 768px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1rem;
    }
  }

  #transfer {
    border-bottom: 1px solid var(--primary-border-color);
    border-radius: 10px 10px 0 0;
    padding-bottom: 1rem;
    .login-content {
      color: var(--external-link-color);
    }
  }

  section {
    h3 {
      display: flex;
      gap: 0.5rem;
      padding: 0.5rem 0.5rem 0 0.5rem;
    }
    border: 1px solid var(--primary-border-color);
    border-radius: 0.5rem;
    margin-top: 1rem;
    dl {
      margin: 0.5rem 0.5rem 0 0.5rem;
      @media (min-width: 768px) {
        display: grid;
        grid-template-columns: 2fr 3fr;
      }
      dd {
        grid-column: 2;
        margin: 0;
        padding: 0.5rem;
        display: flex;
        gap: 1em;
        border-top: 1px solid var(--primary-border-color);
      }
      dt {
        grid-column: 1;
        padding: 0.5rem;
        color: var(--secondary-text-color);
        border-top: 1px solid var(--primary-border-color);
      }
    }
  }
  position: relative;
  margin: 1rem;
}

.kaart {
  position: absolute;
  top: 0.313rem;
  right: 0;
  width: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.5rem;
}

.main-image-pictures {
  position: relative;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0.5rem 1rem 1rem 1rem;
    gap: 0.2rem;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;

    .primary-picture {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .secondary-picture {
    display: none;

    @media (min-width: 768px) {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  img {
    max-width: 100%;
    display: block;
  }

  .main-image-buttons {
    display: flex;
    position: absolute;
    top: 0.438rem;
    right: 0.188rem;
    gap: 0.5rem;

    .liked-heart {
      width: 1.5rem;
      height: 1.5rem;
      fill: transparent;
      stroke: var(--external-link-color);
      stroke-width: 24;
      max-width: 100%;
    }

    button:nth-of-type(2) {
      span {
        display: none;

        @media (min-width: 1024px) {
          display: inline;
          font-size: var(--font-size-m);
        }
      }
    }

    .is-liked .liked-heart {
      fill: var(--external-link-color);
      animation-name: pop-animation;
      animation-duration: 0.2s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
    }
  }
}

.desktop-media-options {
  display: none;

  @media (min-width: 768px) {
    display: flex;
    margin-left: 1rem;
  }

  nav {
    width: 100%;

    ul {
      list-style: none;
      display: flex;
      gap: 2rem;

      li {
        a {
          display: flex;
          align-items: center;
          gap: 0.5rem;

          span:nth-of-type(2) {
            display: none;
            color: var(--secondary-text-color);

            @media (min-width: 1024px) {
              display: flex;
            }
          }
        }
      }
    }
  }

  li:nth-of-type(5) {
    margin-left: auto;
    margin-right: 1rem;
  }
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--tertiary-text-color);
  color: var(--external-link-color);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--external-link-color);
  border-radius: 0.313rem;
  cursor: pointer;
}

/* Footer styling */
/* Footer word nog gemaakt */
footer {
  border-top: 1px solid var(--primary-border-color);
  background-color: var(--primary-footer-background);

  .desktop-footer {
    display: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem 2.5rem;

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        a {
          display: inline-block;
          margin-bottom: 0.65rem;
          font-size: var(--font-size-m);
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }
        strong {
          display: block;
          margin-bottom: 1rem;
          font-size: var(--font-size-m);
          font-weight: var(--font-weight-standart);
          color: var(--primary-text-color);
        }
      }
    }

    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .mobile-footer {
    padding: 1.5rem 1rem 2rem;

    details {
      border-bottom: 1px solid var(--primary-border-color);

      ul {
        list-style: none;
        padding: 0 0 1rem;
        margin: 0;

        li {
          a {
            display: block;
            padding: 0.5rem 0;
            font-size: var(--font-size-m);
            color: var(--external-link-color);
            text-decoration: none;
          }

          a:hover {
            text-decoration: underline;
          }
        }
      }

      summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        font-size: var(--font-size-m);
        font-weight: var(--font-weight-standart);
        color: var(--primary-text-color);
      }

      summary::after {
        content: "";
        width: 0.3rem;
        height: 0.3rem;
        border-right: 2px solid var(--external-link-color);
        border-bottom: 2px solid var(--external-link-color);
        transform: rotate(45deg);
        transition: transform 0.25s ease;
      }
    }

    details[open] summary::after {
      transform: rotate(-135deg);
    }

    @media (min-width: 768px) {
      display: none;
    }
  }
}