/*
Theme Name: NeatAccounts Blog
Theme URI: https://neataccounts.com
Author: Omega CST
Author URI: https://omega-cst.com
Description: Blog theme for NeatAccounts. Renders the same shared site chrome (nav, footer, logo, trust line) as the homepage by reading the NeatAccounts Landing plugin's content option, so the blog matches the rest of the site. Ships self-hosted Poppins and Inter (no Google CDN).
Version: 1.0.2
License: GPL2
Text Domain: neataccounts-blog
*/

/* Blog styles. Chrome + tokens + fonts come from the enqueued chrome.css.
   Everything is scoped under .na-root, which header.php opens. */

.na-root .na-main{min-height:50vh}

/* Blog index */
.na-root .na-blog-hero{background:linear-gradient(140deg,#0E5E6F,#0F6B7E 45%,#189CB4);color:#fff;padding:60px 0}
.na-root .na-blog-hero h1{font-size:38px;font-weight:800;letter-spacing:-.02em}
.na-root .na-blog-hero p{opacity:.92;font-size:17px;margin-top:10px}
.na-root .na-blog-list{padding:60px 0}
.na-root .na-post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.na-root .na-card{background:#fff;border:1px solid var(--na-line);border-radius:var(--na-radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.na-root .na-card:hover{border-color:var(--na-teal);box-shadow:var(--na-shadow);transform:translateY(-3px)}
.na-root .na-card-thumb{aspect-ratio:16/9;background:var(--na-teal-soft);overflow:hidden}
.na-root .na-card-thumb img{width:100%;height:100%;object-fit:cover}
.na-root .na-card-body{padding:22px 24px;flex:1;display:flex;flex-direction:column}
.na-root .na-card-cat{font-family:'Poppins';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--na-amber-dark)}
.na-root .na-card-body h2{font-size:19px;font-weight:600;margin:8px 0 8px;line-height:1.3}
.na-root .na-card-body p{color:var(--na-slate);font-size:14px;margin:0 0 16px}
.na-root .na-card-more{margin-top:auto;color:var(--na-teal-dark);font-weight:600;font-size:14px}

/* Single post */
.na-root .na-single{padding:0 0 70px}
.na-root .na-single-hero{background:var(--na-paper);border-bottom:1px solid var(--na-line);padding:56px 0 40px}
.na-root .na-single-hero .container{max-width:800px}
.na-root .na-single-cat{font-family:'Poppins';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--na-teal)}
.na-root .na-single-hero h1{font-size:40px;font-weight:800;letter-spacing:-.02em;margin:14px 0 12px;line-height:1.15}
.na-root .na-single-meta{color:var(--na-mist);font-size:14px}
.na-root .na-single-feat{max-width:900px;margin:-24px auto 0;padding:0 24px}
.na-root .na-single-feat img{width:100%;border-radius:var(--na-radius);box-shadow:var(--na-shadow)}
.na-root .na-article{max-width:760px;margin:44px auto 0;padding:0 24px;font-size:17px;line-height:1.75;color:#26383F}
.na-root .na-article h2{font-family:'Poppins';font-size:26px;font-weight:700;margin:38px 0 12px;color:var(--na-ink)}
.na-root .na-article h3{font-family:'Poppins';font-size:19px;font-weight:600;margin:26px 0 8px;color:var(--na-ink)}
.na-root .na-article p{margin:0 0 18px}
.na-root .na-article ul,.na-root .na-article ol{margin:0 0 18px;padding-left:22px}
.na-root .na-article li{margin-bottom:8px}
.na-root .na-article a{color:var(--na-teal-dark);text-decoration:underline;text-underline-offset:2px}
.na-root .na-article a:hover{color:var(--na-teal)}
.na-root .na-article strong{color:var(--na-ink)}
.na-root .na-article blockquote{border-left:4px solid var(--na-amber);background:var(--na-amber-soft);margin:0 0 18px;padding:14px 20px;border-radius:0 10px 10px 0}

/* In-post CTA block (appended by the blog import) */
.na-root .na-cta-block{margin:44px 0 0;background:linear-gradient(135deg,#0F6B7E,#189CB4);color:#fff;border-radius:var(--na-radius);padding:34px 32px;text-align:center}
.na-root .na-cta-block h3{font-family:'Poppins';font-size:22px;font-weight:700;margin:0 0 10px;color:#fff}
.na-root .na-cta-block p{margin:0 0 18px;opacity:.94;font-size:16px}
.na-root .na-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Pagination */
.na-root .na-pager{display:flex;justify-content:center;gap:12px;margin-top:44px}
.na-root .na-pager a,.na-root .na-pager span{padding:10px 18px;border:1px solid var(--na-line);border-radius:9px;background:#fff;font-weight:600;color:var(--na-teal-dark)}
.na-root .na-pager .current{background:var(--na-teal);color:#fff;border-color:var(--na-teal)}

@media(max-width:720px){
  .na-root .na-single-hero h1{font-size:30px}
  .na-root .na-blog-hero h1{font-size:30px}
}