/* ============================================================
   EasyBoxs – blog.css
   Styles for article pages and blog listing
   ============================================================ */

/* ── ARTICLE HEADER ── */
.article-wrap { display:block; }
.article-header { background:var(--navy); color:white; padding:3.5rem 2rem 3rem; }
.article-header .back-btn { color:rgba(255,255,255,.75); margin-bottom:1.25rem; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; background:none; border:none; cursor:pointer; text-decoration:none; transition:color .2s; }
.article-header .back-btn:hover { color:white; }
.article-header .tag { margin-bottom:.75rem; display:inline-block; }
.article-header h1 { color:#FFF; font-size:2.1rem; line-height:1.2; margin:.5rem 0 1rem; max-width:760px; }
.article-lead { color:rgba(255,255,255,.80); font-size:1.05rem; line-height:1.75; max-width:700px; }

/* ── ARTICLE BODY ── */
.article-body { max-width:760px; margin:0 auto; padding:3rem 2rem; }
.article-body h2 { font-size:1.45rem; font-weight:700; margin:2.5rem 0 .75rem; color:var(--navy); padding-top:1rem; border-top:2px solid var(--cardborder); }
.article-body h2:first-child { border-top:none; margin-top:0; padding-top:0; }
.article-body h3 { font-size:1.1rem; font-weight:700; margin:1.75rem 0 .5rem; color:var(--navy); }
.article-body p  { font-size:.95rem; color:#3D5270; line-height:1.8; margin-bottom:1rem; }
.article-body ul,
.article-body ol { margin:0 0 1.25rem 1.5rem; }
.article-body ul li,
.article-body ol li { font-size:.92rem; color:#3D5270; margin-bottom:.5rem; line-height:1.65; }
.article-body strong { color:var(--navy); font-weight:700; }

/* ── HIGHLIGHT BOX ── */
.article-highlight {
  background:var(--lightblue);
  border-left:4px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  font-size:.9rem; color:#2D4A6E; line-height:1.7;
}
.article-highlight strong { color:var(--navy); }

/* ── WARNING BOX ── */
.article-warning {
  background:#FFF8E6;
  border-left:4px solid var(--warn);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  font-size:.9rem; color:#5C4000; line-height:1.7;
}

/* ── DANGER BOX ── */
.article-danger {
  background:#FEF0F0;
  border-left:4px solid #E24B4A;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  font-size:.9rem; color:#7A1E1E; line-height:1.7;
}

/* ── CHECKLIST ── */
.checklist { background:#F7F9FD; border-radius:var(--r-md); padding:1.5rem; margin:1.5rem 0; }
.checklist h3 { font-size:1rem; margin-bottom:.75rem; color:var(--navy); }
.checklist ul { margin:0; padding:0; list-style:none; }
.checklist li { font-size:.9rem; color:#3D5270; padding:5px 0; display:flex; gap:10px; line-height:1.5; border-bottom:1px solid var(--cardborder); }
.checklist li:last-child { border:none; }

/* ── DATA TABLE ── */
.article-body table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.875rem; }
.article-body th { background:var(--navy); color:#FFF; padding:10px 14px; text-align:left; font-weight:700; font-family:var(--font-head); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.article-body td { padding:10px 14px; border-bottom:1.5px solid var(--cardborder); color:#2D3E55; }
.article-body tr:hover td { background:var(--lightblue); }
.table-wrap { overflow-x:auto; margin:1.5rem 0; }

/* ── INLINE CTA ── */
.article-cta {
  background:linear-gradient(135deg,var(--navy) 0%,#1A3A6E 100%);
  border-radius:var(--r-lg); padding:2rem; text-align:center; margin:2.5rem 0;
  color:white;
}
.article-cta h3 { color:#FFF; font-size:1.2rem; margin-bottom:.5rem; }
.article-cta p  { color:rgba(255,255,255,.78); margin-bottom:1.25rem; font-size:.9rem; }

/* ── RELATED ARTICLES ── */
.related-articles { padding:3rem 2rem; border-top:2px solid var(--cardborder); }
.related-articles > h3 { font-size:1.1rem; margin-bottom:1.5rem; color:var(--navy); }

/* ── BLOG LISTING HEADER ── */
.blog-hero { background:var(--navy); color:white; padding:3.5rem 2rem; }
.blog-hero h1 { color:#FFF; }
.blog-hero p  { color:rgba(255,255,255,.78); max-width:560px; margin-top:.75rem; }

/* ── CATEGORY FILTER ── */
.blog-filter { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter-btn { background:var(--softgray); color:var(--gray); border:none; padding:6px 16px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all .2s; }
.filter-btn:hover, .filter-btn.active { background:var(--mid); color:#FFF; }

@media(max-width:640px) {
  .article-header h1 { font-size:1.6rem; }
  .article-body { padding:2rem 1.25rem; }
}