@use "media";

$gap: 5px;

.box {
  padding: $gap * 2;
  :first-child {
    margin-top: 0;
  }
}

.column-container {
  display: flex;
  flex-direction: column;
  gap: $gap;
  width: 100%;
}

.row-container {
  @extend .column-container;
  @include media.breakpoint(small) {
    flex-direction: row;
  }
}

.site {
  display: flex;
  flex-direction: column;

  @include media.breakpoint(medium) {
    margin: auto;
    width: 75%;
  }

  @include media.breakpoint(x-large) {
    width: 60%;
  }

  &-header {
    width: 100%;

    .navbar {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: $gap 0;
      gap: $gap;

      @include media.breakpoint(small) {
        flex-wrap: nowrap;
      }

      &-link {
        color: var(--color-accent);
        font-weight: bold;
        text-decoration: none;
        &:hover {
          background-color: var(--color-accent2);
          border-color: var(--color-accent);
          color: var(--color-paper);
        }
        &[aria-current="page"] {
          background-color: var(--color-accent);
          color: var(--color-paper);
          margin-top: 2px;
          border-bottom-width: 2px;
          &:hover {
            border-color: var(--color-normal);
          }
        }
        @include media.breakpoint(small) {
          width: 100%;
        }
      }
    }
  }

  &-footer {
    gap: $gap;
    margin: 0 0 $gap * 2 0;
  }
}

.page {
  &-footer {
    margin: $gap 0;
  }
}

.home-container {
  display: flex;
  flex-direction: column;
  gap: $gap;
  @include media.breakpoint(large) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    main {
      grid-column: 1 / 3;
    }
  }
}