/* ============================================================
   BLOG ONLY CSS
   Common theme (colors, fonts, header, footer, buttons) comes
   from assets/css/theme.css (copied 1:1 from header.php).
   Do NOT touch theme.css - only blog-specific sections live here:
   Breadcrumb, Blog Hero, Post Grid/Cards, Single Post, Author Box,
   Related Posts, Prev/Next, Pagination, Sidebar, Comments.
   ============================================================ */

/* Push content below the fixed header (header.site is position:fixed) */
.blog-page-offset{ padding-top:120px; }
@media(max-width:600px){ .blog-page-offset{ padding-top:96px; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--muted-2);margin-bottom:22px;
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span[aria-hidden]{color:var(--muted-2);}
.breadcrumb .current{color:#fff;}

/* ---------- Blog Listing Hero ---------- */
.blog-hero{padding:40px 0 60px;text-align:center;}
.blog-hero h1{font-size:clamp(28px,4.4vw,50px);margin:14px 0 12px;}
.blog-hero p{color:var(--muted);max-width:620px;margin:0 auto;}
@media(max-width:600px){ .blog-hero{padding:24px 0 40px;} }

/* ---------- Post Grid ---------- */
.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:20px;
}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr;}}

.post-card{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:rgba(0,174,204,.4);}
.post-card-thumb{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-panel);
}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card-cat{
  position:absolute;top:14px;left:14px;
  background:rgba(10,7,27,.75);backdrop-filter:blur(6px);
  border:1px solid rgba(0,174,204,.4);color:#00AECC;
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
}
.post-card-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1;}
.post-card-meta{
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted-2);margin-bottom:12px;
}
.post-card-meta span{display:flex;align-items:center;gap:5px;}
.post-card h3{font-size:19px;margin-bottom:10px;}
.post-card h3 a:hover{color:#00AECC;}
.post-card .excerpt{color:var(--muted);font-size:14.5px;margin-bottom:18px;flex:1;}
.post-card .read-more{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#00AECC;
}
.post-card .read-more svg{width:15px;height:15px;transition:transform .2s ease;}
.post-card .read-more:hover svg{transform:translateX(3px);}

/* ---------- Pagination ---------- */
.blog-pagination{display:flex;justify-content:center;gap:10px;margin-top:56px;flex-wrap:wrap;}
.blog-pagination a,.blog-pagination span{
  min-width:42px;height:42px;padding:0 14px;border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  font-size:14px;font-weight:600;color:var(--muted);
}
.blog-pagination a:hover{border-color:rgba(0,174,204,.55);color:#fff;}
.blog-pagination .current{background:var(--grad);color:#fff;border:none;}

/* ---------- Single Post ---------- */
.single-post-header{padding:30px 0 10px;}
.single-post-header .eyebrow{margin-bottom:16px;}
.single-post-header h1{font-size:clamp(26px,4.2vw,44px);margin-bottom:20px;}
.single-post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  font-size:14px;color:var(--muted);padding-bottom:30px;border-bottom:1px solid var(--glass-border);
}
.single-post-meta .meta-item{display:flex;align-items:center;gap:7px;}
.single-post-meta svg{width:16px;height:16px;color:#00AECC;flex-shrink:0;}
@media(max-width:480px){
  .single-post-header{padding:20px 0 6px;}
  .single-post-meta{gap:12px 18px;font-size:13px;padding-bottom:22px;}
}

.single-post-thumb{
  margin:30px 0 40px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--glass-border);
}
.single-post-thumb img{width:100%;height:auto;display:block;}

.single-post-layout{display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:start;}
@media(max-width:980px){.single-post-layout{grid-template-columns:1fr;}}

.post-content{color:var(--muted);font-size:16.5px;line-height:1.85;}
.post-content h2{color:#fff;font-size:26px;margin:40px 0 16px;}
.post-content h3{color:#fff;font-size:21px;margin:32px 0 14px;}
.post-content p{margin-bottom:20px;color:var(--muted);max-width:none;}
.post-content a{color:#00AECC;text-decoration:underline;text-underline-offset:3px;}
.post-content ul,.post-content ol{margin:0 0 20px 22px;color:var(--muted);}
.post-content li{margin-bottom:8px;list-style:disc;}
.post-content ol li{list-style:decimal;}
.post-content img{border-radius:14px;margin:24px 0;}
.post-content blockquote{
  border-left:3px solid #00AECC;background:var(--glass-fill);
  padding:18px 22px;border-radius:0 12px 12px 0;margin:24px 0;color:var(--muted);font-style:italic;
}
.post-content table{width:100%;border-collapse:collapse;margin:24px 0;}
.post-content table th,.post-content table td{border:1px solid var(--glass-border);padding:10px 14px;text-align:left;}
.post-content code{background:var(--glass-fill);padding:2px 6px;border-radius:5px;font-size:14px;}
.post-content pre{background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:12px;padding:18px;overflow-x:auto;margin:20px 0;}

.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.tag-row a{
  font-size:13px;color:var(--muted);background:var(--glass-fill);border:1px solid var(--glass-border);
  padding:7px 14px;border-radius:100px;
}
.tag-row a:hover{border-color:rgba(0,174,204,.55);color:#fff;}

/* ---------- FAQ (single post, optional block) ---------- */
.post-faq{margin-top:44px;}
.post-faq h2{font-size:24px;margin-bottom:18px;}

/* ---------- Author Box ---------- */
.author-box{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:26px;margin-top:48px;
}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-box h4{font-size:15px;margin-bottom:6px;}
.author-box .role{font-size:12.5px;color:#00AECC;font-weight:600;margin-bottom:10px;display:block;}
.author-box p{font-size:14px;color:var(--muted);}

/* ---------- Prev / Next ---------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;}
@media(max-width:640px){.post-nav{grid-template-columns:1fr;}}
.post-nav a{
  display:block;background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:16px;padding:20px 22px;
}
.post-nav a:hover{border-color:rgba(0,174,204,.5);}
.post-nav .dir{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-2);margin-bottom:8px;display:block;}
.post-nav .next-post{text-align:right;}
.post-nav .title{font-size:15px;font-weight:600;}

/* ---------- Related Posts ---------- */
.related-posts{margin-top:64px;}
.related-posts h2{font-size:24px;margin-bottom:24px;}

/* ---------- Sidebar (optional, only used if a template calls get_sidebar) ---------- */
.sidebar-widget{
  background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:24px;margin-bottom:24px;
}
.sidebar-widget h4{font-size:15px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.sidebar-widget ul li{margin-bottom:12px;font-size:14px;}
.sidebar-widget ul li a:hover{color:#00AECC;}

/* ---------- Comments ---------- */
.comments-area{margin-top:64px;}
.comments-title{font-size:22px;margin-bottom:26px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .comment{
  background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:16px;padding:20px 22px;margin-bottom:16px;
}
.comment-author{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.comment-author img{border-radius:50%;}
.comment-author .fn{font-weight:600;font-size:14.5px;color:#fff;font-style:normal;}
.comment-meta{font-size:12px;color:var(--muted-2);}
.comment-content p{color:var(--muted);font-size:14.5px;margin-bottom:0;}
.comment-list .children{list-style:none;margin-left:32px;margin-top:16px;}
.comment-respond{
  margin-top:32px;background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:26px;
}
.comment-respond input,.comment-respond textarea{
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--glass-border);
  border-radius:10px;padding:12px 14px;color:#fff;font-size:14.5px;font-family:inherit;margin-bottom:14px;
}
.comment-respond textarea{min-height:110px;resize:vertical;}
.comment-respond .comment-form-author,.comment-respond .comment-form-email{
  display:inline-block;width:calc(50% - 7px);
}
.comment-respond .comment-form-author{margin-right:14px;}
@media(max-width:600px){.comment-respond .comment-form-author,.comment-respond .comment-form-email{width:100%;margin-right:0;}}

/* ---------- 404 ---------- */
.error-404{text-align:center;padding:140px 0;}
.error-404 h1{font-size:clamp(60px,10vw,120px);}
.error-404 p{color:var(--muted);margin:16px auto 30px;max-width:420px;}

/* ---------- Search ---------- */
.search-form-block{display:flex;gap:10px;margin-bottom:40px;max-width:520px;}
.search-form-block input{
  flex:1;background:var(--glass-fill);border:1px solid var(--glass-border);
  border-radius:100px;padding:13px 20px;color:#fff;font-size:14.5px;
}