/**
 * header-blueprint.css - Technical Blueprint Header Backdrop
 *
 * Paints a white-with-red+graphite-grid technical drawing
 * backdrop on the site header. The pattern is scoped to a
 * ::before pseudo-element on .site-header (NOT a fixed
 * full-viewport overlay) so it covers exactly the sticky
 * header strip and nothing else.
 *
 * Pattern construction:
 *   - White surface as the base color.
 *   - Two layered grids stacked via background-image:
 *     a 100px primary grid in red (#e62e2e) and a 20px
 *     subdivision grid in graphite (#2c2c2c). Both are
 *     1px hairlines drawn with linear-gradient.
 *   - background-position offsets each grid by -1px so the
 *     hairlines render crisp against the page edge.
 *
 * The orange accent line that separates the header from
 * the hero is owned by the hero (snippet-perforated-mesh.css
 * paints it at the top of .lop-snippet-mesh) so the header
 * file stays focused on the blueprint surface alone.
 *
 * Future-proofing notes:
 *   - If the blueprint ever needs to extend beyond the
 *     header (e.g. to a contained banner block), promote
 *     this rule to a generic .lop-blueprint-bg utility and
 *     keep the .site-header::before scope as a thin
 *     consumer rule.
 *   - prefers-reduced-motion is not relevant here (no
 *     animation), but prefers-contrast: more could be a
 *     future hook to thicken the hairlines for users who
 *     opt into higher contrast.
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 */


/* ==========================================================
   Header surface fallback

   If the ::before fails for any reason (legacy browser,
   stripped pseudos), the header still has a clean white
   background instead of letting the page body show through.
   ========================================================== */
.site-header {
    background-color: #ffffff;
}


/* ==========================================================
   Blueprint pattern via ::before

   position: absolute + inset: 0 fills the .site-header box
   exactly. z-index 0 keeps it beneath .site-header__inner
   (which is z-index 1 in header-layout.css). pointer-events:
   none ensures the painted layer never absorbs clicks
   intended for the logo or nav.
   ========================================================== */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* Base color (also the gap color between hairlines). */
    background-color: #ffffff;

    /* Layered grid: 100px red primary, 20px graphite subdivision.
       Each grid is two 1px linear-gradients (horizontal +
       vertical) so the result is a true crosshatch, not a
       single-axis stripe. */
    background-image:
        linear-gradient(#e62e2e 1px, transparent 1px),
        linear-gradient(90deg, #e62e2e 1px, transparent 1px),
        linear-gradient(#2c2c2c 1px, transparent 1px),
        linear-gradient(90deg, #2c2c2c 1px, transparent 1px);

    background-size:
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px;

    /* -1px offset on every layer keeps the leading hairline
       flush with the bounding edge instead of leaving a
       half-pixel gap. */
    background-position:
        -1px -1px,
        -1px -1px,
        -1px -1px,
        -1px -1px;
}