* {
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-base-size);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  body {
    background-color: var(--light-gray);
    color: var(--ink);
    font-family: var(--font);
    margin: 0;

    &:has(> nav) main {
      margin-top: calc(var(--navbar-height) + 1rem);

      @media screen and (max-width: 768px) {
        /* var(--screen-md) */
        margin-top: var(--navbar-height);
      }
    }

    &:has(footer) {
      min-height: calc(100vh + 6.5rem);
      padding-bottom: 7.5rem; /* Footer height + 1rem spacing */
    }

    .row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .truncate {
      line-break: anywhere;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      max-height: fit-content;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;

      &.two {
        line-break: normal;
        -webkit-line-clamp: 2;
      }

      &.three {
        line-break: normal;
        -webkit-line-clamp: 3;
      }

      &.truncate--expandable:hover {
        display: block;
      }
    }
  }
}

.hidden {
  display: none !important;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.mobile-only {
  display: none !important;

  @media screen and (max-width: 768px) {
    display: inline;
  }
}

.desktop-only {
  display: inline;

  @media screen and (max-width: 768px) {
    display: none !important;
  }
}