/*
 * Theme Name:  Recap Child
 * Theme URI:   https://recap.codesupply.co/
 * Description: Recap Child Theme
 * Author:      Code Supply Co.
 * Author URI:  https://codesupply.co/
 * Template:    recap
 * Version:     1.0.0
 */

/* Copy any classes from parent theme here. They will override the parent's version. */

/* Expand content width to include sidebar area (548px -> 776px) */
.cs-entry__content-wrap {
  max-width: var(--cs-entry-content-width);
}

@media (min-width: 768px) {
  .single .entry-content {
    max-width: var(--cs-entry-content-width);
  }
}

@media (min-width: 992px) {
  .single .cs-metabar-enabled.cs-sidebar-disabled .cs-entry__container {
    grid-template-columns: minmax(228px, 3fr) minmax(0, var(--cs-entry-content-width)) minmax(0, 1fr);
  }
}

/* Author Bio Section */
.cs-author-bio {
  display: flex;
  gap: 20px;
  padding: 24px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border-left: 4px solid var(--cs-primary-color, #007bff);
}

.cs-author-bio__avatar-wrap {
  flex-shrink: 0;
  border-radius: 15%;
}

.cs-author-bio__avatar {
  width: 80px;
  height: 80px;
  border-radius: 15%;
  object-fit: cover;
}

.cs-author-bio__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cs-author-bio__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.cs-author-bio__link {
  text-decoration: none;
  transition: color 0.2s ease;
}

.cs-author-bio__link:hover {
  color: var(--cs-primary-color, #007bff);
}

.cs-author-bio__description {
  font-size: var(--cs-font-secondary-size);
  line-height: 1.6;
  color: #666;
}

/* Responsive styling for smaller screens */
@media (max-width: 576px) {
  .cs-author-bio {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }

  .cs-author-bio__avatar-wrap {
    margin: 0 auto;
  }
}

/* Override margins for headings that follow empty p tags */
.cs-main-content .entry-content > p:empty + h1,
.cs-main-content .entry-content > p:empty + h2,
.cs-main-content .entry-content > p:empty + h3,
.cs-main-content .entry-content > p:empty + h4,
.cs-main-content .entry-content > p:empty + h5,
.cs-main-content .entry-content > p:empty + h6 {
  margin-top: 32px;
  margin-bottom: 16px;
}

/* Reset margin-top for p tags immediately following these headings */
.cs-main-content .entry-content > p:empty + h1 + p,
.cs-main-content .entry-content > p:empty + h2 + p,
.cs-main-content .entry-content > p:empty + h3 + p,
.cs-main-content .entry-content > p:empty + h4 + p,
.cs-main-content .entry-content > p:empty + h5 + p,
.cs-main-content .entry-content > p:empty + h6 + p {
  margin-top: 0;
}