/* ════════════════════════════════════════════════════════════════════
   Tenderly blog — site-aligned brand accent layer.
   A LIGHT, reversible pass that nudges the existing theme toward the
   tenderly.co (Astro) brand language: site purple, JetBrains Mono
   eyebrows, a purple primary nav button, and a cleaner card hover.
   Loaded LAST (after bootstrap / dark-mode / tenderly-2.0.3) so it wins.
   Works in both light and [data-theme="dark"]. Honors the theme's
   global sharp-corner rule (* { border-radius: 0 }) — no rounding added.
   To revert: remove the <link> to this file in partials/header-styles.hbs.
   Site tokens: --pur #8F73FF · --pur-2 #6837EC · --pur-3 #CCBDFF
   ════════════════════════════════════════════════════════════════════ */

/* ── Mono eyebrows / tags / dates → JetBrains Mono (site uses this) ── */
.dm-mono,
.date-time,
.go-back-link,
.category-link {
  /* !important to beat tenderly-2.0.3.css `.dm-mono { font-family: "DM Mono" !important }` */
  font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace !important;
}

/* ── Brand purple alignment (theme used #6837f1; site is #6837EC / #8F73FF) ── */
.color-tenderly,
.tag.color-tenderly {
  color: #6837EC;
}
a.color-tenderly:hover,
.tag.color-tenderly:hover {
  color: #8F73FF !important;
}
[data-theme="dark"] .color-tenderly,
[data-theme="dark"] .tag.color-tenderly,
[data-theme="dark"] .blog-content-container a {
  color: #8F73FF;
}
[data-theme="dark"] a.color-tenderly:hover,
[data-theme="dark"] .tag.color-tenderly:hover {
  color: #CCBDFF !important;
}

/* ── Primary nav CTA ("Go to Dashboard") → site purple in BOTH modes ──
   (theme makes .btn-dark black via !important, so we need !important).  */
.site-header .btn-dark,
nav .btn-dark,
.dash-link {
  background-color: #6837EC !important;
  border-color: #6837EC !important;
  color: #fff !important;
  transition: background-color 200ms ease, transform 200ms cubic-bezier(.2,.7,.3,1), box-shadow 200ms ease;
}
.site-header .btn-dark:hover,
nav .btn-dark:hover,
.dash-link:hover {
  background-color: #5228CC !important;
  border-color: #5228CC !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(104,55,236,0.55);
  color: #fff !important;
}
[data-theme="dark"] nav .btn-dark,
[data-theme="dark"] .dash-link {
  background-color: #6837EC !important;
  border-color: #6837EC !important;
}
[data-theme="dark"] nav .btn-dark:hover,
[data-theme="dark"] .dash-link:hover {
  background-color: #8F73FF !important;
  border-color: #8F73FF !important;
}

/* ── Outline buttons (Search, Load More) → subtle purple affordance on hover ── */
.btn-outline-dark:hover {
  border-color: #6837EC !important;
  color: #6837EC !important;
  background-color: rgba(104,55,236,0.06) !important;
}
[data-theme="dark"] .btn-outline-dark:hover {
  border-color: #8F73FF !important;
  color: #fff !important;
  background-color: rgba(143,115,255,0.12) !important;
}

/* ── Category pills under "Latest articles" → mono + purple hover ── */
.category-link {
  letter-spacing: 0.06em;
  transition: color 150ms ease;
}
.category-link:hover {
  color: #6837EC !important;
}
[data-theme="dark"] a.category-link:hover {
  color: #8F73FF !important;
}

/* ── "View All Changes" style links → purple ── */
.go-back-link, .go-back-link:visited {
  color: #6837EC !important;
}
.go-back-link:hover { color: #5228CC !important; }
[data-theme="dark"] .go-back-link,
[data-theme="dark"] .go-back-link:visited { color: #8F73FF !important; }
[data-theme="dark"] .go-back-link:hover { color: #CCBDFF !important; }

/* ── Load More / pagination buttons → purple (filled) ── */
#load-more, .load-more-btn, .gh-loadmore {
  background: #6837EC !important;
  border-color: #6837EC !important;
  color: #fff !important;
}
#load-more:hover, .load-more-btn:hover, .gh-loadmore:hover {
  background: #5228CC !important;
  border-color: #5228CC !important;
  color: #fff !important;
}

/* ── Readability scrims over the page grid ──────────────────────────
   Keep the grid prominent in the hero (featured post) but dim it behind
   the content sections so headings, tabs, the changelog strip and the
   "View All Changes" link stay legible. Same color as the page bg, so it
   reads as a calm content area rather than a hard band. */
.featured-article, .changelog, .posts, .main-article {
  position: relative;
  background: rgba(247,247,245,0.82);
}
[data-theme="dark"] .featured-article,
[data-theme="dark"] .changelog,
[data-theme="dark"] .posts,
[data-theme="dark"] .main-article {
  background: rgba(13,13,16,0.82);
}

/* Post article body + /changelog list → opaque content card over the grid
   (the readable "card background" requested, matching the TOC card). */
.main-article .blog-content-container,
#changelog-entry {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(12,12,15,0.08);
  border-radius: 10px !important;
  padding: 30px 34px;
}
[data-theme="dark"] .main-article .blog-content-container,
[data-theme="dark"] #changelog-entry {
  background: #101015;
  border-color: rgba(255,255,255,0.08);
}
@media (max-width: 575px) {
  .main-article .blog-content-container,
  #changelog-entry { padding: 20px 18px; }
}

/* ── Post cards → cleaner site-style lift (replaces the scale(1.05)) ── */
.card-hover {
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms ease, border-color 200ms ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -16px rgba(104,55,236,0.30);
}
[data-theme="dark"] .card-hover:hover {
  box-shadow: 0 16px 40px -14px rgba(0,0,0,0.6);
  border-color: rgba(143,115,255,0.45) !important;
}

/* ── Reading view (post page) ───────────────────────────────────── */
/* Article body links gain a hover affordance (the theme had none). */
.blog-content-container a,
.usecase-content-container a {
  transition: color 150ms ease;
}
.blog-content-container a:hover,
.usecase-content-container a:hover {
  color: #8F73FF;
}
[data-theme="dark"] .blog-content-container a:hover,
[data-theme="dark"] .usecase-content-container a:hover {
  color: #CCBDFF;
}
/* Fix a pre-existing dark-mode contrast bug: headings on .bg-light cards
   (the "In this post" TOC, sidebar callouts) rendered near-black (#212529)
   on the dark card (#101015) — i.e. invisible. Make them light in dark mode. */
[data-theme="dark"] .toc-wrapper .h5,
[data-theme="dark"] .bg-light .h5,
[data-theme="dark"] .bg-light h5 {
  color: #F5F5F7 !important;
}

/* ── Site-wide brand grid backdrop (fixed, behind content) ───────── */
.tndr-page-grid {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.85;
  /* peak in the hero region (below the opaque header), broad coverage, then
     fade down so long body text stays clean */
  -webkit-mask-image: radial-gradient(160% 140% at 50% 25%, #000 62%, transparent 100%);
          mask-image: radial-gradient(160% 140% at 50% 25%, #000 62%, transparent 100%);
}
/* Keep page chrome/content above the backdrop (footer has its own grid + opaque bg). */
.upper-banner { position: relative; z-index: 3; }
.site-header { position: relative; z-index: 3; }
main.tenderly-content { position: relative; z-index: 1; }

/* ── Section heading eyebrow accent bar (Latest articles / Changelog) ── */
.posts .post-categories h2,
.changelog h2 {
  position: relative;
  padding-left: 14px;
}
.posts .post-categories h2::before,
.changelog h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 0.85em;
  background: #6837EC;
}