/*
Theme Name:  ZX Academy Blog
Theme URI:   https://zxacademy.com/blog/
Author:      ZX Academy
Author URI:  https://zxacademy.com
Description: Official blog theme for ZX Academy.
Version:     1.0.0
*/


/* ────────────────────────────────────────────────────
   PAGE BANNER
──────────────────────────────────────────────────── */
.page-banner { background:linear-gradient(135deg,var(--blue-dp) 0%,var(--blue-dk) 60%,var(--blue) 100%);
  padding:130px 0 50px; color:#fff }
.page-banner h1 { font-size:clamp(24px,4vw,38px); font-weight:700; color:#fff; margin:0 0 8px; line-height:1.28 }
.page-banner p { color:rgba(255,255,255,.75); font-size:15px; margin:0 }
.wp-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap }
.wp-breadcrumb a { color:rgba(255,255,255,.7); font-size:13px }
.wp-breadcrumb a:hover { color:#fff }
.wp-breadcrumb .sep { color:rgba(255,255,255,.35); font-size:12px }
.wp-breadcrumb .cur { color:rgba(255,255,255,.9); font-size:13px; font-weight:600 }

/* ────────────────────────────────────────────────────
   LAYOUT
──────────────────────────────────────────────────── */
.section-pad { padding:60px 0 70px }
.blog-layout { display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start }
@media(max-width:991px) { .blog-layout { grid-template-columns:1fr } }

/* ────────────────────────────────────────────────────
   SHARED COMPONENTS
──────────────────────────────────────────────────── */
.cat-badge { display:inline-flex; align-items:center; background:var(--orange-lt);
  color:var(--orange); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; padding:3px 10px; border-radius:100px; white-space:nowrap }
.meta-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px }
.meta-item { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted) }

/* ────────────────────────────────────────────────────
   BLOG INDEX — FEATURED CARD
──────────────────────────────────────────────────── */
.feat-card { display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border); background:#fff;
  margin-bottom:36px; transition:box-shadow .3s,transform .3s }
.feat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px) }
.feat-img { overflow:hidden; min-height:300px }
.feat-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.feat-card:hover .feat-img img { transform:scale(1.04) }
.feat-body { padding:32px; display:flex; flex-direction:column; justify-content:center }
.feat-badge { background:var(--orange); color:#fff; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:100px;
  display:inline-block; margin-left:8px }
.feat-title { font-size:clamp(18px,2.5vw,26px); font-weight:700; color:var(--blue-dk);
  line-height:1.3; margin:10px 0 }
.feat-excerpt { font-size:14.5px; color:var(--muted); line-height:1.75; flex:1; margin-bottom:14px }
.feat-cta { display:inline-flex; align-items:center; gap:5px; font-size:14px;
  font-weight:700; color:var(--blue); transition:color .2s }
.feat-card:hover .feat-cta { color:var(--orange) }
@media(max-width:767px) {
  .feat-card { grid-template-columns:1fr }
  .feat-img { min-height:200px }
  .feat-body { padding:20px }
}

/* ────────────────────────────────────────────────────
   BLOG INDEX — CARD GRID
──────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px }
.blog-card { background:#fff; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); display:flex; flex-direction:column;
  transition:box-shadow .3s,transform .3s }
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px) }
.card-img { display:block; aspect-ratio:16/9; overflow:hidden }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.blog-card:hover .card-img img { transform:scale(1.05) }
.card-body { padding:20px; flex:1; display:flex; flex-direction:column }
.card-title { font-size:16px; font-weight:700; color:var(--blue-dk);
  line-height:1.4; margin:8px 0 10px }
.card-title a { color:inherit }
.card-title a:hover { color:var(--orange) }
.card-excerpt { font-size:14px; color:var(--muted); line-height:1.7; flex:1; margin-bottom:14px }
.card-foot { display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--border); gap:8px; flex-wrap:wrap }
.read-more { font-size:13px; font-weight:700; color:var(--blue);
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap }
.read-more:hover { color:var(--orange) }

/* WP pagination */
.blog-pagination { display:flex; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap }
.blog-pagination a, .blog-pagination span { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  border:1.5px solid var(--border); color:var(--text); background:#fff; transition:all .2s }
.blog-pagination a:hover { background:var(--blue-lt); border-color:var(--blue); color:var(--blue) }
.blog-pagination .current { background:var(--blue); border-color:var(--blue); color:#fff }

/* ────────────────────────────────────────────────────
   SINGLE POST
──────────────────────────────────────────────────── */
#zx-progress { position:fixed; top:calc(var(--topbar)+var(--hdr)); left:0;
  width:0; height:3px; background:var(--orange); z-index:500; transition:width .1s linear }
@media(max-width:767px) { #zx-progress { top:var(--hdr) } }

.post-meta-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px }
.post-meta-item { display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:rgba(255,255,255,.75) }
.post-meta-item i { color:var(--orange) }

.post-img { border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md); margin-bottom:36px }
.post-img img { width:100%; max-height:460px; object-fit:cover; display:block }

/* Post content typography */
.post-content { font-size:16px; line-height:1.85; color:#374151 }
.post-content h2 { font-family:var(--font); font-size:22px; font-weight:700;
  color:var(--blue-dk); margin:38px 0 14px; padding-bottom:10px;
  border-bottom:2px solid var(--blue-lt) }
.post-content h3 { font-family:var(--font); font-size:18px; font-weight:700;
  color:var(--blue-dk); margin:26px 0 10px }
.post-content h4 { font-family:var(--font); font-size:16px; font-weight:700;
  color:var(--blue-dk); margin:20px 0 8px }
.post-content p { margin-bottom:18px }
.post-content a { color:var(--blue); text-decoration:underline; text-underline-offset:3px }
.post-content a:hover { color:var(--orange) }
.post-content ul { list-style:none; padding:0; margin:0 0 18px }
.post-content ul li { padding-left:20px; position:relative; margin-bottom:8px }
.post-content ul li::before { content:''; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--orange) }
.post-content ol { padding-left:20px; margin-bottom:18px; list-style:decimal }
.post-content ol li { margin-bottom:8px }
.post-content blockquote { border-left:4px solid var(--orange); background:var(--blue-lt);
  margin:28px 0; padding:18px 22px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic; color:var(--blue-dk) }
.post-content blockquote p { margin:0 }
.post-content strong { font-weight:700; color:var(--blue-dk) }
.post-content em { font-style:italic }
.post-content code { background:var(--bg); border:1px solid var(--border);
  border-radius:4px; padding:2px 6px; font-size:14px; color:var(--orange-dk) }
.post-content pre { background:var(--blue-dp); border-radius:var(--radius-sm);
  padding:20px; overflow-x:auto; margin-bottom:18px }
.post-content pre code { background:none; border:none; color:#e2e8f0; font-size:14px; padding:0 }
.post-content img { border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); margin:20px auto }
.post-content table { width:100%; border-collapse:collapse; margin-bottom:20px; font-size:14px }
.post-content th { background:var(--blue-dk); color:#fff; padding:10px 14px;
  text-align:left; font-weight:600 }
.post-content td { border:1px solid var(--border); padding:10px 14px }
.post-content tr:nth-child(even) td { background:var(--bg) }

/* Tags */
.post-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding-top:22px; border-top:1px solid var(--border); margin-top:32px }
.post-tags-label { font-size:13px; font-weight:700; color:var(--muted) }
.post-tag { font-size:13px; font-weight:600; color:var(--blue); background:var(--blue-lt);
  border:1px solid rgba(41,80,151,.15); padding:4px 12px; border-radius:100px }

/* Author box */
.author-box { display:flex; gap:16px; align-items:flex-start; background:var(--blue-lt);
  border-radius:var(--radius); padding:22px; border:1px solid rgba(41,80,151,.12); margin-top:28px }
.author-avatar { width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  color:#fff; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.author-name { font-size:15px; font-weight:700; color:var(--blue-dk); margin-bottom:2px }
.author-role { font-size:13px; color:var(--orange); font-weight:600; margin-bottom:6px }
.author-bio { font-size:14px; color:var(--muted); line-height:1.7; margin:0 }

/* Related posts */
.related { padding-top:36px; border-top:2px solid var(--blue-lt); margin-top:44px }
.related-title { font-size:20px; font-weight:700; color:var(--blue-dk); margin-bottom:20px }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px }
.rel-card { display:block; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:box-shadow .3s,transform .3s }
.rel-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px) }
.rel-card-img { aspect-ratio:16/9; overflow:hidden }
.rel-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.rel-card:hover .rel-card-img img { transform:scale(1.05) }
.rel-card-body { padding:14px }
.rel-card-title { font-size:13px; font-weight:700; color:var(--blue-dk); line-height:1.4; margin:4px 0 6px }
.rel-card:hover .rel-card-title { color:var(--orange) }
.rel-meta { display:flex; gap:10px; flex-wrap:wrap }
.rel-meta span { font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:4px }

/* ────────────────────────────────────────────────────
   SIDEBAR
──────────────────────────────────────────────────── */
.sidebar { display:flex; flex-direction:column; gap:22px;
  position:sticky; top:calc(var(--topbar)+var(--hdr)+16px); align-self:flex-start }
@media(max-width:991px) { .sidebar { position:static } }
.sb-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:20px }
.sb-title { font-size:14px; font-weight:700; color:var(--blue-dk); margin-bottom:14px;
  padding-bottom:10px; border-bottom:2px solid var(--blue-lt);
  display:flex; align-items:center; gap:7px }
.sb-title i { color:var(--orange) }
.sb-search { display:flex; border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden }
.sb-search input { flex:1; border:none; padding:9px 12px; font-size:14px;
  font-family:var(--font); outline:none; background:var(--bg) }
.sb-search input:focus { background:#fff }
.sb-search button { background:var(--blue); color:#fff; border:none;
  padding:0 14px; cursor:pointer; font-size:15px; transition:background .2s }
.sb-search button:hover { background:var(--blue-dk) }
.sb-cta { background:linear-gradient(135deg,var(--blue-dp),var(--blue-dk));
  border-radius:var(--radius); padding:24px 20px; text-align:center }
.sb-cta-icon { font-size:36px; color:var(--orange); display:block; margin-bottom:10px }
.sb-cta-title { font-size:17px; font-weight:700; color:#fff; margin-bottom:6px }
.sb-cta-text { font-size:13px; color:rgba(255,255,255,.7); margin-bottom:16px; line-height:1.6 }
.sb-cta-btn { display:block; background:var(--orange); color:#fff; font-size:14px;
  font-weight:700; padding:11px 20px; border-radius:100px; transition:background .2s; text-align:center }
.sb-cta-btn:hover { background:var(--orange-dk); color:#fff }
.sb-demo-link { display:flex; align-items:center; justify-content:center; gap:5px;
  margin-top:10px; font-size:13px; font-weight:600; color:rgba(255,255,255,.75) }
.sb-demo-link:hover { color:#fff }
.sb-cats { display:flex; flex-direction:column; gap:3px }
.sb-cat { display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:var(--radius-sm); font-size:14px;
  color:var(--text); transition:all .2s }
.sb-cat:hover, .sb-cat.active { background:var(--blue-lt); color:var(--blue) }
.sb-cat-count { background:var(--bg); border:1px solid var(--border); border-radius:100px;
  padding:1px 8px; font-size:12px; color:var(--muted); font-weight:600 }
.sb-courses { display:flex; flex-direction:column }
.sb-course { display:flex; align-items:flex-start; gap:11px; padding:10px 0;
  border-bottom:1px solid var(--border) }
.sb-courses .sb-course:last-child { border:none; padding-bottom:0 }
.sb-course i { font-size:17px; color:var(--orange); flex-shrink:0; margin-top:2px }
.sb-course-name { font-size:13px; font-weight:600; color:var(--blue-dk); line-height:1.35; margin-bottom:2px }
.sb-course:hover .sb-course-name { color:var(--orange) }
.sb-course-meta { font-size:12px; color:var(--muted) }
.sb-share { display:flex; flex-direction:column; gap:8px }
.sb-share-btn { display:flex; align-items:center; gap:9px; padding:9px 14px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; transition:opacity .2s }
.sb-share-btn:hover { opacity:.85 }
.sb-share-btn i { font-size:15px }
.share-wa { background:#25D366; color:#fff }
.share-li { background:#0A66C2; color:#fff }
.share-tw { background:#000; color:#fff }