// global.scss

/* IMPORTS ================================================================= */
@use "sass:math";

@use "modules/fonts";
@use "modules/include-media" as *;

@use "components";
@use "themes";
@use "vars" as *;

:root {
  font: {
    size: $font-base-size;
    family: $font-stack-serif;
  }
}

.site {
  display: flex;
  flex-wrap: wrap;
  max-width: #{$site-width};
  margin: #{$site-top} auto #{$site-bottom};
}

.site-header {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 1em;
  @include media(">sm") {
    margin-bottom: #{$site-gutter};
  }
}

.site-main {
  flex: 1 0 #{$site-main-min-width};
  box-sizing: border-box;
  padding: 1em;
  height: min-content;
}

.site-navigation {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin-bottom: #{$site-gutter};
  padding: 1em;
  height: min-content;
  @include media(">sm") {
    flex: 0 1 #{$site-nav-width};
    margin-right: #{$site-gutter};
    margin-bottom: 0;
  }

  li {
    display: inline-block;
    @include media(">sm") {
      display: block;
    }
  }
}

.site-footer {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin-top: #{$site-gutter};
  padding: 1em;
}

.page-article {
  @extend .markup;
}
