/**
 * Columnist theme layout recovery — archive pages drop JS and fight
 * fixed float columns; entry bodies end up clipped / appearing empty.
 */

#page {
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#main {
  position: relative !important;
  z-index: 1 !important;
  width: 960px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: visible !important;
  min-height: 320px !important;
}

/* Decorative column pseudo-elements sit in the stacking context and
   can mask real content when floats collapse — disable them. */
#main:before,
#main:after {
  display: none !important;
  content: none !important;
}

#primary.site-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#left-col {
  float: none !important;
  position: relative !important;
  z-index: 3 !important;
  width: 280px !important;
  max-width: 100% !important;
  padding: 0 24px 30px 24px !important;
  box-sizing: border-box !important;
  flex: 0 0 280px !important;
  background: #fff !important;
}

#content {
  float: none !important;
  position: relative !important;
  z-index: 5 !important;
  width: auto !important;
  max-width: 640px !important;
  flex: 1 1 640px !important;
  flex-grow: 0 !important; /* don't stretch to full browser width */
  padding: 0 16px 40px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  color: #333 !important;
}

/* Keep WP/Jetpack galleries inside the column */
#content .gallery,
#content .tiled-gallery,
#content .gallery-row,
#content .gallery-group,
#content .gallery-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#content .gallery-item {
  float: left;
  width: 50% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px;
}
#content .gallery-item img,
#content .tiled-gallery img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Nav was float:left;width:100% and often ate the whole content height */
#content .site-navigation,
.main-navigation {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  overflow: visible !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
}

.main-navigation ul,
#menu-menu-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  overflow: visible !important;
}

.main-navigation li {
  float: none !important;
  margin: 8px 8px 0 0 !important;
  display: block !important;
  position: relative !important;
}

.main-navigation a {
  width: auto !important;
  min-width: 100px !important;
  max-width: 160px !important;
  box-sizing: border-box !important;
}

#content .post,
#content .page,
#content .attachment,
#content article,
article.hentry {
  overflow: visible !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 0 24px !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

#content .entry-header {
  position: relative !important;
  min-height: 35px !important;
  margin-bottom: 8px !important;
  z-index: 2 !important;
}

.entry-content,
.single .entry-content,
.page .entry-content,
#content .entry-content {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 12px 0 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #222 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
  border-top: 1px solid #ccc;
}

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content span,
.entry-content a,
.entry-content strong {
  color: inherit;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: inherit;
  line-height: 1.65;
}

.entry-content p {
  margin: 0 0 0.9em !important;
  text-align: left;
}

.entry-content img,
.entry-content table {
  max-width: 100% !important;
  height: auto;
}

.entry-content table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

/* Dead WP.com ad shells reserve empty float boxes and steal layout */
.wpcnt,
.wpa,
.wpadvert,
div[id^="atatags-"] {
  display: none !important;
}

#secondary {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 28px !important;
  overflow: visible !important;
}

.widget-area {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
}

.site-footer,
#colophon {
  margin: 0 auto !important;
  max-width: 960px !important;
  clear: both !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Homepage feed cards */
#feed-wrap {
  overflow: visible !important;
  display: block !important;
  clear: both !important;
  padding: 0 0 30px 5px !important;
}

#feed-wrap .page,
#feed-wrap .post {
  float: left !important;
  overflow: visible !important;
}

/* Blog catalog */
.blog-catalog {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 32px !important;
  box-sizing: border-box !important;
}

#blog-cards {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  #primary.site-content {
    flex-direction: column !important;
  }

  #left-col,
  #content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  #left-col {
    padding-bottom: 12px !important;
  }
}