/* ============================================
   CourierSoftwares Articles — Single Stylesheet
   Based on reference design
   ============================================ */

:root{
  --primary: #0088cc;
  --primary-dark: #006ba3;
  --primary-light: #e6f4fa;
  --ink: #16181b;
  --muted: #6b7280;
  --line: #e9ebee;
  --bg-soft: #f6f7f5;
}

body{
  font-family:'Inter',sans-serif;
  color: var(--ink);
  background:#fff;
}
a{ text-decoration:none; }
.fw-800{ font-weight:800; }

hr{
  border:none;
  border-top:1px solid var(--line);
  margin:2rem 0;
}

/* ---------- Top Gradient Strip ---------- */
.top-strip{
  height:56px;
  background: linear-gradient(90deg, #b3e0f2, #d4eef8 40%, #e6f4fa 100%);
}
@media (max-width:576px){ .top-strip{ height:40px; } }

/* ---------- Navbar ---------- */
.navbar-custom{ padding: 1rem 0; border-bottom: 1px solid var(--line); }
.brand-mark{
  width:30px;height:30px;
  background: var(--primary);
  border-radius: 8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem;
}
.brand-name{ font-weight:800; font-size:1.15rem; color: var(--ink); letter-spacing:-.02em; }
.nav-link-custom{ color:#333; font-weight:500; font-size:.95rem; padding: .5rem .9rem !important; }
.nav-link-custom.active{ color: var(--primary-dark); font-weight:600; position:relative; }
.nav-link-custom.active::after{
  content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:5px;height:5px; background: var(--primary); border-radius:50%;
}
.btn-contact{ background: var(--ink); color:#fff; border-radius:8px; padding:.55rem 1.3rem; font-weight:600; font-size:.9rem; }
.btn-contact:hover{ background:#000; color:#fff; }
@media (max-width:991px){
  .navbar-custom{ padding:.75rem 0; }
  .nav-link-custom{ padding:.6rem .5rem !important; }
  .navbar-nav{text-align:left !important; }
}

/* ---------- Buttons ---------- */
.btn-primary-custom{
  background: var(--primary); border:none; color:#fff;
  font-weight:600; padding:.75rem 1.5rem; border-radius:9px;
  display:inline-flex; align-items:center; gap:.4rem;
  cursor:pointer;
}
.btn-primary-custom:hover{ background: var(--primary-dark); color:#fff; }
.btn-outline-ink{
  border:1px solid var(--line); color: var(--ink);
  font-weight:600; padding:.75rem 1.5rem; border-radius:9px;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-outline-ink:hover{ background: var(--bg-soft); color: var(--ink); }
.btn-white{ background:#fff; color: var(--ink); font-weight:600; padding:.75rem 1.6rem; border-radius:9px; }
.btn-white:hover{ background:#f2f2f2; color: var(--ink); }
@media (max-width:576px){
  .btn-primary-custom, .btn-outline-ink{ padding:.65rem 1.2rem; font-size:.88rem; }
}

/* ---------- Section Headings ---------- */
.section-eyebrow{
  color: var(--primary-dark); font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.section-title{ font-weight:800; letter-spacing:-.02em; font-size:2.1rem; }
@media (max-width:576px){ .section-title{ font-size:1.6rem; } }
.section-sub{ color: var(--muted); font-size:1rem; max-width:560px; }

/* ---------- Section Spacing ---------- */
section{ padding: 3.5rem 0; }
@media (max-width:576px){ section{ padding: 2.5rem 0; } }

/* ---------- Articles Listing ---------- */
.article-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%; }
.article-card img{ width:100%; height:180px; object-fit:cover; }
@media (max-width:576px){ .article-card img{ height:160px; } }
.article-card .body{ padding:1.25rem; }
@media (max-width:576px){ .article-card .body{ padding:1rem; } }
.article-meta{ font-size:.78rem; color: var(--muted); }
.article-meta-cat{ color: var(--primary-dark); font-weight:500; }
.article-title-sm{ font-weight:700; font-size:1rem; margin:.5rem 0; line-height:1.35; }
.read-more{ color: var(--primary-dark); font-weight:600; font-size:.88rem; }

/* ---------- Filter Tabs ---------- */
.filter-tabs{ margin-bottom:2rem; }
.filter-tabs .btn{ border-radius:8px; font-weight:600; font-size:.88rem; margin:0 .25rem .5rem 0; }

/* ---------- No Articles ---------- */
.no-articles{ text-align:center; padding:4rem 1rem; color: var(--muted); }
.no-articles h3{ font-weight:700; font-size:1.3rem; margin-bottom:.5rem; color: var(--ink); }

/* ---------- Pagination ---------- */
.pagination-wrap{ text-align:center; margin:2rem 0 1rem; }
.pagination-wrap .page-link{ color: var(--primary-dark); border-radius:8px; margin:0 2px; font-weight:600; font-size:.88rem; }
.pagination-wrap .page-item.active .page-link{ background: var(--primary); border-color: var(--primary); }

/* ============================================
   Inner / Detail Page
   ============================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb-custom{
  font-size:.85rem;
  color: var(--muted);
}
.breadcrumb-custom a{ color: var(--muted); }
.breadcrumb-custom a:hover{ color: var(--primary-dark); }
.breadcrumb-custom .current{ color: var(--ink); font-weight:500; }
@media (max-width:576px){ .breadcrumb-custom{ font-size:.78rem; } }

/* ---------- Article Title ---------- */
.article-title{
  font-weight:800;
  letter-spacing:-.03em;
  font-size:2.4rem;
  line-height:1.15;
}
@media (max-width:576px){ .article-title{ font-size:1.6rem; } }

/* ---------- Meta ---------- */
.meta-pill{
  font-size:.82rem;
  color:#444;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
@media (max-width:576px){ .meta-pill{ font-size:.75rem; } }
.avatar-sm{
  width:22px;height:22px;
  border-radius:50%;
  object-fit:cover;
}
.tag-badge{
  background: var(--bg-soft);
  color: var(--primary-dark);
  font-weight:600;
  font-size:.82rem;
  padding:.35rem .5rem;
  border-radius:6px;
}
.heart-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#333;
  background:#fff;
}
@media (max-width:576px){ .heart-btn{ width:34px; height:34px; font-size:.85rem; } }

/* ---------- Hero Image ---------- */
.hero-img{
  border-radius:16px;
  width:100%;
  height:auto;
  object-fit:cover;
  max-height:480px;
}
@media (max-width:576px){ .hero-img{ max-height:280px; border-radius:12px; } }

/* ---------- Article Body ---------- */
.article-h2{
  font-weight:700;
  font-size:1.275rem;
  letter-spacing:-.01em;
}
.article-body h2{ font-size:1.275rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.75rem; }
.article-body h3{ font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.article-body h4{ font-size:.975rem; font-weight:700; margin-bottom:.5rem; }
.article-body h5{ font-size:.89rem; font-weight:600; margin-bottom:.4rem; }
.article-body h6{ font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.article-body p{
  color:#333;
  line-height:1.75;
  font-size:1rem;
}
.article-body p{ margin-bottom:1rem; }
.article-body img{ max-width:100%; border-radius:12px; margin:1rem 0; }
section + section{ margin-top:2rem; }

/* ---------- Sidebar ---------- */
.side-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.25rem;
}
.side-title{
  font-weight:700;
  font-size:.95rem;
  margin-bottom: .9rem;
}
.social-circle{
  width:36px;height:36px;
  border-radius:50%;
  background: var(--bg-soft);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--ink);
  font-size:.85rem;
}
.social-circle:hover{ background: var(--primary-light); color: var(--primary-dark); }
.side-tag{
  display:inline-block;
  background: var(--bg-soft);
  color:#333;
  font-weight:500;
  font-size:.82rem;
  padding:.4rem .7rem;
  border-radius:7px;
  margin:0 .35rem .5rem 0;
  transition: background .15s, color .15s;
}
a.side-tag{text-decoration:none;}
a.side-tag:hover{ background: var(--primary-light); color: var(--primary-dark); }
a.side-tag.active-tag{ background: var(--primary); color:#fff; }
.related-item{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin-bottom:1rem;
}
.related-item:last-child{ margin-bottom:0; }
.related-item img{
  width:56px;height:56px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
}
.related-date{
  font-size:.72rem;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:.3rem;
  margin-bottom:.2rem;
}
.related-title{
  font-size:.85rem;
  font-weight:600;
  color: var(--ink);
  line-height:1.3;
}
.related-title:hover{ color: var(--primary-dark); }
@media (max-width:576px){
  .side-card{ padding:1rem; }
  .related-item img{ width:48px; height:48px; }
  .social-circle{ width:32px; height:32px; font-size:.8rem; }
}

/* ============================================
   Footer
   ============================================ */
footer{ background: var(--ink); color:#c9cbd0; }
footer a{ color:#c9cbd0; }
footer a:hover{ color:#fff; }
.footer-title{ color:#fff; font-weight:700; font-size:.95rem; margin-bottom:1rem; }
.footer-brand{ color:#fff; font-weight:800; font-size:1.15rem; }
.footer-social{
  width:34px;height:34px;border-radius:50%;
  background: rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem;
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#9a9da3; }
@media (max-width:576px){
  footer .row{ text-align:center; }
  footer .d-flex.gap-2{ justify-content:center; }
  footer .footer-bottom{ flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
}