/**
 * Visual overrides for Twiniti marketing landing pages (training, lexi, praxis, etc.).
 * Load after precision-stark.css. Layout rules stay in each page's inline <style>.
 */

:root {
  --ink: var(--ps-text);
  --muted: var(--ps-text);
  --paper: var(--ps-background);
  --panel: var(--ps-background);
  --line: var(--ps-border-subtle);
  --accent: var(--ps-action);
  --blue: var(--ps-text);
}

body {
  background: var(--ps-background) !important;
  color: var(--ps-text) !important;
  font-family: var(--ps-font-family) !important;
}

h1,
h2,
h3,
blockquote,
.price,
.hero-mark,
.eyebrow,
.number,
.card-label {
  font-family: var(--ps-font-display) !important;
  color: var(--ps-text);
}

h1,
h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.eyebrow,
.number,
.card-label,
.hero-mark span:nth-child(2),
.hero-mark span:nth-child(3),
.journey strong,
.statement .eyebrow,
.program .eyebrow,
.tier .eyebrow {
  color: var(--ps-text) !important;
}

.intro p,
.intro p:last-child,
.section-heading > p:last-child,
.card p,
.lede,
.hero p,
.hero-body,
.hero p:not(.eyebrow):not(.lede),
.hero-subtitle,
.cta p,
.callout,
.scarcity,
.small-note,
.included-item p,
.audience-grid p,
.site-links small,
.journey span,
.price ul,
.statement p:last-child {
  color: var(--ps-text) !important;
}

.button,
.ps-btn--primary {
  background: var(--ps-action) !important;
  border-color: var(--ps-action) !important;
  color: var(--ps-action-on) !important;
  border-radius: var(--ps-radius) !important;
  box-shadow: var(--ps-btn-primary-shadow) !important;
}

.button:hover {
  filter: brightness(0.96);
  transform: none !important;
}

.button-outline {
  background: transparent !important;
  color: var(--ps-text) !important;
  border-color: var(--ps-border) !important;
}

.button-outline:hover {
  background: var(--ps-background) !important;
  color: var(--ps-text) !important;
}

.tier h2,
.tier h3,
.cta h2,
.sites h2,
.intro > p:not(.eyebrow) {
  color: var(--ps-text) !important;
}

.program,
.tier,
.statement,
.membership {
  background: var(--ps-background) !important;
  color: var(--ps-text) !important;
  border-top: 1px solid var(--ps-border-subtle) !important;
}

.program p,
.tier p,
.statement p:last-child,
.membership p,
.price ul,
.price li {
  color: var(--ps-text) !important;
}

.program .eyebrow,
.tier .eyebrow,
.statement .eyebrow {
  color: var(--ps-text) !important;
}

.price li::before {
  color: var(--ps-action) !important;
}

.cta,
.sites,
.membership {
  background: var(--ps-background) !important;
}

.card,
.included-item,
.audience-grid article,
.site-links a,
.review-card,
.empty-state,
.issue-list a,
.draft-list a {
  background: var(--ps-surface-elevated) !important;
  border: 1px solid var(--ps-border-subtle) !important;
  border-radius: var(--ps-radius) !important;
  box-shadow: var(--ps-bevel-inset), var(--ps-elevation-shadow) !important;
}

.card,
.included-item,
.audience-grid article {
  border-top: 1px solid var(--ps-border-subtle) !important;
  padding-top: 20px;
}

.site-links a:hover,
.issue-list a:hover,
.draft-list a:hover {
  border-color: var(--ps-border-subtle) !important;
  color: var(--ps-text) !important;
  background: var(--ps-surface-elevated) !important;
  box-shadow: var(--ps-bevel-inset), var(--ps-elevation-shadow) !important;
}

section {
  border-top-color: var(--ps-border-subtle) !important;
}

.journey div,
.topic-list div {
  border-top-color: var(--ps-border-subtle) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.journey div:hover,
.topic-list div:hover {
  background: var(--ps-surface-elevated) !important;
  box-shadow: var(--ps-bevel-inset) !important;
}

.callout,
.question {
  border-left-color: var(--ps-action) !important;
}

footer {
  background: var(--ps-border) !important;
  color: var(--ps-on-inverse) !important;
  border-top: 1px solid var(--ps-border);
}

footer a {
  color: var(--ps-on-inverse) !important;
}

.hero-mark {
  color: var(--ps-text) !important;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ps-font-display);
  font-size: var(--ps-label-caps-size);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ps-text);
}

.field input,
.field textarea,
.review-card {
  border-radius: var(--ps-radius);
}

.field input,
.field textarea {
  border: 1px solid var(--ps-border-subtle) !important;
  box-shadow: var(--ps-input-shadow) !important;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-width: 2px !important;
  border-color: var(--ps-border) !important;
  box-shadow: var(--ps-input-focus-glow) !important;
}

.status-in_review {
  border-color: var(--ps-action) !important;
  background: var(--ps-action) !important;
  color: var(--ps-action-on) !important;
}

.empty-state {
  background: var(--ps-background) !important;
  border-color: var(--ps-border-subtle) !important;
  color: var(--ps-text) !important;
}

/* Legacy header — hidden when twiniti-header is used */
.site-header {
  display: none !important;
}