/* Blog-only gold accents pulled from the logo palette (var(--gold) = #c8923a).
   Subtle gilding: hero rule, h2 leaf, author bio border, card hover lift. */

/* ── Recolor the hero/body divider from green to gold ───────
   style.css draws `.page-hero::after` as a transparent→green→
   transparent 1px rule. On blog pages just swap green for gold.
   Same shape, same position, just brand-accent recolor. */
body[data-page="blog-post"] .page-hero::after,
body[data-page="blog-index"] .page-hero::after {
  background: linear-gradient(90deg, transparent, #c8923a, transparent) !important;
}

/* ── Hero label flourish ─────────────────────────────────── */
body[data-page="blog-post"] .page-hero .section-label::before,
body[data-page="blog-index"] .page-hero .section-label::before {
  content: "\f06c";              /* fa-leaf */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gold);
  margin-right: 8px;
  font-size: 0.95em;
}

/* ── Post body h2 leaf accent ────────────────────────────── */
body[data-page="blog-post"] .post-body h2 {
  position: relative;
  padding-left: 26px;
}
body[data-page="blog-post"] .post-body h2::before {
  content: "\f06c";              /* fa-leaf */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--gold);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.7em;
  opacity: 0.85;
}

/* ── Author bio gold left border ─────────────────────────── */
body[data-page="blog-post"] section.section-sm > .container > div[style*="max-width: 820px"]:first-child {
  border-left: 3px solid var(--gold);
  padding-left: 1.2em;
}

/* ── Index post cards: gold top stripe + hover lift ───── */
body[data-page="blog-index"] section.section a[href$=".html"] {
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
body[data-page="blog-index"] section.section a[href$=".html"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), #e8a84d);
  border-radius: 6px 6px 0 0;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
body[data-page="blog-index"] section.section a[href$=".html"]:hover {
  border-color: var(--gold) !important;
  transform: translateY(-2px);
}
body[data-page="blog-index"] section.section a[href$=".html"]:hover::before {
  opacity: 1;
}
body[data-page="blog-index"] section.section a[href$=".html"]:hover span[style*="green-light"] {
  color: var(--gold) !important;
}

/* ── Related posts: same hover treatment ─────────────────── */
body[data-page="blog-post"] section.section-sm:nth-of-type(n) a[href$=".html"][style*="background: var(--dark)"] {
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
body[data-page="blog-post"] section.section-sm a[href$=".html"][style*="background: var(--dark)"]:hover {
  border-color: var(--gold) !important;
  transform: translateY(-1px);
}

/* ── FAQ details accents (post pages) ────────────────────── */
body[data-page="blog-post"] details[style*="background: var(--dark)"] {
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease;
}
body[data-page="blog-post"] details[open] {
  border-left-color: var(--gold);
}
body[data-page="blog-post"] details summary::marker {
  color: var(--gold);
}

/* ── Section divider above FAQ: gold tinted ──────────────── */
body[data-page="blog-post"] .post-body hr {
  border-top: 1px solid transparent !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  height: 1px;
  opacity: 0.55;
}