@use 'sass:math';

.l-clearfix {
  @extend %clearfix;
}

#body {
  position: relative;
  overflow-x: hidden;
  @media screen and (min-height: 600px) {
    #main {
      display: flex;
      flex-direction: column;
    }
    #main-content {
      flex: 1 0 auto;
    }
    .footer {
      flex: 0 1 auto;
    }
  }
}
@mixin l-site_width {
  position: relative;
  width: 100%;
  max-width: $site-width-wide;
  max-width: math.div($site-width-wide, $base-font-size) * 1rem;
  margin: 0 auto;
  @include max-width($site-width-wide + $navWidthMax + 2 * $gutter) {
    box-sizing: border-box;
    width: auto;
    padding: 0 1 * $gutter;
  }
  @include max-width($site-width + $navWidthMax + 2 * $gutter) {
    max-width: $site-width;
    max-width: math.div($site-width, $base-font-size) * 1rem;
    box-sizing: border-box;
    width: auto;
    padding: 0 1 * $gutter;
  }
  @include mobile-portrait {
    box-sizing: border-box;
    width: auto;
    padding: 0 $gutter;
  }
}
.l-site_width {
  @include l-site_width;
}

.site-content {
  position: relative; // for breadcrumbs
  width: $site-maxWidth;
  @media (max-width: $site-maxWidth) {
    width: 100%;
  }
  margin-left: auto;
  margin-right: auto;
  margin-top: -1px;
  margin-bottom: 2rem;
  clear: both;
}

html {
  @media screen and (min-height: 600px) {
    #body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;

      #main {
        height: auto;
        flex: 1 0 auto;
        min-height: 0;
      }
    }
  }
}

#jump {
  position: absolute;
  z-index: -1;
  font-weight: 500;
  border: 1px solid var(--theme-color-dark);
  background-color: var(--theme-main-color-inverse, $c-white);
  color: var(--theme-color-dark);
  padding: 10px;

  &:focus {
    z-index: 2;
    outline: none;
  }
}
