/* Blog listing + post styling. Loaded after site-chrome.css, same pattern
   as the other page-specific stylesheets (about.css, services.css, etc). */

.blog-hero{
  background:linear-gradient(90deg,rgba(0,48,107,.9) 0,rgba(0,122,213,.43) 100%);
  color:#fff;
  /* The site nav is absolutely positioned over the top of the page (see
     site-chrome.css "nav"/"header"), so page content needs enough top
     padding to clear it — other pages achieve this via a tall #page-header;
     this section does the same with padding instead. */
  padding:190px 24px 60px;
  text-align:center;
}
/* Explicit color:#fff here, not just inherited from .blog-hero above —
   site-chrome.css's base typography rules (h1{color:#1d2124}, p{color:
   #646464}) are direct rules on the element itself, which always beat an
   inherited value regardless of selector specificity. Without this, the
   heading/subtext on the blue gradient banner rendered in near-black,
   almost unreadable — the same underlying issue as the h1 fix below. */
.blog-hero h1{margin:0 0 10px;font-size:2.4rem;color:#fff;}
.blog-hero p{margin:0 auto;max-width:560px;opacity:.92;color:#fff;}

.blog-wrap{max-width:1100px;margin:0 auto;padding:50px 24px 70px;}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:28px;
  margin-top:10px;
}
.blog-card{
  background:#fff;
  border:1px solid #e3e9f0;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,63,138,.12);}
.blog-card .thumb{
  height:170px;
  background:linear-gradient(135deg,#0b3f8a,#43b7ff);
  background-size:cover;
  background-position:center;
}
.blog-card .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;}
.blog-card .date{font-size:.75rem;color:#5a6b7b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.blog-card h2{font-size:1.15rem;margin:0 0 10px;color:#1c2733;}
.blog-card p{font-size:.9rem;color:#5a6b7b;line-height:1.55;margin:0;flex:1;}
.blog-card .tags{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap;}
.blog-card .tags span{background:#eaf6ff;color:#0b3f8a;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;}

.blog-empty{color:#5a6b7b;padding:40px 0;text-align:center;}

.pagination{display:flex;justify-content:center;gap:10px;margin-top:40px;}
.pagination a, .pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;border-radius:8px;text-decoration:none;
  font-size:.85rem;font-weight:600;color:#0b3f8a;border:1px solid #e3e9f0;background:#fff;
}
.pagination a:hover{background:#eaf6ff;}
.pagination .current{background:#43b7ff;color:#fff;border-color:#43b7ff;}

/* single post */
/* Thin colored band behind the nav — same purpose as the "#page-header"
   band every other page uses: gives the (white) nav text/logo a background
   to be visible against, and clears the absolutely-positioned nav so it
   doesn't overlap page content. */
.post-nav-strip{
  background:linear-gradient(90deg,rgba(0,48,107,.9) 0,rgba(0,122,213,.43) 100%);
  height:150px;
}
.post-wrap{max-width:760px;margin:0 auto;padding:50px 24px 70px;}
.post-breadcrumb{font-size:.85rem;color:#5a6b7b;margin-bottom:18px;}
.post-breadcrumb a{color:#0b3f8a;font-weight:600;text-decoration:none;}
.post-header .date{font-size:.8rem;color:#5a6b7b;text-transform:uppercase;letter-spacing:.04em;}
.post-header h1{font-size:2rem;margin:8px 0 16px;}
.post-header .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.post-header .tags span{background:#eaf6ff;color:#0b3f8a;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;}
.post-featured-image{width:100%;border-radius:14px;margin-bottom:30px;display:block;}
.post-content{font-size:1rem;line-height:1.8;color:#33414f;}
.post-content h2{font-size:1.4rem;margin:32px 0 12px;color:#1c2733;}
.post-content h3{font-size:1.15rem;margin:26px 0 10px;color:#1c2733;}
.post-content p{margin:0 0 18px;}
.post-content ul, .post-content ol{margin:0 0 18px;padding-left:22px;}
.post-content a{color:#0b3f8a;font-weight:600;}
.post-content img{max-width:100%;border-radius:10px;}
.post-content blockquote{
  border-left:4px solid #43b7ff;margin:22px 0;padding:4px 20px;color:#5a6b7b;font-style:italic;
}
.post-content pre{background:#12233f;color:#e3ecf7;padding:16px 20px;border-radius:10px;overflow-x:auto;font-size:.85rem;}
.post-content code{background:#eef1f4;padding:2px 6px;border-radius:4px;font-size:.88em;}
.post-content pre code{background:none;padding:0;}

.post-cta{
  margin-top:50px;
  background:linear-gradient(120deg,#00306b,#1c86e0);
  border-radius:16px;
  padding:34px 38px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
/* Same direct-rule-beats-inheritance issue as .blog-hero above — these
   need their own color:#fff rather than relying on inheriting it from
   .post-cta. */
.post-cta h2{margin:0 0 6px;font-size:1.25rem;color:#fff;}
.post-cta p{margin:0;opacity:.9;font-size:.9rem;color:#fff;}
.post-cta a{
  background:#fff;color:#0b3f8a;font-weight:700;text-decoration:none;
  padding:12px 22px;border-radius:10px;font-size:.9rem;white-space:nowrap;
}

/* Dark mode — site-chrome.css supplies the foundational body.dark-mode
   rules (background, base text colours), but the blog's own custom
   classes (cards, pagination, post content) need their own overrides,
   same as every legacy page does for its own custom classes (e.g.
   .price-box, .box in about.css). Without these, toggling dark mode left
   the header/footer dark but blog content stuck in its light-mode colours. */
body.dark-mode .blog-card{
  background:var(--medium);
  border-color:var(--primary);
  box-shadow:0 0 25px -5px #43b7ff;
}
body.dark-mode .blog-card .date{color:#b7c3ce;}
body.dark-mode .blog-card h2{color:#fff;}
body.dark-mode .blog-card p{color:#cdd7e0;}
body.dark-mode .blog-card .tags span{background:rgba(67,183,255,.15);color:#8fd0ff;}

body.dark-mode .blog-empty{color:#cdd7e0;}

body.dark-mode .pagination a,body.dark-mode .pagination span{
  background:var(--medium);border-color:var(--primary);color:#8fd0ff;
}
body.dark-mode .pagination a:hover{background:rgba(67,183,255,.15);}
body.dark-mode .pagination .current{background:var(--primary);color:#001a33;border-color:var(--primary);}

body.dark-mode .post-breadcrumb{color:#b7c3ce;}
body.dark-mode .post-breadcrumb a{color:#8fd0ff;}
body.dark-mode .post-header .date{color:#b7c3ce;}
/* site-chrome.css's sitewide dark-mode text-colour rule only covers
   h2/li/p (matching what the legacy pages' own main headings use — see
   about.php, which titles its main section with an h2, not h1). The
   blog's post title is a genuine h1, so it isn't covered by that rule and
   needs its own override here. */
body.dark-mode .post-header h1{color:#fff;}
body.dark-mode .post-header .tags span{background:rgba(67,183,255,.15);color:#8fd0ff;}

body.dark-mode .post-content{color:#cdd7e0;}
body.dark-mode .post-content h2,body.dark-mode .post-content h3{color:#fff;}
body.dark-mode .post-content a{color:#8fd0ff;}
body.dark-mode .post-content blockquote{border-left-color:var(--primary);color:#b7c3ce;}
body.dark-mode .post-content code{background:var(--medium);color:#e3ecf7;}

body.dark-mode .post-cta{background:linear-gradient(120deg,#001a33,var(--medium));}