/* ==========================================================================
   PNW Peptides Labs — components.css
   Patterns Blocksy and Elementor have no equivalent for.

   Rules for this file:
   - Every colour is a var(). No hex literals, ever.
   - Every component is prefixed .pnw- so nothing collides with theme or
     plugin classes.
   - Nothing here fires until the matching markup exists in a template.
     Adding a class does not change the live site.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Research Use Only bar
   Compliance surface. Must be legible, must not be dismissible, must not be
   styled as a promotion. Sits directly under the header on every page.
   -------------------------------------------------------------------------- */

.pnw-ruo-bar {
  background-color: var(--brand-surface-deep);
  color: var(--brand-text-inverse);
  font-family: var(--brand-font-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  line-height: 1.45;
}

.pnw-ruo-bar strong {
  color: var(--brand-accent);   /* legal on this surface — 6.55:1 */
}


/* --------------------------------------------------------------------------
   COA badge
   Data-driven, not typed into the product title. Renders from the ACF field.
   Two states so an absent COA is visibly absent rather than silently missing.
   -------------------------------------------------------------------------- */

.pnw-coa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--brand-font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--pnw-field-radius);
  border: var(--pnw-border-width) solid transparent;
}

.pnw-coa-badge--available {
  color: var(--brand-primary);
  background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.pnw-coa-badge--pending {
  color: var(--brand-text-muted);
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
}

.pnw-dark .pnw-coa-badge--available {
  color: var(--brand-accent);
  background-color: color-mix(in srgb, var(--brand-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-accent) 38%, transparent);
}


/* --------------------------------------------------------------------------
   Product meta row — SKU / lot / purity
   Replaces "(COA Attached)" in the product name with structured fields.
   -------------------------------------------------------------------------- */

.pnw-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--brand-font-body);
  font-size: 13px;
  color: var(--brand-text-muted);
  margin: 8px 0 0;
}

.pnw-product-meta dt {
  display: inline;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}

.pnw-product-meta dd {
  display: inline;
  margin: 0 0 0 4px;
  font-variant-numeric: tabular-nums;
  color: var(--brand-text);
}

.pnw-dark .pnw-product-meta dd { color: var(--brand-text-inverse); }


/* --------------------------------------------------------------------------
   COA lot search
   The differentiator. Currently PNW has COAs as PDF attachments with no
   discovery path at all. Markup lands with the COA system phase.
   -------------------------------------------------------------------------- */

.pnw-coa-search {
  display: flex;
  gap: 8px;
  max-width: 520px;
}

.pnw-coa-search input[type="search"],
.pnw-coa-search input[type="text"] {
  flex: 1 1 auto;
  height: var(--pnw-input-height);
  padding: 0 14px;
  font-family: var(--brand-font-body);
  font-size: var(--pnw-body-size);
  color: var(--brand-text);
  background-color: var(--brand-bg);
  border: var(--pnw-border-width) solid var(--brand-border);
  border-radius: var(--pnw-field-radius);
}

.pnw-coa-search input:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}

.pnw-dark .pnw-coa-search input:focus-visible {
  outline-color: var(--brand-accent);
}


/* --------------------------------------------------------------------------
   Trust strip
   Replaces the emoji row (🧪 🚚 📄 🇺🇸) on the current homepage. Emoji render
   differently on every platform and read as consumer, not laboratory.
   Icons are inline SVG in the template, sized and coloured from here.
   -------------------------------------------------------------------------- */

.pnw-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  padding: 18px 20px;
  background-color: var(--brand-surface);
  border-block: var(--pnw-border-width) solid var(--brand-border);
}

.pnw-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-accent);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
}

.pnw-trust-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-accent-current);
}

.pnw-dark .pnw-trust-strip {
  background-color: var(--brand-surface-deep);
  border-block-color: rgb(255 255 255 / 0.12);
}

.pnw-dark .pnw-trust-item { color: var(--brand-text-inverse); }


/* --------------------------------------------------------------------------
   Focus visibility
   Blocksy's default focus ring is low contrast on the navy chrome. This is an
   accessibility floor, not a style preference — do not remove it.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.pnw-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--brand-accent);
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BLOCKSY GAP FIXES - added 2026-08-17
   Two places where Blocksy does not consume the variable bridge.css sets,
   so the value has to be applied to the element instead. Both verified
   against the rendered cascade, not assumed.
   ========================================================================== */

/* Blocksy applies font-family: var(--theme-font-family) to
   `body, h1, h2, h3, h4, h5, h6, label, ...` in a single rule and never reads
   --theme-heading-font-family. Without this, headings inherit the body face
   and the display/heading slot distinction collapses. */
:root:root h1,
:root:root h2,
:root:root h3,
:root:root h4,
:root:root h5,
:root:root h6 {
	font-family: var(--brand-font-heading);
}

/* Blocksy sizes every field from var(--has-height, var(--theme-form-field-height, 40px)).
   Overriding the shared token would drag inputs off their 40px spec, so the
   textarea override is scoped to the element via Blocksy's own --has-height hook. */
:root:root textarea {
	--has-height: var(--pnw-textarea-height);
}

/* ==========================================================================
   ID-based dark hooks (added 2026-08-17)
   Elementor strips custom CSS classes (_css_classes) from data written via the
   REST API but honors CSS IDs (_element_id). So dark-chrome containers built
   through the API carry an id of the form pnw-dark-* and are styled here from
   the same tokens the .pnw-dark class uses. Colors stay entirely in tokens.
   ========================================================================== */
[id^="pnw-dark"]{ background: var(--brand-surface-alt); color: var(--brand-text-inverse); }
[id^="pnw-dark"] :is(h1,h2,h3,h4,h5,h6),
[id^="pnw-dark"] .elementor-heading-title{ color: var(--brand-text-inverse); }
[id^="pnw-dark"] .elementor-widget-text-editor,
[id^="pnw-dark"] .elementor-widget-text-editor p,
[id^="pnw-dark"] p, [id^="pnw-dark"] li{ color: var(--brand-text-inverse); }
[id^="pnw-dark"] .pnw-eyebrow,
[id^="pnw-dark"] .elementor-widget-heading.pnw-eyebrow .elementor-heading-title{ color: var(--brand-accent); }
/* primary CTA on navy = orange fill, navy label (AA 6.55:1); never white on orange */
[id^="pnw-dark"] .elementor-button, [id^="pnw-dark"] .pnw-cta .elementor-button{
  background: var(--brand-accent); color: var(--brand-surface-alt);
  border-radius: var(--pnw-field-radius); font-weight:600; min-height:var(--pnw-btn-min-height);
}
[id^="pnw-dark"] .elementor-button:hover{ background:#ffa04d; }
[id^="pnw-dark"] .pnw-ghost .elementor-button{
  background:transparent; color:var(--brand-text-inverse);
  border:1px solid rgba(255,255,255,.4);
}

/* pnw dark nav + ruo bar (added 2026-08-17) */
[id^="pnw-dark"] .elementor-nav-menu a,
[id^="pnw-dark"] .elementor-item{ color: var(--brand-text-inverse); font-weight:500; }
[id^="pnw-dark"] .elementor-nav-menu a:hover,
[id^="pnw-dark"] .elementor-item:hover{ color: var(--brand-accent); }
[id^="pnw-dark"] a{ color: var(--brand-text-inverse); }
[id^="pnw-dark"] a:hover{ color: var(--brand-accent); }
#pnw-ruo{ background: var(--brand-surface); border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
#pnw-ruo p{ color: var(--brand-text-muted); font-size:13px; margin:0; text-align:center; }
#pnw-coa-card{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:26px; }

/* ==========================================================================
   pnw product cards + woo storefront (added 2026-08-17) — token-based
   ========================================================================== */
ul.products li.product{ background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:var(--pnw-field-radius); padding:14px 14px 18px; transition:box-shadow .15s ease, transform .15s ease; display:flex; flex-direction:column; }
ul.products li.product:hover{ box-shadow:0 10px 28px rgba(10,23,51,.10); transform:translateY(-2px); }
ul.products li.product img{ border-radius:var(--pnw-field-radius); background:var(--brand-surface); margin-bottom:12px; }
ul.products li.product .woocommerce-loop-product__title{ font-family:var(--brand-font-heading); color:var(--brand-heading); font-size:18px; font-weight:700; line-height:1.3; padding:0 0 4px; }
ul.products li.product .price{ color:var(--brand-accent-ink); font-family:var(--brand-font-body); font-weight:600; font-size:16px; }
ul.products li.product .price del{ color:var(--brand-text-muted); font-weight:400; }
ul.products li.product .woocommerce-loop-product__category, ul.products li.product .posted_in{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text-muted); }
ul.products li.product .button, ul.products li.product .add_to_cart_button{ margin-top:auto; background:var(--brand-primary); color:var(--brand-text-inverse); border-radius:var(--pnw-field-radius); font-weight:600; width:100%; text-align:center; border:none; }
ul.products li.product .button:hover, ul.products li.product .add_to_cart_button:hover{ background:var(--brand-primary-hover); color:var(--brand-text-inverse); }
ul.products li.product .out-of-stock, ul.products li.product .stock.out-of-stock{ color:var(--brand-error); font-size:12px; font-weight:600; }
.woocommerce-result-count{ color:var(--brand-text-muted); font-size:13px; }
.woocommerce-ordering select{ border:1px solid var(--brand-border); border-radius:var(--pnw-field-radius); height:var(--pnw-btn-min-height); color:var(--brand-text); }
.woocommerce nav.woocommerce-pagination a, .woocommerce nav.woocommerce-pagination span{ border-radius:var(--pnw-field-radius); border:1px solid var(--brand-border); color:var(--brand-primary); }
.woocommerce nav.woocommerce-pagination span.current{ background:var(--brand-primary); color:var(--brand-text-inverse); border-color:var(--brand-primary); }

/* pnw home sections (added 2026-08-17) */
#pnw-surface-split{ background:var(--brand-surface); border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
#pnw-vp{ background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:var(--pnw-field-radius); padding:22px; }
#pnw-vp:before{ content:""; display:block; width:32px; height:3px; background:var(--brand-accent-ink); border-radius:2px; margin-bottom:14px; }
#pnw-dark-cta .elementor-button, #pnw-dark-news .elementor-button{ background:var(--brand-accent); color:var(--brand-surface-alt); }
#pnw-dark-cta{ text-align:center; }
.elementor-accordion .elementor-tab-title{ font-family:var(--brand-font-heading); color:var(--brand-heading); border-bottom:1px solid var(--brand-border); }
.elementor-accordion .elementor-tab-title.elementor-active{ color:var(--brand-primary); }
.elementor-accordion .elementor-tab-content{ color:var(--brand-text-muted); }

/* coa-card self-contrast (added 2026-08-17) — navy panel used on light bands too */
#pnw-coa-card{ background:var(--brand-surface-deep); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:26px; }
#pnw-coa-card, #pnw-coa-card :is(h1,h2,h3,h4,h5,h6), #pnw-coa-card .elementor-heading-title, #pnw-coa-card p{ color:var(--brand-text-inverse); }
#pnw-coa-card p{ color:#c3ccd9; }
#pnw-coa-card .elementor-button{ background:var(--brand-accent); color:var(--brand-surface-alt); border:none; border-radius:var(--pnw-field-radius); font-weight:600; }
#pnw-coa-card .elementor-button:hover{ background:#ffa04d; }

/* ==========================================================================
   DARK THEME (Triton-parity) — added 2026-08-17. Full dark body, navy/orange,
   electric-blue accents + glow. Supersedes the white catalog body (DR-15 rev).
   ========================================================================== */
:root:root{ --theme-palette-color-7: var(--brand-surface-alt); --theme-palette-color-8: var(--brand-surface-deep); }
body{ background-color: var(--brand-surface-alt); }
body, .entry-content, .ct-container, p, li, td, th, dd, dt{ color:#c3ccd9; }
h1,h2,h3,h4,h5,h6, .elementor-heading-title{ color: var(--brand-text-inverse); }
main a:not(.button):not(.elementor-button){ color: var(--brand-blue-bright); }
/* catalog + content sit on navy now; light bands become deep-navy */
#pnw-surface-split{ background: var(--brand-surface-deep); border-color: rgba(255,255,255,.08); }
#pnw-surface-split p, #pnw-surface-split li{ color:#c3ccd9; }
/* product cards: dark, light photo area, glowing accent on hover */
ul.products li.product{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); }
ul.products li.product:hover{ box-shadow:0 10px 34px rgba(0,0,0,.55); border-color: var(--brand-accent); transform:translateY(-3px); }
ul.products li.product img{ background:#fff; }
ul.products li.product .woocommerce-loop-product__title{ color: var(--brand-text-inverse); }
ul.products li.product .price{ color: var(--brand-accent); }
/* value-prop cards dark + glow bar */
#pnw-vp{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); }
#pnw-vp p{ color:#c3ccd9; }
/* glowing buttons: orange fill (brand), orange glow */
.elementor-button, ul.products .button, .single_add_to_cart_button, .wc-block-components-button{ box-shadow:0 0 20px rgba(244,124,32,.40); transition:box-shadow .15s ease, transform .15s ease; }
.elementor-button:hover, ul.products .button:hover, .single_add_to_cart_button:hover{ box-shadow:0 0 28px rgba(244,124,32,.65); transform:translateY(-1px); }
ul.products li.product .button, ul.products li.product .add_to_cart_button{ background: var(--brand-accent); color: var(--brand-surface-alt); }
/* forms readable on dark */
input, select, textarea{ background: var(--brand-surface-alt); color: var(--brand-text-inverse); border-color: rgba(255,255,255,.15); }
.woocommerce-result-count, .woocommerce-ordering select{ color:#c3ccd9; }
/* accordion on dark */
.elementor-accordion .elementor-tab-title{ color: var(--brand-text-inverse); border-bottom-color: rgba(255,255,255,.12); }
.elementor-accordion .elementor-tab-content{ color:#c3ccd9; }
/* marquee ticker */
.pnw-marquee{ background: var(--brand-surface-deep); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; white-space:nowrap; }
.pnw-marquee__track{ display:inline-block; padding:12px 0; animation:pnwmarq 30s linear infinite; }
.pnw-marquee__track span{ color:#c3ccd9; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 40px; }
.pnw-marquee__track span b{ color: var(--brand-accent); font-weight:600; }
@keyframes pnwmarq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* glowing trust cards */
.pnw-tcard{ background: var(--brand-surface-deep); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:26px 22px; box-shadow:0 0 0 1px rgba(27,123,232,.0); }
.pnw-tcard:after{ content:""; display:block; height:2px; margin-top:18px; background:linear-gradient(90deg, transparent, var(--brand-blue-bright), transparent); box-shadow:0 0 12px var(--brand-blue-bright); }

/* consistent CTA buttons (added 2026-08-17) */
.elementor-button{ background: var(--brand-accent); color: var(--brand-surface-alt); font-weight:600; border-radius:var(--pnw-field-radius); }
.elementor-button:hover{ background:#ffa04d; color:var(--brand-surface-alt); }