/**
 * Sectioning: Container and responsive spacings for header, main, footer
 * https://github.com/picocss/pico
 */
@use "../variables" as variables;
// Render the `main` element consistently in IE
main {
  display: flex;
  // should always have a single div that holds all content below main.
  // TOC or Recent Posts are the only other sections that would be directly under main.
  article, div {
    flex: 1 1 0;
    min-width: 0;
  }
}

body {
  width: 100%;
  margin: 0;
}

header,
main,
footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;

  // Semantic container
  @if variables.$enable-semantic-container {
    padding: var(--s1);

    // Centered viewport max-width only
    @if variables.$enable-maxwidth {
      @media (min-width: variables.$mb) {
          min-width: variables.$mb;
          max-width: variables.$mw;
      }
    }
    // Centered viewport
    @else if variables.$enable-viewport {
      @if map-get(variables.$breakpoints, "sm") and variables.$enable-viewport {
        @media (min-width: map-get(variables.$breakpoints, "sm")) {
          max-width: map-get(variables.$viewports, "sm");
          //padding-right: 0;
          //padding-left: 0;
          .toc {
            display: none;
          }
        }
      }
      @if map-get(variables.$breakpoints, "md") and variables.$enable-viewport {
        @media (min-width: map-get(variables.$breakpoints, "md")) {
          max-width: map-get(variables.$viewports, "md");
        }
      }
      @if map-get(variables.$breakpoints, "lg") and variables.$enable-viewport {
        @media (min-width: map-get(variables.$breakpoints, "lg")) {
          max-width: map-get(variables.$viewports, "lg");
        }
      }
      @if map-get(variables.$breakpoints, "xl") and variables.$enable-viewport {
        @media (min-width: map-get(variables.$breakpoints, "xl")) {
          max-width: map-get(variables.$viewports, "xl");
        }
      }
    }
  }
  // Semantic container
  @else {
    padding: var(--s1) 0;
  }
}
header, main {
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  hr {
    margin:0.1rem 0;
  }
}
footer{
  line-height: var(--lhh);
  hr, p {
    margin: 0.1rem 0 .3rem;
  }
}