/**
 * TeachDemy — Blog / Articles listing visual refresh.
 *
 * IMPORTANT: like myaccount-*-refresh.css, this only restyles the
 * EXISTING markup Woodmart's own blog loop already outputs
 * (templates/content-default.php, wrapped by woodmart_main_loop()).
 * No template is overridden — just layout, color, spacing on top of
 * the real class names: .wd-posts.wd-blog-holder (grid), .wd-post
 * (card), .wd-post-thumb/.wd-post-img (image), .wd-post-cat
 * (category pill), .wd-post-title, .wd-post-meta/.wd-post-author/
 * .wd-modified-date, .wd-post-excerpt, .wd-post-read-more.
 *
 * Brand tokens match teachdemy-shared.css / myaccount-*-refresh.css.
 */

body.blog .wd-page-content,
body.archive .wd-page-content,
body.single-post .wd-page-content,
body.search-results .wd-page-content {
        --td-navy: #062b2b;
        --td-navy2: #07504b;
        --td-blue: #1769e8;
        --td-cyan: #20b9e8;
        --td-green: #16a673;
        --td-green2: #27c58b;
        --td-mint: #e9fbf4;
        --td-ink: #12243d;
        --td-muted: #6b7b90;
        --td-bg: #f5fbf8;
        --td-line: #dcebe6;
        background: var(--td-bg);
}

body.blog .wd-content-area,
body.archive .wd-content-area,
body.search-results .wd-content-area {
        font-family: "Inter", Arial, sans-serif;
        padding-block: 12px 60px;
}

/* ---------- Archive header ---------- */
body.blog .page-title,
body.archive .page-title {
        font-family: "Inter", sans-serif;
        font-weight: 900;
        letter-spacing: -1px;
        color: var(--td-navy);
}

/* ---------- Grid of post cards ---------- */
body.blog .wd-posts.wd-blog-holder,
body.archive .wd-posts.wd-blog-holder,
body.search-results .wd-posts.wd-blog-holder {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
        margin: 0 !important;
}

@media (max-width: 1024px) {
        body.blog .wd-posts.wd-blog-holder,
        body.archive .wd-posts.wd-blog-holder {
                grid-template-columns: repeat(2, 1fr) !important;
        }
}

@media (max-width: 680px) {
        body.blog .wd-posts.wd-blog-holder,
        body.archive .wd-posts.wd-blog-holder {
                grid-template-columns: 1fr !important;
        }
}

/* ---------- Card ---------- */
body.blog .wd-post,
body.archive .wd-post {
        background: #fff;
        border: 1px solid var(--td-line);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(6, 43, 43, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        margin: 0 !important;
        width: auto !important;
        float: none !important;
}
body.blog .wd-post:hover,
body.archive .wd-post:hover {
        transform: translateY(-5px);
        box-shadow: 0 22px 48px rgba(6, 43, 43, 0.14);
}
body.blog .wd-post-inner,
body.archive .wd-post-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
}

/* ---------- Thumbnail ---------- */
body.blog .wd-post-thumb,
body.archive .wd-post-thumb {
        margin: 0 !important;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        position: relative;
}
body.blog .wd-post-img img,
body.archive .wd-post-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
}
body.blog .wd-post:hover .wd-post-img img,
body.archive .wd-post:hover .wd-post-img img {
        transform: scale(1.06);
}

/* ---------- Body ---------- */
body.blog .wd-post-content,
body.archive .wd-post-content {
        padding: 22px 24px 26px;
        display: flex;
        flex-direction: column;
        flex: 1;
}

/* Category pill */
body.blog .wd-post-cat,
body.archive .wd-post-cat {
        order: -1;
        margin-bottom: 10px;
}
body.blog .wd-post-cat a,
body.archive .wd-post-cat a {
        display: inline-flex;
        background: var(--td-mint) !important;
        color: var(--td-green) !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 5px 11px !important;
        border-radius: 999px !important;
}

/* Title */
body.blog .wd-post-title,
body.archive .wd-post-title {
        margin: 0 0 12px !important;
        font-family: "Inter", sans-serif;
        font-size: 17px !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
}
body.blog .wd-post-title a,
body.archive .wd-post-title a {
        color: var(--td-navy) !important;
        transition: color 0.2s;
}
body.blog .wd-post-title a:hover,
body.archive .wd-post-title a:hover {
        color: var(--td-green) !important;
}

/* Excerpt */
body.blog .wd-post-excerpt,
body.archive .wd-post-excerpt {
        color: var(--td-muted) !important;
        font-size: 13px !important;
        line-height: 1.75 !important;
        margin-bottom: 16px !important;
}

/* Meta row (author + date + share + comments) */
body.blog .wd-post-meta,
body.archive .wd-post-meta {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin: 0 0 14px !important;
        padding-top: 14px;
        border-top: 1px solid var(--td-line);
        order: 3;
        font-size: 11.5px;
        color: var(--td-muted);
}
body.blog .wd-post-author,
body.archive .wd-post-author,
body.blog .wd-modified-date,
body.archive .wd-modified-date {
        font-size: 11.5px !important;
        color: var(--td-muted) !important;
}

/* Read more link — pushed to the bottom of the card */
body.blog .wd-post-read-more,
body.archive .wd-post-read-more {
        margin-top: auto !important;
        order: 4;
}
body.blog .wd-post-read-more a,
body.archive .wd-post-read-more a {
        color: var(--td-blue) !important;
        font-weight: 800 !important;
        font-size: 12.5px !important;
}
body.blog .wd-post-read-more a:hover,
body.archive .wd-post-read-more a:hover {
        color: var(--td-green) !important;
}

/* ---------- Pagination / "Load more" ---------- */
body.blog .wd-load-more-wrapper .button,
body.archive .wd-load-more-wrapper .button,
body.blog .woodmart-pagination a,
body.archive .woodmart-pagination a {
        border-radius: 10px !important;
        font-weight: 800 !important;
}
body.blog .woodmart-pagination .current,
body.archive .woodmart-pagination .current {
        background: var(--td-green) !important;
        border-color: var(--td-green) !important;
}

/* =====================================================================
   ROUND 7 — §24 Article font-size controls (A− / A / A+ pill).
   Injected above the article body by teachdemy-enhancements.js §24.
   ===================================================================== */
.td-fsz{
        display:flex;
        align-items:center;
        gap:4px;
        background:#f7fdfa;
        border:1px solid #dcebe6;
        border-radius:999px;
        padding:4px;
        margin:0 0 18px;
        width:max-content;
        margin-left:auto;
}
.td-fsz__btn{
        appearance:none;
        border:0;
        background:transparent;
        color:#354a55;
        font:800 12.5px/1 Inter,system-ui,sans-serif;
        padding:7px 12px;
        border-radius:999px;
        cursor:pointer;
        transition:background .15s ease,color .15s ease;
}
.td-fsz__btn:hover{
        background:#e9fbf4;
        color:#062b2b;
}
.td-fsz__btn.is-active{
        background:#16a673;
        color:#fff;
}
.td-fsz__reset{
        font-size:13.5px;
}
@media (max-width:600px){
        .td-fsz{margin-left:0}
}
/* Dark mode */
html[data-theme="dark"] .td-fsz{background:#0a3230;border-color:#12463f}
html[data-theme="dark"] .td-fsz__btn{color:#a9c3bb}
html[data-theme="dark"] .td-fsz__btn:hover{background:rgba(22,166,115,.15);color:#e9fbf4}
html[data-theme="dark"] .td-fsz__btn.is-active{background:#16a673;color:#fff}

/* ------------------------------------------------------------------
   ROUND 9 — §27 reading-time pill · §28 heading anchors · §29
   highlight-to-share bubble.
   ------------------------------------------------------------------ */

/* §27 — reading-time pill (injected as the first item of entry-meta) */
.td-readtime{
        display:inline-flex;align-items:center;gap:6px;
        background:#e9fbf4;color:#0d7a57;border:1px solid #bfeeda;
        border-radius:999px;padding:3px 12px 3px 9px;
        font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;
}
.td-readtime svg{width:13px;height:13px;flex:none}
.entry-meta.td-has-readtime,
.post-meta.td-has-readtime,
.wd-post-meta.td-has-readtime{
        display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
@media print{.td-readtime{display:none}}

/* §28 — heading anchor chip (appears on hover, before the heading text) */
.td-has-anchor{position:relative}
.td-hanchor{
        display:inline-flex;align-items:center;justify-content:center;
        width:26px;height:26px;margin-right:2px;margin-left:-30px;
        vertical-align:middle;border:0;border-radius:7px;
        background:transparent;color:#16a673;cursor:pointer;
        opacity:0;transform:translateX(-4px);
        transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.td-hanchor svg{width:15px;height:15px}
h2.td-has-anchor:hover .td-hanchor,
h3.td-has-anchor:hover .td-hanchor,
.td-hanchor:focus-visible{
        opacity:1;transform:translateX(0);
}
.td-hanchor:hover{background:#e9fbf4}
.td-hanchor.is-copied{background:#16a673;color:#fff;opacity:1;transform:translateX(0)}
@media (max-width:768px){
        .td-hanchor{margin-left:0;opacity:.55;transform:none} /* touch: always faintly visible */
}
@media print{.td-hanchor{display:none}}

/* §29 — highlight-to-share bubble */
.td-selsocial{
        position:absolute;z-index:9990;display:none;
        background:#062b2b;border-radius:11px;padding:4px;
        box-shadow:0 10px 30px rgba(6,43,43,.38);
}
.td-selsocial button{
        display:inline-flex;align-items:center;gap:5px;
        border:0;background:transparent;color:#c9f0e0;
        font-size:12px;font-weight:700;line-height:1;
        padding:7px 11px;border-radius:8px;cursor:pointer;
}
.td-selsocial button:hover{background:rgba(255,255,255,.12);color:#fff}
.td-selsocial button.is-copied{background:#16a673;color:#fff}
.td-selsocial svg{width:14px;height:14px;flex:none}
@media print{.td-selsocial{display:none !important}}

/* Dark mode — Round 9 */
html[data-theme="dark"] .td-readtime{background:#0a3230;border-color:#12443d;color:#9adbc2}
html[data-theme="dark"] .td-hanchor:hover{background:rgba(22,166,115,.15)}
html[data-theme="dark"] .td-selsocial{background:#04201e;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
        .td-hanchor{transition:none;transform:none}
}

/* ============================================================
   Round 10 — resume-reading pill + code copy buttons + polish
   ============================================================ */

/* Resume pill — fixed, floats in the reading flow corner (logical
   properties keep it correct in RTL too). */
.td-resume-pill{
        position:fixed;bottom:22px;inset-inline-start:22px;z-index:990;
        display:inline-flex;align-items:center;gap:9px;
        background:#062b2b;color:#e9fbf4;
        border:1px solid rgba(22,166,115,.45);border-radius:999px;
        padding:10px 14px 10px 18px;
        font-size:12.5px;font-weight:800;line-height:1;cursor:pointer;
        box-shadow:0 12px 32px rgba(6,43,43,.35);
        animation:td-resume-in .35s cubic-bezier(.2,.9,.3,1.2);
        transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.td-resume-pill:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(6,43,43,.45);background:#07504b}
.td-resume-pill:focus-visible{outline:2px solid #16a673;outline-offset:3px}
.td-resume-pill svg{width:14px;height:14px;flex:none;color:#27c58b}
.td-resume-pill span{white-space:nowrap}
.td-resume-pill__x{
        border:0;background:rgba(255,255,255,.12);color:#c9f0e0;
        width:22px;height:22px;border-radius:50%;cursor:pointer;
        font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
        transition:background .15s ease,color .15s ease;
}
.td-resume-pill__x:hover{background:rgba(255,255,255,.24);color:#fff}
@keyframes td-resume-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Code copy button — pinned inside each <pre> (logical inset = RTL-safe). */
pre.td-has-codecopy{position:relative}
.td-codecopy{
        position:absolute;inset-inline-end:10px;top:10px;z-index:2;
        display:inline-flex;align-items:center;gap:6px;
        border:1px solid #dcebe6;background:rgba(255,255,255,.92);color:#07504b;
        font-size:11px;font-weight:800;line-height:1;
        padding:7px 11px;border-radius:8px;cursor:pointer;
        box-shadow:0 2px 8px rgba(6,43,43,.08);
        transition:all .15s ease;
}
.td-codecopy:hover{border-color:#16a673;color:#0d7a57;background:#e9fbf4}
.td-codecopy:focus-visible{outline:2px solid #16a673;outline-offset:2px}
.td-codecopy svg{width:13px;height:13px;flex:none}
.td-codecopy.is-copied{background:#16a673;border-color:#16a673;color:#fff}

/* Dark mode — Round 10 */
html[data-theme="dark"] .td-resume-pill{background:#04201e;box-shadow:0 12px 32px rgba(0,0,0,.55)}
html[data-theme="dark"] .td-codecopy{background:rgba(4,32,30,.92);border-color:#12443d;color:#9adbc2;box-shadow:none}
html[data-theme="dark"] .td-codecopy:hover{border-color:#16a673;background:#0a3230}
html[data-theme="dark"] .td-codecopy.is-copied{background:#16a673;border-color:#16a673;color:#fff}

/* Print + reduced motion — Round 10 */
@media print{.td-resume-pill{display:none !important}.td-codecopy{display:none !important}}
@media (prefers-reduced-motion:reduce){
        .td-resume-pill{animation:none;transition:none}
        .td-resume-pill:hover{transform:none}
        .td-codecopy{transition:none}
}

/* =====================================================================
   Round 11 — Reading list (§32) + clean article print
   ===================================================================== */

/* --- Save-for-later button at the top of the article --- */
.td-readlist-save{margin:0 0 18px}
.td-readlist-save__btn{
        display:inline-flex;align-items:center;gap:8px;
        border:1.5px solid #dcebe6;background:#f7fdfa;color:#07504b;
        font-size:13px;font-weight:800;line-height:1;
        padding:10px 18px;border-radius:999px;cursor:pointer;
        transition:all .16s ease;
}
.td-readlist-save__btn:hover{border-color:#16a673;background:#e9fbf4;transform:translateY(-1px)}
.td-readlist-save__btn:focus-visible{outline:2px solid #16a673;outline-offset:2px}
.td-readlist-save__btn svg{width:15px;height:15px;flex:none}
.td-readlist-save__btn.is-saved{background:#16a673;border-color:#16a673;color:#fff}

/* --- Floating launcher (bottom corner, logical inset = RTL-safe) --- */
.td-readlist-launch{
        position:fixed;inset-inline-end:18px;bottom:78px;z-index:9990;
        width:46px;height:46px;border-radius:14px;border:none;cursor:pointer;
        background:#062b2b;color:#fff;display:grid;place-items:center;
        box-shadow:0 10px 26px rgba(6,43,43,.35);
        transition:transform .16s ease,background .16s ease;
}
.td-readlist-launch:hover{background:#0d7a57;transform:translateY(-2px)}
.td-readlist-launch:focus-visible{outline:2px solid #16a673;outline-offset:2px}
.td-readlist-launch svg{width:20px;height:20px}
.td-readlist-launch__count{
        position:absolute;top:-6px;inset-inline-end:-6px;
        min-width:19px;height:19px;border-radius:999px;
        background:#f7bd31;color:#062b2b;
        font-size:11px;font-weight:800;line-height:19px;text-align:center;
        padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* --- Drawer panel --- */
.td-readlist-panel{
        position:fixed;inset-inline-end:18px;bottom:134px;z-index:9991;
        width:min(340px,calc(100vw - 36px));max-height:min(430px,60vh);
        background:#fff;border:1px solid #dcebe6;border-radius:16px;
        box-shadow:0 24px 60px rgba(6,43,43,.22);
        padding:16px 16px 12px;overflow:auto;
        font-family:inherit;
}
.td-readlist-panel[hidden]{display:none}
.td-readlist-panel__head{
        display:flex;align-items:center;gap:8px;
        padding-bottom:10px;margin-bottom:10px;
        border-bottom:1px solid #e6f0ec;
}
.td-readlist-panel__head strong{color:#062b2b;font-size:14.5px}
.td-readlist-panel__n{
        background:#e9fbf4;color:#0d7a57;border-radius:999px;
        font-size:11px;font-weight:800;padding:2px 9px;line-height:1.5;
}
.td-readlist-panel__x{
        margin-inline-start:auto;border:none;background:none;cursor:pointer;
        color:#6b7b90;font-size:20px;line-height:1;padding:2px 6px;border-radius:6px;
}
.td-readlist-panel__x:hover{background:#f0faf6;color:#062b2b}
.td-readlist-panel__empty{color:#6b7b90;font-size:12.5px;line-height:1.8;margin:6px 0}
.td-readlist-panel__list{list-style:none;margin:0;padding:0}
.td-readlist-panel__list li{
        display:flex;align-items:center;gap:8px;
        padding:9px 4px;border-bottom:1px dashed #e6f0ec;
}
.td-readlist-panel__list li:last-child{border-bottom:none}
.td-readlist-panel__list a{
        flex:1;min-width:0;color:#062b2b;text-decoration:none;
        font-size:13px;font-weight:700;line-height:1.55;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-readlist-panel__list a:hover{color:#0d7a57}
.td-readlist-panel__pct{
        flex:none;background:#e9fbf4;color:#0d7a57;border-radius:999px;
        font-size:10.5px;font-weight:800;padding:3px 8px;
}
.td-readlist-panel__rm{
        flex:none;border:none;background:none;cursor:pointer;
        color:#9ab4ad;font-size:13px;padding:4px 6px;border-radius:6px;line-height:1;
}
.td-readlist-panel__rm:hover{background:#fbeaea;color:#a33}
.td-readlist-panel__clear{
        display:block;width:100%;margin-top:10px;
        border:1px solid #dcebe6;background:#f7fdfa;color:#6b7b90;
        font-size:12px;font-weight:700;padding:9px;border-radius:9px;cursor:pointer;
        transition:all .15s ease;
}
.td-readlist-panel__clear:hover{border-color:#a33;color:#a33;background:#fdf3f3}

/* Dark mode — Round 11 */
html[data-theme="dark"] .td-readlist-save__btn{background:#04201e;border-color:#12443d;color:#9adbc2}
html[data-theme="dark"] .td-readlist-save__btn:hover{background:#0a3230;border-color:#16a673}
html[data-theme="dark"] .td-readlist-save__btn.is-saved{background:#16a673;border-color:#16a673;color:#fff}
html[data-theme="dark"] .td-readlist-panel{background:#04201e;border-color:#12443d;box-shadow:0 24px 60px rgba(0,0,0,.6)}
html[data-theme="dark"] .td-readlist-panel__head{border-color:#0d2f2b}
html[data-theme="dark"] .td-readlist-panel__head strong{color:#e6f4ee}
html[data-theme="dark"] .td-readlist-panel__n{background:#0a3230;color:#9adbc2}
html[data-theme="dark"] .td-readlist-panel__x{color:#7ea89e}
html[data-theme="dark"] .td-readlist-panel__x:hover{background:#0a3230;color:#e6f4ee}
html[data-theme="dark"] .td-readlist-panel__empty{color:#7ea89e}
html[data-theme="dark"] .td-readlist-panel__list li{border-color:#0d2f2b}
html[data-theme="dark"] .td-readlist-panel__list a{color:#e6f4ee}
html[data-theme="dark"] .td-readlist-panel__list a:hover{color:#27c58b}
html[data-theme="dark"] .td-readlist-panel__pct{background:#0a3230;color:#9adbc2}
html[data-theme="dark"] .td-readlist-panel__clear{background:#04201e;border-color:#12443d;color:#7ea89e}

/* Print + reduced motion — Round 11 */
@media print{
        .td-readlist-save,.td-readlist-launch,.td-readlist-panel{display:none !important}
}
@media (prefers-reduced-motion:reduce){
        .td-readlist-save__btn,.td-readlist-launch{transition:none}
        .td-readlist-launch:hover,.td-readlist-save__btn:hover{transform:none}
}

/* --- Clean article print (single posts) — Round 11 ---
   Hides all site chrome and prints just the article with a tidy header. */
@media print{
        body.single-post .top-bar,
        body.single-post header.header,
        body.single-post .navactions,
        body.single-post .menu,
        body.single-post #td-menu-toggle,
        body.single-post .td-auth-buttons,
        body.single-post .td-search-toggle,
        body.single-post .td-theme-toggle,
        body.single-post button.cart-link,
        body.single-post .breadcrumbs,
        body.single-post .td-readtime,
        body.single-post .td-toc,
        body.single-post .td-hanchor,
        body.single-post .td-selsocial,
        body.single-post .post-navigation,
        body.single-post .nav-links,
        body.single-post #comments,
        body.single-post #respond,
        body.single-post .related-posts,
        body.single-post .td-author-box,
        body.single-post .share-buttons,
        body.single-post .post-share,
        body.single-post .tags-links,
        body.single-post .entry-footer,
        body.single-post footer#site-footer,
        body.single-post #td-scroll-top,
        body.single-post .td-cookie-banner,
        body.single-post .td-reading-progress,
        body.single-post .td-resume-pill,
        body.single-post .td-readlist-save,
        body.single-post .td-readlist-launch,
        body.single-post .td-readlist-panel,
        body.single-post .td-sticky-enroll,
        body.single-post .widget-area,
        body.single-post .sidebar-container{
                display:none !important;
        }
        body.single-post{
                background:#fff !important;
                color:#000 !important;
                font-size:11.5pt !important;
                line-height:1.6 !important;
        }
        body.single-post .entry-content a{
                color:#000 !important;
                text-decoration:underline !important;
        }
        /* Print the link destination next to anchors (Usability: paper trails). */
        body.single-post .entry-content a[href^="http"]::after{
                content:" (" attr(href) ")";
                font-size:9pt;
                color:#444;
                word-break:break-all;
        }
        body.single-post .entry-content pre,
        body.single-post .entry-content blockquote,
        body.single-post .entry-content table,
        body.single-post .entry-content img{
                page-break-inside:avoid;
                break-inside:avoid;
        }
        body.single-post h1, body.single-post h2, body.single-post h3{
                page-break-after:avoid;
                break-after:avoid;
        }
        body.single-post .entry-content img{
                max-width:100% !important;
                height:auto !important;
        }
}