/* ============================================================
   PTI - C2 "HARDENED" BASE STYLESHEET
   ------------------------------------------------------------
   Foundation layer for the pti-theme-v2 reskin (June 2026).
   Plain hand-written CSS - NO Tailwind (decided June 9).

   Source of truth:
     - Tokens:  config/design-tokens.json (version c2-hardened-1.0)
     - Mockup:  design-options/option-c2-hardened.html
     - Plan:    docs/REDESIGN-PLAN-2026-06.md section 2
   Fonts: assets/fonts/fonts.css (self-hosted, font-display: swap)

   Load order: fonts.css -> c2-base.css -> pti-components.css (restyled)
   This file owns: custom properties, resets, base typography,
   containers, and the core C2 component patterns. The full
   template reskin (next wave) builds on these classes and
   restyles the existing pti-* content-component contract -
   restyle, never rename.

   Hard rules: no emoji, no glyph stars (clip-path/SVG only),
   no fabricated stats, CTA text from config/link-config.json.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (mirror of config/design-tokens.json)
   ============================================================ */
:root {
  /* Neutrals - concrete & steel ramp */
  --white: #FFFFFF;
  --concrete: #F4F3F1;   /* page background */
  --cement: #ECEAE6;     /* subtle background, hairline row dividers */
  --aggregate: #D9D5CE;  /* card borders */
  --rebar: #B8B2A8;      /* faint text, empty stars */
  --steel: #827B6F;      /* muted text, dark-surface muted text */
  --iron: #5E574D;       /* secondary text */
  --forge: #3D3830;      /* body text */
  --anvil: #2A2621;      /* heavy 3px borders */
  --soot: #1A1815;       /* darkest surface, headings */

  /* Signal orange - high visibility, tool-industry standard */
  --signal: #D45B20;
  --signal-dark: #B34A18;
  --signal-wash: #FDF0E8;
  --signal-faint: #FEF8F4;

  /* Caution yellow - secondary emphasis */
  --caution: #C49B1A;
  --caution-wash: #FBF5E0;

  /* Status */
  --pass: #3A7D52;
  --pass-bg: #EDF6F0;
  --pass-border: #B0DFC4;
  --warn: #B93025;
  --warn-bg: #FCF0EE;
  --warn-border: #F5C6C2;

  /* Type */
  --font-head: 'Bitter', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'Space Mono', 'Courier New', monospace;

  /* Layout */
  --max: 1120px;        /* site shell */
  --content: 700px;     /* article measure */
  --gutter: 24px;

  /* Shape */
  --r: 4px;             /* standard radius */
  --r-sm: 2px;          /* tags, buttons, spec chips */
  --border-heavy: 3px solid var(--anvil);
  --border-card: 2px solid var(--aggregate);
  --border-hairline: 1px solid var(--aggregate);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 44px;
  --sp-12: 52px;
  --sp-14: 64px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--concrete);
  color: var(--forge);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Production rule: every <img> ships width+height attributes (CLS). */

a {
  color: var(--signal-dark);
}
a:hover {
  color: var(--signal);
}

/* ============================================================
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------
   Bitter 800 heads. Long-read prose runs Bitter 400 1.06rem/1.85
   (plan section 2 caveat: if 2,500-word reads test poorly on
   staging, switch .pti-prose to var(--font-body) and keep Bitter
   for headings only - that swap is ONE rule below, marked).
   Public Sans = UI. Space Mono = data/labels.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--soot);
  line-height: 1.15;
}

h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.c2-hero h1 {
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
}

/* Long-read article prose (single post body) */
.c2-prose > p {
  font-family: var(--font-head); /* LONG-READ SWAP POINT: change to var(--font-body) if staging read-tests fail */
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--forge);
  margin-bottom: 22px;
}
.c2-prose h2 {
  margin: 48px 0 18px;
  padding-left: 18px;
  border-left: 5px solid var(--signal);
  line-height: 1.2;
}
.c2-prose h3 {
  font-size: 1.05rem;
  margin: 32px 0 12px;
}
.c2-prose ul, .c2-prose ol {
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 22px 22px;
}
.c2-prose li {
  margin-bottom: 6px;
}
.c2-prose strong {
  color: var(--soot);
}

/* Data text helper - prices, specs, dates, counts */
.c2-data {
  font-family: var(--font-data);
  font-weight: 700;
}

/* Stamped micro-label type pattern (reused across components) */
.c2-microlabel {
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ============================================================
   4. CONTAINERS & SECTIONS
   ============================================================ */
.c2-shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.c2-content {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.c2-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-12) var(--gutter);
}

/* Section heading bar: 5px signal tab + heading + mono "view all" link */
.c2-section-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.c2-section-bar::before {
  content: '';
  width: 5px;
  height: 28px;
  background: var(--signal);
  border-radius: 1px;
  flex-shrink: 0;
}
.c2-section-bar h2 {
  font-size: 1.35rem;
  flex-grow: 1;
}
.c2-section-bar a {
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--iron);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.c2-section-bar a:hover {
  color: var(--signal-dark);
}

/* ============================================================
   5. CAUTION STRIP (top utility bar)
   ------------------------------------------------------------
   Copy rule: defensible claims only - no fabricated testing.
   ============================================================ */
.c2-caution-strip {
  background: var(--soot);
  padding: 10px var(--gutter);
  text-align: center;
  font-family: var(--font-data);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel);
  border-bottom: 3px solid var(--signal);
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.c2-caution-strip .hl {
  color: var(--signal);
}

/* ============================================================
   6. METRIC BAR (full-bleed dark stats strip)
   ------------------------------------------------------------
   Honest stats only - wire to real counts (post count, DB size),
   never hardcode "500+ tools tested".
   ============================================================ */
.c2-metric-bar {
  background: var(--soot);
  border-bottom: 3px solid var(--signal);
}
.c2-metric-bar .inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) {
  .c2-metric-bar .inner { grid-template-columns: repeat(2, 1fr); }
}
.c2-metric-cell {
  padding: var(--sp-5) var(--gutter);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.c2-metric-cell:last-child {
  border-right: none;
}
.c2-metric-val {
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--signal);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.c2-metric-label {
  font-family: var(--font-data);
  font-size: 0.58rem;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ============================================================
   7. STAMPED LABELS
   ------------------------------------------------------------
   Soot plate, signal mono text. Three placements:
   corner stamp (cards), inline tag (article top), dark-bar label.
   ============================================================ */
/* Corner stamp - absolute, parent needs position:relative */
.c2-stamp {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--soot);
  color: var(--signal);
  font-family: var(--font-data);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 5px 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0 0 var(--r) 0;
}

/* Inline tag (e.g. category above an article H1) */
.c2-tag {
  display: inline-block;
  background: var(--soot);
  color: var(--signal);
  font-family: var(--font-data);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 6px 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--r-sm);
}

/* Label inside a dark bar (product award, cred header) */
.c2-bar-label {
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.c2-bar-label svg {
  width: 16px;
  height: 16px;
  stroke: var(--signal);
  fill: none;
  stroke-width: 2;
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
/* Buy button - the revenue element. CTA text comes from
   config/link-config.json. rel: Amazon = nofollow sponsored
   noopener; HD/Lowe's/Walmart = nofollow noopener (NEVER sponsored). */
.c2-btn-go,
.pti-btn-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.c2-btn-go:hover,
.pti-btn-buy:hover {
  background: var(--signal-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(212, 91, 32, 0.25);
}
.c2-btn-go svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* CRITICAL REVENUE FIX: buy links inside post-content quick-pick
   tables must render as buttons, not plain text (v2 bug - selector
   was missing .pti-content table a). */
.pti-content table a[href*="amazon.com"],
.pti-content table a[href*="homedepot.com"],
.pti-content table a[href*="lowes.com"],
.pti-content table a[href*="walmart.com"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--signal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pti-content table a[href*="amazon.com"]:hover,
.pti-content table a[href*="homedepot.com"]:hover,
.pti-content table a[href*="lowes.com"]:hover,
.pti-content table a[href*="walmart.com"]:hover {
  background: var(--signal-dark);
  color: #fff;
}

/* Hard structural button - hero actions, secondary CTAs */
.c2-btn-hard {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 14px 28px;
  border-radius: var(--r);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all 0.15s;
  border: 3px solid;
  cursor: pointer;
}
.c2-btn-hard.fill {
  background: var(--soot);
  color: #fff;
  border-color: var(--soot);
}
.c2-btn-hard.fill:hover {
  background: var(--anvil);
  border-color: var(--anvil);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.c2-btn-hard.outline {
  background: transparent;
  color: var(--soot);
  border-color: var(--aggregate);
}
.c2-btn-hard.outline:hover {
  border-color: var(--soot);
  background: var(--cement);
}

/* ============================================================
   9. TABLES (quick-pick / comparison - the traffic engines)
   ------------------------------------------------------------
   3px anvil frame, soot head with signal mono headers, zebra
   rows, signal-faint hover. Applies to both the .c2-tbl class
   and bare tables inside post content (329 posts emit plain
   <table> markup - style the element inside .pti-content).
   ============================================================ */
.c2-tbl,
.pti-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border-heavy);
  border-radius: var(--r);
  overflow: hidden;
  margin: var(--sp-7) 0;
  font-size: 0.85rem;
  font-family: var(--font-body);
}
.c2-tbl thead,
.pti-content table thead {
  background: var(--soot);
}
.c2-tbl th,
.pti-content table th {
  padding: 13px 16px;
  text-align: left;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signal);
  border: none;
}
.c2-tbl tbody tr,
.pti-content table tbody tr {
  background: var(--white);
  transition: background 0.1s;
}
.c2-tbl tbody tr:nth-child(even),
.pti-content table tbody tr:nth-child(even) {
  background: var(--concrete);
}
.c2-tbl tbody tr:hover,
.pti-content table tbody tr:hover {
  background: var(--signal-faint);
}
.c2-tbl td,
.pti-content table td {
  padding: 14px 16px;
  border-top: 2px solid var(--cement);
  vertical-align: middle;
}

/* Horizontal scroll wrapper for wide tables on mobile */
.c2-tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table cell helpers (mockup .aw/.nm/.pr/.rt) */
.c2-cell-award {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.c2-cell-name { font-weight: 700; color: var(--soot); }
.c2-cell-price { font-family: var(--font-data); font-size: 0.82rem; font-weight: 700; }
.c2-cell-rating { color: var(--signal-dark); font-weight: 700; font-size: 0.82rem; }

/* ============================================================
   10. STAR RATINGS (CSS clip-path - never glyphs, never emoji)
   ============================================================ */
.c2-stars {
  display: inline-flex;
  gap: 1px;
  margin-right: var(--sp-1);
  vertical-align: middle;
}
.c2-star-f,
.c2-star-e {
  width: 11px;
  height: 11px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.c2-star-f { background: var(--signal); }
.c2-star-e { background: var(--rebar); }

/* ============================================================
   11. VERDICT BOX
   ============================================================ */
.c2-verdict {
  background: var(--signal-faint);
  border: 2px solid var(--signal);
  border-left: 6px solid var(--signal);
  border-radius: var(--r);
  padding: var(--sp-6) var(--sp-7);
  margin: var(--sp-7) 0;
}
.c2-verdict-label {
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.c2-verdict-label svg {
  width: 16px;
  height: 16px;
  stroke: var(--signal-dark);
  fill: none;
  stroke-width: 2.5;
}
.c2-verdict p {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--forge);
  line-height: 1.7;
}

/* ============================================================
   12. PROS / CONS ASSESSMENT PANELS
   ------------------------------------------------------------
   Markers are clip-path shapes, NOT content: glyphs - sidesteps
   the unquoted unquoted-glyph content bug class (check/cross marks) in v2 entirely.
   ============================================================ */
.c2-assess {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}
@media (max-width: 600px) {
  .c2-assess { grid-template-columns: 1fr; }
}
.c2-assess-pass,
.c2-assess-warn {
  padding: var(--sp-5);
  border-radius: var(--r);
  border: 2px solid;
}
.c2-assess-pass { background: var(--pass-bg); border-color: var(--pass-border); }
.c2-assess-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.c2-assess-pass h4,
.c2-assess-warn h4 {
  font-family: var(--font-data);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-3);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.c2-assess-pass h4 { color: var(--pass); }
.c2-assess-warn h4 { color: var(--warn); }
.c2-assess-pass h4 svg,
.c2-assess-warn h4 svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  fill: none;
}
.c2-assess-pass h4 svg { stroke: var(--pass); }
.c2-assess-warn h4 svg { stroke: var(--warn); }
.c2-assess-pass ul,
.c2-assess-warn ul {
  margin: 0;
}
.c2-assess-pass li,
.c2-assess-warn li {
  list-style: none;
  padding: 3px 0 3px 20px;
  font-size: 0.85rem;
  color: var(--forge);
  line-height: 1.5;
  position: relative;
  font-family: var(--font-body);
}
.c2-assess-pass li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  background: var(--pass);
  clip-path: polygon(20% 45%, 5% 65%, 40% 95%, 95% 20%, 75% 5%, 38% 70%);
}
.c2-assess-warn li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--warn);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

/* ============================================================
   13. SPECS STRIP (mono key/value chips)
   ============================================================ */
.c2-specs-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin: 22px 0;
}
.c2-spec {
  background: var(--concrete);
  border: var(--border-hairline);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.c2-spec .k {
  font-family: var(--font-data);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--steel);
  display: block;
  margin-bottom: 3px;
}
.c2-spec .v {
  font-family: var(--font-data);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--soot);
}

/* ============================================================
   14. PRODUCT BLOCK (review card with dark award bar)
   ============================================================ */
.c2-prod {
  background: var(--white);
  border: var(--border-heavy);
  border-radius: var(--r);
  margin: var(--sp-8) 0;
  overflow: hidden;
}
.c2-prod-bar {
  background: var(--soot);
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.c2-prod-msrp {
  font-family: var(--font-data);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.c2-prod-inner {
  padding: var(--sp-7) var(--gutter);
}
.c2-prod-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--soot);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
}
.c2-prod-stars {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: 0.85rem;
}
.c2-prod-stars .count {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--steel);
}
.c2-prod-inner > p {
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--forge);
  margin-bottom: var(--sp-4);
  font-weight: 400;
}

/* Multi-thumbnail photo grid (feeds from Creators API multi-image) */
.c2-prod-photo {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.c2-prod-photo-main {
  grid-column: 1 / -1;
  height: 260px;
  background: var(--cement);
  border: var(--border-card);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.c2-prod-photo-main img {
  max-height: 220px;
  max-width: 90%;
  width: auto;
  object-fit: contain;
}
.c2-prod-photo-thumb {
  height: 80px;
  background: var(--cement);
  border: var(--border-card);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.c2-prod-photo-thumb:hover {
  border-color: var(--signal);
}
.c2-prod-photo-thumb img {
  max-height: 60px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   15. CARDS (review cards, category tiles)
   ============================================================ */
.c2-card {
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--forge);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  display: block;
}
.c2-card:hover {
  border-color: var(--iron);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
  color: var(--forge);
}
.c2-card-img {
  height: 190px;
  background: var(--cement);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: var(--border-card);
}
.c2-card-img img {
  max-height: 150px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
}
.c2-card-body {
  padding: 18px 20px 22px;
}
.c2-card-body h3 {
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--soot);
  margin-bottom: 6px;
  line-height: 1.3;
}
.c2-card-date {
  font-family: var(--font-data);
  font-size: 0.65rem;
  color: var(--steel);
  margin-bottom: var(--sp-2);
}
.c2-card-body p {
  font-size: 0.82rem;
  color: var(--iron);
  line-height: 1.5;
}

/* Category tile variant - orange hover ring */
.c2-card.cat:hover {
  border-color: var(--signal);
  box-shadow: 0 4px 20px rgba(212, 91, 32, 0.08);
  transform: translateY(-2px);
}
.c2-card-icon {
  width: 44px;
  height: 44px;
  background: var(--signal-wash);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.c2-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--signal);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   16. RELATED LINKS / DISCLOSURE / FAQ
   ============================================================ */
.c2-related {
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--r);
  padding: var(--sp-6) var(--sp-7);
  margin: var(--sp-8) 0;
}
.c2-related h3 {
  font-family: var(--font-data);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
  margin-bottom: 14px;
  font-weight: 700;
}
.c2-related ul { list-style: none; margin: 0; }
.c2-related li { padding: 5px 0; }
.c2-related a {
  color: var(--forge);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.15s;
}
.c2-related a::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--signal);
  flex-shrink: 0;
}
.c2-related a:hover { color: var(--signal-dark); }

.c2-disclosure {
  background: var(--cement);
  border: var(--border-hairline);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  font-size: 0.78rem;
  color: var(--steel);
  line-height: 1.6;
  margin: var(--sp-8) 0;
}
.c2-disclosure a { color: var(--steel); }

.c2-faq { margin: var(--sp-10) 0; }
.c2-faq-item {
  border-bottom: 2px solid var(--aggregate);
  padding: 18px 0;
}
.c2-faq-item:first-child { border-top: 2px solid var(--aggregate); }
.c2-faq-item h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--soot);
  margin-bottom: var(--sp-2);
}
.c2-faq-item p {
  font-family: var(--font-head);
  font-size: 0.92rem;
  color: var(--iron);
  line-height: 1.7;
  font-weight: 400;
}

/* ============================================================
   17. ARTICLE TOP (post header band)
   ============================================================ */
.c2-article-top {
  background: var(--white);
  border-bottom: var(--border-heavy);
  padding: 36px var(--gutter) var(--sp-10);
  position: relative;
}
.c2-article-top::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100px;
  height: 3px;
  background: var(--signal);
}
.c2-crumb {
  font-family: var(--font-data);
  font-size: 0.68rem;
  color: var(--steel);
  margin-bottom: var(--sp-5);
}
.c2-crumb a { color: var(--iron); text-decoration: none; }
.c2-crumb a:hover { color: var(--signal); }
.c2-art-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--steel);
}
.c2-art-meta .mdot {
  width: 4px;
  height: 4px;
  background: var(--rebar);
  border-radius: 50%;
}

/* ============================================================
   18. DARK SURFACES (header chrome, cred block, footer)
   ------------------------------------------------------------
   Base patterns only; full header/footer markup lands with the
   template reskin. Wordmark = text placeholder until Sonesh's
   logo is ready.
   ============================================================ */
.c2-wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--soot);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
}
.c2-wordmark small {
  display: block;
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 0.52rem;
  color: var(--steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 1px;
}
/* Logo images (branding/make-logo-assets.py, approved logo_2 design) */
.c2-wordmark img {
  display: block;
  width: 198px;
  height: 44px;
}
.c2-footer-brand-name img {
  display: block;
  width: 180px;
  height: 40px;
}
.c2-cred-header img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.c2-cred-header svg {
  width: 16px;
  height: 16px;
  stroke: var(--signal);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.c2-cred-block {
  border: var(--border-heavy);
  border-radius: var(--r);
  overflow: hidden;
}
.c2-cred-header {
  background: var(--soot);
  color: var(--signal);
  padding: 14px 20px;
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.c2-cred-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 18px 20px;
  background: var(--white);
  border-bottom: 2px solid var(--cement);
}
.c2-cred-row:last-child { border-bottom: none; }
.c2-cred-num {
  font-family: var(--font-data);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--signal);
  min-width: 60px;
  flex-shrink: 0;
}
.c2-cred-info strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--soot);
  margin-bottom: 1px;
}
.c2-cred-info span {
  font-size: 0.75rem;
  color: var(--steel);
}

/* ============================================================
   19. UTILITIES
   ============================================================ */
.c2-dark { background: var(--soot); color: var(--steel); }
.c2-dark .hl { color: var(--signal); }
.c2-hide { display: none; }
.c2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   20. WIDE-TABLE FIX (2026-06-10)
   Quick-pick/comparison tables exceed the 700px article
   measure, hiding the Buy column behind horizontal scroll.
   Desktop (>=1180px): wide tables break out of the prose column
   to the 1120px shell; the inner table grows only as wide as it
   needs and stays centered.
   Below 1180px: the last column (Buy) pins sticky-right with a
   shadow so the CTA is always visible while the middle scrolls.
   ============================================================ */

/* All content tables get a scroll wrapper at the figure level
   (bare reference-chart tables included; harmless when it fits) */
.pti-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1180px) {
  .c2-content .pti-quick-pick,
  .c2-content .pti-comparison,
  .c2-content .pti-buy-links,
  .c2-content figure.wp-block-table:not(.pti-spec-table) {
    width: var(--max);
    margin-left: calc((var(--max) - 100%) / -2);
    margin-right: calc((var(--max) - 100%) / -2);
  }
  .c2-content .pti-quick-pick > table,
  .c2-content .pti-comparison > table,
  .c2-content .pti-buy-links > table,
  .c2-content figure.wp-block-table:not(.pti-spec-table) > table {
    width: auto;
    min-width: var(--content);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1179.98px) {
  /* overflow:hidden on the table makes the TABLE the sticky scrollport
     and the pin never engages. clip preserves the radius crop without
     becoming a scroll box. Extra .pti-content ancestor beats the
     equal-specificity overflow:hidden in pti-components.css, which
     loads after this file. */
  .pti-content .pti-quick-pick > table,
  .pti-content .pti-comparison > table,
  .pti-content .pti-buy-links > table {
    overflow: clip;
  }
  /* Pin the Buy column only in tables whose LAST column actually holds
     a retailer CTA (column order varies across 329 posts; pinning a
     mid-table CTA would overlap the columns after it). */
  .pti-content :is(.pti-quick-pick, .pti-comparison, .pti-buy-links)
    > table:has(tbody td:last-child :is(a[href*="amazon.com"], a[href*="homedepot.com"], a[href*="lowes.com"], a[href*="walmart.com"]))
    :is(th, td):last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -8px 0 8px -6px rgba(26, 24, 21, 0.25);
  }
}

@media (max-width: 480px) {
  /* let table CTAs wrap so the pinned Buy column stays compact */
  .pti-content table a[href*="amazon.com"],
  .pti-content table a[href*="homedepot.com"],
  .pti-content table a[href*="lowes.com"],
  .pti-content table a[href*="walmart.com"] {
    white-space: normal;
    padding: 8px 12px;
    max-width: 120px;
    text-align: center;
  }
}