/**
 * qa16-blog-header.css
 * Pages: /en/jtl-blog (page-id 263102) + /de/jtl-blog (page-id 77559)
 *        + every single blog post, DE and EN (body.single-blog)
 * Batch #16 item 2.
 *
 * (a) The "JTL-Blog" eyebrow must be tech-blue #2722f8.
 *     The theme already sets `color:#2722f8` on `.blog-archive-redesign__header
 *     .subtitle`, but app.css paints the glyphs with an amber gradient via
 *     `background:linear-gradient(...) text; -webkit-text-fill-color:transparent`,
 *     so `color` is inert and it renders amber. The fix undoes the gradient (same
 *     class of bug fixed for EN in batch #14 — here applied to BOTH languages).
 *
 * (b) The header band AROUND the nav-bar (not the nav pill itself) must be
 *     #eeeee7. The white `.jtl-nav-pill` capsule floats in the `<header>` band,
 *     which is transparent today and shows the white body behind it. The blog
 *     hero `section.blog-archive-redesign` is ALREADY #eeeee7, so this extends
 *     that cream up behind the pill and unifies the top of the page. The pill
 *     stays white. The thin breadcrumb strip between header and hero is carried
 *     too, so there is no white gap.
 *
 *     Single posts (`body.single-blog`, post_type=blog, both languages) render the
 *     same `#header` + `.blog-nav` + cream hero (`section.blog-single-redesign`)
 *     but carry no `page-id-…` class, so (b) skipped them and the band stayed
 *     white. They are gated on `body.single-blog`, which covers DE and EN.
 *
 * Scope: the two blog page-ids + single blog posts. `<header>` / `.jtl-nav-pill`
 * are GLOBAL shared components — per the batch rule the cream must not leak to
 * other pages, so every rule is gated on those bodies.
 */

/* (a) eyebrow -> tech blue, on both languages -------------------------------- */
body.page-id-263102 .blog-archive-redesign__header .subtitle,
body.page-id-77559  .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;
}

/* (b) header band around the nav pill -> #eeeee7 ----------------------------- */
/* The header element is `#header`; custom-clone.css pins it `background:
   transparent !important` via that ID (specificity 1,0,0), so the override has to
   be an ID-level selector too — `body.page-id-… #header` = (1,1,1) wins. */
body.page-id-263102 #header,
body.page-id-77559  #header,
body.single-blog    #header {
    background-color: #eeeee7 !important;
}
/* On viewports WIDER than the header's max-width (1600px), `#header` is capped
   at 1600px and centred, so its cream stops and the white body (`#app`) shows
   through in the left/right gutters — that is the "white parts left and right"
   the reporter saw on a wide monitor. A full-bleed pseudo paints the same cream
   edge-to-edge behind the header (100vw, centred), so the band is cream at every
   width. It sits at z-index:-1 behind the nav pill, which is untouched (stays
   its centred 1516px white capsule). `#header` is position:relative +
   overflow:visible, so the 100vw stripe is not clipped. */
body.page-id-263102 #header::before,
body.page-id-77559  #header::before,
body.single-blog    #header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -50vw !important;
    width: 100vw !important;
    background-color: #eeeee7 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
/* the breadcrumb strip that sits between the header band and the cream hero,
   so the two cream areas meet with no white gap. (.blog-nav is the blog
   breadcrumb; its immediate wrapper carries the white.) */
body.page-id-263102 .blog-nav,
body.page-id-77559  .blog-nav,
body.single-blog    .blog-nav {
    background-color: #eeeee7 !important;
}