/**
 * snippet-perforated-mesh.css - Industrial Mesh Hero Surface
 *
 * Ported from frontend-playground snippet
 *   uqh58wuj9owrj4tfkeprqsiu (Perforated Metal Mesh)
 *   category: css/backgrounds
 *
 * Source: A dark, heavy-duty industrial mesh pattern
 * resembling speaker/tractor grilles with high-contrast
 * safety orange accents. Authored as a standalone demo;
 * adapted here for the Librandi Outdoor Power hero with
 * the conventions from the SNIPPET-EXTRACTION-FOR-WORDPRESS
 * guide (frontend-playground/docs/...md):
 *   - All selectors namespaced under .lop-snippet-mesh.
 *   - body/html demo rules dropped; the wrapper itself
 *     paints its own backdrop.
 *   - CSS custom properties scoped to the wrapper so the
 *     snippet cannot poison the theme's global tokens.
 *
 * Adaptations specific to the LOP hero:
 *   1. The orange accent line is repositioned from the
 *      original 15% offset to flush at the top of the
 *      wrapper, where it functions as a visual seam
 *      between the (sticky) header and the hero.
 *   2. The center-plate is the container for the existing
 *      .hero__title and .hero__subtitle, not a standalone
 *      demo block.
 *   3. A new .lop-snippet-mesh__plate-btn modifier is
 *      introduced so the hero CTA buttons can adopt the
 *      same bolted-plate treatment, matching the
 *      industrial language across the entire hero.
 *
 * Other sections of the home page will be redesigned later
 * with separate background treatments. This file is scoped
 * tightly so that work cannot regress the hero.
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 * @updated 0.1.1 - Wrapper now carries default vertical
 *                  padding so the bolted plate breathes at
 *                  narrow viewports where the .hero shell
 *                  no longer pads it. New
 *                  .lop-snippet-mesh__accent-line--bottom
 *                  modifier paints a second safety-orange
 *                  seam flush against the wrapper's bottom
 *                  edge, completing the "hardware on both
 *                  sides" framing. The bottom seam inverts
 *                  the bevel and shadow direction so the
 *                  pair reads as if lit from the same
 *                  overhead source.
 */


/* ==========================================================
   Wrapper -- paints the perforated mesh and houses the
   accent stripe + center plate + plate-button children.

   Custom properties scoped to the wrapper. Editing these
   in DevTools is the right way to spike a color/shape
   variation without rewriting selectors.
   ========================================================== */
.lop-snippet-mesh {
    /* --- Snippet-local design tokens --- */
    --mesh-base:           #1a1a1a;
    --mesh-hole:           #000000;
    --mesh-highlight:      rgba(255, 255, 255, 0.10);
    --mesh-accent:         #ff5e00;            /* safety orange */
    --mesh-accent-hi:      #ff8a45;
    --mesh-accent-lo:      #ba4400;
    --mesh-plate:          #2a2a2a;
    --mesh-plate-text:     #e0e0e0;
    --mesh-bolt:           #555555;
    --mesh-bolt-slot:      #333333;
    --mesh-accent-height:  12px;

    position: relative;
    overflow: hidden;
    /*
     * Default vertical breathing room around the bolted center
     * plate so the seam lines do not crash into the plate at
     * narrow viewports. At >=1024px the .hero shell stretches
     * the wrapper to full viewport-minus-header height (see
     * responsive.css), and the wrapper centers the plate via
     * the flex rules below -- so this padding only governs the
     * compact mobile/tablet rendering.
     */
    padding-block: var(--space-12);

    /* Dark metal base */
    background-color: var(--mesh-base);

    /* Multi-layered radial gradients create the perforated
       holes with a hint of 3D depth. The light highlight
       layer is offset 1px below the dark hole layer to
       suggest a chamfered upper rim. */
    background-image:
        radial-gradient(var(--mesh-hole)      30%, transparent 35%),
        radial-gradient(var(--mesh-hole)      30%, transparent 35%),
        radial-gradient(var(--mesh-highlight) 32%, transparent 37%),
        radial-gradient(var(--mesh-highlight) 32%, transparent 37%);
    background-size: 20px 20px;
    background-position:
        0 0,
        10px 10px,
        0 1px,
        10px 11px;
}


/* ==========================================================
   Accent lines -- safety-orange seams that visually divide
   the hero from the sticky header above and the next
   section below.

   Both seams are absolutely positioned siblings of the
   center plate so they paint flush against the wrapper's
   top and bottom edges regardless of how tall the wrapper
   stretches at desktop widths. Top-anchored is the default
   (matches the original snippet behavior); the --bottom
   modifier flips anchor to bottom: 0 and inverts the bevel
   so light still reads from above.

   The pair preserves the snippet's original beveled-stripe
   treatment (border-top/bottom hairlines + drop shadow).
   ========================================================== */
.lop-snippet-mesh__accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mesh-accent-height);
    background: var(--mesh-accent);
    border-top:    2px solid var(--mesh-accent-hi);
    border-bottom: 2px solid var(--mesh-accent-lo);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    z-index: 1;
    pointer-events: none;
}

/*
 * Bottom seam: same hardware language, flipped vertical
 * anchor. Border colors swap (highlight migrates to the
 * bottom edge, shadow to the top) so the bevel reads as
 * if the same overhead light source is hitting both seams.
 * Drop shadow points up so it casts onto the mesh above
 * the seam rather than into the next section below it.
 */
.lop-snippet-mesh__accent-line--bottom {
    top: auto;
    bottom: 0;
    border-top:    2px solid var(--mesh-accent-lo);
    border-bottom: 2px solid var(--mesh-accent-hi);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.8);
}


/* ==========================================================
   Center plate -- the bolted card that contains the hero
   title and subtitle.

   Inherits its width from .hero__inner (max-width: 800px,
   centered) so the plate sits as a contained signage block
   inside the hero, not a full-bleed bar.
   ========================================================== */
.lop-snippet-mesh__plate {
    position: relative;
    background: var(--mesh-plate);
    padding: var(--space-10) var(--space-12);
    border: 3px solid var(--mesh-accent);
    border-radius: 2px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.9),
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    z-index: 2;
}


/* ==========================================================
   Faux bolts -- one in each corner of every plate.

   Three layered shadows produce the chamfered metal look:
   a top-left highlight, a bottom-right shadow, and a soft
   drop shadow lifting the bolt off the plate. The ::after
   pseudo draws the slot, rotated independently per corner
   below for a hand-set, non-uniform feel.
   ========================================================== */
.lop-snippet-mesh__bolt {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--mesh-bolt);
    border-radius: 50%;
    box-shadow:
        inset  2px  2px 3px rgba(255, 255, 255, 0.40),
        inset -2px -2px 3px rgba(0,   0,   0,   0.60),
              1px  1px 2px rgba(0,   0,   0,   0.80);
}
.lop-snippet-mesh__bolt::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background: var(--mesh-bolt-slot);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Per-corner positioning + rotation. The varied rotations
   keep the bolts from looking machined-uniform; on close
   inspection they read as "real" hardware, not stamped
   artwork. */
.lop-snippet-mesh__bolt--tl { top: 10px;    left: 10px;  }
.lop-snippet-mesh__bolt--tr { top: 10px;    right: 10px; transform: rotate(30deg);  }
.lop-snippet-mesh__bolt--bl { bottom: 10px; left: 10px;  transform: rotate(-15deg); }
.lop-snippet-mesh__bolt--br { bottom: 10px; right: 10px; transform: rotate(70deg);  }


/* ==========================================================
   Hero typography overrides inside the plate.

   The shared .hero__title and .hero__subtitle rules in
   sections.css set color/font/size for the green-background
   variant. Inside .lop-snippet-mesh__plate we recolor for
   the dark plate and lean into the snippet's slabby,
   text-shadowed treatment without abandoning the theme's
   Bevan display face (which already reads industrial).
   ========================================================== */
.lop-snippet-mesh__plate .hero__title {
    color: var(--mesh-plate-text);
    text-shadow: 3px 3px 0 #000;
    /* The snippet authored its title in italic; preserved
       here because the slant keeps the slab face from
       feeling static. */
    font-style: italic;
    letter-spacing: 0.02em;
}

.lop-snippet-mesh__plate .hero__subtitle {
    color: rgba(224, 224, 224, 0.85);
    text-shadow: 1px 1px 0 #000;
}


/* ==========================================================
   Plate buttons -- the same bolted-plate treatment applied
   to hero CTAs.

   This is a Librandi-specific extension of the snippet, not
   from the source. .lop-snippet-mesh__plate-btn is applied
   alongside .btn (and any .btn--primary / .btn--outline-light
   modifier) so the underlying button still inherits typography
   and interactive state from buttons.css; the plate-btn rules
   only paint the surrounding plate frame.

   Each plate button gets four bolt children in markup just
   like the title plate.
   ========================================================== */
.lop-snippet-mesh__plate-btn {
    position: relative;
    /* Override .btn defaults so the button itself is the
       plate, not a pill on top of one. */
    background-color: var(--mesh-plate);
    color: var(--mesh-plate-text);
    border: 3px solid var(--mesh-accent);
    border-radius: 2px;

    /* Match the title plate's inner shadow language at a
       smaller scale. */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.8),
        inset 0 0 12px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);

    /* Slightly bigger padding than the .btn baseline so the
       bolts have room to sit in the corners without crowding
       the label. */
    padding: var(--space-3) var(--space-8);
    text-shadow: 2px 2px 0 #000;
    /* Drop the .btn family transitions for color/border so
       the plate frame reads as fixed; keep the transform
       press-feedback by leaving it inherited. */
    transition: box-shadow var(--duration) var(--ease),
                transform  var(--duration-fast) var(--ease);
}

/* Hover: brighten the safety-orange frame and deepen the
   drop shadow so the plate visibly lifts. Background and
   text color stay constant -- the frame is doing the work. */
.lop-snippet-mesh__plate-btn:hover {
    background-color: var(--mesh-plate);
    color: var(--mesh-plate-text);
    border-color: var(--mesh-accent-hi);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.9),
        inset 0 0 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.lop-snippet-mesh__plate-btn:focus-visible {
    outline: 2px solid var(--mesh-accent-hi);
    outline-offset: 3px;
}

/* Smaller bolts inside button plates -- the title plate's
   14px bolts would dominate a button at this scale. */
.lop-snippet-mesh__plate-btn .lop-snippet-mesh__bolt {
    width: 8px;
    height: 8px;
}
.lop-snippet-mesh__plate-btn .lop-snippet-mesh__bolt--tl { top: 4px;    left: 4px;  }
.lop-snippet-mesh__plate-btn .lop-snippet-mesh__bolt--tr { top: 4px;    right: 4px; }
.lop-snippet-mesh__plate-btn .lop-snippet-mesh__bolt--bl { bottom: 4px; left: 4px;  }
.lop-snippet-mesh__plate-btn .lop-snippet-mesh__bolt--br { bottom: 4px; right: 4px; }


/* ==========================================================
   Responsive: tighten the plate paddings on small screens
   so the bolted card does not crowd the viewport edges.
   ========================================================== */
@media (max-width: 768px) {
    .lop-snippet-mesh__plate {
        padding: var(--space-6) var(--space-6);
    }
    .lop-snippet-mesh__plate-btn {
        padding: var(--space-3) var(--space-5);
    }
}

@media (max-width: 480px) {
    .lop-snippet-mesh__plate {
        padding: var(--space-5) var(--space-4);
    }
}