/** -----------------------------------------------------------------
  * SECTION LAYOUT
------------------------------------------------------------------ */

/* Section spacing */

.section { margin: var(--section-space) 0; }

/* Standard content container */

.container {
  max-width: var(--content-width);
  padding: 0 var(--gutter);
  margin: 0 auto;
  width: 100%;
}
.container-wide {
  max-width: calc(var(--content-width) + var(--gutter) + var(--sidebar-width) + var(--section-space))
}

/** -----------------------------------------------------------------
  * SECTION FLOW SPACING
  * Use flow spacing in flow areas, provide a fallback for browsers
  * that don't support css variables
------------------------------------------------------------------ */

/* .flow > * + * {
  margin-top: 1.5rem;
  margin-top: var(--flow-space);
}

.flow > * + h1,
.flow > * + h2,
.flow > * + h3,
.flow > * + h4,
.flow > * + h5,
.flow > * + h6,
.flow > * + .txt-h1,
.flow > * + .txt-h2,
.flow > * + .txt-h3,
.flow > * + .txt-h4,
.flow > * + .txt-h5,
.flow > * + .txt-h6 {
  margin-top: 1.5rem;
  margin-top: calc(var(--flow-space) * 2);
}

.flow > h1 + h2,
.flow > h2 + h3,
.flow > h3 + h4,
.flow > h4 + h5,
.flow > h5 + h6,
.flow > .txt-h1 + .txt-h2,
.flow > .txt-h2 + .txt-h3,
.flow > .txt-h3 + .txt-h4,
.flow > .txt-h4 + .txt-h5,
.flow > .txt-h5 + .txt-h6 {
  margin-top: 1.5rem;
  margin-top: calc(var(--flow-space) * 0.5);
} */

/* END !SECTION FLOW SPACING */
/** -----------------------------------------------------------------
  * SECTION LEVEL
------------------------------------------------------------------ */

/* Level
 * Creates a bar with content vertically aligned on both sides
 * Good for split navigation bars etc. */

.level {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  gap: var(--gutter);
}

/* The first level item will be aligned to the left of the level
 * the second will be aligned to the right.
 * You can add more items, they will be evenly spaced,
 * though 2 is recommended */

/* END !SECTION LEVEL */
/** -----------------------------------------------------------------
  * SECTION GRID
------------------------------------------------------------------ */

/* Super simple grid
 * min-width should be just under the pixel value in minmax * 2
 * This helps avoid grid blowout on screens smaller than the
 * preferred min-width of a grid item. */

@media ( min-width: 25em ) {
  .grid {
    --grid-gap: var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: var(--grid-gap);
  }
}

@media ( orientation: portrait ) and ( min-width: 25em ) {
  .grid-portrait {
    --grid-gap: var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: var(--grid-gap);
  }
}

@media ( orientation: landscape ) and (min-width: 25em ) {
  .grid-landscape {
    --grid-gap: var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: var(--grid-gap);
  }
}

/* END !SECTION GRID */
/** -----------------------------------------------------------------
  * SECTION PAGE SCAFFOLDING
  <template>
    <div id="app">

      <header id="top-header">
        <div class="container"></div>
      </header>

      IF SIDEBAR
      <div id="main" class="has-sidebar">
        <div class="sidebar"></div>
        <main class="content"></main>
      </div>

      IF NO SIDEBAR
      <main id="main" class="container">
      </main>

      <footer id="footer">
        <div class="container"></div>
      </footer>

    </div>
  </template>
------------------------------------------------------------------ */

/* Setup page container
 * This, and the next three style declarations help fix an
 * issue so that the page will never be shorter than the
 * screen is tall. This ensures the footer will always
 * be at the bottom of the page. */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  border: 1em solid black;
}

/* Stick the top header to the top of the screen
 * Good place to put a level with some navigation */

#top-header {
  position: absolute;
  z-index: 1000;
  width: 100%;
}

/* The main content will absorb any free vertical space,
 * pushing the footer neatly to the bottom.
 *
 * Extra space is given above and below the main area between the
 * header and footer (or the top and bottom of the page when such
 * elements don't exist) */

#main {
  width: 100%;
  flex: 1 0 auto;
  align-self: center;
  padding-block-start: var(--section-space);
  padding-block-end: var(--section-space);
}

/* Ensure footer does not shrink */

#footer { flex-shrink: 0; }



/* SIDEBAR LAYOUT */

/* Container of content & sidebar
 * Max width equals the combined width of the sidebar, content,
 * and the space between them.
 *
 * Setup grid layout. Display sidebar under the content by default
 * This mostly matters for mobile.
 * Add space between content and sidebar */

.has-sidebar {
  max-width: calc(var(--content-width) + var(--section-space) + var(--sidebar-width));
  padding: 0 var(--gutter);
  margin: 0 auto;

  display: grid;
  grid-template-areas: "content" "sidebar";
  gap: var(--section-space);
}


/* Assign sidebar to the sidebar area,
 * Assign content to the content area,
 * Min-Width prevents grid blow out */

.has-sidebar > .sidebar {
  grid-area: sidebar;
  min-width: 0;
}
.has-sidebar > .content {
  grid-area: content;
  min-width: 0;
}

/* On landscape, adjust layout for two columns,
 * Arange areas so that the sidebar is on the left side of content.
 * minmax prevents content from being larger than screen width */

@media ( min-width: 65em ) {
  .has-sidebar {
    grid-template-columns: var(--sidebar-width) minmax(1px, 1fr);
    grid-template-areas: "sidebar content"
  }
}

/* END !SECTION PAGE SCAFFOLDING */
/* END !SECTION LAYOUT */