/**
 * qa18-blog-single-header-band.css
 * Pages: every blog SINGLE post, both languages — /de/blog/<cat>/<slug>/ and
 *        /en/blog/<cat>/<slug>/ — regardless of category or tag.
 *
 * BUG
 *   The band around the nav pill renders white on a blog single, so it cuts a
 *   hard white line against the #eeeee7 (JTL Light Sand) article body directly
 *   below it. The blog ARCHIVE (/de/blog/, /en/jtl-blog/) does not have this —
 *   qa16-blog-header.css already paints its band cream, but gates every rule on
 *   the two archive page-ids, so singles were never covered.
 *
 * CAUSE (measured, not inferred — CSS.getMatchedStylesForNode on #header)
 *   `#header` itself is never painted white. Exactly one rule sets its
 *   background — custom-clone.css:133 `#header { background: transparent
 *   !important }` — and the white you see is `#app`, the theme's root wrapper,
 *   showing straight through it (custom-clone.css:68 says as much).
 *   The only rule that repaints the band is qa16-blog-header.css's
 *   `body.page-id-77559 #header { … #eeeee7 !important }`. On the archive that
 *   page-id rule out-specifies the `transparent`; on a single nothing does, so
 *   `#app`'s white shows.
 *
 *   `#header::before` is unused today — no rule in the theme or the plugin tree
 *   defines that ID pseudo, so the full-bleed stripe below clobbers nothing.
 *
 * SCOPE
 *   `body.single-blog` is WordPress's own `single-<post_type>` body class for
 *   the `blog` CPT. It is present on the DE and EN singles alike and absent
 *   from the archive, so one selector covers both languages with no page-id and
 *   therefore none of the WPML twin-id trap (.claude/rules/css-override.md §3).
 *   `#header` and `.jtl-nav-pill` are GLOBAL components — every rule here is
 *   gated on that body class so the cream cannot leak off blog singles. The
 *   white nav pill itself is not touched.
 *
 *   ID-level specificity is required: custom-clone.css pins `#header` with
 *   `!important` at (1,0,0), so `body.single-blog #header` = (1,1,1) + the same
 *   `!important` is the minimum that wins.
 */

/* the header band behind the nav pill */
body.single-blog #header {
    background-color: #eeeee7 !important;
}

/* Above 1600px `#header` is capped at its max-width and centred, so its cream
   stops and `#app`'s white reappears in the left/right gutters. A full-bleed
   pseudo paints the same cream edge to edge (100vw, centred) behind the pill.
   z-index:-1 keeps it behind the pill; `#header` is position:relative with
   overflow:visible, so the 100vw stripe is not clipped. The -1 does NOT sink it
   behind `#app`'s white: custom-clone gives `#header` `z-index:1030`, which makes
   it a stacking context, so the pseudo is only the bottom layer *within* the
   header. Pixel-sampled at 1920px — both gutters read #eeeee7. Same treatment as
   qa16-blog-header.css uses on the archive. */
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 between the header band and the cream article body,
   so the two cream areas meet with no white gap */
body.single-blog .blog-nav {
    background-color: #eeeee7 !important;
}