@font-face {
  font-family: "BuurtCampusArial-Bold";
  src: url("fonts/BuurtCampusArial-Bold.ttf");
  font-weight: bold;
}

html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
}

/* HEADER */
header {
  display: grid;
  place-items: center;
  padding: 1rem;

  @media (min-width: 768px) and (max-width: 1200px) {
    display: flex;
    justify-content: space-between;
  }

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

nav {
  display: flex;
  flex-grow: 1;
  justify-content: center;

  ul {
    list-style-type: none;
    display: flex;
    gap: clamp(1.5rem, 5vw, 8rem);
    padding: 0;

    li {
      display: flex;
      justify-content: center;

      a {
        color: var(--color3);
        padding: 0;
        font-size: var(--font-size-s);

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

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

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

h1 {
  margin: 0;
  a {
    font-family: "BuurtCampusArial-Bold", Arial;
    text-transform: uppercase;
    color: var(--color3);
    font-size: var(--font-size-l);

    @media (min-width: 480px) {
      font-size: var(--font-size-xl);
    }

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

/* Underline voor buurtpagina waar je op zit */
.active {
  text-decoration: underline;
}

.header-zuidoost,
.header-oost,
.header-nieuw-west {
  a {
    color: var(--color6);
  }
}

/* Zet de container in het midden  */
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 2rem;
}

/* Zet de nieuws header op de goede plek voor elke grid-layout */
h2 {
  @media (min-width: 678px) {
    grid-area: 1 / 1 / 2 / 3;
  }

  @media (min-width: 1100px) {
    grid-area: 1 / 1 / 2 / 4;
  }
}

.article-container {
  display: grid;
  gap: 2rem;
  padding-top: 2rem;

  grid-template-columns: 1fr; /* Op mobiel 1 colom */

  @media (min-width: 678px) {
    grid-template-columns: 1fr 1fr; /* Op tablet 2 colommen */
  }

  @media (min-width: 1100px) {
    grid-template-columns: 1fr 1fr 1fr; /* Op desktop 3 colommen */
  }
}

.article {
  max-width: 300px;

  a {
    text-decoration: none;
  }
}

/* Zorgt voor de zoom van de image als je over hovert */
.image-container {
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  border-radius: 5px;

  img {
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    display: block;
  }

  img:hover {
    transform: scale(1.1);
  }
}

.preview-article-title {
  font-size: 1rem;
  color: var(--color3);
  margin: 0;
}

.preview-article-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--color3);
}

footer {
  background-color: var(--color1);
}

/* FORMULIER */
.contact-form {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1vw, 5rem, 8vw);
  padding: 1rem;
}

.form-section-1 {
  max-width: 250px;

  @media (min-width: 690px) {
    margin-top: 1rem;
  }

  h4 {
    margin: 0;
  }
}

.form-section-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 350px;

  p {
    margin: 0.5rem 0rem;
  }
}

/* BLOCKQUOTES */
.hbd-blockquotes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hbd-blockquote-primary {
  background-color: var(--color5);
  color: var(--color6);

  text-align: center;

  border-radius: 2rem;
  padding: 2rem;
  max-width: 285px;
  font-style: italic;
}

.hbd-blockquote-secondary {
  background-color: rgb(249 193 157);
  text-align: center;
  padding: 2rem;
  max-width: 285px;
  font-style: italic;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hbd-blockquote-name {
  display: grid;
  place-content: center;
  font-style: normal;
}

.blockquoteLL {
  max-width: 300px;
  margin: auto;
}

/* Voor detailpagina's */
.news-article {
  max-width: 64ch;
}

.article-img {
  max-width: 500px;
}

figure {
  margin: 0;
}

/* Voor buurtpagina's */
.zuidoost-nav {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 1rem;
  position: sticky;
  top: 10px;
  max-width: fit-content;
  margin: 1rem;

  background-color: var(--color2);
}

.zuidoost-nav-item {
  list-style: none;

  a {
    color: white;
  }
}
body:has(#de-wijk:target) a[href="#de-wijk"],
body:has(#bewoners:target) a[href="#bewoners"],
body:has(#studenten:target) a[href="#studenten"],
body:has(#wijkpartners:target) a[href="#wijkpartners"] {
  text-decoration: underline;
}

.main-zuidoost {
  max-width: 600px;
  display: flex;
  justify-self: center;
}

.voorbeeld-section {
  height: 1000px;
  width: 100%;
}