/* =====================================================================
   layout.css
   - Page wrapper and content container
   - Sticky footer on larger screens
   - Spacing/padding rules shared by pages
====================================================================== */

/* [layout.css] Page wrapper */
/* Caps overall width and centers the page content */
.page-wrapper {
  max-width: 1200px;       /* cap width on large screens */
  margin: 0 auto;          /* center horizontally */
  width: 100%;             /* full width until cap reached */
  box-sizing: border-box;  /* include padding in width calculations */
  padding: 0 0rem;         /* slight horizontal padding for breathing room */
}

/* [layout.css] Content wrapper */
/* Inner container used by main pages to match header/footer width */
.content-wrap {
  max-width: 1100px;        /* match header/footer wrap width */
  margin-inline: auto;      /* center within page wrapper */
  padding: 1rem;            /* default inner padding */
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .content-wrap { padding: 1.5rem 1.25rem; }
}

/* [layout.css] Sticky footer */
/* On tablets and up, keep the footer pushed to the bottom when content is short */
@media (min-width: 520px) {
  html, body { height: 100%; }
  .page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .site-main { flex: 1 0 auto; }
  /* Remove extra gap above footer so it sits at the bottom */
  .site-footer { margin-top: 0; }
}