/* TrevorBart.com blog skin — layout + WordPress content styles.
   Depends on /assets/tb.css (tokens + components). */

/* ---- Listing hero ---- */
.blog-hero{padding:88px 0 60px}
.blog-hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.blog-hero h1{max-width:560px}
.blog-hero .sub{font-size:18px;margin-top:16px;max-width:520px}
.search{width:300px;position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-inverse-muted)}
.search input{padding-left:42px;border-color:var(--border-inverse);background:var(--surface-inverse-card);color:#fff;box-shadow:inset 0 1px 0 #ffffff14}
.search input::placeholder{color:var(--text-inverse-muted)}

/* ---- Listing layout ---- */
.blog-main{padding:64px 0 96px}
.blog-grid{display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:start}
.posts{display:grid;gap:20px}
.post-card{display:flex;gap:20px;justify-content:space-between;padding:24px 32px}
.post-card .pc-body{min-width:0;flex:1}
.post-card .meta{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.mins{font:400 12px/1.5 var(--font-mono);color:var(--text-subtle)}
.post-card h3{font:700 24px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--text-heading);margin-bottom:8px}
.post-card p{color:var(--text-muted);margin:0;font-size:15px}
.post-card .byline{margin-top:20px}
.pc-thumb{flex:0 0 140px;align-self:center}
.pc-thumb img{width:140px;height:110px;object-fit:cover;border-radius:10px;display:block}
@media(max-width:640px){.post-card{flex-direction:column-reverse}.pc-thumb{flex-basis:auto}.pc-thumb img{width:100%;height:160px}}

/* ---- Sidebar ---- */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.optin .optin-sub{font-size:14px;margin:8px 0 16px}
.optin input{margin-bottom:10px}
.optin .btn-cta{height:52px;font-size:18px}
.card.offer h4{margin-top:10px}
.card.offer .pr{font:800 28px/1 var(--font-display);letter-spacing:-.015em;color:var(--text-heading);margin-right:12px;vertical-align:middle}
.card.offer p{font-size:14px;color:var(--text-muted);margin:10px 0 16px}
.side-list{margin:10px 0 16px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}.side{position:static}}

/* ---- WP pagination ---- */
.pagination{margin-top:28px}
.pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pagination .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-control);font:700 14px/1 var(--font-body);color:var(--text-body);transition:background 140ms var(--ease)}
.pagination a.page-numbers:hover{background:var(--surface-sunken)}
.pagination .page-numbers.current{background:var(--red-500);border-color:var(--red-500);color:#fff}
.pagination .page-numbers.dots{border:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Single: header ---- */
.ahead{padding:56px 0 40px;border-bottom:1px solid var(--border-subtle)}
.crumb{font-size:13px;color:var(--text-subtle);margin-bottom:20px}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.meta-row{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.ahead h1{max-width:800px;font-size:42px}
.byline-lg{display:flex;align-items:center;gap:12px;margin-top:24px}
.byline-lg img{width:40px;height:40px;border-radius:50%}
.byline-lg .who{font-size:14px;color:var(--text-muted)}
.byline-lg .who b{display:block;color:var(--text-heading);font-size:15px}
@media(max-width:720px){.ahead h1{font-size:30px}}

/* ---- Single: layout ---- */
.single-grid{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr;gap:64px;align-items:start;padding:48px 0 96px}
@media(max-width:900px){.single-grid{grid-template-columns:1fr}}

/* ---- Article content (WP the_content) ---- */
.article{font-size:17px;line-height:1.7;color:var(--text-body)}
.article>*+*{margin-top:20px}
.article h1,.article h2{font:800 28px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--text-heading);margin-top:44px}
.article h3{font:700 22px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--text-heading);margin-top:32px}
.article h4{font:700 18px/1.3 var(--font-display);color:var(--text-heading);margin-top:28px}
.article ul,.article ol{padding-left:24px}
.article li{margin-bottom:8px}
.article img{max-width:100%;height:auto;border-radius:10px}
.article .feat img{width:100%;border-radius:var(--radius-media)}
.article blockquote{background:var(--surface-sunken);border-radius:var(--radius-card);padding:24px 28px;font:700 20px/1.4 var(--font-display);letter-spacing:-.015em;color:var(--text-heading)}
.article blockquote p{margin:0}
.article pre{background:var(--neutral-900);color:var(--neutral-50);border-radius:10px;padding:18px 20px;overflow-x:auto;font:400 13px/1.6 var(--font-mono)}
.article code{font:400 .88em/1.5 var(--font-mono);background:var(--surface-sunken);padding:2px 6px;border-radius:4px}
.article pre code{background:none;padding:0}
.article iframe{max-width:100%;border-radius:10px}
.article .wp-block-image{margin-top:20px}
.article figcaption{font-size:13px;color:var(--text-subtle);margin-top:8px;text-align:center}
.article .aligncenter{margin-left:auto;margin-right:auto;display:block}
.article .alignleft{float:left;margin:0 20px 12px 0}
.article .alignright{float:right;margin:0 0 12px 20px}
.article .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;background:var(--red-500);color:#fff;font:700 14px/1 var(--font-body);height:44px;padding:0 20px;border-radius:var(--radius-control);text-decoration:none}

/* ---- Single: CTA banner + author ---- */
.ctab{text-align:center;padding:40px;margin-top:48px;border-radius:20px}
.ctab h2{font:800 28px/1.2 var(--font-display);letter-spacing:-.015em;margin:0 0 10px;color:var(--text-inverse)}
.ctab p{max-width:460px;margin:0 auto 24px;font-size:16px}
.ctab .ctab-fine{font-size:13px;color:var(--text-inverse-muted);margin:16px 0 0}
.ctab .ctab-fine a{color:#93c5fd;font-weight:600}
.author{display:flex;gap:20px;align-items:flex-start;padding:28px 32px;margin-top:48px}
.author img{width:56px;height:56px;border-radius:50%}
.author h4{margin-bottom:6px}
.author p{font-size:15px;margin:0}

/* ---- Related ---- */
.related{background:var(--surface-page-alt);border-top:1px solid var(--border-subtle);padding:64px 0 96px}
.related h2{text-align:center;margin-bottom:36px;font-size:30px}
.rel{display:block;padding:24px}
.rel .meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.rel h3{font:700 18px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--text-heading)}

/* ---- Page template ---- */
.page-head{padding:48px 0}
.page-head h1{font-size:34px}
.page-main{padding:40px 0 64px}

/* ---- Neutralize legacy sticky-header patch (old functions.php) ---- */
html body .art-sticky-header,html body header.art-sticky-header{position:static!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;background:transparent!important;opacity:1!important;width:auto!important}
html body .bpn-custom-menu{display:none!important}

/* ---- Comments (light default) ---- */
.comments-area{max-width:var(--container-md);margin:0 auto;padding:0 var(--gutter) 64px}
.comments-area ol{list-style:none}
.comment-body{background:var(--surface-sunken);border-radius:var(--radius-card);padding:18px 22px;margin-bottom:14px;font-size:14px}