/* Page shell centering — works with or without Tailwind CDN */
html {
  height: 100%;
}

body.page-root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.site-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  padding: 2rem 0;
}

.site-main-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.content-wide {
  max-width: 56rem;
}

.content-narrow {
  max-width: 42rem;
}

.content-form {
  max-width: 28rem;
}

.content-error {
  max-width: 36rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

.blog-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.blog-main {
  flex: 1 0 auto;
  width: 100%;
  padding: 2rem 0;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 1.5rem;
  align-items: start;
}

.blog-layout-single:not(.blog-layout-post) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.blog-main-col {
  min-width: 0;
}

.blog-sidebar {
  position: sticky;
  top: 1rem;
}

.auth-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 9rem);
}