/* HostGenix Blog Styles - aligns the blog pages with the landing page design.
   Selectors are prefixed with .hostgenix-header-active (body class) so they
   out-rank the theme's dynamic inline CSS (digeco-dynamic), which prints last. */

/* -------------------------------------
#. Typography (Plus Jakarta Sans everywhere, like the landing page)
------------------------------------- */
body.hostgenix-header-active {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #374151;
  line-height: 1.7;
}

.hostgenix-header-active h1,
.hostgenix-header-active h2,
.hostgenix-header-active h3,
.hostgenix-header-active h4,
.hostgenix-header-active h5,
.hostgenix-header-active h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.025em;
}

/* Heading color only inside the content area (the footer is dark) */
.hostgenix-header-active .site-content h1,
.hostgenix-header-active .site-content h2,
.hostgenix-header-active .site-content h3,
.hostgenix-header-active .site-content h4,
.hostgenix-header-active .site-content h5,
.hostgenix-header-active .site-content h6 {
  color: #111827;
}

/* -------------------------------------
#. Page banner (matches the landing page hero background)
------------------------------------- */
/* !important needed against the inline style="background:..." on the element */
body.hostgenix-header-active .entry-banner {
  background: #ffffff !important;
}

/* Kill the teal gradient overlay and the decorative SVG shapes */
.hostgenix-header-active .entry-banner:after {
  display: none;
}

.hostgenix-header-active .entry-banner .shape-holder {
  display: none;
}

.hostgenix-header-active .entry-banner .entry-banner-content {
  padding-top: 72px;
  padding-bottom: 56px;
  text-align: center;
}

.hostgenix-header-active .entry-banner .entry-banner-content h1 {
  /* Gradient-clipped text like the landing page headline accents;
     inline-block keeps the gradient tight to the text width */
  display: inline-block;
  color: #7c3aed;
  background: linear-gradient(135deg, #7c3aed, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: 12px;
}

/* Breadcrumbs */
.hostgenix-header-active .breadcrumb-area .entry-breadcrumb span a,
.hostgenix-header-active .breadcrumb-trail ul.trail-items li a {
  color: #4b5563;
}

.hostgenix-header-active .breadcrumb-area .entry-breadcrumb span a:hover,
.hostgenix-header-active .breadcrumb-trail ul.trail-items li a:hover {
  color: #6d28d9;
}

.hostgenix-header-active .breadcrumb-area .entry-breadcrumb > span:last-child,
.hostgenix-header-active .breadcrumb-trail ul.trail-items li > span {
  color: #6b7280;
}

.hostgenix-header-active .breadcrumb-trail ul.trail-items li,
.hostgenix-header-active .entry-banner .entry-breadcrumb .delimiter {
  color: #9ca3af;
}

/* -------------------------------------
#. Centered content column
------------------------------------- */
.hostgenix-header-active .content-area {
  padding-top: 48px;
  padding-bottom: 96px;
}

.hostgenix-single-col .site-main,
.hostgenix-blog-col .rt-search-post {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

.hostgenix-header-active .pagination-area {
  max-width: 768px;
  margin: 24px auto 0;
}

/* -------------------------------------
#. Blog listing cards - 3-up grid like the landing page card rows
------------------------------------- */
.hostgenix-post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 991px) {
  .hostgenix-post-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 575px) {
  .hostgenix-post-list {
    grid-template-columns: 1fr;
  }
}

.hostgenix-post-card .blog-box {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Equal-height cards: excerpt grows, Read More pins to the bottom */
.hostgenix-post-card .blog-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hostgenix-post-card .blog-text {
  flex: 1 1 auto;
}

.hostgenix-post-card .blog-box:hover {
  border-color: #ddd6fe;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hostgenix-post-card .blog-meta li,
.hostgenix-post-card .blog-meta li a {
  color: #6b7280;
  font-size: 14px;
}

.hostgenix-post-card .blog-meta li a:hover {
  color: #6d28d9;
}

.hostgenix-post-card .blog-item-content h3 {
  font-size: 22px;
  line-height: 1.35;
}

.hostgenix-post-card .blog-item-content h3 a {
  color: #111827;
}

.hostgenix-post-card .blog-item-content h3 a:hover {
  color: #6d28d9;
}

.hostgenix-post-card .blog-text p {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.7;
}

.hostgenix-post-card .button-1 {
  color: #6d28d9;
  font-size: 14px;
}

.hostgenix-post-card .button-1:hover {
  color: #7c3aed;
}

/* -------------------------------------
#. Single post
------------------------------------- */
.hostgenix-single-col .entry-meta ul.post-light {
  text-align: center;
}

.hostgenix-single-col .entry-meta ul li,
.hostgenix-single-col .entry-meta ul li a {
  color: #6b7280;
  font-size: 14px;
}

.hostgenix-single-col .entry-meta ul li a:hover {
  color: #6d28d9;
}

.hostgenix-single-col .rt-single-content {
  font-size: 17px;
  line-height: 1.75;
}

.hostgenix-single-col .rt-single-content a {
  color: #6d28d9;
}

.hostgenix-single-col .rt-single-content a:hover {
  color: #5b21b6;
}

.hostgenix-single-col .rt-single-content img {
  border-radius: 16px;
}

.hostgenix-single-col .rt-single-content blockquote {
  border-left: 3px solid #7c3aed;
  color: #4b5563;
}

.hostgenix-single-col .about-author {
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 24px;
}

/* Pagination */
.hostgenix-header-active .pagination-area ul li a,
.hostgenix-header-active .pagination-area ul li span {
  color: #374151;
  border-color: #e5e7eb;
  border-radius: 8px;
}

.hostgenix-header-active .pagination-area ul li a:hover,
.hostgenix-header-active .pagination-area ul li.active a {
  background-color: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}

/* -------------------------------------
#. Safety hides (option-driven markup in templates we did not touch)
------------------------------------- */
.hostgenix-header-active .entry-thumbnail-area {
  display: none;
}

.hostgenix-header-active.author .blog-item-figure {
  display: none;
}

/* -------------------------------------
#. Back-to-top button (brand gradient instead of the Redux primary color)
------------------------------------- */
.hostgenix-header-active .scrollToTop {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%);
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* -------------------------------------
#. Responsive
------------------------------------- */
@media screen and (max-width: 767px) {
  .hostgenix-header-active .content-area {
    padding-top: 32px;
    padding-bottom: 64px;
  }

  .hostgenix-header-active .entry-banner .entry-banner-content {
    padding-top: 48px;
    padding-bottom: 36px;
  }

  .hostgenix-post-card .blog-box {
    padding: 20px;
  }
}