/* ==========================================================================
   Helpal Blog CSS
   - Scoped enhancements for your existing template structure
   - Designed to work with Bootstrap 5 + your global.css variables
   - Provides: layout rhythm, readable article typography, sidebar widgets,
     filter chips, tags, placeholders, pagination styling, responsive fixes.
   ========================================================================== */

/* -----------------------------
   0) Base guard / variables
------------------------------ */
:root {
    --hp-blog-bg: #f8fafc;
    --hp-blog-card: #ffffff;
    --hp-blog-border: rgba(15, 23, 42, 0.10);
    --hp-blog-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    --hp-blog-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
    --hp-blog-radius: 16px;
  
    --hp-blog-text: var(--helpal-text, #0f172a);
    --hp-blog-muted: var(--helpal-text-secondary, rgba(15,23,42,.72));
    --hp-blog-primary: var(--bs-primary, #2563eb);
  
    --hp-blog-link: var(--hp-blog-primary);
    --hp-blog-link-hover: #1d4ed8;
  
    --hp-blog-focus: rgba(37, 99, 235, 0.25);
  }
  
  /* -----------------------------
     1) Breadcrumb area + hero
  ------------------------------ */
  .bread-crumb-bar {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), rgba(255,255,255,0));
    padding: 26px 0 10px;
    border-bottom: 1px solid var(--hp-blog-border);
  }
  
  .inner-banner {
    padding: 12px 0;
  }
  
  .breadcrumb-list .breadcrumb {
    justify-content: center;
    margin-bottom: 8px;
    gap: 8px;
  }
  
  .breadcrumb-list .breadcrumb-item a {
    color: var(--hp-blog-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .breadcrumb-list .breadcrumb-item a:hover {
    color: var(--hp-blog-link-hover);
  }
  
  .breadcrumb-list .breadcrumb-item.active {
    color: var(--hp-blog-text);
    font-weight: 600;
  }
  
  .breadcrumb-list img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  
  .hp-blog-hero {
    margin-top: 14px;
    padding: 14px 0 8px;
  }
  
  .hp-blog-hero__title {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hp-blog-text);
    margin: 0 0 6px;
  }
  
  .hp-blog-hero__subtitle {
    color: var(--hp-blog-muted);
    margin: 0 auto;
    max-width: 760px;
  }
  
  /* -----------------------------
     2) Search + chips
  ------------------------------ */
  .hp-blog-search {
    margin: 16px auto 10px;
    max-width: 820px;
  }
  
  .hp-blog-search__row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  
  .hp-blog-search__input {
    border-radius: 12px;
    border: 1px solid var(--hp-blog-border);
    box-shadow: none;
    padding: 12px 14px;
  }
  
  .hp-blog-search__input:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 4px var(--hp-blog-focus);
  }
  
  .hp-blog-search__btn {
    border-radius: 12px;
    padding: 12px 16px;
    white-space: nowrap;
  }
  
  .hp-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
  }
  
  .hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: var(--hp-blog-text);
    text-decoration: none;
  }
  
  .hp-chip:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.30);
    color: var(--hp-blog-link-hover);
  }
  
  .hp-chip--muted {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.10);
  }
  
  .hp-chip--muted:hover {
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.14);
  }
  
  /* -----------------------------
     3) Content layout wrapper
  ------------------------------ */
  .content {
    padding: 28px 0 60px;
    background: transparent;
  }
  
  .blog-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  /* -----------------------------
     4) Cards / widget-box refinement
  ------------------------------ */
  .widget-box {
    background: var(--hp-blog-card);
    border: 1px solid var(--hp-blog-border);
    border-radius: var(--hp-blog-radius);
    box-shadow: var(--hp-blog-shadow-soft);
    overflow: hidden;
  }
  
  /* Normalize pro-post spacing inside widget-box */
  .pro-post {
    padding: 0;
  }
  
  /* -----------------------------
     5) Blog post list cards
  ------------------------------ */
  .blog-single-post .blog-image {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--hp-blog-border);
  }
  
  .blog-single-post .blog-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transform: scale(1.0);
    transition: transform 0.35s ease;
  }
  
  .blog-single-post:hover .blog-image img {
    transform: scale(1.03);
  }
  
  .hp-blog-img-placeholder {
    width: 100%;
    height: 240px;
    display: grid;
    place-content: center;
    gap: 8px;
    color: rgba(15, 23, 42, 0.55);
    background: linear-gradient(180deg, rgba(15,23,42,0.04), rgba(255,255,255,0.0));
  }
  
  .hp-blog-img-placeholder i {
    font-size: 2.2rem;
  }
  
  .hp-blog-img-placeholder span {
    font-size: 0.95rem;
  }
  
  .hp-blog-img-placeholder--detail {
    height: 320px;
  }
  
  /* Titles */
  .blog-title {
    padding: 18px 18px 0;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hp-blog-text);
  }
  
  .hp-blog-title-link {
    text-decoration: none;
    color: inherit;
  }
  
  .hp-blog-title-link:hover {
    color: var(--hp-blog-link-hover);
  }
  
  .hp-blog-title--detail {
    padding-bottom: 2px;
  }
  
  /* Meta row */
  .blog-info {
    padding: 10px 18px 0;
  }
  
  .blog-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    color: var(--hp-blog-muted);
    font-size: 0.95rem;
  }
  
  .blog-info li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .blog-info i {
    opacity: 0.75;
  }
  
  .hp-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--hp-blog-text);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
  }
  
  .hp-link {
    color: var(--hp-blog-link);
    text-decoration: none;
    font-weight: 600;
  }
  
  .hp-link:hover {
    color: var(--hp-blog-link-hover);
    text-decoration: underline;
  }
  
  /* Excerpt + footer */
  .blog-content {
    padding: 12px 18px 18px;
  }
  
  .blog-content p {
    color: var(--hp-blog-muted);
    margin-bottom: 12px;
    line-height: 1.7;
  }
  
  .hp-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
  }
  
  .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    color: var(--hp-blog-link);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.16);
  }
  
  .read-more:hover {
    color: var(--hp-blog-link-hover);
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.25);
  }
  
  /* Tags */
  .hp-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .hp-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.90rem;
    color: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.04);
  }
  
  .hp-tag:hover {
    border-color: rgba(37, 99, 235, 0.30);
    background: rgba(37, 99, 235, 0.08);
    color: var(--hp-blog-link-hover);
  }
  
  .hp-blog-tags--detail {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 23, 42, 0.14);
  }
  
  /* -----------------------------
     6) Blog detail content styling (CKEditor)
  ------------------------------ */
  .hp-blog-content {
    padding-top: 10px;
  }
  
  .hp-blog-excerpt {
    font-size: 1.12rem;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.75;
  }
  
  /* Ensure CKEditor output is readable */
  .hp-blog-content h2,
  .hp-blog-content h3,
  .hp-blog-content h4 {
    margin-top: 22px;
    margin-bottom: 10px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--hp-blog-text);
  }
  
  .hp-blog-content p {
    color: rgba(15, 23, 42, 0.76);
    line-height: 1.85;
    margin-bottom: 14px;
  }
  
  .hp-blog-content ul,
  .hp-blog-content ol {
    padding-left: 1.2rem;
    margin-bottom: 14px;
    color: rgba(15, 23, 42, 0.76);
    line-height: 1.85;
  }
  
  .hp-blog-content blockquote {
    border-left: 4px solid rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.06);
    padding: 12px 14px;
    margin: 16px 0;
    border-radius: 12px;
    color: rgba(15, 23, 42, 0.76);
  }
  
  .hp-blog-content a {
    color: var(--hp-blog-link);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .hp-blog-content a:hover {
    color: var(--hp-blog-link-hover);
  }
  
  .hp-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--hp-blog-border);
    margin: 14px 0;
  }
  
  /* Code blocks */
  .hp-blog-content pre,
  .hp-blog-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  
  .hp-blog-content pre {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.10);
    padding: 14px;
    border-radius: 14px;
    overflow: auto;
  }
  
  /* Tables */
  .hp-blog-content table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--hp-blog-border);
    border-radius: 14px;
    overflow: hidden;
    margin: 14px 0;
  }
  
  .hp-blog-content th,
  .hp-blog-content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--hp-blog-border);
  }
  
  .hp-blog-content th {
    background: rgba(15, 23, 42, 0.04);
    font-weight: 700;
  }
  
  /* -----------------------------
     7) Sidebar widgets
  ------------------------------ */
  .sidebar-right {
    position: relative;
  }
  
  .pro-title {
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 16px 16px 0;
    margin: 0;
    color: var(--hp-blog-text);
  }
  
  .pro-content {
    padding: 12px 16px 16px;
  }
  
  .latest-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
  }
  
  .latest-posts li {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
  }
  
  .post-thumb img {
    width: 72px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--hp-blog-border);
  }
  
  .hp-thumb-placeholder {
    width: 72px;
    height: 58px;
    display: grid;
    place-content: center;
    border-radius: 12px;
    border: 1px solid var(--hp-blog-border);
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.55);
  }
  
  .post-info h4 {
    margin: 0 0 6px;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
  }
  
  .post-info h4 a {
    color: var(--hp-blog-text);
    text-decoration: none;
  }
  
  .post-info h4 a:hover {
    color: var(--hp-blog-link-hover);
    text-decoration: underline;
  }
  
  .posts-date {
    color: var(--hp-blog-muted);
    font-size: 0.90rem;
  }
  
  /* Categories */
  .category-link {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  
  .category-link a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
    text-decoration: none;
    color: rgba(15, 23, 42, 0.88);
    font-weight: 700;
  }
  
  .category-link a:hover {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.06);
    color: var(--hp-blog-link-hover);
  }
  
  .category-link a.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.10);
    color: var(--hp-blog-link-hover);
  }
  
  .hp-count {
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
    color: rgba(15, 23, 42, 0.78);
  }
  
  /* Tag cloud */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .tags .tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.10);
    text-decoration: none;
    color: rgba(15, 23, 42, 0.82);
    font-weight: 600;
    font-size: 0.92rem;
  }
  
  .tags .tag:hover {
    border-color: rgba(37, 99, 235, 0.30);
    background: rgba(37, 99, 235, 0.08);
    color: var(--hp-blog-link-hover);
  }
  
  .tags .tag.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.12);
    color: var(--hp-blog-link-hover);
  }
  
  /* Share button */
  .share-icon {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.20);
    background: rgba(37, 99, 235, 0.08);
    color: var(--hp-blog-link);
    font-weight: 800;
  }
  
  .share-icon:hover {
    border-color: rgba(37, 99, 235, 0.30);
    background: rgba(37, 99, 235, 0.12);
    color: var(--hp-blog-link-hover);
  }
  
  /* -----------------------------
     8) Author widget
  ------------------------------ */
  .author-widget .about-author {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    padding: 16px;
  }
  
  .hp-author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: grid;
    place-content: center;
    border: 1px solid var(--hp-blog-border);
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.65);
  }
  
  .hp-author-avatar i {
    font-size: 1.8rem;
  }
  
  .author-details .blog-author-name {
    display: inline-block;
    font-weight: 900;
    color: var(--hp-blog-text);
    text-decoration: none;
    margin-bottom: 6px;
  }
  
  /* -----------------------------
     9) Pagination
  ------------------------------ */
  .paginations.list-pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
  }
  
  .paginations .page-item a,
  .paginations .page-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    text-decoration: none;
    color: rgba(15, 23, 42, 0.86);
    font-weight: 800;
    min-width: 88px;
  }
  
  .paginations .page-item a:hover {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.06);
    color: var(--hp-blog-link-hover);
  }
  
  .paginations .page-item a.active {
    border-color: rgba(37, 99, 235, 0.40);
    background: rgba(37, 99, 235, 0.12);
    color: var(--hp-blog-link-hover);
  }
  
  .paginations .page-item.disabled span {
    opacity: 0.55;
  }
  
  /* -----------------------------
     10) Responsive
  ------------------------------ */
  @media (max-width: 991px) {
    .blog-single-post .blog-image img,
    .hp-blog-img-placeholder {
      height: 220px;
    }
  
    .hp-blog-search__row {
      flex-direction: column;
      align-items: stretch;
    }
  
    .hp-blog-search__btn {
      width: 100%;
    }
  
    .paginations .page-item a,
    .paginations .page-item span {
      min-width: auto;
    }
  }
  
  @media (max-width: 575px) {
    .bread-crumb-bar {
      padding: 18px 0 6px;
    }
  
    .blog-title {
      padding: 16px 14px 0;
      font-size: 1.20rem;
    }
  
    .blog-info {
      padding: 8px 14px 0;
    }
  
    .blog-content {
      padding: 10px 14px 14px;
    }
  
    .blog-single-post .blog-image img,
    .hp-blog-img-placeholder {
      height: 200px;
    }
  
    .author-widget .about-author {
      grid-template-columns: 1fr;
    }
  
    .hp-author-avatar {
      width: 64px;
      height: 64px;
      border-radius: 16px;
    }
  }
  
  /* -----------------------------
     11) Accessibility improvements
  ------------------------------ */
  a:focus,
  button:focus,
  input:focus {
    outline: none;
  }
  
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    box-shadow: 0 0 0 4px var(--hp-blog-focus);
    border-radius: 10px;
  }
  
/* ==============
   Blog Comments 
   ============== */
   .hp-comments-list,
   .hp-replies {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .hp-comment {
     margin-bottom: 1rem;
   }
   
   .hp-comment--reply {
     margin-top: 0.75rem;
   }
   
   .hp-replies {
     margin-left: 1.25rem;
     padding-left: 0.75rem;
     border-left: 2px solid var(--gray-200, #dee2e6);
   }
   
   .hp-comment-card {
     background: #fff;
     border: 1px solid var(--gray-200, #dee2e6);
     border-radius: 14px;
     padding: 1rem;
     box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
   }
   
   .hp-comment-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
     margin-bottom: 0.5rem;
   }
   
   .hp-comment-author {
     display: flex;
     align-items: center;
     gap: 0.75rem;
   }
   
   .hp-comment-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: rgba(67, 97, 238, 0.10);
     color: var(--primary-color, #4361ee);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
   }
   
   .hp-comment-avatar--reply {
     background: rgba(114, 9, 183, 0.10);
     color: var(--secondary-color, #7209b7);
   }
   
   .hp-comment-name {
     font-weight: 800;
     color: var(--gray-800, #212529);
     line-height: 1.1;
   }
   
   .hp-comment-body {
     color: var(--gray-700, #343a40);
     line-height: 1.6;
     white-space: normal;
     word-break: break-word;
   }
   
   .hp-reply-btn {
     text-decoration: none;
     font-weight: 700;
     color: var(--primary-color, #4361ee);
     padding: 0;
   }
   
   .hp-reply-btn:hover {
     text-decoration: underline;
   }
   
   @media (max-width: 576px) {
     .hp-replies {
       margin-left: 0.75rem;
       padding-left: 0.6rem;
     }
   }