/**
 * qa15-blog-category-hero.css
 * Pages: the blog CATEGORY archives — /de/blog/<kategorie>/ and their EN twins
 *        /en/blog/<category>/ (e.g. /de/blog/countx-migr/, the "countX" category).
 *        Scoped with `body.tax-blog_category`, which is exactly that set: the
 *        taxonomy.php -> partials/blog/main-category.php template, nothing else.
 *
 * Batch #15, two separate defects on the same hero:
 *
 * ── 1. The eyebrow (the category name, e.g. "countX") must be tech-blue #2722f8
 *
 *   This is NOT a missing declaration. archive-blog.css already says the right
 *   thing, and it wins — the computed `color` on the live page really is
 *   rgb(39,34,248):
 *       .blog-archive-redesign__header .subtitle { color: var(--bar-tech-blue) }
 *
 *   It still renders AMBER because dist/app.css paints the glyphs with a
 *   gradient instead of `color`:
 *       .page-template-blog .subtitle, .post-type-archive-blog .subtitle,
 *       .tax-blog_category .subtitle, .page-template-archive-blog .subtitle {
 *           background: linear-gradient(64deg,#ff9a26,#ffc935) text;
 *           -webkit-text-fill-color: transparent;
 *       }
 *   `-webkit-text-fill-color` overrides `color` when painting glyphs, and with
 *   `background-clip:text` + a transparent fill the GRADIENT is the text colour.
 *   archive-blog.css never resets either property, so its `color` is inert.
 *
 *   So the fix has to undo the gradient, not restate the colour. Verified by
 *   reading the computed `-webkit-text-fill-color` (rgba(0,0,0,0)), not by
 *   eyeballing. Same root cause as qa14-en-jtl-blog-subtitle.css and JP-794.
 *
 * ── 2. The band above the hero is #ffffff, should be #eeeee7
 *
 *   `.blog-archive-redesign` is ALREADY #eeeee7 — the hero itself was never the
 *   problem. The white is the page wrapper showing through the 226px above it:
 *       app.css:  #app { background: #fff }
 *   `header#header` and `nav#nav-breadcrumb.blog-nav` are both transparent, so
 *   the nav + breadcrumb strip inherits that white and the hero's cream starts
 *   abruptly at the top of <main>. Recolouring the wrapper (page-scoped) makes
 *   the strip continuous with the hero.
 *
 *   Deliberately NOT touching `#app` globally (CLAUDE.md rule 4c): the body
 *   class keeps this to the category archives. The floating nav pill and the
 *   orange JTL-Connect promo bar paint their own opaque backgrounds, so they
 *   are unaffected; the footer is opaque navy/blue below.
 *
 * ── Scope note
 *   `tax-blog_category` covers the DE *and* EN category archives. They share
 *   one template and one design, and both showed both defects, so both are
 *   fixed. The blog INDEX pages (/de/jtl-blog, /en/jtl-blog) are a different
 *   template and are untouched here — the EN one was already handled by
 *   qa14-en-jtl-blog-subtitle.css.
 */

/* 1. Eyebrow: kill app.css's amber gradient so `color` paints again. */
body.tax-blog_category .blog-archive-redesign__header .subtitle {
    background: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;
}

/* 2. Wrapper: continue the hero's Light Sand up behind the nav + breadcrumbs. */
body.tax-blog_category #app {
    background-color: #eeeee7 !important;
}