/*
Theme Name: HardenedWeb Blog
Theme URI: https://hardenedweb.com/
Author: HardenedWeb (Centurian Solutions LLP)
Description: Lightweight security-first blog theme matching hardenedweb.com. No builders, no bloat. Gutenberg and Classic Editor compatible.
Version: 1.0
License: Proprietary
Text Domain: hardenedweb
*/

/* The main site's /styles.css is enqueued first (see functions.php), so all
   CSS variables and shared components (header, footer, buttons, plates,
   WhatsApp float, cookie banner) come from there. Below: blog-only styles. */

/* ---------- listing ---------- */
.blog-shell{padding:56px 0}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:2rem}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;transition:border-color .15s}
.post-card:hover{border-color:var(--blueprint)}
.post-card .pc-meta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper)}
.post-card h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.3}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover{color:var(--blueprint)}
.post-card .pc-excerpt{color:var(--steel);font-size:.93rem;flex:1}
.post-card .pc-more{font-weight:600;font-size:.9rem;color:var(--blueprint);text-decoration:none}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}}

/* ---------- article layout ---------- */
.article-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;padding:48px 0 72px;align-items:start}
.article-side{position:sticky;top:84px}
@media(max-width:920px){.article-shell{grid-template-columns:1fr}.article-side{position:static;order:2}}

.side-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.side-card h2{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:.7rem;font-weight:500}
.hw-toc{list-style:none}
.hw-toc a{display:block;color:var(--steel);text-decoration:none;font-size:.88rem;padding:.28rem 0;border-left:2px solid transparent;padding-left:.6rem}
.hw-toc a:hover{color:var(--ink)}
.hw-toc a.active{color:var(--blueprint);border-left-color:var(--blueprint)}
.hw-toc .toc-h3{padding-left:1.5rem;font-size:.82rem}

.progress-track{height:6px;background:var(--paper-deep);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--blueprint);transition:width .15s linear}
.progress-label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--steel);margin-top:.45rem}

.side-cta{background:var(--ink);color:#EAF0F7;border:none}
.side-cta p{color:#A9B7C9;font-size:.86rem;margin-bottom:.9rem}
.side-cta .btn{display:block;text-align:center}

/* ---------- article content ---------- */
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--steel);margin-bottom:1rem}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:var(--blueprint)}
.entry-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.015em}
.entry-meta{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--steel);margin:.8rem 0 2rem}
.entry-content{max-width:70ch}
.entry-content h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.45rem;margin:2.4rem 0 .8rem;scroll-margin-top:84px}
.entry-content h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.15rem;margin:1.8rem 0 .6rem;scroll-margin-top:84px}
.entry-content p{margin-bottom:1rem;color:var(--ink)}
.entry-content a{color:var(--blueprint)}
.entry-content ul,.entry-content ol{margin:0 0 1rem 1.4rem}
.entry-content li{margin-bottom:.35rem}
.entry-content img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.entry-content blockquote{border-left:3px solid var(--copper);background:var(--card);padding:.9rem 1.2rem;margin:1.2rem 0;border-radius:0 6px 6px 0;color:var(--steel)}

/* code blocks with copy buttons (added by blog.js) */
.entry-content pre{
  position:relative;background:#101823;color:#DCE6F2;
  padding:1rem 1.1rem;border-radius:8px;overflow-x:auto;
  font-family:'IBM Plex Mono',monospace;font-size:.86rem;line-height:1.55;margin:1.2rem 0;
}
.entry-content pre code{background:none;padding:0;color:inherit;font-size:inherit}
.entry-content code{background:var(--paper-deep);padding:.12rem .4rem;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:.86em}
.hw-copy{
  position:absolute;top:8px;right:8px;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.06em;
  background:rgba(255,255,255,.08);color:#DCE6F2;border:1px solid rgba(255,255,255,.18);
  border-radius:4px;padding:.28rem .6rem;cursor:pointer;
}
.hw-copy:hover{background:rgba(255,255,255,.16)}
.hw-copy.done{color:#7BE0A8;border-color:#7BE0A8}

/* callouts: add class "callout" (+ optional "warn"/"ok") to a Gutenberg group or paragraph */
.entry-content .callout{border:1px solid var(--line);border-left:3px solid var(--blueprint);background:var(--card);padding:.9rem 1.2rem;border-radius:0 6px 6px 0;margin:1.2rem 0}
.entry-content .callout.warn{border-left-color:var(--copper)}
.entry-content .callout.ok{border-left-color:var(--pass)}

/* post footer CTA */
.post-cta{margin-top:3rem;background:var(--ink);color:#EAF0F7;border-radius:10px;padding:1.8rem;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap}
.post-cta p{color:#A9B7C9;margin:0}
.post-cta strong{color:#fff;display:block;font-family:'Archivo',sans-serif;font-size:1.15rem;margin-bottom:.2rem}

/* related posts */
.related{margin-top:2.6rem}
.related h2{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:1rem;font-weight:500}

/* pagination */
.pager{display:flex;gap:.6rem;justify-content:center;margin-top:2.4rem}
.pager .page-numbers{padding:.5rem .9rem;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--steel);background:var(--card)}
.pager .page-numbers.current{background:var(--blueprint);color:#fff;border-color:var(--blueprint-deep)}