/*!
 * Network Consultants — nc-master.css
 * Single stylesheet for all site-wide tokens and component styles.
 * Lives on DreamHost, enqueued once in functions.php (see nc-wp-integration.md).
 *
 * RULE: page-level WP HTML blocks should contain plain markup + class names
 * only — no inline <style> tags, no inline style="" attributes for anything
 * covered by a token below. Edit a color/font here once; every block that
 * uses the token picks it up automatically.
 *
 * Naming convention: `nc-` prefix for site-wide primitives and the shared
 * card component; `nctools-` for the one genuinely different card variant
 * (Diagnostic Tools — a clickable link with a hover state, not a static
 * info card). `ncs-`/`ncc-` are the two diagnostic widgets, which
 * currently self-inject their own scoped CSS — candidates to fold in here
 * later, not done yet.
 */

/* ======================================================================
   1. TOKENS — change a value here, it updates everywhere that uses it.
   ====================================================================== */
:root {
  /* Brand */
  --nc-accent:        #8C00DF;
  --nc-accent-ink:    #6900A7;   /* darker shade, for hover/active states */
  --nc-accent-dim:    rgba(140, 0, 223, 0.25);
  --nc-accent-faint:  rgba(140, 0, 223, 0.08);

  /* Surface — true black site background */
  --nc-bg:            #000000;
  --nc-card:          rgba(255, 255, 255, 0.04);   /* neutral card lift off pure black */
  --nc-card-border:   rgba(255, 255, 255, 0.08);

  /* Text */
  --nc-ink:           #FFFFFF;
  --nc-muted:         #9AA3B2;
  --nc-muted-dim:     #6B7280;

  /* Severity — tuned for contrast against true black (the widgets' original
     values were designed for a light background and read as muddy/low-contrast
     on black) */
  --nc-ok:            #22C55E;
  --nc-warn:          #F59E0B;
  --nc-crit:          #EF4444;

  /* Type */
  --nc-font-display:  'Inter', sans-serif;
  --nc-font-mono:     'JetBrains Mono', monospace;

  /* Radius / rhythm */
  --nc-radius:        4px;
  --nc-section-pad:   56px;
}

/* ======================================================================
   2. PRIMITIVES — small reusable pieces (badges, eyebrows, headings)
   ====================================================================== */
.nc-eyebrow {
  display: inline-block;
  border: 1px solid var(--nc-accent);
  color: var(--nc-accent);
  font-family: var(--nc-font-mono);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: var(--nc-radius);
  background: var(--nc-accent-faint);
}

.nc-h2 {
  color: var(--nc-ink);
  font-family: var(--nc-font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.nc-lede {
  color: var(--nc-muted);
  font-family: var(--nc-font-display);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 0 32px;
}


/* ======================================================================
   3. COMPONENT — Shared card grid. Used for the proof band ("Common
   Failure Modes"), How We Work's 5-step process, and the Six Signals
   grid — these were originally three near-identical components with
   different class names (ncdb-*, nchw-*, ncsig-*), which was pure
   duplication once the numbering/code labels were removed. One
   component now: a card with a purple mono-uppercase title and a
   muted description, nothing else varies between contexts.

   Ordering note: if a set of cards is genuinely sequential (e.g. How We
   Work's steps), rely on left-to-right/top-to-bottom reading order and
   semantically-ordered names (Discover before Diagnose, etc.) rather
   than a numbered prefix — deliberately dropped per design review.
   ====================================================================== */
.nc-block-body {
  width: 100%;
  max-width: 1200px;
  margin: 32px auto 0 auto;   /* top-margin-only convention, see Section 4 of ref-html-blocks.md */
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.nc-block-body * { box-sizing: border-box; }

.nc-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.nc-card {
  background: var(--nc-card);
  border: 1px solid var(--nc-card-border);
  border-top: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius);
  padding: 22px 20px;
}
.nc-card-title {
  font-family: var(--nc-font-mono);
  color: var(--nc-accent);
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.nc-card-desc {
  font-family: var(--nc-font-display);
  color: var(--nc-muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* ======================================================================
   4. COMPONENT — Diagnostic Tools callout. A card grid, built to hold
   more tools as they go live (Response Delay Calculator, After-Hours
   Opportunity Calculator are roadmap items — do NOT add placeholder
   cards for them here; a card only appears once the tool is real).
   ====================================================================== */
.nctools-body {
  width: 100%;
  max-width: 1200px;
  margin: 32px auto 0 auto;   /* top-margin-only convention */
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.nctools-body * { box-sizing: border-box; }

.nctools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.nctools-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--nc-card);
  border: 1px solid var(--nc-card-border);
  border-top: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius);
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.nctools-card:hover { border-color: var(--nc-accent); }

.nctools-card-label {
  font-family: var(--nc-font-mono);
  color: var(--nc-accent);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nctools-card-title {
  font-family: var(--nc-font-display);
  color: var(--nc-ink);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}
.nctools-card-desc {
  font-family: var(--nc-font-display);
  color: var(--nc-muted);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}
.nctools-card-action {
  font-family: var(--nc-font-mono);
  color: var(--nc-accent);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: auto;
}

/* ======================================================================
   6. COMPONENT — Proof Page Signal Cards. Four structured sub-fields per
   card (What We Look For / Why It Matters / Common Observation / Example),
   genuinely different from the shared title+description card — a new
   component, not a stretch of an existing one.
   ====================================================================== */
.ncproof-body {
  width: 100%;
  max-width: 1200px;
  margin: 32px auto 0 auto;   /* top-margin-only convention */
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.ncproof-body * { box-sizing: border-box; }

.ncproof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.ncproof-card {
  background: var(--nc-card);
  border: 1px solid var(--nc-card-border);
  border-top: 3px solid var(--nc-accent);
  border-radius: var(--nc-radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ncproof-signal-name {
  font-family: var(--nc-font-display);
  color: var(--nc-ink);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}

.ncproof-field { margin: 0; }

.ncproof-field-label {
  display: block;
  font-family: var(--nc-font-mono);
  color: var(--nc-accent);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.ncproof-field-text {
  font-family: var(--nc-font-display);
  color: var(--nc-muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
}

/* "What We Didn't Find" — plain prose, no card grid, matches the native-
   block treatment used for Why Network Consultants. Kept as a distinct
   block so it visually reads as a narrative pause, not another data card. */
.ncproof-narrative {
  width: 100%;
  max-width: 800px;
  margin: 32px auto 0 auto;   /* top-margin-only convention */
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.ncproof-narrative p {
  font-family: var(--nc-font-display);
  color: var(--nc-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ======================================================================
   7. COMPONENT — RankMath FAQ block override, themed to match nc- tokens
   ====================================================================== */
.rank-math-block-nc,
.rank-math-block {
  font-family: var(--nc-font-display);
}
.rank-math-block .rank-math-question {
  color: var(--nc-ink);
  font-family: var(--nc-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--nc-card-border);
}
.rank-math-block .rank-math-answer {
  color: var(--nc-muted);
  font-family: var(--nc-font-display);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}