/*
 * Article / Blog Layout widget — Techlinkx Mobile Manager
 * Ported from the single-blog-page mockup. All design tokens are scoped
 * under .tlxmm-article so nothing leaks to the global :root.
 */

.tlxmm-article{
    --tlxmm-art-white:#ffffff;
    --tlxmm-art-light:#f7f8fa;
    --tlxmm-art-header-bg:#f1f3f8;
    --tlxmm-art-border:#e2e6ee;
    --tlxmm-art-border-soft:#eaecf2;
    --tlxmm-art-text-dark:#1a1f2e;
    --tlxmm-art-text-body:#3d4459;
    --tlxmm-art-text-muted:#7b849a;
    --tlxmm-art-accent:#1a73e8;
    --tlxmm-art-accent-bg:#eaf2ff;
    --tlxmm-art-tag-bg:#eaf2ff;
    --tlxmm-art-tag-color:#1a73e8;
    --tlxmm-art-hot-bg:#fff0f0;
    --tlxmm-art-hot-color:#e53935;

    box-sizing:border-box;
    width:100%;
    color:var(--tlxmm-art-text-body);
}
.tlxmm-article *{box-sizing:border-box;}

/* ── Card container ── */
.tlxmm-article-card{
    background:var(--tlxmm-art-white);
    border:1px solid var(--tlxmm-art-border);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:18px;
}

/* ── Header ── */
.tlxmm-article-header{padding:22px 24px 0;}
.tlxmm-article-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px;}
.tlxmm-tag{
    background:var(--tlxmm-art-tag-bg);
    color:var(--tlxmm-art-tag-color);
    border:1px solid #c4d9f8;
    padding:3px 10px;
    border-radius:4px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    text-decoration:none;
    transition:background .15s;
}
.tlxmm-tag:hover{background:#d4e8ff;color:var(--tlxmm-art-tag-color);}
.tlxmm-tag-hot{background:var(--tlxmm-art-hot-bg);color:var(--tlxmm-art-hot-color);border-color:#ffc9c9;}
.tlxmm-tag-review{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}

.tlxmm-article-title{
    font-size:23px;
    font-weight:700;
    color:var(--tlxmm-art-text-dark);
    line-height:1.3;
    margin:0 0 16px;
    letter-spacing:-.3px;
}

.tlxmm-article-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 0;
    border-top:1px solid var(--tlxmm-art-border-soft);
    font-size:12.5px;
    color:var(--tlxmm-art-text-muted);
}
.tlxmm-meta-author{display:flex;align-items:center;gap:7px;}
.tlxmm-author-avatar{
    width:28px;height:28px;border-radius:50%;
    background:var(--tlxmm-art-accent);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.tlxmm-meta-author-name{font-weight:600;color:var(--tlxmm-art-text-dark);font-size:13px;}
.tlxmm-meta-dot{color:var(--tlxmm-art-border);font-size:16px;line-height:1;}
.tlxmm-meta-item{display:flex;align-items:center;gap:4px;}

.tlxmm-share-row{display:flex;gap:6px;margin-left:auto;}
.tlxmm-share-btn{
    padding:4px 11px;
    border-radius:5px;
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
    border:none;
    color:#fff;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:4px;
    transition:opacity .15s;
}
.tlxmm-share-btn:hover{opacity:.9;color:#fff;}
.tlxmm-share-btn svg{flex-shrink:0;display:block;}
.tlxmm-share-fb{background:#1877f2;}
.tlxmm-share-tw{background:#1da1f2;}
.tlxmm-share-wa{background:#25d366;}

/* ── Hero image ── */
.tlxmm-article-hero{
    width:100%;
    margin-top:16px;
    background:linear-gradient(135deg,#e8f0fe 0%,#f1f5fb 100%);
    line-height:0;
}
.tlxmm-article-hero-img,
.tlxmm-article-hero img{
    width:100%;
    height:700px;
    max-height:700px;
    aspect-ratio:3/2;
    object-fit:cover;
    display:block;
}

/* ── Body typography ── */
.tlxmm-article-body{padding:22px 24px 24px;}
.tlxmm-article-body p{
    color:var(--tlxmm-art-text-body);
    margin:0 0 16px;
    font-size:14.5px;
    line-height:1.85;
}
.tlxmm-article-body p.tlxmm-lead,
.tlxmm-article-body p.lead{
    font-size:15.5px;
    color:var(--tlxmm-art-text-dark);
    font-weight:500;
}
.tlxmm-article-body h2{
    font-size:17px;
    font-weight:700;
    color:var(--tlxmm-art-text-dark);
    margin:26px 0 11px;
    padding-left:11px;
    border-left:3px solid var(--tlxmm-art-accent);
}
.tlxmm-article-body h3{
    font-size:15px;
    font-weight:600;
    color:var(--tlxmm-art-accent);
    margin:20px 0 9px;
}
.tlxmm-article-body h4{
    font-size:14px;
    font-weight:700;
    color:var(--tlxmm-art-text-dark);
    margin:18px 0 8px;
}
.tlxmm-article-body ul,
.tlxmm-article-body ol{
    margin:0 0 16px;
    padding-left:22px;
    color:var(--tlxmm-art-text-body);
    font-size:14.5px;
    line-height:1.85;
}
.tlxmm-article-body li{margin-bottom:6px;}
.tlxmm-article-body a{color:var(--tlxmm-art-accent);text-decoration:underline;}
.tlxmm-article-body blockquote{
    margin:18px 0;
    padding:14px 16px;
    background:var(--tlxmm-art-accent-bg);
    border:1px solid #c4d9f8;
    border-left:3px solid var(--tlxmm-art-accent);
    border-radius:6px;
    color:var(--tlxmm-art-text-dark);
    font-size:13.5px;
}
.tlxmm-article-body blockquote p{margin:0;color:var(--tlxmm-art-text-dark);}

/* Body images / figures
 * Images narrower than the container are centered (auto horizontal margins on
 * a block element). Figures use text-align:center so an image rendered as
 * inline-block by a block plugin (e.g. Gutenberg's wp-block-image) still
 * centers, regardless of the inner img's display value. */
.tlxmm-article-body img{
    max-width:100%;
    height:auto;
    border-radius:7px;
    border:1px solid var(--tlxmm-art-border-soft);
    margin:18px auto;
    display:block;
}
.tlxmm-article-body figure{
    margin:18px auto;
    text-align:center;
    max-width:100%;
}
.tlxmm-article-body figure img{
    margin:0 auto;
    display:block;
}
.tlxmm-article-body figcaption{
    font-size:11.5px;
    color:var(--tlxmm-art-text-muted);
    font-style:italic;
    margin-top:7px;
    text-align:center;
}

/* WordPress alignment classes — Gutenberg / classic editor emit these on
 * <figure> and <img>. We honour them so the editor's "align center / left /
 * right" buttons behave as authors expect, without needing the editor to
 * also apply inline `display:flex` styles. */
.tlxmm-article-body .aligncenter,
.tlxmm-article-body img.aligncenter,
.tlxmm-article-body figure.aligncenter{
    margin-left:auto;
    margin-right:auto;
    display:block;
    text-align:center;
}
.tlxmm-article-body .alignleft,
.tlxmm-article-body img.alignleft,
.tlxmm-article-body figure.alignleft{
    float:left;
    margin:6px 18px 12px 0;
    max-width:50%;
}
.tlxmm-article-body .alignright,
.tlxmm-article-body img.alignright,
.tlxmm-article-body figure.alignright{
    float:right;
    margin:6px 0 12px 18px;
    max-width:50%;
}
.tlxmm-article-body .alignnone{
    margin-left:0;
    margin-right:auto;
}
/* Clear floats so headings / paragraphs below an aligned image start cleanly */
.tlxmm-article-body h2,
.tlxmm-article-body h3,
.tlxmm-article-body h4{
    clear:both;
}

/* Responsive video / embed */
.tlxmm-article-body iframe,
.tlxmm-article-body video,
.tlxmm-article-body .wp-block-embed__wrapper iframe{
    max-width:100%;
}
.tlxmm-article-body .wp-block-embed,
.tlxmm-article-body .wp-video{margin:18px 0;}

/* ── Callout / highlight box ([tlxmm_callout]) ── */
.tlxmm-article-callout{
    background:var(--tlxmm-art-accent-bg);
    border:1px solid #c4d9f8;
    border-left:3px solid var(--tlxmm-art-accent);
    border-radius:6px;
    padding:14px 16px;
    margin:18px 0;
}
.tlxmm-article-callout p{
    color:var(--tlxmm-art-text-dark);
    font-size:13.5px;
    margin:0;
    line-height:1.7;
}

/* ── Static tables (authored in the WP editor) ── */
.tlxmm-article-body table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    margin:16px 0;
    border:1px solid var(--tlxmm-art-border);
    border-radius:8px;
    overflow:hidden;
}
.tlxmm-article-body table th{
    background:var(--tlxmm-art-header-bg);
    color:var(--tlxmm-art-text-dark);
    text-align:left;
    padding:9px 14px;
    font-size:12px;
    font-weight:600;
    border-bottom:1px solid var(--tlxmm-art-border);
}
.tlxmm-article-body table td{
    padding:9px 14px;
    border-bottom:1px solid var(--tlxmm-art-border-soft);
    color:var(--tlxmm-art-text-body);
}
.tlxmm-article-body table tr:last-child td{border-bottom:none;}
.tlxmm-article-body table td:first-child{
    font-weight:600;
    color:var(--tlxmm-art-text-dark);
    width:36%;
}
.tlxmm-article-body table tr:nth-child(even) td{background:var(--tlxmm-art-light);}

/* ── Footer tags ── */
.tlxmm-article-footer{
    padding:14px 24px;
    border-top:1px solid var(--tlxmm-art-border-soft);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.tlxmm-footer-label{font-size:12px;color:var(--tlxmm-art-text-muted);font-weight:600;}

/* ── Author box ── */
.tlxmm-author-box{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:var(--tlxmm-art-white);
    border:1px solid var(--tlxmm-art-border);
    border-radius:10px;
    padding:18px 20px;
    margin-bottom:18px;
}
.tlxmm-author-big-avatar{
    width:50px;height:50px;border-radius:50%;
    background:var(--tlxmm-art-accent);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:700;color:#fff;flex-shrink:0;
}
.tlxmm-author-info{flex:1;}
.tlxmm-author-role{
    font-size:11px;color:var(--tlxmm-art-accent);font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;display:block;
}
.tlxmm-author-info h4{
    font-size:15px;font-weight:700;color:var(--tlxmm-art-text-dark);margin:0 0 5px;
}
.tlxmm-author-info p{
    font-size:13px;color:var(--tlxmm-art-text-muted);line-height:1.6;margin:0;
}

/* ── Related articles ── */
.tlxmm-related-wrap{padding:20px 22px;}
.tlxmm-section-head{
    font-size:16px;font-weight:700;color:var(--tlxmm-art-text-dark);margin-bottom:14px;
}
.tlxmm-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tlxmm-related-card{
    border:1px solid var(--tlxmm-art-border);
    border-radius:8px;
    overflow:hidden;
    background:var(--tlxmm-art-white);
    text-decoration:none;
    display:block;
    transition:box-shadow .2s,border-color .2s;
}
.tlxmm-related-card:hover{
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    border-color:#c4d9f8;
}
.tlxmm-related-img{
    width:100%;
    aspect-ratio:16/8;
    background:linear-gradient(135deg,#eef2fb,#f5f7fc);
    display:flex;align-items:center;justify-content:center;
    line-height:0;
}
.tlxmm-related-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tlxmm-related-img span{font-size:11px;color:#b8c2d8;}
.tlxmm-related-info{padding:10px 12px;}
.tlxmm-related-tag{
    font-size:10.5px;color:var(--tlxmm-art-accent);font-weight:600;
    text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px;
}
.tlxmm-related-title{
    font-size:13px;font-weight:600;color:var(--tlxmm-art-text-dark);
    line-height:1.4;margin-bottom:4px;
}
.tlxmm-related-date{font-size:11px;color:var(--tlxmm-art-text-muted);}

/* ─────────────────────────────────────────────────────────────────────────────
   CONSISTENT BLOCK SPACING
   Every direct child of the body gets 10px top gap when it follows a sibling.
   Headings override with their own larger values below.
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article-body > * + *{margin-top:10px;}
.tlxmm-article-body > h2 + *,
.tlxmm-article-body > h3 + *,
.tlxmm-article-body > h4 + *{margin-top:6px;}
/* Paragraphs: keep their own bottom margin as the primary gap driver */
.tlxmm-article-body > p{margin-top:0;}
.tlxmm-article-body > p + *{margin-top:4px;}

/* ─────────────────────────────────────────────────────────────────────────────
   REDESIGNED UNORDERED LIST — accent dot bullet
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article-body ul{
    list-style:none;
    padding:12px 14px 12px 14px;
    margin:10px 0 16px;
    background:var(--tlxmm-art-light);
    border:1px solid var(--tlxmm-art-border-soft);
    border-left:3px solid var(--tlxmm-art-accent);
    border-radius:7px;
}
.tlxmm-article-body ul li{
    position:relative;
    padding-left:18px;
    margin-bottom:7px;
    font-size:14.5px;
    line-height:1.75;
    color:var(--tlxmm-art-text-body);
}
.tlxmm-article-body ul li:last-child{margin-bottom:0;}
.tlxmm-article-body ul li::before{
    content:'';
    position:absolute;left:0;top:9px;
    width:7px;height:7px;
    border-radius:50%;
    background:var(--tlxmm-art-accent);
    flex-shrink:0;
}
/* Nested ul — lighter visual */
.tlxmm-article-body ul ul{
    background:transparent;border:none;border-left:none;
    padding:6px 0 0 14px;margin:0;
}
.tlxmm-article-body ul ul li::before{
    background:transparent;
    border:2px solid var(--tlxmm-art-accent);
    top:9px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDESIGNED ORDERED LIST — accent numbered circle
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article-body ol{
    list-style:none;
    padding:12px 14px 12px 14px;
    margin:10px 0 16px;
    background:var(--tlxmm-art-light);
    border:1px solid var(--tlxmm-art-border-soft);
    border-left:3px solid var(--tlxmm-art-accent);
    border-radius:7px;
    counter-reset:tlxmm-ol;
}
.tlxmm-article-body ol li{
    position:relative;
    padding-left:30px;
    margin-bottom:7px;
    font-size:14.5px;
    line-height:1.75;
    color:var(--tlxmm-art-text-body);
    counter-increment:tlxmm-ol;
}
.tlxmm-article-body ol li:last-child{margin-bottom:0;}
.tlxmm-article-body ol li::before{
    content:counter(tlxmm-ol);
    position:absolute;left:0;top:3px;
    width:20px;height:20px;
    border-radius:50%;
    background:var(--tlxmm-art-accent);
    color:#fff;
    font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    line-height:1;
    flex-shrink:0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DETAILS / SUMMARY — native HTML disclosure / accordion
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article-body details{
    margin:10px 0 16px;
    border:1px solid var(--tlxmm-art-border);
    border-radius:8px;
    overflow:hidden;
    background:var(--tlxmm-art-white);
}
.tlxmm-article-body details summary{
    padding:12px 40px 12px 14px;
    background:var(--tlxmm-art-header-bg);
    font-size:14px;font-weight:600;
    color:var(--tlxmm-art-text-dark);
    cursor:pointer;user-select:none;
    position:relative;
    list-style:none;
    border-bottom:1px solid transparent;
    transition:background .15s;
}
.tlxmm-article-body details summary::-webkit-details-marker{display:none;}
.tlxmm-article-body details[open]>summary{
    background:var(--tlxmm-art-accent-bg);
    border-bottom-color:var(--tlxmm-art-border);
    color:var(--tlxmm-art-accent);
}
.tlxmm-article-body details summary::after{
    content:'';
    position:absolute;right:15px;top:50%;
    width:8px;height:8px;
    border-right:2px solid var(--tlxmm-art-text-muted);
    border-bottom:2px solid var(--tlxmm-art-text-muted);
    transform:translateY(-70%) rotate(45deg);
    transition:transform .2s;
}
.tlxmm-article-body details[open]>summary::after{transform:translateY(-30%) rotate(-135deg);}
.tlxmm-article-body details>*:not(summary){
    padding:14px 16px;
    font-size:14px;line-height:1.75;
    color:var(--tlxmm-art-text-body);
    margin:0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GALLERY SLIDER  (show/hide class-toggle approach — no scrollTo)
   JS wraps each gallery in .tlxmm-gsl-wrap, marks the active slide with
   .tlxmm-active, and adds prev/next buttons + dots.
   ───────────────────────────────────────────────────────────────────────────── */

/* Outer wrapper */
.tlxmm-gsl-wrap{
    position:relative;
    margin:16px 0;
    border-radius:10px;
    overflow:hidden;
    background:#000;
    user-select:none;
    line-height:0;
}

/* Gallery track: fixed-height relative container so all slides stack */
.tlxmm-gsl-wrap .wp-block-gallery,
.tlxmm-gsl-wrap .blocks-gallery-grid,
.tlxmm-gsl-wrap .gallery{
    display:block !important;
    position:relative !important;
    height:300px !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    list-style:none !important;
    border-radius:0 !important;
}

/* All slides: absolutely stacked, faded out */
.tlxmm-gsl-wrap .wp-block-gallery > *,
.tlxmm-gsl-wrap .blocks-gallery-grid > *,
.tlxmm-gsl-wrap .gallery > *{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    transition:opacity .45s ease !important;
    pointer-events:none;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    line-height:0;
}

/* Active slide: cross-fades in */
.tlxmm-gsl-wrap .wp-block-gallery > *.tlxmm-active,
.tlxmm-gsl-wrap .blocks-gallery-grid > *.tlxmm-active,
.tlxmm-gsl-wrap .gallery > *.tlxmm-active{
    opacity:1 !important;
    pointer-events:auto;
}

/* Images fill the slide */
.tlxmm-gsl-wrap img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:0 !important;
    border:none !important;
    margin:0 !important;
}

/* ── Prev / Next buttons — large, always visible ── */
.tlxmm-gsl-btn{
    position:absolute;
    top:50%;transform:translateY(-50%);
    width:44px;height:44px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    border:2px solid rgba(255,255,255,.35);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    z-index:20;
    font-size:28px;
    line-height:1;
    font-weight:300;
    transition:background .15s,border-color .15s;
    padding:0;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.tlxmm-gsl-btn:hover{
    background:rgba(0,0,0,.85);
    border-color:rgba(255,255,255,.7);
}
.tlxmm-gsl-prev{left:12px;}
.tlxmm-gsl-next{right:12px;}

/* ── Dot indicators ── */
.tlxmm-gsl-dots{
    position:absolute;
    bottom:12px;left:50%;transform:translateX(-50%);
    display:flex;gap:7px;
    z-index:20;
}
.tlxmm-gsl-dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.4);
    border:none;padding:0;
    cursor:pointer;
    transition:background .2s,transform .2s;
}
.tlxmm-gsl-dot.active{
    background:#fff;
    transform:scale(1.4);
}

/* ── Counter badge ── */
.tlxmm-gsl-counter{
    position:absolute;top:12px;right:12px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:12px;font-weight:600;
    padding:3px 10px;border-radius:20px;
    z-index:20;
    font-family:'Nunito Sans',sans-serif;
    line-height:1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   WORDPRESS BUTTON BLOCK
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article-body .wp-block-buttons{
    margin:14px 0;
    display:flex;flex-wrap:wrap;gap:8px;
}
.tlxmm-article-body .wp-block-button__link{
    background:var(--tlxmm-art-accent);
    color:#fff !important;
    border:2px solid var(--tlxmm-art-accent);
    border-radius:6px;
    padding:9px 20px;
    font-size:13.5px;font-weight:600;
    text-decoration:none;
    transition:opacity .15s;
    display:inline-block;
    cursor:pointer;
    line-height:1.4;
}
.tlxmm-article-body .wp-block-button__link:hover{opacity:.88;}
.tlxmm-article-body .wp-block-button.is-style-outline .wp-block-button__link{
    background:transparent;
    color:var(--tlxmm-art-accent) !important;
}
.tlxmm-article-body .wp-block-button.is-style-outline .wp-block-button__link:hover{
    background:var(--tlxmm-art-accent);color:#fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR ACCORDION widget — visual styling only.
   Open/close ANIMATION is handled entirely by JS (gallery-slider.js →
   initElementorAccordionAnimation) via MutationObserver + max-height tweens
   with inline style.setProperty('…','important') so the animation always
   beats Elementor's own inline display:none.
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article .elementor-widget.elementor-widget-accordion{
    margin:12px 0 18px !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion{
    border:1px solid #e2e6ee !important;
    border-radius:8px !important;
    overflow:hidden !important;
    box-shadow:none !important;
    background:#fff !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion-item{
    border-bottom:1px solid #e2e6ee !important;
    background:#fff !important;
    margin:0 !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion-item:last-child{
    border-bottom:none !important;
}
/* Tab title row */
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title{
    padding:13px 44px 13px 16px !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:#1a1f2e !important;
    background:#f1f3f8 !important;
    border:none !important;
    border-bottom:1px solid transparent !important;
    cursor:pointer !important;
    transition:background .15s,color .15s !important;
    position:relative !important;
    line-height:1.4 !important;
    margin:0 !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title a.elementor-accordion-title{
    color:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    text-decoration:none !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover,
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active{
    background:#eaf2ff !important;
    color:#1a73e8 !important;
    border-bottom-color:#e2e6ee !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active a.elementor-accordion-title{
    color:#1a73e8 !important;
}
/* Icon (+ / ×) */
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon{
    position:absolute !important;
    right:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#7b849a !important;
    font-size:14px !important;
    line-height:1 !important;
    transition:color .15s !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{
    color:#1a73e8 !important;
}
/* Content panel: padding-left/right only — JS handles all height/opacity/display */
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-accordion .elementor-tab-content{
    padding-left:18px !important;
    padding-right:18px !important;
    background:#fff !important;
    margin:0 !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-content > p,
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-content p{
    margin:0 0 10px !important;
    color:#3d4459 !important;
    font-size:14px !important;
    line-height:1.75 !important;
}
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-content > p:last-child,
.tlxmm-article .elementor-widget.elementor-widget-accordion .elementor-tab-content p:last-child{
    margin-bottom:0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMMENTS SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-comments-wrap{padding:20px 24px;}
.tlxmm-comments-editor-note{
    font-size:13px;color:var(--tlxmm-art-text-muted);
    font-style:italic;margin:6px 0 0;
}

/* Comment list */
.tlxmm-comment-list{
    list-style:none;padding:0;margin:0 0 24px;
}
.tlxmm-comment-item{
    padding:16px 0;
    border-bottom:1px solid var(--tlxmm-art-border-soft);
}
.tlxmm-comment-item:last-child{border-bottom:none;padding-bottom:0;}
.tlxmm-comment-header{
    display:flex;align-items:center;gap:10px;margin-bottom:9px;
}
.tlxmm-comment-avatar{
    width:40px;height:40px;border-radius:50%;
    object-fit:cover;flex-shrink:0;
}
.tlxmm-comment-meta{display:flex;flex-direction:column;gap:2px;}
.tlxmm-comment-author{
    font-size:13.5px;font-weight:600;
    color:var(--tlxmm-art-text-dark);
}
.tlxmm-comment-date{font-size:11.5px;color:var(--tlxmm-art-text-muted);}
.tlxmm-comment-body{
    font-size:14px;line-height:1.75;
    color:var(--tlxmm-art-text-body);
    padding-left:50px;
}
.tlxmm-comment-body p{margin:0 0 8px;color:inherit;}
.tlxmm-comment-body p:last-child{margin-bottom:0;}
.tlxmm-comment-reply{padding-left:50px;margin-top:7px;}
.tlxmm-comment-reply a,
.tlxmm-comment-reply .comment-reply-link{
    font-size:12px;font-weight:600;
    color:var(--tlxmm-art-accent);
    text-decoration:none;
    border:1px solid var(--tlxmm-art-accent);
    padding:3px 10px;border-radius:4px;
    transition:background .15s,color .15s;
    display:inline-block;
}
.tlxmm-comment-reply a:hover,
.tlxmm-comment-reply .comment-reply-link:hover{
    background:var(--tlxmm-art-accent);color:#fff;
}

/* Nested (children) comments */
.tlxmm-comment-list .children{
    list-style:none;padding:0 0 0 50px;margin:12px 0 0;
    border-left:2px solid var(--tlxmm-art-border-soft);
}

/* ── Custom comment form (.tlxmm-cf) — fully replaces comment_form() output ── */
.tlxmm-cf-wrap{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--tlxmm-art-border-soft);
}
.tlxmm-cf-title{
    font-size:15px;font-weight:700;
    color:var(--tlxmm-art-text-dark);
    margin:0 0 14px;
}
.tlxmm-cf-logged-in{
    font-size:12.5px;color:var(--tlxmm-art-text-muted);
    margin:0 0 14px;
}
.tlxmm-cf-logged-in strong{color:var(--tlxmm-art-text-dark);}
.tlxmm-cf-logged-in a{color:var(--tlxmm-art-accent);text-decoration:none;}
.tlxmm-cf{display:flex;flex-direction:column;gap:12px;}

/* Two-column name/email row */
.tlxmm-cf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* Field wrapper */
.tlxmm-cf-field{display:flex;flex-direction:column;gap:5px;}
.tlxmm-cf-field label{
    font-size:12.5px;font-weight:600;
    color:var(--tlxmm-art-text-dark);
}
.tlxmm-cf-req{color:#e53935;margin-left:2px;}

/* Inputs */
.tlxmm-cf input[type="text"],
.tlxmm-cf input[type="email"],
.tlxmm-cf textarea{
    width:100%;
    padding:10px 13px;
    border:1px solid var(--tlxmm-art-border);
    border-radius:7px;
    font-size:14px;
    color:var(--tlxmm-art-text-body);
    background:var(--tlxmm-art-white);
    font-family:inherit;
    line-height:1.5;
    transition:border-color .15s,box-shadow .15s;
    box-sizing:border-box;
    appearance:none;
}
.tlxmm-cf input[type="text"]:focus,
.tlxmm-cf input[type="email"]:focus,
.tlxmm-cf textarea:focus{
    outline:none;
    border-color:var(--tlxmm-art-accent);
    box-shadow:0 0 0 3px rgba(26,115,232,.13);
}
.tlxmm-cf textarea{min-height:120px;resize:vertical;}

/* Footer row: submit + privacy note */
.tlxmm-cf-footer{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.tlxmm-cf-submit{
    background:var(--tlxmm-art-accent);
    color:#fff;
    border:none;border-radius:7px;
    padding:10px 26px;
    font-size:14px;font-weight:600;
    cursor:pointer;font-family:inherit;
    transition:opacity .15s;
    white-space:nowrap;
}
.tlxmm-cf-submit:hover{opacity:.88;}
.tlxmm-cf-privacy{
    font-size:12px;color:var(--tlxmm-art-text-muted);
    margin:0;flex:1;
}

/* Cancel-reply link (shown by comment-reply.js for threaded replies) */
#cancel-comment-reply-link{
    display:none;
    font-size:12px;margin-left:10px;
}
#cancel-comment-reply-link a{
    color:var(--tlxmm-art-text-muted);text-decoration:none;
    border:1px solid var(--tlxmm-art-border);
    padding:2px 9px;border-radius:4px;
    transition:background .15s;
    display:inline-block;
}
#cancel-comment-reply-link a:hover{background:var(--tlxmm-art-light);}

/* Hide native #respond from Hello theme (if it sneaks in) */
.tlxmm-comments-wrap #respond:not(.tlxmm-cf-wrap){display:none !important;}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENTOR BUTTON widget (also only on article pages)
   ───────────────────────────────────────────────────────────────────────────── */
.tlxmm-article ~ .elementor-section .elementor-widget-button,
.tlxmm-article-body .elementor-widget-button{margin:14px 0;}

/* ── Responsive ── */
/* Tablet: scale hero height down */
@media(max-width:1024px){
    .tlxmm-article-hero-img,
    .tlxmm-article-hero img{
        height:500px;
        max-height:500px;
    }
}

@media(max-width:768px){
    .tlxmm-article-header{padding:18px 16px 0;}
    .tlxmm-article-body{padding:18px 16px 20px;}
    .tlxmm-article-title{font-size:20px;}
    .tlxmm-article-body h2{font-size:16px;}
    .tlxmm-article-meta{gap:8px;}
    .tlxmm-share-row{margin-left:0;width:100%;}
    .tlxmm-related-grid{grid-template-columns:1fr;}
    .tlxmm-author-box{padding:16px;}
    .tlxmm-related-wrap{padding:16px;}
    /* Hero: let mobile size naturally via aspect-ratio */
    .tlxmm-article-hero-img,
    .tlxmm-article-hero img{
        height:auto;
        max-height:360px;
    }
    /* Lists tighter on mobile */
    .tlxmm-article-body ul,
    .tlxmm-article-body ol{padding:10px 12px 10px 12px;}
    /* Gallery slider: shorter on narrow screens */
    .tlxmm-gsl-wrap .wp-block-gallery,
    .tlxmm-gsl-wrap .blocks-gallery-grid,
    .tlxmm-gsl-wrap .gallery{height:220px !important;}
    /* Buttons smaller on mobile */
    .tlxmm-gsl-btn{width:36px;height:36px;font-size:22px;}
    .tlxmm-gsl-prev{left:8px;}
    .tlxmm-gsl-next{right:8px;}
    /* Comment name/email: single column on mobile */
    .tlxmm-cf-row-2{grid-template-columns:1fr;}
    .tlxmm-cf-footer{flex-direction:column;align-items:flex-start;}
    /* Wide authored tables: scroll horizontally inside the card instead of
       overflowing the page or squishing into illegibility. display:block lets
       the table size to its content while the overflow wrapper clips it. */
    .tlxmm-article-body table{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .tlxmm-article-body table td:first-child{width:auto;}
}

/* Ultra-small phones: trim header/body padding further so content keeps room */
@media(max-width:400px){
    .tlxmm-article-header{padding:14px 12px 0;}
    .tlxmm-article-body{padding:14px 12px 18px;}
    .tlxmm-article-title{font-size:18px;}
    .tlxmm-share-btn{padding:4px 9px;font-size:11px;}
    /* Hero: further constrain on ultra-small screens */
    .tlxmm-article-hero-img,
    .tlxmm-article-hero img{
        max-height:260px;
    }
}