/* ===== Blog / Articles ===== */

/* Post-meta row icons (author/category/read-time) had no custom color at
   all -- rendered in whatever flat dark tone the vendor template's default
   body-text styling gives an <i>, same as plain text. Same small-icon
   convention already used for the footer contact-info icons (color on the
   wrapper via --jka-gold, not a filled badge -- vivid is reserved for solid
   fills/badges, not bare line icons like these). */
.post-meta i { color: var(--jka-gold); margin-right: 3px; }

/* AJAX loading state for #jkaBlogResults while a search/filter/pagination
   fetch is in flight — dims the existing posts rather than blanking them, so
   the swap doesn't feel like a flash of empty content. The spinner is a
   single element (solid white fill + colored border-top, spun) rather than a
   bare ring: a transparent ring directly over a post photo was nearly
   invisible. position:sticky keeps it in view if the results column is tall
   and already scrolled past its own top. */
#jkaBlogResults { position: relative; min-height: 200px; transition: opacity .15s; }
#jkaBlogResults.jka-loading { opacity: .4; pointer-events: none; }
#jkaBlogResults.jka-loading::before {
    content: "";
    position: sticky;
    display: block;
    top: 24px;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    background: #fff;
    border: 4px solid var(--evt-border, #eee);
    border-top-color: var(--jka-gold);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    animation: jkaBlogSpin .7s linear infinite;
    z-index: 2;
}
@keyframes jkaBlogSpin { to { transform: rotate(360deg); } }

/* Pill-banner bottom breathing room — same value used on ticket-checkout.php/
   vote-success.php/leaderboard.php's own banner-inner instances. */
.jka-blog-banner-inner { padding-bottom: 20px; }

/* Post title inside the pill banner can be long, so it gets a smaller clamp
   than the default .jka-pill-title size. */
.jka-blog-post-title { font-size: clamp(24px, 4vw, 38px); }

/* Sidebar: unconditional bottom margin on every card, not an adjacent-sibling
   rule — the vendor's .widget.recent-posts sits between the Search and
   Categories cards in the DOM, so ".jka-sb-card + .jka-sb-card" never
   actually matched anything and the cards had zero space between them. The
   vendor's own .sidebar .widget already carries margin-bottom:40px, which is
   plenty for the Recent Posts widget on either side — no override needed. */
.jka-sb-card { margin-bottom: 24px; }

/* Sidebar widget label + list wrapper, reused for both the Search card's own
   label and the Categories card's heading. */
.jka-sb-widget-label { padding: 16px 16px 0; }
.jka-sb-cat-list { padding: 8px 0 4px; }
.jka-sb-cat-row { text-decoration: none; }

/* Active-filter summary line above the post list on blog.php */
.jka-blog-filter-status { margin-bottom: 20px; font-size: .9rem; color: #888; }

/* Tag pills — shared by post.php's inline post-tags row and its sidebar Tags
   widget. Replaces the vendor's plain bordered box + #7c7c7c muted-gray text
   (style.a6129.css .post-tags a / .widget-tags a) with the site's real gold
   token instead of an ad hoc gray. */
.jka-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--jka-gold-rgb), .1);
    color: var(--jka-gold-dark);
    border: 1px solid rgba(var(--jka-gold-rgb), .28);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.jka-tag-pill i { font-size: 10px; }
.jka-tag-pill:hover {
    background: var(--jka-gold-shine);
    color: var(--jka-white);
    border-color: transparent;
    text-decoration: none;
}

/* Tags-area (post.php) — was two BS3 .pull-left/.pull-right floats, which
   don't exist in BS5 at all (see the comments-list note below for the same
   root cause), so the tag pills and the share row sat with zero guaranteed
   gap between them and visually collided on narrow screens. Flexbox with an
   explicit gap replaces the float pairing so there's always breathing room,
   wrapping onto its own line instead of touching when space runs out. */
.tags-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid var(--evt-border, #eee);
    border-bottom: 1px solid var(--evt-border, #eee);
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.share-items { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Sidebar Tags widget (post.php) — reuses the .jka-sb-card shell already
   established for the Categories widget instead of the vendor's bare
   unboxed <ul>, so it doesn't read as loose pills floating in empty space. */
.jka-sb-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 18px; }

/* Share row (post.php) — inline instead of .jka-nom-share-row's block default,
   plus per-platform brand colors */
.jka-blog-share-label { margin-right: 8px; }
.jka-blog-share-row { display: inline-flex; vertical-align: middle; }
.jka-share-whatsapp { background: #25D366; }
.jka-share-x { background: #000; }
.jka-share-facebook { background: #1877F2; }
.jka-share-linkedin { background: #0A66C2; }

/* Author box + comment avatars — round variants of the pattern placeholder.
   Compound selector (two classes) is required, not just specificity theatre:
   .jka-blog-thumb-pattern's own height:260px rule is a single-class selector
   of equal specificity that appears later in this file, so a same-specificity
   override here was silently losing to it — the avatars rendered as tall
   260px-high ovals instead of 80px/60px circles. */
.jka-blog-thumb-pattern.jka-blog-author-avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.jka-blog-thumb-pattern.jka-blog-comment-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; }
/* Vendor's margin-right:30px on .author-img img only targets a real <img> —
   our avatar is a <div> (the initials pattern), so it had zero spacing from
   the name/bio text next to it. Vendor's .author-box also has no clearfix
   for its floated .author-img, so the box's own height didn't account for
   the avatar's height and the circle visually spilled outside the box's
   bottom border whenever the name+bio text was shorter than 80px tall. */
.author-img .jka-blog-thumb-pattern.jka-blog-author-avatar { margin-right: 20px; }
.author-box { overflow: hidden; }
/* Author/commenter avatars show initials (e.g. "JK") rather than a generic
   person icon — the ::after pattern texture still shows through behind it. */
.jka-blog-avatar-initials { font-weight: 800; color: var(--jka-gold); letter-spacing: .02em; }
.jka-blog-thumb-pattern.jka-blog-author-avatar.jka-blog-avatar-initials { font-size: 1.3rem; }
.jka-blog-thumb-pattern.jka-blog-comment-avatar.jka-blog-avatar-initials { font-size: 1rem; }

/* Toast icon spacing */
.jka-toast-icon { margin-right: 6px; }

/* ===== Comments — full redesign, replacing the vendor's bare bordered-list
   rows (.comments-list .comment/.comment-body etc. from style.a6129.css).
   That vendor CSS paired a BS3 .pull-left float on the avatar with a fixed
   margin-left:110px on .comment-body -- .pull-left doesn't exist in BS5 at
   all, so the avatar sat unfloated and the body's fixed margin just left a
   dead gap instead of wrapping around it. Cards use flexbox instead of that
   float/margin pairing so the layout can't silently break the same way. ===== */
.comments-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--jka-black);
}
.comments-heading i { color: var(--jka-gold); font-size: 1.1em; }

.jka-comments-list { list-style: none; margin: 24px 0 0; padding: 0; }
.jka-comment-card {
    position: relative;
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--evt-border, #eee);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.jka-comment-card:last-child { margin-bottom: 0; }
.jka-comment-card:hover {
    border-color: rgba(var(--jka-gold-rgb), .35);
    box-shadow: 0 10px 30px rgba(var(--jka-gold-rgb), .18);
    transform: translateY(-2px);
}
.jka-comment-card .comment-avatar {
    box-shadow: 0 0 0 3px rgba(var(--jka-gold-rgb), .22);
}
.jka-comment-card .comment-body { flex: 1; min-width: 0; }
.jka-comment-card .meta-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    margin-bottom: 8px;
}
.jka-comment-card .comment-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: var(--jka-black);
}
.jka-comment-card .comment-author i { color: var(--jka-gold); font-size: .95em; }
.jka-comment-card .comment-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--evt-text-soft, #6B7280);
    white-space: nowrap;
}
.jka-comment-card .comment-content p { margin: 0; line-height: 1.7; color: #333; font-size: 14.5px; }

@media (max-width: 480px) {
    .jka-comment-card { padding: 16px; gap: 12px; border-radius: 12px; }
    .jka-comment-card .comment-avatar.jka-blog-thumb-pattern.jka-blog-comment-avatar { width: 42px; height: 42px; font-size: .8rem; }
}

/* Real featured-image thumbnails — vendor CSS only sets img-responsive
   (max-width:100%; height:auto), so a tall/portrait source photo rendered at
   full column width without a height cap, blowing the whole page out to
   several times its intended height. Cap it to match the pattern
   placeholder's own fixed height so both cases lay out identically. */
.post-media.post-image img { width: 100%; height: 260px; object-fit: cover; }
@media (max-width: 767px) { .post-media.post-image img { height: 200px; } }
.widget.recent-posts .posts-thumb img { object-fit: cover; }
/* Vendor's margin-right:15px on .posts-thumb img only targets real <img> tags
   — the pattern-placeholder <span> used when a post has no photo doesn't
   match that selector, so it sat flush against the title text with no gap. */
.widget.recent-posts .posts-thumb .jka-blog-thumb-pattern { margin-right: 15px; }

/* Placeholder thumbnail for posts with no real photo yet — reuses the same
   diagonal gold-hairline-on-black texture already built for the nominee hero
   (.jka-nomhero-section::after in events.css), instead of inventing a new
   generic gradient+icon placeholder. */
.jka-blog-thumb-pattern {
    position: relative;
    height: 260px;
    background: var(--jka-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.jka-blog-thumb-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(var(--jka-gold-rgb), .08) 0px,
        rgba(var(--jka-gold-rgb), .08) 1px,
        transparent 1px,
        transparent 14px
    );
    pointer-events: none;
}
.jka-blog-thumb-pattern i {
    position: relative;
    font-size: 2.2rem;
    color: var(--jka-gold-vivid);
}

/* Smaller variant for sidebar "Recent Posts" thumbs (90x65 in the vendor CSS) */
.jka-blog-thumb-pattern.jka-blog-thumb-sm {
    width: 90px;
    height: 65px;
    border-radius: 3px;
    flex-shrink: 0;
}
.jka-blog-thumb-pattern.jka-blog-thumb-sm i { font-size: 1.1rem; }

@media (max-width: 767px) {
    .jka-blog-thumb-pattern { height: 200px; }
}

/* Empty-state (no posts yet / no comments yet) */
.jka-blog-empty { text-align: center; padding: 60px 20px; color: var(--evt-text-faint, #9CA3AF); }
.jka-blog-empty i { font-size: 2.5rem; color: var(--jka-gold); opacity: .3; margin-bottom: 16px; display: block; }

/* Pagination — vendor's own .pagination li a has no explicit size at all
   (just inline link text at whatever the surrounding font-size happens to
   be), so the page numbers read as small, easy-to-miss text. border-radius
   needs !important to win: the vendor rule that sets it already carries
   !important itself, so specificity alone can't override it. */
.paging { margin-top: 30px; }

/* Below md, the sidebar column stacks after the posts column (order-2/
   order-md-1 in blog.php) instead of beside it, so it needs its own top
   gap — Bootstrap's row gutter is horizontal-only and gives stacked columns
   no vertical breathing room by default. */
@media (max-width: 767px) {
    .sidebar-left { margin-top: 40px; }
}
.pagination li a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 14px;
    font-size: 1rem; font-weight: 700;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > li > a:hover {
    border-color: var(--jka-gold) !important;
}

/* Comment form (post.php) — same input treatment as .jka-buyer-form
   (ticket-checkout.php), just under the vendor's own .comments-form wrapper. */
.comments-form.border-box { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.06); margin-top: 24px; margin-bottom: 40px; border: none; }
.comments-form .title-normal { margin-bottom: 20px; }
.comments-form .form-group { margin-bottom: 18px; }
.comments-form label { font-weight: 600; font-size: .86rem; color: var(--jka-black); margin-bottom: 6px; display: block; }
.comments-form .form-control {
    width: 100%; border: 2px solid #eee; border-radius: 8px; padding: 10px 14px;
    font-size: .9rem; color: #333; background: #fafafa; transition: border-color .2s;
    box-sizing: border-box;
}
.comments-form textarea.form-control { resize: vertical; min-height: 110px; }
.comments-form .form-control:focus { border-color: var(--jka-gold); outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(var(--jka-gold-rgb),.08); }
.comments-form .btn.btn-primary { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; }
.comments-form .btn.btn-primary:disabled { opacity: .6; cursor: default; }
.comments-form .btn .fa-spinner { display: none; }
.comments-form .btn.jka-loading .fa-spinner { display: inline-block; }
.comments-form .btn.jka-loading .btn-label { opacity: .8; }

/* Bootstrap 5 toast for comment submit feedback */
.jka-toast-stack { position: fixed; top: 90px; right: 16px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }

/* Related articles (post.php) */
.jka-blog-related { margin: 40px 0; }
.jka-blog-related .widget-title { border-left: 3px solid #9c8354; padding-left: 15px; margin: 0 0 20px; font-size: 16px; text-transform: uppercase; line-height: 1; }
.jka-blog-related-card { display: block; text-decoration: none; margin-bottom: 20px; }
.jka-blog-related-card img,
.jka-blog-related-card .jka-blog-thumb-pattern { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; }
.jka-blog-related-title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #303030; }
.jka-blog-related-card:hover .jka-blog-related-title { color: var(--jka-gold); }