/*
Theme Name: POWR ZONE Columbus
Theme URI: https://wellxm.com/
Description: Hello Elementor child theme for POWR ZONE // Columbus. Ships brand color tokens, a typographic base, and Elementor-friendly utility classes. Global colors + fonts are mirrored in Elementor Site Settings — see README.md.
Author: Kevin Cooper
Author URI: https://wellxm.com/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: powrzone-columbus
*/

/* =========================================================
   POWR ZONE // COLUMBUS — Brand Tokens
   Screen/RGB values sampled directly from the supplied assets.
   Print/CMYK masters are DIFFERENT (green #84c127, grey #7d8083);
   use those for print only, never on screen.
   ========================================================= */
:root {
  /* Brand */
  --pz-green: #98ca3c;        /* primary accent (RGB/screen) */
  --pz-green-600: #86b733;    /* hover / darker accent */
  --pz-grey: #888b8d;         /* brand grey — logo grey, large headings */
  --pz-grey-300: #bbbcbc;     /* endorser ("COLUMBUS") / muted lines */

  /* Functional neutrals (AA-safe on white) */
  --pz-ink: #1f2325;          /* body text  (~15:1 on #fff) */
  --pz-ink-soft: #3c4145;     /* secondary text */
  --pz-white: #ffffff;
  --pz-surface: #f4f5f6;      /* light section background */
  --pz-charcoal: #14171a;     /* dark section / footer background */

  /* Type — placeholder until Involve brand standards land */
  --pz-font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pz-font-heading: var(--pz-font-sans);

  /* Structure */
  --pz-container: 1200px;
  --pz-radius: 6px;
}

/* =========================================================
   Base — intentionally light. Elementor drives layout/type.
   These are fallbacks for non-Elementor areas + sane defaults.
   ========================================================= */
body {
  color: var(--pz-ink);
  font-family: var(--pz-font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pz-font-heading);
  color: var(--pz-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { color: var(--pz-ink); text-decoration-color: var(--pz-green); }
a:hover { color: var(--pz-green-600); }

/* =========================================================
   Utilities — safe inside Elementor HTML widgets, custom CSS,
   or Gutenberg. Prefixed to avoid collisions.
   ========================================================= */
.pz-green        { color: var(--pz-green) !important; }
.pz-grey         { color: var(--pz-grey) !important; }
.bg-pz-green     { background-color: var(--pz-green) !important; }
.bg-pz-charcoal  { background-color: var(--pz-charcoal) !important; color: var(--pz-white); }
.bg-pz-surface   { background-color: var(--pz-surface) !important; }

/* The "//" accent motif from the logo, as a divider */
.pz-rule {
  height: 4px; width: 56px; border: 0;
  background: var(--pz-green);
  margin: 1rem 0;
}

/* Primary button.
   IMPORTANT: green only passes contrast with DARK text (10.8:1).
   Never white text on green (1.9:1 — fails WCAG). */
.pz-btn {
  display: inline-block;
  font-family: var(--pz-font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pz-ink);
  background: var(--pz-green);
  padding: 0.85rem 1.6rem;
  border-radius: var(--pz-radius);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.pz-btn:hover { background: var(--pz-green-600); color: var(--pz-ink); transform: translateY(-1px); }

.pz-btn--ghost {
  background: transparent;
  color: var(--pz-ink);
  box-shadow: inset 0 0 0 2px var(--pz-green);
}
.pz-btn--ghost:hover { background: var(--pz-green); color: var(--pz-ink); }

/* On dark sections, text goes light automatically */
.bg-pz-charcoal h1, .bg-pz-charcoal h2, .bg-pz-charcoal h3,
.bg-pz-charcoal h4, .bg-pz-charcoal h5, .bg-pz-charcoal h6,
.bg-pz-charcoal p { color: var(--pz-white); }