/* =========================================================
   WebScape — posts.css
   One stylesheet for all blog posts.
   Each post body has a unique id (e.g. id="post-building-systems").
   Category colours, cover images and accent tones are set here.
   ========================================================= */

/* ── Category colour tokens ──────────────────────────────── */

/* Business Systems */
#post-building-systems,
#post-when-spreadsheets,
#post-school-systems,
#post-hospital-systems {
  --cat-accent:   #1fa8a4;
  --cat-accent-bg: rgba(31, 168, 164, 0.12);
  --cat-badge-text: #1fa8a4;
}

/* IT Systems */
#post-it-infrastructure {
  --cat-accent:   #3a82c4;
  --cat-accent-bg: rgba(58, 130, 196, 0.12);
  --cat-badge-text: #3a82c4;
}

/* Design */
#post-custom-website,
#post-ux-principles {
  --cat-accent:   #c87941;
  --cat-accent-bg: rgba(200, 121, 65, 0.12);
  --cat-badge-text: #c87941;
}

/* Web Development */
#post-why-website,
#post-ecommerce,
#post-mobile-app {
  --cat-accent:   #7c5cbf;
  --cat-accent-bg: rgba(124, 92, 191, 0.12);
  --cat-badge-text: #7c5cbf;
}

/* SEO & Performance */
#post-page-speed,
#post-seo-2026 {
  --cat-accent:   #d4a017;
  --cat-accent-bg: rgba(212, 160, 23, 0.12);
  --cat-badge-text: #d4a017;
}

/* ── Apply accent to common elements ─────────────────────── */

body[id^="post-"] .post-hero-tag {
  background: var(--cat-accent-bg, rgba(31, 168, 164, 0.12));
  color:      var(--cat-badge-text, #1fa8a4);
  border: 1px solid var(--cat-accent, #1fa8a4);
}

body[id^="post-"] .post-content h2 {
  color: var(--cat-accent, #1fa8a4);
}

body[id^="post-"] .sidebar-toc-list a:hover,
body[id^="post-"] .sidebar-toc-list a.active {
  color: var(--cat-accent, #1fa8a4);
}

body[id^="post-"] .post-tag {
  background: var(--cat-accent-bg, rgba(31, 168, 164, 0.12));
  color:      var(--cat-badge-text, #1fa8a4);
  border-color: var(--cat-accent, #1fa8a4);
}

body[id^="post-"] .highlight-box {
  border-left-color: var(--cat-accent, #1fa8a4);
  background: var(--cat-accent-bg, rgba(31, 168, 164, 0.08));
}

body[id^="post-"] .blog-card-tag {
  background: var(--cat-accent-bg, rgba(31, 168, 164, 0.12));
  color:      var(--cat-badge-text, #1fa8a4);
}

/* ── Per-post cover image (CSS custom property, consumed by JS if needed) ── */
#post-building-systems  { --post-img: url('../img/bg-seal-h.avif'); }
#post-when-spreadsheets { --post-img: url('../img/bg-smedia-h.avif'); }
#post-school-systems    { --post-img: url('../img/bg-robot-h.avif'); }
#post-hospital-systems  { --post-img: url('../img/bg-remas-h.avif'); }
#post-it-infrastructure { --post-img: url('../img/bg-seal-h.avif'); }
#post-custom-website    { --post-img: url('../img/bg-robot-h.avif'); }
#post-ux-principles     { --post-img: url('../img/bg-remas-h.avif'); }
#post-why-website       { --post-img: url('../img/bg-seal-h.avif'); }
#post-ecommerce         { --post-img: url('../img/bg-smedia-h.avif'); }
#post-mobile-app        { --post-img: url('../img/seo-img.avif'); }
#post-page-speed        { --post-img: url('../img/bg-remas-h.avif'); }
#post-seo-2026          { --post-img: url('../img/seo-img.avif'); }

/* ── Category filter highlight on blog listing ───────────── */

.blog-filter-btn[data-cat="business-systems"].active { background: #1fa8a4; }
.blog-filter-btn[data-cat="it-systems"].active       { background: #3a82c4; }
.blog-filter-btn[data-cat="design"].active           { background: #c87941; }
.blog-filter-btn[data-cat="web-dev"].active          { background: #7c5cbf; }
.blog-filter-btn[data-cat="seo"].active              { background: #d4a017; }
.blog-filter-btn[data-cat="app-dev"].active          { background: #7c5cbf; }