/* ============================================================
   softDev23 Blog Styles
   Fluent Snippets -> type: CSS, run: Site Wide Header (wp_head)
   Scoped to body.blog (archive) and body.single (post). Free-tier build.
   This is the full, consolidated stylesheet - replaces any prior version.
   Pairs with blog-scripts-SNIPPET.js.
   ============================================================ */

/* ---------------- tokens ---------------- */
body.blog, body.single{
  --sd-bg:#08090B; --sd-surface:#0D0E12; --sd-surface-2:#16181E;
  --sd-primary:#39A751; --sd-primary-bright:#45C261; --sd-accent:#F5A623; --sd-blue:#48A6E6;
  --sd-text:#FFFFFF; --sd-body:#D2D7DC; --sd-muted:#8A929C;
  --sd-border:rgba(255,255,255,0.08); --sd-border-strong:rgba(255,255,255,0.16);
  --r-md:16px; --r-pill:999px; --ease:cubic-bezier(0.22,1,0.36,1);
}

/* ---------------- playbook fixes: blend + glass sticky header ---------------- */
body.blog, body.single{ background-image:none !important; background-color:#08090b !important; color:var(--sd-body); }
body.blog header.ct-header > div[data-device],
body.single header.ct-header > div[data-device]{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important;
  z-index:1000 !important; background:rgba(10,11,14,0.55) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important; backdrop-filter:blur(16px) saturate(150%) !important;
  border-bottom:1px solid rgba(255,255,255,0.07) !important; box-shadow:0 8px 30px rgba(0,0,0,0.35) !important;
}

/* =====================================================================
   ARCHIVE  (body.blog)
   ===================================================================== */
/* full-width layout, no sidebar */
body.blog .ct-container:has(.entries){ grid-template-columns:1fr !important; }
body.blog aside#sidebar{ display:none !important; }

/* hero */
body.blog .hero-section{ position:relative; text-align:center; padding-top:150px !important; padding-bottom:8px !important; overflow:hidden; }
body.blog .hero-section > figure{ display:none !important; }
body.blog .hero-section::before{ content:""; position:absolute; width:min(560px,85vw); height:min(560px,85vw); border-radius:50%; filter:blur(90px); background:radial-gradient(circle,#39A751,transparent 70%); opacity:0.28; top:-200px; left:50%; transform:translateX(-50%); pointer-events:none; }
body.blog .hero-section .entry-header{ position:relative; z-index:1; text-align:center; }
body.blog .hero-section .page-title{ color:var(--sd-text); font-weight:800; font-size:clamp(38px,7vw,62px); letter-spacing:-0.025em; line-height:1.08; margin-top:0; text-align:center; }
body.blog .hero-section .page-description{ color:var(--sd-muted); font-size:clamp(16px,2.2vw,19px); max-width:60ch; margin:16px auto 0; text-align:center; }

/* eyebrow + ping (injected by JS) */
body.blog .sd-eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--sd-accent); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 auto 14px; padding:8px 16px 8px 13px; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-pill); background:rgba(255,255,255,.04); }
body.blog .sd-eyebrow .ping{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--sd-accent); box-shadow:0 0 10px var(--sd-accent); }
body.blog .sd-eyebrow .ping::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--sd-accent); animation:sd-ping 2.2s ease-out infinite; }
@keyframes sd-ping{ 0%{transform:scale(.5);opacity:.7} 100%{transform:scale(1.9);opacity:0} }

/* category filter chips (injected by JS) */
body.blog .sd-chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px auto 6px; max-width:900px; }
body.blog .sd-chip{ font-size:13px; font-weight:700; color:var(--sd-muted); padding:9px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.03); border:1px solid var(--sd-border); cursor:pointer; transition:all .2s var(--ease); }
body.blog .sd-chip:hover{ color:var(--sd-text); border-color:var(--sd-border-strong); }
body.blog .sd-chip.active{ color:#06140b; background:linear-gradient(120deg,#45C261,#2f8f47); border-color:transparent; }

/* grid */
body.blog .entries{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px !important; }
@media(max-width:1000px){ body.blog .entries{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media(max-width:640px){ body.blog .entries{ grid-template-columns:1fr !important; } }

/* cards: compact, image on top, date + Read affordance at the bottom */
body.blog .entries article.entry-card{
  display:flex !important; flex-direction:column; min-height:0 !important; justify-content:flex-start !important;
  background:linear-gradient(180deg,#121419,#0c0d11) !important; border:1px solid var(--sd-border) !important;
  border-radius:var(--r-md) !important; overflow:hidden !important; padding:0 0 6px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
body.blog .entries article.entry-card:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.55); border-color:color-mix(in srgb,var(--c,var(--sd-primary)) 45%,transparent); }
body.blog .entry-card .ct-media-container{ order:-2; position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-radius:0 !important; margin:0 !important; }
body.blog .entry-card .ct-media-container img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
body.blog .entry-card:hover .ct-media-container img{ transform:scale(1.05); }
body.blog .entry-card > *:not(.ct-media-container){ padding-inline:20px; }
/* category row */
body.blog .entry-card .entry-meta:first-of-type{ order:-1; margin-top:18px; }
body.blog .entry-card .meta-categories a{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c,var(--sd-primary)); padding:5px 11px; border-radius:999px;
  background:color-mix(in srgb,var(--c,var(--sd-primary)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--sd-primary)) 38%,transparent);
}
body.blog .entry-card.category-indie-dev{ --c:#39A751; }
body.blog .entry-card.category-automation{ --c:#48A6E6; }
body.blog .entry-card.category-productivity{ --c:#F5A623; }
/* title */
body.blog .entry-card .entry-title{ margin:12px 0 12px; font-size:18px; line-height:1.3; font-weight:800; letter-spacing:-0.01em; }
body.blog .entry-card .entry-title a{ color:var(--sd-text); }
body.blog .entry-card:hover .entry-title a{ color:var(--c,var(--sd-primary)); }
/* footer meta: hide author, date muted, pinned to bottom + "Read article" affordance */
body.blog .entry-card .meta-author{ display:none !important; }
body.blog .entry-card .entry-meta:last-of-type{ color:var(--sd-muted); font-size:13px; margin-top:auto; padding-top:8px; padding-bottom:16px; }
body.blog .entry-card .entry-meta:last-of-type a, body.blog .entry-card .entry-meta:last-of-type time{ color:var(--sd-muted); }
body.blog .entry-card .entry-meta:last-of-type::after{ content:"Read article \2192"; display:block; margin-top:10px; color:var(--c,var(--sd-primary)); font-weight:700; font-size:13px; }
body.blog .entry-card:hover .entry-meta:last-of-type::after{ filter:brightness(1.15); }

/* featured (newest) post: image left, content right.
   The text (category/title/date) is wrapped in .sd-feat-body by the JS snippet. */
body.blog .entries article.entry-card:first-child{ grid-column:1 / -1; display:flex !important; flex-direction:row; align-items:stretch; min-height:340px; padding:0; }
body.blog .entries article.entry-card:first-child .ct-media-container{ flex:0 0 54%; position:relative; overflow:hidden; aspect-ratio:auto !important; height:auto; min-height:0; }
body.blog .entries article.entry-card:first-child .ct-media-container img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.blog .entries article.entry-card:first-child .sd-feat-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:28px 36px; }
body.blog .entries article.entry-card:first-child .entry-meta:first-of-type{ margin-top:0; }
body.blog .entries article.entry-card:first-child .entry-title{ font-size:clamp(22px,2.4vw,30px); }
body.blog .entries article.entry-card:first-child .entry-meta:last-of-type{ margin-top:14px; }
@media(max-width:760px){
  body.blog .entries article.entry-card:first-child{ flex-direction:column; min-height:0; }
  body.blog .entries article.entry-card:first-child .ct-media-container{ flex:none; aspect-ratio:16/10 !important; }
  body.blog .entries article.entry-card:first-child .sd-feat-body{ padding:20px; }
}

/* pagination */
body.blog .ct-pagination a, body.blog .ct-pagination span{ color:var(--sd-body); border-color:var(--sd-border) !important; }
body.blog .ct-pagination .current{ background:var(--sd-primary) !important; color:#06140b !important; border-color:transparent !important; }

/* =====================================================================
   SINGLE POST  (body.single)
   ===================================================================== */
body.single .sd-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:1100; background:linear-gradient(90deg,#39A751,#45C261); box-shadow:0 0 10px rgba(57,167,81,.6); }
body.single aside#sidebar{ display:none !important; }
body.single .ct-container:has(article){ max-width:820px; grid-template-columns:1fr !important; }
body.single article.post{ width:100%; }

/* hero */
body.single .hero-section{ position:relative; padding-top:130px !important; overflow:hidden; }
body.single .hero-section::before{ content:""; position:absolute; width:min(560px,85vw); height:min(560px,85vw); border-radius:50%; filter:blur(90px); background:radial-gradient(circle,#39A751,transparent 70%); opacity:0.18; top:-230px; left:50%; transform:translateX(-50%); pointer-events:none; }
body.single .hero-section .entry-header{ position:relative; z-index:1; max-width:820px; margin-inline:auto; }
body.single .hero-section .page-title{ color:var(--sd-text); font-weight:800; font-size:clamp(30px,5vw,46px); letter-spacing:-0.025em; line-height:1.14; }
body.single .hero-section .page-description{ color:var(--sd-muted); }
body.single .hero-section figure .ct-media-container{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--sd-border); box-shadow:0 30px 70px rgba(0,0,0,.5); max-width:980px; margin:24px auto 0; }
body.single .entry-header .meta-author{ display:none !important; }
body.single .entry-header .entry-meta{ color:var(--sd-muted); }
body.single .sd-readtime{ color:var(--sd-muted); }

/* article body typography */
body.single .entry-content{ color:var(--sd-body); font-size:18px; line-height:1.8; max-width:760px; margin-inline:auto; }
body.single .entry-content > *+*{ margin-top:1.3em; }
body.single .entry-content h2{ color:var(--sd-text); font-weight:800; font-size:clamp(24px,3.2vw,30px); letter-spacing:-0.015em; line-height:1.25; margin-top:1.7em; }
body.single .entry-content h3{ color:var(--sd-text); font-weight:700; font-size:clamp(20px,2.6vw,23px); margin-top:1.5em; }
body.single .entry-content a{ color:var(--sd-primary-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(69,194,97,.4); }
body.single .entry-content a:hover{ text-decoration-color:var(--sd-primary-bright); }
body.single .entry-content strong{ color:var(--sd-text); }
body.single .entry-content li{ margin-top:.5em; }
body.single .entry-content li::marker{ color:var(--sd-primary); }
body.single .entry-content blockquote{ border-left:3px solid var(--sd-primary); background:linear-gradient(90deg,rgba(57,167,81,.08),transparent); padding:14px 22px; border-radius:0 10px 10px 0; color:var(--sd-text); font-style:italic; }
body.single .entry-content code{ background:var(--sd-surface-2); border:1px solid var(--sd-border); border-radius:6px; padding:2px 7px; font-size:.85em; color:#8FF0AC; }
body.single .entry-content pre{ background:#0c0d11; border:1px solid var(--sd-border); border-radius:12px; padding:20px 22px; overflow:auto; }
body.single .entry-content pre code{ background:none; border:none; padding:0; color:var(--sd-body); }
body.single .entry-content img{ border-radius:12px; border:1px solid var(--sd-border); }
body.single .entry-content figcaption{ color:var(--sd-muted); font-size:13px; text-align:center; }
body.single .entry-content hr{ border:none; height:1px; background:var(--sd-border); margin:2.2em 0; }

/* share box, navigation, comments */
body.single .ct-share-box{ max-width:760px; margin-inline:auto; }
body.single .post-navigation a{ color:var(--sd-body); }
body.single .ct-comments{ color:var(--sd-body); }

/* related posts (Blocksy free; enable Customizer -> Single Posts -> Related Posts) */
body.single .ct-related-posts article{ background:linear-gradient(180deg,#121419,#0c0d11) !important; border:1px solid var(--sd-border) !important; border-radius:var(--r-md) !important; overflow:hidden; }
body.single .ct-related-posts .entry-title a{ color:var(--sd-text); }

@media(prefers-reduced-motion:reduce){
  body.blog *, body.single *{ animation:none !important; }
}

body.blog .hero-section{ padding-top:130px !important; }
body.blog .hero-section .entry-header{ padding-top:0 !important; padding-bottom:0 !important; }
body.blog .entries article.entry-card:first-child .sd-feat-body{ padding-left:52px !important; }