/* ==========================================================================
   Frontend Global Theme
   ========================================================================== */
:root {
    --primary: #2563eb;
    --primary-dark: #1e4ed8;
    --accent: #1abc9c;
    --text: #111827;
    --text-muted: #6b7280;
    --bg: #f9fafb;
    --surface: #ffffff;
    --border: #e5e7eb;
    --radius: 12px;
    --shadow: 0 6px 20px rgba(0, 0, 0, .06);
    --transition: all .25s ease;
}

/* Base Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.form label{
    margin-top: 10px;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
    height:auto;
    border-radius: var(--radius);
}

a {
    text-decoration: none;
    color: var(--primary);
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* global box-sizing (recommended) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Header + Navigation
   ========================================================================== */
.site-header {
    background: var(--surface);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-bottom: 0;
    /* ensure header has no extra bottom spacing */
}

.site-header .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* .navbar {
    display: flex;
    gap: 1.25rem;
} */

/* .navbar a {
    color: var(--text);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-weight: 500;
} */

/* .navbar a:hover {
    background: rgba(37, 99, 235, .08);
} */

/* .navbar a.active {
    background: var(--primary);
    color: #fff;
} */

/* Mobile Navbar */
@media (max-width: 768px) {
    /* .navbar {
        display: none;
        flex-direction: column;
        background: var(--surface);
        position: absolute;
        top: 100%;
        right: 0;
        padding: 1rem;
        box-shadow: var(--shadow);
    } */

    /* .navbar.open {
        display: flex;
    } */
}

/* ==========================================================================
   Page Banner
   ========================================================================== */
.page-banner {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: #fff;
    padding: 2.5rem 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 0;
    /* remove any top gap */
    padding-top: 2rem;
    /* was 3rem or more, reduce for tighter look */
    padding-bottom: 2rem;
}

.page-banner h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.page-banner p {
    max-width: 720px;
    margin: 0 auto;
    opacity: 0.95;
}

/* ==========================================================================
   Blog List Page Layout
   ========================================================================== */
.blog-list-page .blog-layout {
    /* display: grid; */
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    margin-top: 0;
}

.blog-list,
.blog-sidebar {
    margin-top: 0;
    /* both start aligned */
}

@media (max-width: 992px) {
    .blog-list-page .blog-layout {
        grid-template-columns: 1fr;
    }
}

.blog-list {
    display: grid;
    gap: 2rem;
}

/* Sidebar categories */
.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    transition: var(--transition);
}

.category-list a:hover {
    background: rgba(37, 99, 235, .06);
    color: var(--primary);
}

.category-list .count {
    background: #f1f5f9;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted);
}



.blog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-4px);
}

.blog-card img {
    width: 100%;
    height: auto;
}

.blog-card .blog-content {
    padding: 1rem 1.25rem;
}

.blog-card h2,
.blog-card h3 {
    margin-bottom: 0.5rem;
}

.blog-card .meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.blog-card .excerpt {
    margin-bottom: 1rem;
}

.blog-content {
    padding: 1rem 1.25rem;
}

.blog-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.blog-content .meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.blog-content .excerpt {
    margin-bottom: 1rem;
    color: var(--text);
}

/* Featured (latest post) */
.blog-card.featured {
    grid-column: 1 / -1;
}

.blog-card.featured img {
    max-height: 420px;
    object-fit: cover;
}

.blog-card.featured h2 {
    font-size: 2rem;
}

/* Two-column and three-column grids */
.blog-grid {
    display: grid;
    gap: 2rem;
}

.blog-grid.grid-2 {
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
}

.blog-grid.grid-3 {
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {

    .blog-grid.grid-2,
    .blog-grid.grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 2rem 0;
}

.pagination .btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.pagination .btn.active {
    background: var(--primary);
    color: #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-muted);
    margin-top: 3rem;
}


/* ==========================================================================
   Blog Page
   ========================================================================== */
/* Widen the article max-width for desktop */
.blog-page {
    max-width: 1100px;
    /* was 900px */
    margin: 2rem auto;
}

.blog-article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.blog-cover {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.blog-article h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.blog-article .meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.blog-body {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--text);
}

.blog-body p {
    margin-bottom: 1.25rem;
}


.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4 {
    line-height: 1.3;
    margin: 2rem 0 1rem;
    font-weight: 700;
    color: #1f2937;
    /* darker, strong headings */
}

.blog-body h1 {
    font-size: 2.2rem;
}

.blog-body h2 {
    font-size: 1.6rem;
}

.blog-body h3 {
    font-size: 1.3rem;
}

.blog-body ul,
.blog-body ol {
    margin: 1rem 0 1.5rem 1.5rem;
    padding: 0;
}

.blog-body ul {
    list-style: disc;
}

.blog-body li {
    margin-bottom: 0.5rem;
}

.blog-body pre {
    background: #111827;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.blog-body blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.75rem 1rem;
    margin: 1.5rem 0;
    background: #f9fafb;
    font-style: italic;
    color: #374151;
    border-radius: 8px;
}

.blog-body code {
    background: #f3f4f6;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: Menlo, Monaco, "Courier New", monospace;
}

.blog-body img {
    margin: 2rem auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ==========================================================================
   Social Share
   ========================================================================== */
/* .social-share {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
} */

/* .social-share p {
  margin-right: 0.75rem;
  font-weight: 500;
} */

/* .social-share .btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 8px;
} */

/* ==========================================================================
   Comments
   ========================================================================== */
.comments {
    margin-top: 3rem;
}

.comments h2 {
    margin-bottom: 1.25rem;
}

.comment {
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.comment strong {
    color: var(--primary);
}

.comment .date {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.comment-form {
    margin-top: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.comment-form h3 {
    margin-bottom: 1rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
}

.comment-form textarea {
    min-height: 140px;
    resize: vertical;
}

.comment-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.comment-form button:hover {
    background: var(--primary-dark);
}

/* ==========================================================================
   Blog Layout: Article + Sidebar
   ========================================================================== */
.blog-layout {
    /* display: grid; */
    grid-template-columns: 1fr 280px;
    /* wider article, slimmer sidebar */
    gap: 2.5rem;
    /* a little more breathing room */
}

@media (min-width: 1200px) {
    .blog-layout {
        grid-template-columns: 2fr 1fr;
        /* ~66% article, 33% sidebar */
    }
}

@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
        /* single column on tablets/mobiles */
    }
}



.blog-sidebar {
    display: grid;
    gap: 1.25rem;
    align-self: start;
    /* ensures it aligns to top of grid */
}

/* ==========================================================================
   Sidebar Widgets
   ========================================================================== */
.widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.widget-header {
    padding: 0.9rem 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}

.widget-body {
    padding: 0.9rem 1rem;
}

/* Post lists (Recent/Popular) */
.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.post-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 0.75rem;
    align-items: start;
}

.post-item .thumb {
    width: 68px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e7eb;
    display: block;
}

.post-item .post-title {
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.post-item .post-title:hover {
    color: var(--primary);
}

.post-item .meta {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Ranked list (Popular) */
.post-list.ranked .post-item {
    grid-template-columns: 28px 1fr;
}

.rank {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

/* Archives */
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.archive-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
    padding: 0.35rem 0.25rem;
    border-radius: 8px;
}

.archive-list a::before {
    content: "📁";
    font-size: 0.95rem;
}

.archive-list a:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, .06);
}

/* Small button size used in share row */
.btn.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* ==========================================================================
   Table of Contents (Sidebar Widget)
   ========================================================================== */
.toc-widget .toc-body {
    display: block;
    /* default: visible on desktop */
}

.widget .toggle-icon {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
    margin-left: auto;
    color: var(--text-muted);
}

/* TOC structure */
.toc {
    font-size: 0.95rem;
    line-height: 1.5;
}

.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc li ul {
    margin-top: 0.3rem;
    margin-left: 1rem;
    border-left: 2px solid var(--border);
    padding-left: 0.6rem;
}

.toc a {
    color: var(--text);
    padding: 0.25rem 0;
    display: inline-block;
    border-radius: 6px;
    transition: var(--transition);
}

.toc a:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, .06);
}

.toc a.active {
    font-weight: 600;
    color: var(--primary);
    background: rgba(37, 99, 235, .06);
}

/* Parent active state looks slightly different (subtle emphasis) */
.toc li>a.active {
    border-left: 3px solid var(--primary);
    padding-left: 0.5rem;
}

/* Collapsible behavior (mobile only) */
@media (max-width: 768px) {
    .widget .widget-body {
        display: none;
    }

    .widget.open .widget-body {
        display: block;
    }

    .widget.open .toggle-icon {
        transform: rotate(180deg);
    }

    .widget .widget-header {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Show desktop TOC only on larger screens */
.blog-sidebar .toc-widget {
    display: block;
}

.mobile-toc {
    display: none;
}

@media (max-width: 992px) {
    .blog-sidebar .toc-widget {
        display: none;
    }

    /* hide sidebar TOC */
    .mobile-toc {
        display: block;
        margin-bottom: 1.5rem;
    }

    /* show article TOC */
}

/* TOC scrollable container */
.toc {
    max-height: 400px;
    /* adjust height as needed */
    overflow-y: auto;
    padding-right: 6px;
    /* room for scrollbar */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--primary) #f0f0f0;
    padding-bottom: 1rem;
}

.toc {
    /* height controlled dynamically; keep max as a safety cap */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
    /* no right/bottom padding that can clip the bar */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    /* iOS momentum scrolling */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--primary) #f0f0f0;
}

/* Ensure UL/LIs don’t add unexpected bottom space that can get clipped */
.toc ul {
    margin: 0;
    padding: 0 0.5rem 0 0;
}

.toc li {
    margin: 0;
}

/* Make sure parent widget isn't clipping the TOC */
.blog-sidebar .widget,
.toc-widget {
    overflow: visible;
}

/* WebKit scrollbars (Chrome, Edge, Safari) */
.toc::-webkit-scrollbar {
    width: 6px;
}

.toc::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.toc::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
}

/* On mobile, make it a bit shorter */
@media (max-width: 768px) {
    .toc {
        max-height: 250px;
    }
}

/* Widget wrapper (non-scrolling) */
.toc-widget {
    position: relative;
    /* anchor gradient here */
    overflow: hidden;
    /* ensures gradient sits above scrollable area */
}

/* Gradient overlay – stays fixed at bottom of widget */
.toc-widget::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
    z-index: 2;
}

/* Default: gradient visible */
.widget::after {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide gradient when scroll is at bottom */
.widget.at-bottom::after {
    opacity: 0;
}

/* Widget container holds the fade */
.widget {
    position: relative;
    overflow: hidden;
    /* ensures fade stays inside */
}

/* Scrollable area inside widget */
.scrollable-widget {
    max-height: 300px;
    /* adjust per widget type */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

/* Spacer so last items aren’t cut */
.scrollable-widget::after {
    content: "";
    display: block;
    height: 12px;
}

/* Gradient fade overlay (default visible) */
.widget::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Sidebar container becomes sticky */
@media (min-width: 993px) {
    .blog-sidebar {
        position: sticky;
        top: calc(var(--header-height, 80px) + 20px);
        align-self: start;
    }

    /* TOC widget goes back to normal block flow */
    .toc-widget {
        position: relative;
        top: auto;
        z-index: auto;
    }
}

.blog-layout {
    align-items: start;
    /* ensures sidebar sticks relative to article */
}

/* Hide collapse/expand toggle on desktop for all widgets */
@media (min-width: 993px) {
    .widget .toggle-icon {
        display: none;
    }

    /* On desktop, keep widget content always visible */
    .widget .widget-content {
        display: block !important;
    }

    /* Prevent "clickable" header cursor when toggling is disabled */
    .widget .widget-header {
        cursor: default;
    }
}

/* Archives widget */
.archives-widget .archive-years {
    list-style: none;
    margin: 0;
    padding: 0;
}

.archives-widget .year {
    margin-bottom: 0.5rem;
}

.archives-widget .year-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0;
    text-align: left;
}

.archives-widget .year-toggle::after {
    content: "▸";
    transition: transform 0.2s ease;
}

.archives-widget .year.open .year-toggle::after {
    transform: rotate(90deg);
}

.archives-widget .months {
    list-style: none;
    margin: 0.25rem 0 0 1rem;
    padding: 0;
    display: none;
    /* hidden by default */
    transition: all 0.3s ease;
}

.archives-widget .months li {
    margin: 0.25rem 0;
}

.archives-widget .months a {
    text-decoration: none;
    color: var(--text-color, #333);
    font-size: 0.95rem;
}


/* Comment form styling */
.comment-form .form-group {
    margin-bottom: 1.2rem;
    position: relative;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--primary-color, #007bff);
    outline: none;
    background: #fff;
}

/* Error state */
.comment-form .form-group.invalid input,
.comment-form .form-group.invalid textarea {
    border-color: var(--error-color, #d9534f);
    background: #fff5f5;
}

/* Error messages */
.comment-form .error-message {
    display: none;
    font-size: 0.85rem;
    color: var(--error-color, #d9534f);
    margin-top: 0.35rem;
}

/* Show error when invalid */
.comment-form .form-group.invalid .error-message {
    display: block;
}

/* Success message */
.success-message {
    display: none;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--success-color, #28a745);
    background: #f6fff9;
    color: var(--success-color, #28a745);
    border-radius: 6px;
    font-size: 0.95rem;
}

.success-message.show {
    display: block;
}

/* Comments list */
.comments-list {
    margin-top: 2rem;
}

/* Single comment */
.comment {
    border: 1px solid #e1e1e1;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    background: #fafafa;
}

/* Comment header */
.comment-header {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.comment-header strong {
    color: var(--primary-color, #007bff);
}

.comment-header .date {
    color: #888;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* Comment body */
.comment-body p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

/* Reply button */
.comment-actions {
    margin-top: 0.5rem;
}

.comment-actions .reply-btn {
    background: none;
    border: none;
    color: var(--primary-color, #007bff);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.comment-actions .reply-btn:hover {
    text-decoration: underline;
}

/* Nested replies */
.replies {
    margin-top: 1rem;
    margin-left: 2rem;
    border-left: 2px solid #e1e1e1;
    padding-left: 1rem;
}

/* Second-level replies styling */
.replies .replies .comment {
    background: #f0f4f8;
    /* slightly different background */
    font-size: 0.9rem;
    /* slightly smaller text */
    border-color: #d0d7de;
}

.replies .replies {
    border-left: 2px dashed #d0d7de;
    /* distinguish with dashed border */
}

/* Inline reply form (same validation look as comment form) */
.inline-reply-form {
    margin-top: 1rem;
}

.inline-reply-form .form-group {
    margin-bottom: 0.8rem;
}

.inline-reply-form input,
.inline-reply-form textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Error states */
.inline-reply-form .form-group.invalid input,
.inline-reply-form .form-group.invalid textarea {
    border-color: var(--error-color, #d9534f);
    background: #fff5f5;
}

.inline-reply-form .error-message {
    display: none;
    font-size: 0.8rem;
    color: var(--error-color, #d9534f);
    margin-top: 0.25rem;
}

.inline-reply-form .form-group.invalid .error-message {
    display: block;
}

/* Success message for inline reply */
.inline-reply-form .success-message {
    display: none;
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--success-color, #28a745);
    background: #f6fff9;
    color: var(--success-color, #28a745);
    border-radius: 6px;
    font-size: 0.85rem;
}

.inline-reply-form .success-message.show {
    display: block;
}

/* LIKE BUTTON CSS : start */
/* .article-actions {
  margin-top: 2rem;
  text-align: center;
} */

/* .like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 30px;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.like-button:hover {
  background: #f0f8ff;
  border-color: #3399ff;
}

.like-button.liked {
  background: #3399ff;
  border-color: #3399ff;
  color: #fff;
}

.like-button .like-icon {
  font-size: 1.2rem;
}

.like-button .like-count {
  font-weight: bold;
} */

/* Like button base - no background */
.share-btn.like {
    background: none;
    /* no background */
    color: #555;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    /* remove extra padding */
}

/* Like count hidden until liked */
.share-btn.like .like-count {
    font-size: 0.75rem;
    /* smaller than before */
    font-weight: 500;
    /* lighter weight */
    display: none;
    color: #555;
    position: relative;
    top: 2px;
    /* nudge downward for alignment */
    opacity: 0.85;
    /* softer visual */
}

/* ✅ Show counter when liked */
.share-btn.like.liked .like-count {
    display: inline;
    color: #3399ff;
    /* highlight blue */
    opacity: 1;
    /* stronger when active */
}

/* ✅ Change only the icon color */
.share-btn.like.liked i {
    color: #3399ff;
}

/* LIKE BUTTON CSS : END */

.article-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.article-actions .like-button {
    flex-shrink: 0;
}

.article-actions .social-share {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.article-actions .social-share p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

.social-share .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #555;
    font-size: 16px;
    transition: all 0.3s ease;
}

.social-share .share-btn:hover {
    color: #fff;
}

.social-share .share-btn.facebook:hover {
    background: #3b5998;
}

.social-share .share-btn.twitter:hover {
    background: #1da1f2;
}

.social-share .share-btn.linkedin:hover {
    background: #0077b5;
}

/* Copy button styling */
.social-share .share-btn.copy {
    background: #f5f5f5;
    color: #555;
    border: none;
    cursor: pointer;
}

.social-share .share-btn.copy:hover {
    background: #444;
    color: #fff;
}

/* SHARE BUTTON TOOLTIP STYLING : START */
/* Base for share buttons */
.social-share .share-btn {
    position: relative;
    /* needed for tooltip */
}

/* Tooltip base */
.share-btn .tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tooltip arrow */
.share-btn .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show on hover (for all except Copy) */
.share-btn:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Copy Link specific (shown by JS instead of hover) */
#copyLinkBtn:hover .tooltip {
    opacity: 0;
    /* prevent hover tooltip overriding click state */
}

#copyLinkBtn.show-tooltip .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* SHARE BUTTON TOOLTIP STYLING : END */