/* --------------------------------------------------------------------------
   SPECIFICITY NOTE - DO NOT "SIMPLIFY" :root:root BACK TO :root
   Blocksy prints its dynamic Customizer CSS inline on the ct-main-styles
   handle, which WordPress emits AFTER this stylesheet. At equal specificity
   the later rule wins, so a plain :root here loses every --theme-* mapping
   to Blocksy defaults. Measured 2026-08-17: 26 of 42 declarations were
   being silently discarded, including the entire palette.
   :root:root is (0,2,0) and beats Blocksy (0,1,0) regardless of load order,
   which also makes it immune to Blocksy changing its enqueue internals.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   PNW Peptides Labs — bridge.css
   DO NOT EDIT PER CLIENT. This file contains zero brand decisions.

   Its only job: take the 13 tokens from tokens.css and hand them to the two
   systems that actually paint the page — Blocksy's palette and Elementor's
   globals. Every value below is a var() reference. If you find a hex literal
   in this file, someone broke the architecture; put it back in tokens.css.

   Conforms to: TRP Replication Blueprint page 22 (Design Token Architecture)
   ========================================================================== */


/* ==========================================================================
   1. BLOCKSY PALETTE
   Blocksy exposes eight palette slots as --theme-palette-color-1..8 and derives
   most of its own component colours from them. Overriding the slots is far more
   reliable than chasing individual component variables, because Blocksy's own
   defaults already reference the slots.

   The slot ORDER below is the Blocksy convention. Keep it. If you reorder,
   the Customizer's colour pickers will show labels that no longer match.
   ========================================================================== */

:root:root {

  /* 1 — Primary accent. Links, primary buttons, active states. */
  --theme-palette-color-1: var(--brand-primary);

  /* 2 — Primary accent hover. */
  --theme-palette-color-2: var(--brand-primary-hover);

  /* 3 — Headings / darkest text. */
  --theme-palette-color-3: var(--brand-heading);

  /* 4 — Body text. */
  --theme-palette-color-4: var(--brand-text);

  /* 5 — Borders, dividers, input outlines. */
  --theme-palette-color-5: var(--brand-border);

  /* 6 — Light surface. Cards, panels, alternating bands. */
  --theme-palette-color-6: var(--brand-surface);

  /* 7 — DARK SURFACE. Blocksy ships this as a second light tint; PNW
         repurposes it as the navy band used by header, hero and footer.
         Anything placed on slot 7 must use inverse text. */
  --theme-palette-color-7: var(--brand-bg);        /* body bg = white; navy now comes from pnw-dark ids */

  /* 8 — Base / page background. */
  --theme-palette-color-8: var(--brand-bg);
}


/* --------------------------------------------------------------------------
   1a. Blocksy semantic variables
   Slots cover most cases, but Blocksy reads a handful of named variables
   directly. Point them at tokens rather than leaving them on Blocksy defaults.
   -------------------------------------------------------------------------- */

:root:root {
  --theme-text-color:               var(--brand-text);
  --theme-headings-color:           var(--brand-heading);
  --theme-link-initial-color:       var(--brand-primary);
  --theme-link-hover-color:         var(--brand-primary-hover);
  --theme-border-color:             var(--brand-border);
  --theme-content-boxes-background: var(--brand-surface);

  /* Buttons. White label on --brand-primary is 6.10:1 — passes AA.
     Never swap the fill to --brand-accent here: white on orange tops out
     at 4.27:1 and fails. See the rule block in tokens.css. */
  --theme-button-text-initial-color:       var(--brand-text-inverse);
  --theme-button-text-hover-color:         var(--brand-text-inverse);
  --theme-button-background-initial-color: var(--brand-primary);
  --theme-button-background-hover-color:   var(--brand-primary-hover);
  --theme-button-border-radius:            var(--pnw-field-radius);
  --theme-button-min-height:               var(--pnw-btn-min-height);

  /* Forms */
  --theme-form-field-border-initial-color: var(--brand-border);
  --theme-form-field-border-focus-color:   var(--brand-primary);
  --theme-form-selection-condition-initial-color: var(--brand-primary);

  /* Layout */
  --theme-normal-container-max-width:  var(--pnw-container-max);
  --theme-narrow-container-max-width:  var(--pnw-container-narrow);
  --theme-content-vertical-spacing:    var(--pnw-content-space-desk);

  /* Type */
  --theme-font-family:      var(--brand-font-body);
  --theme-font-size:        var(--pnw-body-size);
  --theme-line-height:      var(--pnw-body-lh);
  --theme-heading-font-family: var(--brand-font-heading);
}


/* ==========================================================================
   2. ELEMENTOR GLOBALS

   The critical architectural fact from TRP page 03: Blocksy is NOT driving the
   chrome. Elementor Pro theme-builder templates with include/general display
   conditions override the header and footer site-wide. So Elementor's globals
   are not secondary — for the header, footer, hero and every template-built
   section, they are the ones doing the work.

   Elementor writes these into a <style> block in the head from the Kit post.
   Re-declaring them on :root in an enqueued stylesheet that loads after
   Elementor's inline styles wins on source order at equal specificity.

   IMPORTANT: this is a display-layer override. The Kit's stored values are
   unchanged, so the Elementor colour pickers will still show the old swatches
   until someone sets them in Site Settings. Doing both is correct — set the Kit
   values to match these tokens during scaffold build, and keep this block as
   the enforcement layer so a stray manual edit cannot drift the site.
   ========================================================================== */

:root:root {

  /* --- System colour slots --- */
  --e-global-color-primary:   var(--brand-primary);
  --e-global-color-secondary: var(--brand-secondary);
  --e-global-color-text:      var(--brand-text);
  --e-global-color-accent:    var(--brand-accent-ink);   /* light-surface safe */

  /* --- Custom slots ---
     Elementor names custom globals with a generated ID, e.g.
     --e-global-color-a1b2c3d. Those IDs are created when you add the global
     in Site Settings and CANNOT be predicted before the fact.

     Build step: after creating the seven custom globals listed in the build
     order doc, read their generated IDs out of the Kit and paste the mappings
     below. Until then this section is intentionally empty rather than guessing.

     --e-global-color-XXXXXXX: var(--brand-accent);        // orange-on-navy
     --e-global-color-XXXXXXX: var(--brand-blue-bright);   // display blue
     --e-global-color-XXXXXXX: var(--brand-surface-alt);   // navy band
     --e-global-color-XXXXXXX: var(--brand-surface-deep);  // navy elevation
     --e-global-color-XXXXXXX: var(--brand-surface);       // light panel
     --e-global-color-XXXXXXX: var(--brand-border);        // divider
     --e-global-color-XXXXXXX: var(--brand-text-muted);    // meta / fine print
  */

  /* --- Typography slots ---
     TRP page 03 records Triton on four families (Orbitron / Poppins / Inter /
     Roboto) and flags that as heavy. Page 21 recommends collapsing to two.
     PNW collapses to Montserrat + Inter. The SLOT STRUCTURE is what carries
     forward, not the families. */

  --e-global-typography-primary-font-family:   var(--brand-font-display);
  --e-global-typography-primary-font-weight:   800;

  --e-global-typography-secondary-font-family: var(--brand-font-heading);
  --e-global-typography-secondary-font-weight: 700;

  --e-global-typography-text-font-family:      var(--brand-font-body);
  --e-global-typography-text-font-weight:      400;

  --e-global-typography-accent-font-family:    var(--brand-font-accent);
  --e-global-typography-accent-font-weight:    600;
}


/* ==========================================================================
   3. DARK-SURFACE CONTEXT

   The one rule that keeps the navy chrome from producing unreadable text.
   Anything inside a .pnw-dark region flips text to inverse and switches the
   orange token to the version that is legal on navy.

   Apply .pnw-dark to the Elementor section/container, not to individual
   widgets. Templates 220 (header), 224 (footer) and the hero section of 32
   (home) each carry it.

   STATUS: this block assumes the dark-chrome / light-content split. That
   decision is still open with the owner. If the direction changes to light
   chrome, delete this block — nothing else in the scaffold depends on it.
   ========================================================================== */

.pnw-dark,
.pnw-dark :where(h1, h2, h3, h4, h5, h6, p, li, span, td, th, dt, dd) {
  color: var(--brand-text-inverse);
}

.pnw-dark {
  background-color: var(--brand-surface-alt);

  /* Inside dark context the accent flips to the navy-safe orange (6.55:1)
     and surfaces step up to the elevation navy. */
  --brand-accent-current: var(--brand-accent);
  --theme-palette-color-6: var(--brand-surface-deep);
  --theme-text-color:      var(--brand-text-inverse);
  --theme-headings-color:  var(--brand-text-inverse);
  --theme-border-color:    rgb(255 255 255 / 0.14);
}

.pnw-dark a:not(.wp-block-button__link):not(.button) {
  color: var(--brand-blue-bright);   /* 4.16:1 on white ✗, but safe on navy */
}

.pnw-dark a:not(.wp-block-button__link):not(.button):hover {
  color: var(--brand-accent);
}

/* Light context is the default. Declared explicitly so the accent variable
   always resolves regardless of nesting order. */
:root,
.pnw-light {
  --brand-accent-current: var(--brand-accent-ink);
}

.pnw-light {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}


/* ==========================================================================
   4. WHAT THIS FILE DOES NOT DO

   - It does not style components. That is components.css.
   - It does not set Blocksy Customizer options. Those are database values;
     set them in the Customizer during scaffold build so the admin UI agrees
     with the CSS. This file is the enforcement layer, not the config.
   - It does not touch WooCommerce templates.

   VERIFY after build — paste in devtools console on home, shop, product, cart,
   checkout, my-account and the gate. Both should be near zero:

   [...document.styleSheets]
     .filter(s => /elementor-post-\d+/.test(s.ownerNode?.id || ''))
     .map(s => { let t=''; for (const r of s.cssRules) t += r.cssText;
       return { id: s.ownerNode.id,
                literals: (t.match(/#[0-9a-f]{3,8}|rgba?\(/gi)||[]).length,
                vars: (t.match(/var\(--/g)||[]).length }; });
   ========================================================================== */

/* Elementor-aware dark-context flips (added 2026-08-17)
   Elementor + Blocksy set heading/text colors with real specificity that the
   zero-specificity :where() flip above cannot beat. These target Elementor's
   own widget classes so headings/paragraphs/links go inverse on navy. */
.pnw-dark :is(h1,h2,h3,h4,h5,h6),
.pnw-dark .elementor-heading-title,
.pnw-dark .elementor-widget-heading .elementor-heading-title{ color: var(--brand-text-inverse); }
.pnw-dark .elementor-widget-text-editor,
.pnw-dark .elementor-widget-text-editor p,
.pnw-dark .elementor-widget p,
.pnw-dark .elementor-widget li{ color: var(--brand-text-inverse); }
.pnw-dark .elementor-widget-text-editor p{ opacity:.9; }