/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   blog.css  –  Blog listing + post page styles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━ Blog page — force white nav from the start ━━━━ */
.blog-page nav { background:rgba(255,255,255,.96); backdrop-filter:blur(18px); box-shadow:0 1px 0 var(--border); }
.blog-page nav .nav-links a { color:var(--text); }
.blog-page nav .nav-btn { background:var(--blue); color:white; box-shadow:0 4px 18px rgba(26,111,196,.32); }
.blog-page .burger svg { stroke:var(--text); }
.nav-link-active { color:var(--blue) !important; }
.nav-link-active::after { transform:scaleX(1) !important; }

/* ━━━━ Blog listing page hero ━━━━ */
.blog-page-hero {
  padding:140px 0 64px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.blog-hero-title {
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.15;
  margin:12px 0 18px;
  max-width:680px;
}
.blog-hero-sub {
  font-size:1.1rem;
  color:var(--muted);
  max-width:560px;
  line-height:1.7;
}

/* ━━━━ Filter bar ━━━━ */
.blog-filter-wrap {
  background:var(--bg);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:80px;
  z-index:100;
}
.blog-filters {
  display:flex;
  gap:8px;
  padding:14px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.blog-filters::-webkit-scrollbar { display:none; }
.blog-filter {
  background:none;
  border:1.5px solid var(--border);
  border-radius:9999px;
  padding:6px 18px;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  transition:all .18s;
}
.blog-filter:hover { border-color:var(--blue); color:var(--blue); }
.blog-filter.active { background:var(--blue); border-color:var(--blue); color:white; }

/* ━━━━ Post grid ━━━━ */
.post-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}

/* ━━━━ Post card ━━━━ */
.post-card {
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .22s, transform .22s, border-color .22s;
}
.post-card:hover {
  box-shadow:0 12px 40px rgba(26,111,196,.12);
  transform:translateY(-4px);
  border-color:rgba(26,111,196,.25);
}
.post-card-link { display:block; text-decoration:none; }
.post-card-top {
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.8rem;
}
/* card accent colours */
.post-card-top.ct  { background:linear-gradient(135deg,#dbeafe,#eff6ff); }
.post-card-top.gov { background:linear-gradient(135deg,#f3e8ff,#faf5ff); }
.post-card-top.sec { background:linear-gradient(135deg,#dcfce7,#f0fdf4); }
.post-card-top.tf  { background:linear-gradient(135deg,#fef3c7,#fffbeb); }
.post-card-top.net { background:linear-gradient(135deg,#cffafe,#ecfeff); }

.post-card-body {
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:12px;
}
.post-meta-top {
  display:flex;
  align-items:center;
  gap:10px;
}
.post-tag {
  font-size:.72rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:9999px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tag-lz  { background:#dbeafe; color:#1e40af; }
.tag-gov { background:#f3e8ff; color:#6b21a8; }
.tag-sec { background:#dcfce7; color:#166534; }
.tag-tf  { background:#fef3c7; color:#92400e; }
.tag-net { background:#cffafe; color:#164e63; }

.post-read { font-size:.78rem; color:var(--muted); margin-left:auto; }

.post-title {
  font-size:1.05rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.01em;
}
.post-title a { text-decoration:none; color:var(--text); transition:color .18s; }
.post-title a:hover { color:var(--blue); }

.post-excerpt {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.65;
  flex:1;
}

.post-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.post-date { font-size:.78rem; color:var(--muted); }
.post-read-more {
  font-size:.82rem;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
  transition:gap .18s;
}
.post-read-more:hover { text-decoration:underline; }


/* ━━━━ Post page hero ━━━━ */
.post-hero {
  padding:130px 0 60px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.post-back {
  display:inline-block;
  font-size:.85rem;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:24px;
  transition:color .18s;
}
.post-back:hover { color:var(--blue); }

.post-hero-meta {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.post-hero-title {
  font-size:clamp(1.8rem, 4vw, 2.8rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.15;
  max-width:760px;
  margin-bottom:20px;
}
.post-hero-sub {
  font-size:1.08rem;
  color:var(--muted);
  max-width:680px;
  line-height:1.75;
  margin-bottom:28px;
}
.post-author {
  display:flex;
  align-items:center;
  gap:12px;
}
.post-author-avatar {
  width:42px; height:42px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  font-size:.8rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.post-author strong { display:block; font-size:.9rem; }
.post-author span { font-size:.78rem; color:var(--muted); }


/* ━━━━ Post body layout ━━━━ */
.post-body { padding:72px 0 96px; }
.post-container {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:64px;
  align-items:start;
}

/* ━━━━ Post content typography ━━━━ */
.post-content { min-width:0; }
.post-lead {
  font-size:1.15rem;
  color:var(--text);
  line-height:1.8;
  font-weight:500;
  margin-bottom:40px;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}
.post-content h2 {
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.25;
  margin:44px 0 16px;
  color:var(--text);
}
.post-content h3 {
  font-size:1.1rem;
  font-weight:700;
  margin:28px 0 10px;
}
.post-content p {
  font-size:.97rem;
  line-height:1.85;
  color:#1e293b;
  margin-bottom:20px;
}
.post-content ul {
  margin:0 0 24px 0;
  padding-left:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.post-content ul li {
  font-size:.95rem;
  line-height:1.75;
  color:#1e293b;
  padding-left:20px;
  position:relative;
}
.post-content ul li::before {
  content:'—';
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:700;
}
.post-content strong { color:var(--text); font-weight:700; }

/* Decision block */
.decision-block {
  background:var(--bg-alt);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  margin:32px 0;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.decision-item {
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.decision-num {
  font-size:.78rem;
  font-weight:800;
  color:var(--blue);
  background:#dbeafe;
  border-radius:8px;
  padding:4px 10px;
  flex-shrink:0;
  margin-top:2px;
  letter-spacing:.06em;
}
.decision-item strong { display:block; font-size:.95rem; font-weight:700; margin-bottom:4px; }
.decision-item p { font-size:.875rem; color:var(--muted); line-height:1.65; margin:0; }


/* ━━━━ Sidebar ━━━━ */
.post-sidebar {
  display:flex;
  flex-direction:column;
  gap:24px;
  position:sticky;
  top:104px;
}
.sidebar-card {
  background:var(--bg-alt);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.sidebar-card h3 {
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.sidebar-cta {
  display:inline-block;
  margin-top:16px;
  font-size:.85rem;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
}
.sidebar-cta:hover { text-decoration:underline; }
.sidebar-links {
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sidebar-links li a {
  font-size:.875rem;
  color:var(--text);
  text-decoration:none;
  line-height:1.5;
  transition:color .18s;
  display:block;
  border-left:2px solid var(--border);
  padding-left:12px;
}
.sidebar-links li a:hover { color:var(--blue); border-left-color:var(--blue); }
.sidebar-contact { background:var(--blue); border-color:var(--blue); }
.sidebar-contact h3 { color:rgba(255,255,255,.65); }
.sidebar-contact p { font-size:.875rem; color:rgba(255,255,255,.75); line-height:1.6; margin-top:4px; }


/* ━━━━ Post nav strip ━━━━ */
.post-nav-strip {
  border-top:1px solid var(--border);
  padding:28px 0;
  background:var(--bg-alt);
}
.post-nav-wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.post-nav-next {
  text-align:right;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.post-nav-next span { font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.post-nav-next strong { font-size:.95rem; color:var(--blue); }
.post-nav-next:hover strong { text-decoration:underline; }


/* ━━━━ Responsive ━━━━ */
@media(max-width:1080px) {
  .post-grid { grid-template-columns:repeat(2, 1fr); }
  .post-container { grid-template-columns:1fr; }
  .post-sidebar { position:static; }
}
@media(max-width:680px) {
  .post-grid { grid-template-columns:1fr; }
  .blog-page-hero, .post-hero { padding-top:110px; }
  .blog-filters { gap:6px; }
}