/* ============================================================
   CompuCash Blog — Square theme · GLOBAL CSS
   Covers BOTH the Single Post template and the Posts Page (archive).

   HOW TO USE IN ELEMENTOR:
   1. Copy this ENTIRE file.
   2. Elementor → ☰ (top-left) → Site Settings → Custom CSS → paste.
      (No Elementor Pro? WP admin → Appearance → Customize → Additional CSS.)
   3. For the CSS to hit the right widgets, give each Elementor widget a
      matching "CSS Classes" value (Advanced tab → CSS Classes):
         Post Content widget ............ entry
         Loop Item (post card) .......... p-card
         Loop Grid wrapper .............. post-grid
         Featured Loop Item ............. (build inside .featured section)
      Title/Featured Image/Author/Share use Elementor's own styling, so
      they don't strictly need a class, but you can still match the look here.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:#1a1a1a; --graphite:#737373; --white:#fff; --deep:#030303;
  --fog:#f2f2f2; --ash:#cccccc; --silver:#d9d9d9; --stone:#b3b3b3;
  --blue:#006aff; --line:#e2e2e2;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1200px;
}

/* FONTS — IMPORTANT: an @import only works at the VERY TOP of your Custom CSS.
   Do NOT leave it here in the middle (the browser will ignore it).
   You already import Inter at the top of your code. Add IBM Plex Mono up there
   too by pasting this line directly under your existing Inter @import:

   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');
*/

/* ---------- SHARED: buttons ---------- */
.btn{font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;border:none;cursor:pointer;border-radius:5px;padding:14px 24px;display:inline-flex;align-items:center;gap:8px;transition:transform .16s var(--ease),background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#0057d6}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-outline:hover{border-color:#fff}

/* ---------- SHARED: section divider (hairline + centered blue diamond) ----------
   Drop <div class="cc-divider"><span class="tick"></span></div> between any two
   sections. Aligns to the wide 1200px canvas by default; add .is-narrow for
   a 760px reading-column divider instead. */
.cc-divider{max-width:var(--maxw);margin:44px auto;padding:0 40px;display:flex;align-items:center;gap:16px}
.cc-divider::before,.cc-divider::after{content:"";flex:1;height:1px;background:var(--ash)}
.cc-divider .tick{width:46px;height:3px;border-radius:3px;background:var(--blue);flex-shrink:0}
.cc-divider.is-narrow{max-width:760px;padding:0 24px}

/* ============================================================
   SINGLE POST
   ============================================================ */

/* Reading progress bar (needs the HTML-widget script) */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--blue);z-index:300;transition:width .1s linear}

/* Header */
.post-head{max-width:var(--maxw);margin:0 auto;padding:64px 40px 40px;text-align:left}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--graphite);text-decoration:none;display:inline-flex;align-items:center;gap:7px;margin-bottom:32px;transition:color .2s}
.crumb:hover{color:var(--blue)}
.crumb .arw{transition:transform .25s var(--ease)}
.crumb:hover .arw{transform:translateX(-3px)}
.post-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);margin-bottom:22px;flex-wrap:wrap}
.post-cat{color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.post-cat::before{content:"";width:7px;height:7px;background:var(--blue)}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ash)}
.post-h1{font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.02em;font-weight:600;margin-bottom:24px}
.post-dek{font-size:20px;line-height:1.55;color:#3a3a3a;max-width:62ch}
.post-author{display:flex;align-items:center;gap:13px;margin-top:36px}
.post-author .ava{width:44px;height:44px;border-radius:50%;background:var(--fog);border:1px solid var(--line);object-fit:cover;flex-shrink:0}
.post-author .who{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.post-author .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--graphite);text-transform:uppercase;margin-top:2px}

/* Featured image */
.post-hero-img{max-width:var(--maxw);margin:8px auto 0;padding:0 40px}
.post-hero-img figure{border:1px solid var(--line);background:var(--fog);overflow:hidden}
.post-hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-hero-img figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--graphite);padding:11px 15px;border-top:1px solid var(--line);background:#fff;text-transform:uppercase}

/* Body layout (content + sticky TOC) */
.post-layout{max-width:var(--maxw);margin:0 auto;padding:64px 40px 24px;display:grid;grid-template-columns:minmax(0,720px) 220px;gap:72px;justify-content:start;align-items:start}
.post-toc{position:sticky;top:96px;font-size:13px}
.post-toc .toc-label{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.post-toc ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.post-toc a{display:block;color:var(--graphite);text-decoration:none;line-height:1.4;border-left:1px solid var(--line);padding-left:14px;margin-left:-1px;transition:color .2s,border-color .2s}
.post-toc a:hover{color:var(--ink)}
.post-toc a.active{color:var(--ink);border-left-color:var(--blue);font-weight:500}

/* PROSE — applies to the Post Content widget.
   Give that widget the CSS class "entry" (Advanced → CSS Classes).
   Both selectors below are covered, so it works either way. */
.entry,.elementor-widget-theme-post-content .elementor-widget-container{font-size:17px;line-height:1.75;color:#262626}
.entry > * + *,.elementor-widget-theme-post-content .elementor-widget-container > * + *{margin-top:24px}
.entry h2,.elementor-widget-theme-post-content h2{font-size:28px;line-height:1.2;letter-spacing:-.01em;font-weight:600;color:var(--ink);margin-top:56px;scroll-margin-top:88px}
.entry h3,.elementor-widget-theme-post-content h3{font-size:21px;line-height:1.3;font-weight:600;color:var(--ink);margin-top:40px}
.entry p,.elementor-widget-theme-post-content p{max-width:68ch}
.entry a:not(.btn),.elementor-widget-theme-post-content a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(0,106,255,.3);transition:border-color .2s}
.entry a:not(.btn):hover,.elementor-widget-theme-post-content a:hover{border-bottom-color:var(--blue)}
.entry strong,.elementor-widget-theme-post-content strong{font-weight:600;color:var(--ink)}
.entry ul,.entry ol,.elementor-widget-theme-post-content ul,.elementor-widget-theme-post-content ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:66ch}
.entry ul li,.entry ol li,.elementor-widget-theme-post-content ul li,.elementor-widget-theme-post-content ol li{position:relative;padding-left:26px;line-height:1.65}
.entry ul li::before,.elementor-widget-theme-post-content ul li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;background:var(--blue)}
.entry ol,.elementor-widget-theme-post-content ol{counter-reset:li}
.entry ol li::before,.elementor-widget-theme-post-content ol li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--blue)}
.entry blockquote,.elementor-widget-theme-post-content blockquote{margin:36px 0;padding:4px 0 4px 28px;border-left:2px solid var(--ink);font-size:22px;line-height:1.5;font-weight:500;color:var(--ink);max-width:60ch}
.entry blockquote cite,.elementor-widget-theme-post-content blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:12px;font-style:normal;letter-spacing:.03em;text-transform:uppercase;color:var(--graphite)}
.entry figure,.elementor-widget-theme-post-content figure{margin:40px 0}
.entry figure img,.elementor-widget-theme-post-content figure img{border:1px solid var(--line);background:var(--fog)}
.entry figcaption,.elementor-widget-theme-post-content figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--graphite);margin-top:12px}
.entry code,.elementor-widget-theme-post-content code{font-family:var(--mono);font-size:.86em;background:var(--fog);padding:2px 6px;border-radius:4px}
.entry hr,.elementor-widget-theme-post-content hr{border:0;display:block;width:46px;height:3px;border-radius:3px;background:var(--blue);margin:48px auto}
.entry .callout{background:var(--fog);padding:24px 26px;margin:36px 0}
.entry .callout .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:9px;display:block}
.entry .callout p{margin:0;max-width:none;font-size:16px;color:var(--ink)}

/* Tags + share */
.post-foot{max-width:var(--maxw);margin:0 auto;padding:8px 40px 0}
.post-tags{display:flex;flex-wrap:wrap;gap:9px;padding-top:36px;border-top:1px solid var(--line)}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--graphite);border:1px solid var(--line);border-radius:20px;padding:6px 14px;text-decoration:none;transition:border-color .2s,color .2s}
.tag:hover{border-color:var(--ink);color:var(--ink)}
.post-share{display:flex;align-items:center;gap:12px;margin-top:24px}
.post-share .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.share-btn{width:34px;height:34px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--graphite);border-radius:5px;text-decoration:none;transition:transform .16s var(--ease),border-color .2s,color .2s}
.share-btn:hover{border-color:var(--ink);color:var(--ink)}
.share-btn:active{transform:scale(.94)}

/* Author bio */
.author-bio{max-width:760px;margin:48px auto 0;padding:0 24px}
.author-bio .inner{background:var(--fog);padding:28px 30px;display:flex;gap:20px;align-items:flex-start}
.author-bio .ava{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);flex-shrink:0}
.author-bio .who{font-size:16px;font-weight:600;margin-bottom:3px}
.author-bio .role{font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--graphite);margin-bottom:12px}
.author-bio .desc{font-size:14.5px;line-height:1.65;color:#444;max-width:60ch}

/* CTA band */
.cta-band{background:var(--deep);margin-top:80px;padding:72px 40px;width:100vw;margin-left:calc(50% - 50vw)}
.cta-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-inner .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#7d7d7d;margin-bottom:14px}
.cta-inner h2{font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.01em;font-weight:600;color:#fff;max-width:16ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Related */
.related{max-width:var(--maxw);margin:0 auto;padding:80px 40px}
.related .rl-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:36px}
.related .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite)}
.related .all{font-family:var(--mono);font-size:13px;color:var(--blue);text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.related .all .arw{transition:transform .25s var(--ease)}
.related .all:hover .arw{transform:translateX(4px)}
.rl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.rl-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.rl-card .thumb{aspect-ratio:16/10;background:var(--fog);border:1px solid var(--line);overflow:hidden;margin-bottom:16px}
.rl-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rl-card:hover .thumb img{transform:scale(1.04)}
.rl-card .rl-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;display:flex;gap:10px;align-items:center}
.rl-card .rl-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ash)}
.rl-card h3{font-size:18px;line-height:1.3;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.rl-card:hover h3{color:var(--blue)}

/* ============================================================
   POSTS PAGE (archive)
   ============================================================ */
.blog-head{max-width:var(--maxw);margin:0 auto;padding:72px 40px 40px}
.blog-head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:center;gap:9px;margin-bottom:20px}
.blog-head .eyebrow::before{content:"";width:7px;height:7px;background:var(--blue)}
.blog-head h1{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:600;max-width:16ch}
.blog-head p{font-size:19px;line-height:1.55;color:#3a3a3a;max-width:60ch;margin-top:20px}

.blog-filters{max-width:var(--maxw);margin:0 auto;padding:0 40px 40px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.pill{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--graphite);background:transparent;border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.active{background:var(--ink);border-color:var(--ink);color:#fff}

.featured{max-width:var(--maxw);margin:0 auto;padding:56px 40px 0}
.featured a{text-decoration:none;color:inherit;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.featured .f-thumb{aspect-ratio:16/11;background:var(--fog);border:1px solid var(--line);overflow:hidden}
.featured .f-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.featured a:hover .f-thumb img{transform:scale(1.03)}
.featured .f-meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:center;gap:11px;margin-bottom:18px}
.featured .f-tag{color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.featured .f-tag::before{content:"";width:7px;height:7px;background:var(--blue)}
.featured .dot{width:3px;height:3px;border-radius:50%;background:var(--ash)}
.featured h2{font-size:clamp(26px,2.6vw,38px);line-height:1.14;letter-spacing:-.01em;font-weight:600}
.featured a:hover h2{color:var(--blue)}
.featured .f-dek{font-size:16px;line-height:1.65;color:#555;margin-top:16px;max-width:46ch}
.featured .f-read{font-family:var(--mono);font-size:13px;color:var(--blue);margin-top:22px;display:inline-flex;align-items:center;gap:8px}
.featured .f-read .arw{transition:transform .25s var(--ease)}
.featured a:hover .f-read .arw{transform:translateX(4px)}

.posts{max-width:var(--maxw);margin:0 auto;padding:72px 40px}
.posts-label{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);padding-bottom:20px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 32px}
.p-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.p-card .thumb{aspect-ratio:16/10;background:var(--fog);border:1px solid var(--line);overflow:hidden;margin-bottom:18px}
.p-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.p-card:hover .thumb img{transform:scale(1.04)}
.p-card .p-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:center;gap:10px;margin-bottom:11px}
.p-card .p-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ash)}
.p-card h3{font-size:19px;line-height:1.28;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
.p-card:hover h3{color:var(--blue)}
.p-card p{font-size:14.5px;line-height:1.6;color:#666;margin-top:11px}
.p-card .p-foot{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--graphite);display:flex;align-items:center;gap:9px}
.p-card .p-foot .ava{width:22px;height:22px;border-radius:50%;background:var(--fog);border:1px solid var(--line)}

.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:72px}
.pager a,.pager a:visited,.pager span{font-family:var(--mono);font-size:13px;font-weight:500;min-width:44px;height:44px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);text-decoration:none;color:var(--graphite);background:#fff;border-radius:8px;transition:transform .16s var(--ease),border-color .2s,color .2s,background .2s,box-shadow .2s}
.pager a:hover,.pager a:visited:hover{border-color:var(--ink);color:var(--ink);background:var(--fog)}
.pager a:active{transform:scale(.94)}
.pager .current,.pager .current:visited{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pager .nav-arrow,.pager .nav-arrow:visited{padding:0 20px;gap:8px;width:auto;font-weight:500;color:var(--ink)}
.pager .nav-arrow:hover,.pager .nav-arrow:visited:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.news{background:var(--fog);margin-top:24px;padding:72px 40px}
.news-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.news .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);margin-bottom:13px}
.news h2{font-size:clamp(24px,2.6vw,34px);line-height:1.14;letter-spacing:-.01em;font-weight:600;max-width:18ch}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--ink);border-radius:5px;padding:13px 16px;min-width:260px}
.news-form input::placeholder{color:var(--graphite)}

/* ============================================================
   REVEAL-ON-SCROLL (optional — needs the cards to get class .in via JS,
   or delete this block and let Elementor's own entrance animations run)
   ============================================================ */
.cc-anim .p-card,.cc-anim .rl-card{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.cc-anim .p-card.in,.cc-anim .rl-card.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .post-layout{grid-template-columns:minmax(0,720px);padding-top:48px}
  .post-toc{display:none}
}
@media (max-width:980px){
  .featured a{grid-template-columns:1fr;gap:24px}
  .post-grid{grid-template-columns:repeat(2,1fr);gap:40px 28px}
}
@media (max-width:860px){
  .rl-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .blog-head,.blog-filters,.featured,.posts,.news,.post-hero-img,.post-layout,.related,.cta-band{padding-left:20px;padding-right:20px}
  .post-head{padding:40px 20px 32px}
  .post-grid{grid-template-columns:1fr;gap:40px}
  .entry,.elementor-widget-theme-post-content .elementor-widget-container{font-size:16px}
  .entry h2,.elementor-widget-theme-post-content h2{font-size:24px;margin-top:44px}
  .cta-inner,.news-inner{flex-direction:column;align-items:flex-start}
  .news-form input{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){
  .cc-anim .p-card,.cc-anim .rl-card{opacity:1;transform:none;transition:none}
  #progress{transition:none}
}

/* ============ Unified mobile title/copy lock — matches other pages' 767px breakpoint ============ */
@media (max-width:767px){
  .blog-head h1{font-size:28px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em!important;max-width:100%!important}
  .blog-head p{font-size:15px!important;line-height:1.55!important;max-width:100%!important}
}

/* ============================================================
   WORDPRESS / ASTRA NATIVE OUTPUT
   Styles for markup WP generates that doesn't carry my classes.
   ============================================================ */
/* WP image blocks inside article */
.entry .wp-block-image,.elementor-widget-theme-post-content .wp-block-image{margin:40px 0}
.entry .wp-block-image img,.entry img{border:1px solid var(--line);background:var(--fog)}
.entry .wp-block-image figcaption,.entry .wp-caption-text{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--graphite);margin-top:12px;text-align:left}
/* WP pagination fallback (if paginate_links classes leak through) */
.pager .page-numbers,.pager .page-numbers:visited{font-family:var(--mono);font-size:13px;font-weight:500;min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);text-decoration:none;color:var(--graphite);background:#fff;border-radius:8px;transition:transform .16s var(--ease),border-color .2s,color .2s,background .2s,box-shadow .2s}
.pager .page-numbers.current,.pager .page-numbers.current:visited{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pager .page-numbers:hover,.pager .page-numbers:visited:hover{border-color:var(--ink);color:var(--ink);background:var(--fog)}
.pager .page-numbers.current:hover{color:#fff;background:var(--ink)}
.pager .page-numbers:active{transform:scale(.94)}
.pager .page-numbers.next,.pager .page-numbers.prev,
.pager .page-numbers.next:visited,.pager .page-numbers.prev:visited{padding:0 20px;font-weight:500;color:var(--ink)}
.pager .page-numbers.next:hover,.pager .page-numbers.prev:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .page-numbers.dots{border-color:transparent;background:transparent}
/* Avatars come out square from get_avatar; force round */
.post-author .ava,.author-bio .ava,.p-card .p-foot .ava{border-radius:50%}

/* Astra's content container is display:flex (for content + sidebar). Our
   templates output several full-width sections into it, which would turn them
   into side-by-side columns. Force block layout on blog views so they stack. */
.blog .ast-container,
.archive .ast-container,
.single .ast-container{display:block}
.cc-blog-main{width:100%}

/* Astra caps the "narrow" container (used on single posts) at 750px via its
   own --ast-narrow-container-width custom property. Our blog/post templates
   are designed around a 1280px canvas, so force it wider here — scoped to
   blog/archive/single views only, everything else on the site is untouched. */
.blog .ast-container,
.archive .ast-container,
.single .ast-container{max-width:1280px !important}

/* Custom WPCode footer: break out of the padded container to full viewport width */
.cc-site-footer{width:100vw;margin-left:calc(50% - 50vw);margin-top:0}

/* Footer flush: Astra gives #primary `margin:4em 0` at >=993px (top AND bottom).
   Keep the top spacing, drop only the bottom so the footer sits flush under the
   last section. Scoped with the container + page class to beat Astra's
   `.ast-separate-container #primary` (which uses the #primary ID). */
.ast-separate-container.single #primary,
.ast-separate-container.blog #primary,
.ast-separate-container.archive #primary{margin-bottom:0}

/* ============================================================
   THEME COMPATIBILITY  (Astra + your existing global CSS)
   Your global rule  h1,h2,h3,h4{font-weight:500!important;line-height:1.3!important}
   flattens the blog hierarchy, and  a:hover{text-decoration:underline}
   underlines card titles. These overrides are scoped to blog classes only,
   so the rest of your site is untouched.
   (Cleaner long-term: drop the !important from that global heading rule.)
   ============================================================ */
.post-h1{font-weight:600!important;line-height:1.06!important}
.blog-head h1{font-weight:600!important;line-height:1.04!important}
.featured h2,.cta-inner h2,.news h2{font-weight:600!important;line-height:1.14!important}
.entry h2,.elementor-widget-theme-post-content h2{font-weight:600!important;line-height:1.2!important}
.entry h3,.elementor-widget-theme-post-content h3{font-weight:600!important;line-height:1.3!important}
.p-card h3,.rl-card h3{font-weight:600!important;line-height:1.28!important}
/* kill the global hover-underline on blog links + card titles */
.crumb,.tag,.share-btn,.pager a,.featured a,.featured .f-read,.related .all,.p-card,.rl-card,
.entry a,.elementor-widget-theme-post-content a,.nav-links a,.foot-col a{text-decoration:none}
.crumb:hover,.tag:hover,.pager a:hover,.featured a:hover h2,.p-card:hover h3,.rl-card:hover h3,
.related .all:hover,.entry a:hover,.elementor-widget-theme-post-content a:hover{text-decoration:none}