/*
Theme Name: Qet Buzz
Theme URI: https://qet.ai/themes/qet-buzz
Author: qet.ai
Author URI: https://qet.ai
Description: Qet Buzz — a self-contained editorial content theme for the QET multilingual network. Replaces a whole plugin stack: built-in SEO, security hardening, ads/monetization, LiteSpeed/Cloudflare/Redis-aware caching, IAB-TCF-ready consent + Consent Mode v2, text-only threaded comments, and single-file i18n (with auto-RTL). Six selectable single-post layouts, live accent colour, and zero-CLS hero LCP. Licensed by qet.ai.
Version: 1.2.25
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary — licensed by qet.ai
License URI: https://qet.ai/license
Text Domain: qetbuzz
Tags: blog, editorial, news, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support
*/

/* ============================================================
   QET BUZZ — VERDANT editorial (lifestyle / stories / recipes /
   travel / wellness). Tokens: 1170 / 728 / 300, Source Sans 3
   18px/1.8, Poppins 800. Accent is a live CSS var driven by
   Theme Options. Ported from the canonical interactive demo.
   ============================================================ */
:root{
  --green:#1f9d63; --green-dark:#15784b; --green-press:#0f5e3a;
  --tint:#eef6f1; --tint2:#e1f0e8;
  --bg:#ffffff; --surface:#ffffff;
  --text:#1d2b23; --heading:#0f2018; --muted:#5e6f65; --border:#e2ebe5;
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Source Sans 3","system-ui",Segoe UI,Roboto,sans-serif;
  --container:1170px; --content:728px; --sidebar:300px; --gutter:42px;
  --body-size:18px; --body-lh:1.8; --h1:36px; --h2:30px;
  --radius:16px; --radius-sm:12px; --btn-radius:10px;
  --shadow:0 14px 34px -16px rgba(20,80,52,.26);
  --ad-bg:#f1f8f3; --ad-border:#cfe6d8; --ad-ink:#6c8478;
  --bubble:#f0f2f5;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Offset in-page anchor jumps (post-comment #comment-N, #comments, etc.) by the sticky
   header so the target lands fully visible instead of tucked under the header. */
html{scroll-padding-top:92px}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--body-size);line-height:var(--body-lh);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);font-weight:800;line-height:1.18;letter-spacing:-.01em}
.media{display:block;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--tint2)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.reading-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:120;transition:width .1s linear}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.is-hidden{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal!important}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header.no-sticky{position:static}
.hdr{max-width:var(--container);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.burger{display:none;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center}
.burger:hover{background:var(--tint)}
.burger svg,.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand{margin:0 auto;font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--green);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand .leaf{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:2}
.brand img.logo-img{max-height:42px;width:auto}
.hdr-tools{display:flex;align-items:center;gap:4px}
.icon-btn{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--heading);opacity:.85}
.icon-btn:hover{opacity:1;background:var(--tint);color:var(--green)}
.social{display:flex;gap:2px}
.navbar{background:#fff;border-bottom:1px solid var(--border)}
.nav{max-width:var(--container);margin:0 auto;padding:12px 24px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;list-style:none}
.nav a{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--heading);opacity:.85;text-transform:uppercase;letter-spacing:.05em;position:relative;padding:3px 0;display:inline-block}
.nav a:hover,.nav .current-menu-item>a{opacity:1;color:var(--green-dark)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--green);transform:scaleX(0);transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}

/* ===== search overlay ===== */
.search-pop{display:none;position:absolute;inset-inline-end:24px;top:62px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px;z-index:60;width:min(360px,90vw)}
.search-pop.open{display:block}
.search-pop form{display:flex;gap:8px}
.search-pop input{flex:1;border:2px solid var(--border);border-radius:var(--btn-radius);padding:10px 12px;font:inherit}
.search-pop input:focus{border-color:var(--green-dark)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;padding:13px 22px;border-radius:var(--btn-radius);background:var(--green-dark);color:#fff;box-shadow:4px 5px 0 var(--green-press);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--green-press)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--green-press)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .btn svg{transform:scaleX(-1)}
.btn.ghost{background:#fff;color:var(--green-dark);border:2px solid var(--green-dark);box-shadow:4px 5px 0 var(--green-press)}
.btn.light{background:#fff;color:var(--green-dark);box-shadow:4px 5px 0 rgba(0,0,0,.25)}
[dir="rtl"] .btn{box-shadow:-4px 5px 0 var(--green-press)}
[dir="rtl"] .btn.light{box-shadow:-4px 5px 0 rgba(0,0,0,.25)}

/* ===== shared section header ===== */
.shead{display:flex;align-items:center;gap:14px;margin:6px 0 20px}
.shead h2{font-size:var(--h2)}
.shead::after{content:"";flex:1;height:2px;background:var(--border)}
.shead .more{font-family:var(--font-display);font-weight:600;font-size:.84rem;color:var(--green-dark);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.tag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--green-dark);padding:4px 9px;border-radius:6px}
.tag.on-light{background:var(--tint);color:var(--green-dark)}

/* ===== HERO (featured) ===== */
.hero-feature{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;padding:30px 0 8px}
.lead{position:relative;border-radius:var(--radius);overflow:hidden;min-height:430px;display:flex}
.lead .media{position:absolute;inset:0}
.lead .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,20,14,.86),rgba(8,20,14,.25) 55%,rgba(8,20,14,.05))}
.lead .tx{position:relative;margin-top:auto;padding:28px;color:#fff;z-index:1}
.lead .tx h2{color:#fff;font-size:2rem;line-height:1.12;margin:12px 0 10px;max-width:18ch}
.lead .tx p{opacity:.92;max-width:46ch;margin-bottom:14px}
.lead .meta,.mini .meta{font-size:.84rem;opacity:.9;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.lead-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.mini{position:relative;border-radius:var(--radius);overflow:hidden;min-height:205px;display:flex}
.mini .media{position:absolute;inset:0}
.mini .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,20,14,.85),rgba(8,20,14,.1) 65%)}
.mini .tx{position:relative;margin-top:auto;padding:18px;color:#fff;z-index:1}
.mini .tx h3{color:#fff;font-size:1.15rem;line-height:1.2;margin:8px 0 6px}

/* ===== article grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .media{aspect-ratio:16/10;height:auto}
.card .body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:1.12rem;line-height:1.28}
.card:hover h3{color:var(--green)}
.card p{font-size:.95rem;color:var(--muted);line-height:1.55;flex:1}
.card .meta{font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.72rem;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ===== trending (ranked list) ===== */
.trending{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.trend{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.trend .rank{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--green);opacity:.55;width:28px;flex-shrink:0;text-align:center}
.trend .tn{width:64px;height:64px;border-radius:10px;flex-shrink:0}
.trend h4{font-size:1rem;line-height:1.3}
.trend:hover h4{color:var(--green)}
.trend .rt{font-size:.78rem;color:var(--muted);margin-top:3px}

/* ===== newsletter band ===== */
.news{background:var(--green);color:#fff;border-radius:var(--radius);padding:38px;text-align:center;margin:8px 0;position:relative;overflow:hidden}
.news::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(255,255,255,.18),transparent 45%)}
.news .ic{width:54px;height:54px;margin:0 auto 12px;stroke:#fff;fill:none;stroke-width:1.5;position:relative}
.news h3{color:#fff;font-size:1.6rem;margin-bottom:8px;position:relative}
.news p{opacity:.92;max-width:460px;margin:0 auto 18px;position:relative}
.news-form{display:flex;gap:9px;max-width:430px;margin:0 auto;position:relative}
.news-form input{flex:1;background:#fff;border:none;border-radius:var(--btn-radius);padding:13px 16px;font-size:1rem;color:var(--text)}

/* ===== sidebar ===== */
.layout{display:flex;gap:var(--gutter);padding:30px 0 10px}
.layout.no-sidebar .main{max-width:none}
.layout.left-sidebar{flex-direction:row-reverse}
.main{flex:1;min-width:0;max-width:var(--content)}
/* The --content cap is a prose reading-measure for single posts/pages. On card
   listings (home/blog/archive/search) it leaves a dead strip and misaligns the
   sidebar's right edge with the full-width hero — let the column fill instead. */
body.home .main,body.blog .main,body.archive .main,body.search .main{max-width:none}
/* Sticky sidebar — no inner max-height/overflow (that produced an ugly scrollbar
   whenever the sidebar was taller than the viewport). It now sticks while it fits
   and releases naturally at the end of the column, so all widgets stay reachable. */
.aside{width:var(--sidebar);flex-shrink:0;position:sticky;top:84px;align-self:flex-start}
.widget{margin-bottom:30px}
.about-card{background:var(--tint);border-radius:var(--radius);padding:24px 22px;text-align:center}
.about-card .ph{width:120px;height:120px;border-radius:50%;border:5px solid #fff;margin:0 auto 14px;box-shadow:0 8px 20px -10px rgba(20,80,52,.5);object-fit:cover}
.about-card h3{font-size:1.35rem;margin-bottom:8px}
.about-card p{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.widget-title{font-family:var(--font-display);font-weight:800;font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;padding-bottom:10px;margin-bottom:14px;border-bottom:3px solid var(--green)}
.poplist{display:flex;flex-direction:column;gap:14px}
.pop{display:flex;gap:12px;align-items:center}
.pop .pn{width:60px;height:60px;border-radius:10px;flex-shrink:0}
.pop h4{font-family:var(--font-display);font-weight:600;font-size:.92rem;line-height:1.3}
.pop:hover h4{color:var(--green)}
.pop .rt{font-size:.76rem;color:var(--muted);margin-top:2px}
.follow{display:flex;gap:8px;margin-top:6px}
.follow a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:1px solid var(--border);border-radius:10px;font-size:.82rem;font-weight:600}
.follow a:hover{border-color:var(--green);color:var(--green)}
.follow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
/* Latest-comments sidebar widget */
.rc-list{display:flex;flex-direction:column;gap:15px}
.rc{display:flex;gap:11px;align-items:flex-start}
.rc-av{width:38px;height:38px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;flex-shrink:0}
.rc-b{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.rc-meta{font-size:.78rem;color:var(--muted)}
.rc-name{font-family:var(--font-display);font-weight:700;color:var(--heading)}
.rc-text{font-size:.88rem;line-height:1.45;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-on{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rc:hover .rc-name{color:var(--green)}
.rc:hover .rc-text{color:var(--heading)}

/* ===== ads ===== */
.ad{background:var(--ad-bg);border:1.5px dashed var(--ad-border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ad-ink);padding:14px;position:relative;overflow:hidden}
.ad .lbl{position:absolute;top:7px;inset-inline-start:10px;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.ad .pos{font-size:.92rem;font-weight:700;color:#3f5a4c}.ad .dim{font-size:.74rem;margin-top:3px;opacity:.85}
.ad ins{display:block;width:100%}
.ad--leader{min-height:128px;margin:24px 0}.ad--incontent{min-height:280px;margin:30px 0}
.ad--feed{min-height:128px;margin:8px 0}.ad--side{min-height:600px}.ad--end{min-height:280px;margin:14px 0 0}
.ad--prebtn{min-height:110px}.ad--postbtn{min-height:110px;margin-top:6px}
/* Real ad units: a clean, full-width block — no border, background, clipping or
   flex-centering — so Google AdSense can measure width and fill (no frame). */
.adunit{display:block;width:100%;margin:24px 0;clear:both}
.adunit-lbl{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:5px;color:var(--muted)}
.adunit ins.adsbygoogle{display:block;width:100%}
.adunit--side{margin:0}
.adunit--prebtn,.adunit--postbtn{margin:12px 0}
/* Reserve ad height (CLS-safe) — only when the option is on (body.ad-reserve). */
body.ad-reserve .adunit{min-height:100px}
body.ad-reserve .adunit--afterfirst,body.ad-reserve .adunit--incontent{min-height:280px}
body.ad-reserve .adunit--prebtn,body.ad-reserve .adunit--postbtn{min-height:110px}
body.ad-reserve .adunit--side{min-height:600px}

/* ===== single post ===== */
.post-banner{background:var(--tint);border-bottom:1px solid var(--border)}
.post-banner .wrap{padding-top:30px;padding-bottom:30px}
.pb-crumb{font-size:.84rem;color:var(--muted);margin-bottom:14px}
.pb-crumb a:hover{color:var(--green)}
.post-title{font-size:var(--h1);line-height:1.16;max-width:24ch}
.post-dek{font-size:1.15rem;color:var(--muted);margin-top:12px;max-width:60ch}
.post-meta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-top:16px}
.post-meta .avatar{width:38px;height:38px}
.post-meta .who{color:var(--heading);font-weight:600}
.featured{margin:24px 0 8px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.featured .media{aspect-ratio:16/9;height:auto}
.fig-cap{font-size:.8rem;color:var(--muted);text-align:center;padding:9px 12px;background:var(--tint)}
.body-note{font-size:.86rem;font-style:italic;color:var(--muted);background:var(--tint);border-inline-start:3px solid var(--green);padding:10px 14px;border-radius:8px;margin:16px 0}
.body{font-size:var(--body-size);line-height:var(--body-lh)}
.body p{margin:0 0 1.25em}
.body img{height:auto;border-radius:var(--radius-sm);margin:18px 0}
.body figure{margin:18px 0}.body figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:6px}
.takeaways{background:var(--tint);border-inline-start:4px solid var(--green);border-radius:var(--radius-sm);padding:18px 22px;margin:26px 0}
.takeaways h4{font-family:var(--font-display);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--green-dark);margin-bottom:12px}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.takeaways li{display:flex;gap:11px;font-size:1rem;line-height:1.5}
.takeaways li svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* page-break / pager */
.pager{display:flex;flex-direction:column;align-items:center;gap:14px;margin:56px 0}
.read-prompt{max-width:40ch;margin:40px auto 24px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.5;color:var(--green-dark)}
.read-prompt .rp-ico{margin-inline-end:6px;font-style:normal}
html[data-theme="dark"] .read-prompt{color:var(--green)}
.read-next{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.05rem;padding:16px 32px;border-radius:var(--btn-radius);box-shadow:4px 5px 0 var(--green-press);transition:transform .12s,box-shadow .12s}
.read-next:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--green-press)}
.read-next:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--green-press)}
.read-next svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .read-next svg{transform:scaleX(-1)}
.page-ind{font-size:.84rem;color:var(--muted);font-weight:600}
.page-ind .bars{display:inline-flex;gap:4px;margin-inline-start:9px;vertical-align:middle}
.page-ind .bars i{width:18px;height:4px;border-radius:3px;background:var(--border)}.page-ind .bars i.on{background:var(--green)}
.page-numbers{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center;list-style:none;font-family:var(--font-display);font-weight:600}
.page-numbers .page-numbers{padding:8px 13px;border:1px solid var(--border);border-radius:8px;color:var(--heading)}
.page-numbers .current{background:var(--green);color:#fff;border-color:var(--green)}

/* related */
.related{margin:46px 0 8px}
.related h3{font-size:1.5rem;margin-bottom:4px}.related .sub{font-size:.88rem;color:var(--muted);margin-bottom:20px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .18s,box-shadow .18s}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rel-card .media-wrap{position:relative;display:block}
.rel-card .media{aspect-ratio:4/3;height:auto;width:100%;display:block}
.rel-card .media-wrap .tag{position:absolute;top:9px;inset-inline-start:9px}
.rel-card .ct{padding:13px 14px 16px}
.rel-card .ct h4{font-size:.98rem;font-weight:600;line-height:1.32}.rel-card .ct .rt{font-size:.78rem;color:var(--muted);margin-top:8px}

/* comments */
.comments{margin-top:48px;border-top:1px solid var(--border);padding-top:30px}
.comments>h3,.comments>.comments-title{font-size:1.5rem;margin-bottom:8px}
.comments .policy{font-size:.85rem;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.comments .policy svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2;flex-shrink:0}
.comment-form,.reply-form .rf-inner{background:var(--tint);border-radius:var(--radius);padding:18px}
.comment-form input[type=text],.comment-form textarea,.reply-form input,.reply-form textarea{width:100%;background:#fff;border:2px solid var(--border);border-radius:var(--btn-radius);padding:12px 14px;font:inherit;font-size:1rem;color:var(--text);margin-bottom:10px}
.comment-form textarea,.reply-form textarea{min-height:92px;resize:vertical;line-height:1.6}
.comment-form input:focus,.comment-form textarea:focus,.reply-form input:focus,.reply-form textarea:focus{border-color:var(--green-dark)}
.cf-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cf-error{color:#c0392b;font-size:.86rem;font-weight:600;display:none}
.cf-error.show{display:block}
.cf-hp{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0;width:0;opacity:0}
/* ===== comments — Facebook-style bubbles ===== */
.comment-list{margin-top:24px;display:flex;flex-direction:column;gap:14px;list-style:none}
article.comment{display:flex;gap:8px;align-items:flex-start}
.comment .av{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;flex-shrink:0}
.comment .av.sm{width:32px;height:32px;font-size:.8rem}
.comment .cbody{flex:1;min-width:0}
/* the grey rounded bubble holds the name + text, exactly like FB */
.c-bubble{display:inline-block;max-width:100%;background:var(--bubble);border-radius:18px;padding:8px 12px;overflow-wrap:anywhere}
.c-bubble .cname{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--heading);line-height:1.3}
.c-bubble .badge{display:inline-block;background:var(--green-dark);color:#fff;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px;vertical-align:middle;margin-inline-start:6px}
.c-bubble .ctext{font-size:.94rem;line-height:1.38;color:var(--text);margin-top:1px;white-space:pre-wrap;overflow-wrap:anywhere}
/* the small Reply · time row below the bubble */
.cmeta{display:flex;align-items:center;flex-wrap:wrap;padding:3px 12px 0;font-size:.76rem;line-height:1.2}
.cmeta .comment-reply-link{font-weight:700;color:var(--muted);text-decoration:none;font-family:var(--font-body)}
.cmeta .comment-reply-link:hover{text-decoration:underline}
.cmeta .cdot{margin:0 6px;color:var(--muted)}
.cmeta .ctime{color:var(--muted)}
/* nested replies: indent like FB (no heavy divider) */
.children,.replies{margin-top:10px;padding-inline-start:24px;display:flex;flex-direction:column;gap:14px;list-style:none}
.reply-form{display:none;margin-top:14px}
.reply-form.open{display:block}
.reply-form .btn{padding:9px 16px;font-size:.8rem}
.reply-form .cf-foot>span{display:flex;gap:8px}
.comment-note{font-size:.78rem;color:var(--muted);margin:4px 0 0 12px;font-style:italic}
.comments-closed{color:var(--muted);font-style:italic}

/* footer */
.foot{background:var(--heading);color:#cfded5;margin-top:48px}
.foot-code{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;max-width:var(--container);margin:18px auto 0;padding:0 24px}
.foot-top{max-width:var(--container);margin:0 auto;padding:46px 24px 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot .fbrand{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;margin-bottom:12px}
.foot .ftag{font-size:.92rem;line-height:1.7;opacity:.85;max-width:300px}
.foot h5{font-family:var(--font-display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}.foot ul a{font-size:.92rem;opacity:.85}.foot ul a:hover{opacity:1;color:#7fd3a8}
.fsocial{display:flex;gap:8px;margin-top:14px}
.fsocial a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;opacity:.85}
.fsocial a:hover{opacity:1;border-color:#7fd3a8;color:#7fd3a8}.fsocial svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12)}
.fb-in{max-width:var(--container);margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.84rem;opacity:.9}
.fb-links a{opacity:.9}.fb-links a:hover{color:#7fd3a8}
.backtop{display:block;text-align:center;padding:14px;background:rgba(0,0,0,.2);font-family:var(--font-display);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.backtop:hover{color:#7fd3a8}
/* remove text-selection highlight box on post-hero text */
:is(.hero,.hero-bleed,.hero-split,.hero-min,.post-banner,.read-head) ::selection{background-color:transparent}
:is(.hero,.hero-bleed,.hero-split,.hero-min,.post-banner,.read-head) ::-moz-selection{background-color:transparent}


/* static pages (legal / about / contact) */
.page-wrap{max-width:768px;margin:0 auto;padding:46px 24px 72px}
.pg-crumb{font-size:.82rem;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;align-items:center}
.pg-crumb a{color:var(--green-dark);font-weight:600}
.pg-crumb .sep{opacity:.5}
.pg-title{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1.15;color:var(--heading);margin-bottom:10px}
.pg-flag{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--green-dark);background:var(--tint);border:1px solid var(--green);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.pg-flag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.pg-updated{font-size:.84rem;color:var(--muted);margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.pg-body{font-size:1.05rem;line-height:1.8;color:var(--text)}
.pg-body h2{font-family:var(--font-display);font-weight:700;font-size:1.32rem;color:var(--heading);margin:30px 0 10px}
.pg-body p{margin-bottom:15px}
.pg-body ul{margin:0 0 15px;padding-inline-start:22px;display:flex;flex-direction:column;gap:7px}
.pg-body li{line-height:1.7}
.pg-body a{color:var(--green-dark);font-weight:600;text-decoration:underline}
.pg-body strong{color:var(--heading)}
.contact-form{margin-top:20px;display:grid;gap:12px;max-width:520px}
.contact-form input,.contact-form textarea{border:2px solid var(--border);border-radius:var(--btn-radius);padding:12px 14px;font:inherit}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--green-dark)}

.body h2{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--heading);margin:30px 0 12px;line-height:1.25}
.body h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--heading);margin:24px 0 10px}
.body ul,.body ol{margin:0 0 1.25em;padding-inline-start:1.4em;display:flex;flex-direction:column;gap:.4em}
.body blockquote{margin:28px 0;padding:2px 0 2px 22px;border-inline-start:4px solid var(--green);font-family:var(--font-display);font-weight:600;font-size:1.22em;line-height:1.45;color:var(--heading)}
.body a{color:var(--green-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.body strong{color:var(--heading)}

/* article body text controls (scoped to posts, not homepage cards) */
.main .body,.read-main .body{color:var(--post-ink,var(--text));max-width:var(--post-measure,100%);font-weight:var(--post-weight,400);letter-spacing:var(--post-ls,normal)}
.main .body{font-size:var(--post-size,var(--body-size));line-height:var(--post-lh,var(--body-lh))}
.main .body p,.read-main .body p{margin:0 0 var(--post-gap,1.25em)}
.text-justify .body{text-align:justify}
.text-hyphens .body{hyphens:auto}
/* reading-optimized single post */
.read-main{max-width:704px;margin:0 auto;padding:34px 0 12px}
.read-main .body{font-size:calc(var(--post-size, var(--body-size)) + 1px);line-height:var(--post-lh,1.75)}
.read-body>p:first-of-type{font-size:1.12em;line-height:1.6;color:var(--heading)}
.read-body h2{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--heading);margin:34px 0 12px;line-height:1.28}
.read-body blockquote{margin:28px 0;padding:2px 0 2px 22px;border-inline-start:4px solid var(--green);font-family:var(--font-display);font-weight:600;font-size:1.22em;line-height:1.45;color:var(--heading)}
.read-body ul{margin:2px 0 1.25em;padding-inline-start:1.4em;display:flex;flex-direction:column;gap:.5em}
.read-body li{line-height:1.65}
.read-body a{color:var(--green-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.read-body strong{color:var(--heading)}
.read-main .featured{margin:20px 0 6px}

/* single-post hero: photo with overlapping title card (Overlap card) */
.hero{padding:26px 0 2px}
.hero-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:21/9;max-height:520px;background:var(--tint);box-shadow:0 18px 40px -26px rgba(15,32,24,.5)}
.hero-frame .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,16,0) 45%,rgba(8,24,16,.5) 100%)}
.hero-card{position:relative;z-index:2;max-width:840px;margin:-94px auto 0;background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff;border-radius:16px;padding:24px 32px 22px;box-shadow:0 22px 46px -26px rgba(15,32,24,.6)}
.hero-card .pb-crumb{color:rgba(255,255,255,.82);margin:0 0 12px}
.hero-card .pb-crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.hero-card .tag{display:inline-block;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hero-card .post-title{color:#fff;margin:12px 0 0}
.hero-card .post-dek{color:rgba(255,255,255,.92);margin:10px 0 0}
.hero-card .post-meta{color:rgba(255,255,255,.86);margin-top:16px;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.hero-card .post-meta .avatar{background:rgba(255,255,255,.22);color:#fff}
.hero-card .post-meta .dot{background:rgba(255,255,255,.4)}

/* === Single-post layout variants === */
/* Classic banner */
.layout-classic .post-banner .post-title{margin-top:12px}
/* Full-bleed */
.hero-bleed{position:relative;min-height:clamp(300px,50vw,540px);display:flex;align-items:flex-end;overflow:hidden;background:var(--tint)}
.hero-bleed .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,16,.05) 30%,rgba(8,24,16,.82) 100%)}
.hb-inner{position:relative;z-index:2;width:100%;padding:0 0 34px}
.hb-inner .post-title{color:#fff;margin:12px 0 0}
.hb-inner .post-dek{color:rgba(255,255,255,.92);margin:10px 0 0;max-width:760px}
.hb-inner .post-meta{color:rgba(255,255,255,.92);margin-top:14px}
.hb-inner .tag{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}
/* Split hero */
.hero-split{padding:26px 0 6px}
.hs-grid{display:grid;grid-template-columns:1.05fr .95fr;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(15,32,24,.5)}
.hs-photo{position:relative;min-height:340px}
.hs-photo .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-text{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff;padding:30px 34px;display:flex;flex-direction:column;justify-content:center}
.hs-text .pb-crumb,.hs-text .pb-crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.hs-text .tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}
.hs-text .post-title{color:#fff;margin:12px 0 0;font-size:1.85rem}
.hs-text .post-dek{color:rgba(255,255,255,.92);margin:10px 0 0}
.hs-text .post-meta{color:rgba(255,255,255,.86);margin-top:14px;border-top:1px solid rgba(255,255,255,.16);padding-top:12px}
.hs-text .post-meta .avatar,.hb-inner .post-meta .avatar{background:rgba(255,255,255,.22);color:#fff}
.hs-text .post-meta .dot,.hb-inner .post-meta .dot{background:rgba(255,255,255,.4)}
/* Centered reading head */
.read-head{text-align:center;max-width:680px;margin:0 auto;padding:30px 0 4px}
.read-head .post-title{margin:12px 0 0}
.read-head .post-dek{margin:10px 0 0;color:var(--muted)}
.read-head .post-meta{justify-content:center;margin-top:14px}
/* Minimal */
.hero-min{padding:34px 0 6px}
.hm-head{max-width:820px}
.hm-head .ktag{display:inline-block;font:800 .72rem/1 var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.hm-head .post-title{font-size:2.35rem;margin:14px 0 0;color:var(--heading)}
.hm-head .post-dek{margin:12px 0 0;color:var(--muted);font-size:1.16rem;max-width:680px}
.hm-head .post-meta{margin:16px 0 16px}
.hm-head .rule{height:1px;background:var(--border)}
.hero-min .featured{margin-top:8px}

/* ===== archive header ===== */
.arch-head{background:var(--tint);border-bottom:1px solid var(--border)}
.arch-head .wrap{padding:36px 24px}
.arch-head h1{font-size:var(--h1);color:var(--heading)}
.arch-head p{color:var(--muted);margin-top:8px;max-width:60ch}
.arch-empty{padding:60px 0;text-align:center;color:var(--muted)}

/* ===== toast notifications ===== */
.qb-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);z-index:1200;max-width:min(92vw,440px);padding:13px 18px;border-radius:12px;color:#fff;font-size:.92rem;line-height:1.45;box-shadow:0 14px 36px -10px rgba(0,0,0,.45);opacity:0;transition:opacity .26s ease,transform .26s ease;pointer-events:none}
.qb-toast.show{opacity:1;transform:translate(-50%,0)}
.qb-toast--error{background:#b3261e}
.qb-toast--success{background:#1f7a4d}
@media (prefers-reduced-motion:reduce){.qb-toast{transition:opacity .26s ease}.qb-toast.show{transform:translate(-50%,0)}}

/* ===== responsive (converted from container queries to viewport media) ===== */
@media (max-width:1000px){
  .layout,.layout.left-sidebar{flex-direction:column}.aside{width:100%;position:static;top:auto;max-height:none;overflow:visible}.ad--side{min-height:280px}
  .about-card,.poplist,.trending,.rc-list{max-width:620px;margin-inline:auto}
}
@media (max-width:820px){
  .hero-feature{grid-template-columns:1fr}.lead{min-height:340px}
  .lead-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .card-grid{grid-template-columns:1fr 1fr}
  .hs-grid{grid-template-columns:1fr}.hs-photo{min-height:220px}.hm-head .post-title{font-size:1.85rem}
}
@media (max-width:760px){
  :root{--h1:27px;--h2:23px;--body-size:17px}
  .navbar{display:none}.navbar.open{display:block}.burger{display:flex}
  .lead .tx h2{font-size:1.5rem}
  .trending{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr;gap:12px}
  .rel-card{display:flex;align-items:stretch;min-height:96px}
  .rel-card .media-wrap{flex:0 0 40%;max-width:148px;position:relative;background:var(--surface,#eef6f1)}
  .rel-card .media{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .rel-card .ct{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:12px 14px}
  .rel-card .ct h4{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .foot-top{grid-template-columns:1fr 1fr}
  .news-form{flex-direction:column}.news-form .btn{justify-content:center}
  .pager{margin:44px 0}.read-next{width:100%;justify-content:center}
  .fb-in{flex-direction:column-reverse;align-items:flex-start}
  .wrap,.hdr{padding-left:16px;padding-right:16px}
  .hero{padding:16px 0 2px}.hero-frame{aspect-ratio:3/2}.hero-card{max-width:none;margin:-70px 14px 0;padding:20px 22px 18px}
}
@media (max-width:520px){
  .lead-side{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.foot-top{grid-template-columns:1fr}
  .hero-frame{aspect-ratio:4/3;border-radius:14px}.hero-card{margin:-54px 10px 0;padding:18px 18px 16px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== dark mode (only active when "Offer dark mode toggle" is on and the
   visitor/system selects dark — set as data-theme="dark" on <html>) ===== */
html[data-theme="dark"]{
  --bg:#0f1512; --surface:#161e1a;
  --text:#dde6e0; --heading:#f1f6f3; --muted:#9bafa5; --border:#27322c;
  --tint:#17221c; --tint2:#1d2a23;
  --bubble:#262b29;
  --ad-bg:#161e1a; --ad-border:#2a352f; --ad-ink:#9bafa5;
  --shadow:0 14px 34px -16px rgba(0,0,0,.55);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .site-header{background:rgba(15,21,18,.92);border-bottom-color:var(--border)}
html[data-theme="dark"] .card,html[data-theme="dark"] .widget,html[data-theme="dark"] .search-pop{background:var(--surface);border-color:var(--border)}
html[data-theme="dark"] .tag.on-light{background:var(--tint);color:#8fe3b6}
html[data-theme="dark"] img.media{background-color:var(--tint2)}
/* theme toggle button (rendered in the header when the option is on) */
.theme-toggle{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--heading);opacity:.85}
.theme-toggle:hover{background:var(--tint);opacity:1}
.theme-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}.theme-toggle .i-moon{display:block}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}html[data-theme="dark"] .theme-toggle .i-moon{display:none}