/* Products pages design (DECISION-003, WP-C1).

   Applies the established design system (--hr-* tokens, header/nav and
   .hr-connector-logo CSS from static/css/site_redesign.css - see that
   file's WP-C1 addendum comment for why its selector lists needed
   extending too) to the real product pages: Wormwood, deltaPrism, NEXUS,
   UV Web CMS, Palladium, ROTC KB Hit Tracker. One shared stylesheet for
   all of them, per the workpack ticket - they share an identical
   structural shape (hero, key metrics, several content sections,
   use-case/domain blocks, CTA) even though their real copy and section
   order differ (each template was read in full before writing this file,
   not assumed identical).

   Unlike Home/About/Services (hand-built .hr-card/.hr-grid markup), these
   templates are pre-existing, content-heavy Bootstrap pages (many
   sections, tables, badges, progress bars). Rather than rewriting every
   section's markup into new custom classes - which the ticket's own
   "restyle existing real copy... do not invent or remove content"
   instruction argues against - this file restyles the real Bootstrap
   structure that is ALREADY consistent across every product template
   (section/container/row/col, .border.rounded-3 cards, .border-start
   accent blocks, .text-muted/.lead copy, code/table/badge/progress
   elements, .btn-primary/.btn-outline-light buttons) directly.

   deltaPrism and UV Web CMS carried a lot of inline `style="color:#..."`
   attributes with hardcoded, off-brand hex colors (violet/blue for
   deltaPrism, green for UV Web CMS) - those were edited in the templates
   themselves to reference the real --hr-* custom properties directly
   (CSS custom properties resolve through inline `style` attributes too,
   same inheritance mechanism as the stylesheet cascade), rather than
   fighting inline styles from here with !important. Genuinely semantic
   colors (Bootstrap's bg-success/bg-warning/bg-secondary status badges,
   and UV Web CMS's red/amber "requires a release" comparison callout)
   were deliberately left alone - they signal pass/fail/warning state, not
   brand identity, matching how badges are left untouched on the other
   redesigned pages too.

   2026-08-24 (direct Primarch catch: a new product page - KB Hit Tracker -
   shipped "styled with old CSS", and the ask was for new pages to get the
   current design system BY DEFAULT, not as a follow-up CSS edit every
   time). Every rule below that applies uniformly regardless of which
   specific product page it's on (the large majority of this file) was
   rewritten from the original 4-way (then 6-way) enumerated
   `body.product-wormwood-redesign, body.product-deltaprisim-redesign, ...`
   selector list to a single `body[class^="product-"][class$="-redesign"]`
   attribute selector - exactly the same guaranteed-suffix technique
   templates/base.html's own critical-CSS block already uses (see that
   file's comment on why the attribute form is exactly equivalent, not an
   approximation, given the body tag is rendered as EXACTLY
   `class="<page.key|lower>-redesign"` and nothing else). Because `[class^=
   "product-"]` matches the prefix any future product page's key will also
   carry by convention (`product-<slug>`), this makes every future new
   product page inherit this shared treatment automatically the moment its
   key is added to base.html's `redesigned_pages` array - no further edit
   to this file required for anything in that shared majority.

   The one deliberate exception is the alternating violet/teal
   colored-glass-pane accent (docs/DESIGN_SYSTEM_REQUIREMENTS.md) applied
   to each page's own section headings, hero key-metrics panel, and
   narrative columns - this is a real per-page identity choice (violet
   heading glow + teal panel accent for Wormwood/NEXUS/Palladium/KB Hit
   Tracker, the reverse for deltaPrism/UV Web CMS), not a structural
   default, so those selectors stay explicitly enumerated per page and a
   real judgment call (which accent, and does the page's real markup even
   have the targeted structural pattern) is still needed for each new page
   - Palladium and the KB Hit Tracker page were both read in full and
   confirmed to share Wormwood/NEXUS's exact structural shape (same hero
   key-metrics markup, same `.row.justify-content-center > .col-lg-8`
   narrative pattern), so were added to that side of the split rather than
   deltaPrism/UV Web CMS's.

   #uv-background-canvas is never referenced here - see
   tests/test_redesigned_pages_have_connector_logo.py's
   test_no_redesigned_page_css_hides_the_real_background_canvas, the guard
   against the site-wide mistake made and fixed earlier this Watch. */

body[class^="product-"][class$="-redesign"] {
    background: var(--hr-bg) !important;
    font-family: 'Barlow', sans-serif;
}

body[class^="product-"][class$="-redesign"] .hr-page { position: relative; overflow: hidden; }

body[class^="product-"][class$="-redesign"] .hr-hero-wrap { position: relative; }

body[class^="product-"][class$="-redesign"] .hr-veins {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(181,51,247,0.09), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(1,206,211,0.07), transparent 45%);
}

/* --- Hero --- */
body[class^="product-"][class$="-redesign"] .hr-hero {
    position: relative; z-index: 2;
    padding: 80px 0 50px;
}
body[class^="product-"][class$="-redesign"] .hr-hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 60px; font-weight: 800; letter-spacing: 0.5px;
    background: linear-gradient(90deg, var(--hr-highlight) 0%, #7b5fd0 30%, #4a9fd8 65%, var(--hr-primary) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    line-height: 1.08; margin-bottom: 22px;
}
body[class^="product-"][class$="-redesign"] .hr-hero .lead {
    font-family: 'Barlow', sans-serif;
    font-size: 22px; font-weight: 400; line-height: 1.5;
    color: var(--hr-light) !important; max-width: 780px;
}

/* Eyebrow labels - the "Product" / "The Problem" / "Capabilities" etc.
   small uppercase tags used at the top of every single section across
   every template (not just the hero), plus deltaPrism/UV Web CMS's
   pill-badge hero variant (same class combination, extra inline
   background/border for the pill shape - left alone, only the text
   treatment is unified here). */
body[class^="product-"][class$="-redesign"] .text-uppercase.small.fw-semibold {
    font-family: 'Barlow Condensed', sans-serif !important;
    letter-spacing: 2px; font-weight: 700 !important;
}

/* --- Key metrics row (both real markup variants used across the product
   templates: Wormwood/NEXUS/Palladium/KB Hit Tracker's plain "fw-bold
   fs-4" + "small text-muted" pairs, and deltaPrism/UV Web CMS's
   "display-5 fw-bold" + "text-uppercase small text-white-50" pairs). Both
   variants recur throughout the pages (not only in the hero - e.g.
   Wormwood's per-use-case metric rows), so this is intentionally
   page-wide, not hero-scoped. --- */
body[class^="product-"][class$="-redesign"] .fw-bold.fs-4,
body[class^="product-"][class$="-redesign"] .display-5.fw-bold {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--hr-primary);
}
body[class^="product-"][class$="-redesign"] .hr-hero .small.text-muted,
body[class^="product-"][class$="-redesign"] .text-uppercase.small.text-white-50 {
    font-family: 'Barlow', sans-serif !important;
    color: var(--hr-text-muted) !important;
}

/* --- Buttons: restyle the real Bootstrap btn-primary/btn-outline-light
   classes in place rather than introducing new button classes into the
   templates. --- */
body[class^="product-"][class$="-redesign"] .btn-primary {
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)) !important;
    border: none !important; color: var(--hr-light) !important;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    box-shadow: 0 0 30px rgba(181,51,247,0.25);
}
body[class^="product-"][class$="-redesign"] .btn-outline-light {
    border-color: rgba(255,255,255,0.35) !important; color: var(--hr-light) !important;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
}
body[class^="product-"][class$="-redesign"] .btn-outline-light:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* --- Section headings and body copy, page-wide ---

   WP-D1 (Primarch screenshot: UVWebCMS's "What the CMS manages" h2 had no
   glass backdrop and no gradient treatment). Every section h2 across every
   template now gets the same hero-h1 gradient-text-clip treatment PLUS a
   glass panel behind it via ::before - not the h2's own `background`,
   which the gradient-clip trick already owns (setting a second background
   directly on the h2 would just replace/fight the gradient). `position:
   relative; z-index: 0` on the h2 gives it its own stacking context so the
   ::before's `z-index: -1` reliably sits behind the h2's own text without
   sinking below unrelated sibling content in the surrounding section -
   `display: inline-block` sizes the h2 (and therefore the ::before, which
   insets off the h2's own box) to the text rather than the full column
   width, so text-center ancestors still center it correctly. There is no
   single wrapper class around every h2 in these pre-existing templates
   (checked directly - h2 sits in varying col-lg-* Bootstrap columns), so
   this targets `h2` generically within the shared product-page scope,
   matching every other page-wide rule in this file. */
body[class^="product-"][class$="-redesign"] h2 {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    position: relative; display: inline-block;
    background: linear-gradient(90deg, var(--hr-highlight) 0%, #7b5fd0 30%, #4a9fd8 65%, var(--hr-primary) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* 2026-08-24: colored per docs/DESIGN_SYSTEM_REQUIREMENTS.md's glass-pane
   requirement - split by product so each page's own section headings carry
   one consistent accent glow (violet for Wormwood/NEXUS/Palladium/KB Hit
   Tracker, teal for deltaPrism/UV Web CMS), and that same page's other
   glass panels below (hero stats row, narrative column) deliberately use
   the opposite accent for contrast/rhythm rather than repeating the
   heading color. Palladium and the KB Hit Tracker page joined the
   Wormwood/NEXUS side after their real markup was confirmed (not assumed)
   to share that structural family - see this file's header comment. */
body.product-wormwood-redesign h2::before,
body.product-nexus-redesign h2::before,
body.product-palladium-redesign h2::before,
body.product-kb-service-redesign h2::before {
    content: '';
    position: absolute; inset: -10px -18px; z-index: -1;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
body.product-deltaprisim-redesign h2::before,
body.product-uvwebcms-redesign h2::before {
    content: '';
    position: absolute; inset: -10px -18px; z-index: -1;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
body[class^="product-"][class$="-redesign"] h4,
body[class^="product-"][class$="-redesign"] h5,
body[class^="product-"][class$="-redesign"] h6 {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    color: var(--hr-light);
}
body[class^="product-"][class$="-redesign"] p,
body[class^="product-"][class$="-redesign"] li,
body[class^="product-"][class$="-redesign"] span {
    font-family: 'Barlow', sans-serif;
}
body[class^="product-"][class$="-redesign"] .text-muted {
    color: var(--hr-text-muted) !important;
}
body[class^="product-"][class$="-redesign"] code {
    color: var(--hr-primary); background: rgba(1,206,211,0.10);
    padding: 1px 6px; border-radius: 4px; font-size: 0.9em;
}

/* --- WP-D1: glass panel behind the hero key-metrics row on Wormwood/NEXUS/
   Palladium/KB Hit Tracker (Primarch screenshot: the 294 / 2,175 / 40% /
   50% / 93% / 4 stats row sat directly on the transparent background).
   deltaPrism/UVWebCMS's equivalent hero stats row already carries real
   "border rounded-3" markup and is already covered by the .border.rounded-3
   rule below - this selector only matches the templates whose real markup
   is ".row mt-5 g-3 border-top border-secondary pt-4" instead (confirmed
   unique to this row in these templates, not reused elsewhere). The
   existing Bootstrap border-top/border-secondary hairline is overridden to
   the same rgba(255,255,255,0.08) hairline every other glass element here
   uses, rather than Bootstrap's default gray, now that it frames a full
   panel rather than a plain divider line. --- */
/* Teal, contrasting against this same page's violet h2::before above. */
body.product-wormwood-redesign .hr-hero .row.border-top.border-secondary,
body.product-nexus-redesign .hr-hero .row.border-top.border-secondary,
body.product-palladium-redesign .hr-hero .row.border-top.border-secondary,
body.product-kb-service-redesign .hr-hero .row.border-top.border-secondary {
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px;
    padding-left: 24px; padding-right: 24px; padding-bottom: 20px;
}

/* --- WP-D1: glass panel behind "loose" narrative paragraph blocks that sit
   directly on the transparent page background with no card treatment of
   their own (Primarch screenshot: Wormwood's "THE PROBLEM" section).
   Matches the rgba(13,15,20,0.30)+blur(14px) glass value established for
   large text-content panels (home_redesign.css .hr-card, about_redesign.css
   .ar-title-glass) rather than the heavier 0.55 opacity this same file uses
   for small feature/step tiles below (".border.rounded-3") - these are
   full prose sections, not compact grid tiles.

   Each selector below targets the one real, already-in-use structural
   pattern (confirmed by reading each template in full, not guessed) that
   each page's own "loose" narrative column actually has - there is no
   shared wrapper class across every template to hang one rule off:
     - Wormwood "THE PROBLEM"/"THE SOLUTION", NEXUS "THE PROBLEM", and
       Palladium/KB Hit Tracker's own "The Problem" sections: a lone
       ".col-lg-8" inside ".row.justify-content-center" (confirmed this
       exact combination is unique to those narrative sections on these
       pages - every other centered intro on these pages uses ".col-lg-6",
       left alone as short section-header captions, not full prose, and
       already gets its own glass backdrop via the h2 rule above).
     - UVWebCMS's "What changes without a release" intro shares the exact
       same ".row.justify-content-center > .col-lg-8" shape.
     - deltaPrism "Graph data that fits your domain" and UVWebCMS "Why
       build a CMS instead of using one?": the first of two
       ".col-lg-6" columns inside ".row.align-items-center.g-5" (the
       second column in both cases is its own grid of already-carded
       tiles/diagram, deliberately excluded via :first-child).
     - UVWebCMS "68 permissions, not just admin/editor": ".col-lg-5"
       (confirmed unique to this one section on this page). --- */
/* Wormwood/NEXUS/Palladium/KB Hit Tracker narrative column: teal, same
   contrast pairing as their hero-stats row above (both play off that
   page's violet headings). */
body.product-wormwood-redesign .row.justify-content-center > .col-lg-8,
body.product-nexus-redesign .row.justify-content-center > .col-lg-8,
body.product-palladium-redesign .row.justify-content-center > .col-lg-8,
body.product-kb-service-redesign .row.justify-content-center > .col-lg-8 {
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 32px 36px;
}
/* deltaPrism/UV Web CMS narrative columns: violet, contrasting against
   their teal headings. */
body.product-uvwebcms-redesign .row.justify-content-center > .col-lg-8,
body.product-deltaprisim-redesign .row.align-items-center.g-5 > .col-lg-6:first-child,
body.product-uvwebcms-redesign .row.align-items-center.g-5 > .col-lg-6:first-child,
body.product-uvwebcms-redesign .col-lg-5 {
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 32px 36px;
}

/* --- Glass cards: the "border rounded-3 p-4" box every content section
   across every template uses for feature/step/capability/industry tiles.
   Matches the same rgba(13,15,20,0.30)+blur+hairline-border glass
   treatment already established on Home/Services. --- */
body[class^="product-"][class$="-redesign"] .border.rounded-3 {
    background: rgba(13,15,20,0.55) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body[class^="product-"][class$="-redesign"] .bg-dark-accent {
    background: rgba(13,15,20,0.55) !important;
}

/* --- Border-start accent blocks (use-case / roadmap side panels).
   Bootstrap's own two variants (border-dark / border-secondary) already
   alternate exactly like the site's violet/teal card pairing - mapped
   directly onto the two hr accent colors instead of adding new classes. --- */
body[class^="product-"][class$="-redesign"] .border-start.border-dark {
    border-color: var(--hr-highlight) !important;
}
body[class^="product-"][class$="-redesign"] .border-start.border-secondary {
    border-color: var(--hr-primary) !important;
}

/* --- Tables (tech-stack listings) --- */
body[class^="product-"][class$="-redesign"] table.table-dark {
    --bs-table-bg: rgba(13,15,20,0.55);
    font-family: 'Barlow', sans-serif;
}
body[class^="product-"][class$="-redesign"] table.table-dark th {
    font-family: 'Barlow Condensed', sans-serif; color: var(--hr-primary);
}

/* --- Progress bars (deltaPrism production-readiness meters) --- */
body[class^="product-"][class$="-redesign"] .progress-bar {
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)) !important;
}

/* --- CTA sections (final section on every product page) --- */
body[class^="product-"][class$="-redesign"] section:last-of-type h2 {
    margin-bottom: 16px;
}

/* --- Responsive: tablet first, then phone (built in from the start,
   matching the pattern every other redesigned page follows). --- */
@media (max-width: 1024px) {
    body[class^="product-"][class$="-redesign"] .hr-hero { padding: 60px 0 40px; }
    body[class^="product-"][class$="-redesign"] .hr-hero h1 { font-size: 46px; }
    body[class^="product-"][class$="-redesign"] .hr-hero .lead { font-size: 19px; max-width: 100%; }
}

@media (max-width: 768px) {
    body[class^="product-"][class$="-redesign"] .hr-hero { padding: 40px 0 30px; }
    body[class^="product-"][class$="-redesign"] .hr-hero h1 { font-size: 34px; }
    body[class^="product-"][class$="-redesign"] .hr-hero .lead { font-size: 17px; }
    body[class^="product-"][class$="-redesign"] .fw-bold.fs-4,
    body[class^="product-"][class$="-redesign"] .display-5.fw-bold { font-size: 1.5rem; }

    /* WP-D1 glass panels added above: same phone-padding-reduction pattern
       already used for the hero itself in this block, so the new panels
       do not feel oversized once columns collapse to full width. */
    body.product-wormwood-redesign .hr-hero .row.border-top.border-secondary,
    body.product-nexus-redesign .hr-hero .row.border-top.border-secondary,
    body.product-palladium-redesign .hr-hero .row.border-top.border-secondary,
    body.product-kb-service-redesign .hr-hero .row.border-top.border-secondary {
        padding-left: 16px; padding-right: 16px; padding-bottom: 16px;
    }
    body.product-wormwood-redesign .row.justify-content-center > .col-lg-8,
    body.product-nexus-redesign .row.justify-content-center > .col-lg-8,
    body.product-palladium-redesign .row.justify-content-center > .col-lg-8,
    body.product-kb-service-redesign .row.justify-content-center > .col-lg-8,
    body.product-uvwebcms-redesign .row.justify-content-center > .col-lg-8,
    body.product-deltaprisim-redesign .row.align-items-center.g-5 > .col-lg-6:first-child,
    body.product-uvwebcms-redesign .row.align-items-center.g-5 > .col-lg-6:first-child,
    body.product-uvwebcms-redesign .col-lg-5 {
        padding: 22px 24px;
    }
}