/* ===========================================================================
   Phoenix Coaching — component styles (static extraction)
   Lifted verbatim from the DS React primitives (Button, Card, Badge, Input,
   Quote, Stat) so the marketing site can render as plain, directly-editable
   HTML without React. Tokens come from styles.css.
   =========================================================================== */

/* ---- Button -------------------------------------------------------------- */
.pc-btn {
  --_bg: transparent;
  --_fg: var(--text-primary);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  border: var(--border-width) solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard);
}
.pc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pc-btn:active { transform: scale(0.98); }
.pc-btn[disabled], .pc-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pc-btn__ico { display: inline-flex; }
.pc-btn__ico svg { width: 1.15em; height: 1.15em; display: block; stroke-width: 2; }

.pc-btn--sm { font-size: var(--fs-xs); padding: 0.6rem 0.95rem; text-transform: uppercase; letter-spacing: var(--ls-wider); }
.pc-btn--md { font-size: var(--fs-sm); padding: 0.8rem 1.4rem; text-transform: uppercase; letter-spacing: var(--ls-wider); }
.pc-btn--lg { font-size: var(--fs-base); padding: 1.05rem 2rem; text-transform: uppercase; letter-spacing: var(--ls-wider); }

.pc-btn--primary { --_bg: var(--gold); --_fg: var(--text-on-gold); --_bd: var(--gold); }
.pc-btn--primary:hover { --_bg: var(--gold-600); --_bd: var(--gold-600); box-shadow: var(--glow-gold-sm); }
.pc-btn--primary:active { --_bg: var(--gold-700); --_bd: var(--gold-700); }

.pc-btn--secondary { --_bg: transparent; --_fg: var(--gold); --_bd: var(--gold); }
.pc-btn--secondary:hover { --_bg: var(--gold-soft); }
.pc-btn--secondary:active { --_bg: var(--gold-soft-strong); }

.pc-btn--ghost { --_bg: transparent; --_fg: var(--text-primary); --_bd: transparent; }
.pc-btn--ghost:hover { --_bg: rgba(240,235,224,0.06); --_fg: var(--gold); }

.pc-btn--amber { --_bg: var(--amber); --_fg: var(--white-strong); --_bd: var(--amber); }
.pc-btn--amber:hover { --_bg: var(--amber-600); --_bd: var(--amber-600); box-shadow: var(--glow-amber-sm); }
.pc-btn--amber:active { --_bg: var(--amber-700); --_bd: var(--amber-700); }

.pc-btn--block { display: flex; width: 100%; }

/* ---- Card ---------------------------------------------------------------- */
.pc-card {
  position: relative;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--edge-top);
  padding: var(--space-6);
  color: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.pc-card--interactive { cursor: pointer; }
.pc-card--interactive:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lg), var(--edge-top); }
.pc-card--feature { border-color: transparent; box-shadow: var(--glow-gold-sm), var(--shadow-md); }
.pc-card--feature.pc-card--interactive:hover { box-shadow: var(--glow-gold-md), var(--shadow-lg); }
.pc-card--well { background: var(--surface-well); box-shadow: none; }
.pc-card--flush { padding: 0; overflow: hidden; }
.pc-card--ruled::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--grad-gold-rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---- Badge --------------------------------------------------------------- */
.pc-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pc-badge__dot { width: 0.5em; height: 0.5em; border-radius: 999px; background: currentColor; }
.pc-badge--gold   { background: var(--gold-soft); color: var(--gold); border-color: rgba(201,162,39,0.4); }
.pc-badge--solid  { background: var(--gold); color: var(--text-on-gold); }
.pc-badge--amber  { background: var(--amber-soft); color: var(--amber); border-color: rgba(200,90,30,0.45); }
.pc-badge--neutral{ background: var(--charcoal-600); color: var(--text-secondary); border-color: var(--border-default); }
.pc-badge--outline{ background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.pc-badge--success{ background: rgba(127,160,90,0.14); color: var(--success); border-color: rgba(127,160,90,0.4); }
.pc-badge--danger { background: rgba(184,71,46,0.14); color: var(--danger); border-color: rgba(184,71,46,0.4); }

/* ---- Input --------------------------------------------------------------- */
.pc-field { display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--font-body); }
.pc-field__label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-secondary);
}
.pc-field__label .req { color: var(--gold); margin-left: 0.2em; }
.pc-input-wrap { position: relative; display: flex; align-items: center; }
.pc-input-wrap__ico { position: absolute; left: 0.9rem; display: inline-flex; color: var(--text-faint); pointer-events: none; }
.pc-input-wrap__ico svg { width: 18px; height: 18px; }
.pc-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--text-primary);
  background: var(--surface-well);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem; line-height: 1.4;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.pc-input--with-icon { padding-left: 2.7rem; }
.pc-input::placeholder { color: var(--text-faint); }
.pc-input:hover { border-color: var(--border-strong); }
.pc-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--charcoal-800); }
.pc-input:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-field--error .pc-input { border-color: var(--danger); }
.pc-field--error .pc-input:focus { box-shadow: 0 0 0 3px rgba(184,71,46,0.4); }
.pc-field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.pc-field--error .pc-field__hint { color: var(--danger); }
textarea.pc-input { resize: vertical; min-height: 5.5rem; }

/* ---- Quote --------------------------------------------------------------- */
.pc-quote { display: flex; flex-direction: column; gap: var(--space-4); }
.pc-quote--ruled { border-left: 2px solid var(--gold); padding-left: var(--space-5); }
.pc-quote__text {
  font-family: var(--font-quote); font-style: italic; font-weight: var(--fw-bold);
  color: var(--text-primary); margin: 0; line-height: 1.24;
}
.pc-quote--sm .pc-quote__text { font-size: var(--fs-lg); }
.pc-quote--md .pc-quote__text { font-size: var(--fs-2xl); }
.pc-quote--lg .pc-quote__text { font-size: var(--fs-3xl); }
.pc-quote__text .accent { color: var(--gold); }
.pc-quote__by { display: flex; align-items: center; gap: var(--space-3); }
.pc-quote__cite {
  font-family: var(--font-display); font-style: normal; font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Stat ---------------------------------------------------------------- */
.pc-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.pc-stat__value {
  font-family: var(--font-display); font-weight: var(--fw-black);
  line-height: 0.95; letter-spacing: var(--ls-tight);
  color: var(--text-display); font-size: var(--fs-4xl);
  display: flex; align-items: baseline; gap: 0.06em;
}
.pc-stat--sm .pc-stat__value { font-size: var(--fs-2xl); }
.pc-stat--lg .pc-stat__value { font-size: var(--fs-5xl); }
.pc-stat--gold .pc-stat__value { color: var(--gold); }
.pc-stat__affix { font-size: 0.5em; font-weight: var(--fw-extrabold); color: var(--gold); }
.pc-stat--gold .pc-stat__affix { color: var(--gold-400); }
.pc-stat__label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted);
}