/* =========================================================
   BLOG DARK RE-SKIN
   Blog posts are generated by the n8n pipeline in a light
   (white/slate) template and are server-managed, so they can't
   be edited per-file. This sheet re-skins their inline styles
   to the v3 dark design. Loaded only on /blog/:slug via pageCss,
   scoped to body.blog-post. Attribute selectors + !important
   beat the inline declarations (which carry no !important).
   ========================================================= */

/* ---------- light section backgrounds -> dark ---------- */
body.blog-post [style*="background: #ffffff"],
body.blog-post [style*="background:#ffffff"],
body.blog-post [style*="background: #fff;"],
body.blog-post [style*="background: #f8fafc"],
body.blog-post [style*="background:#f8fafc"],
body.blog-post [style*="background: #f1f5f9"],
body.blog-post [style*="background:#f1f5f9"],
body.blog-post [style*="background: #f0fdf4"],
body.blog-post [style*="background:#f0fdf4"]{
  background: #0a0f1c !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* full-width white content sections get the page background instead of card tone */
body.blog-post section[style*="background: #ffffff"],
body.blog-post section[style*="background:#ffffff"],
body.blog-post section[style*="background: #f8fafc"],
body.blog-post section[style*="background:#f8fafc"]{
  background: #05070d !important;
}

/* light gradient hero/callout fills -> dark tints */
body.blog-post [style*="background: linear-gradient(135deg, #eff6ff"],
body.blog-post [style*="background: linear-gradient(135deg, #dbeafe"]{
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(59,130,246,.04)) !important;
  border-color: rgba(59,130,246,.3) !important;
}
body.blog-post [style*="background: linear-gradient(135deg, #fef3c7"],
body.blog-post [style*="background: linear-gradient(135deg, #fff7ed"]{
  background: linear-gradient(135deg, rgba(247,166,0,.10), rgba(247,166,0,.04)) !important;
  border-color: rgba(247,166,0,.3) !important;
}
body.blog-post [style*="background: linear-gradient(135deg, #f0fdf4"]{
  background: linear-gradient(135deg, rgba(16,229,140,.10), rgba(16,229,140,.04)) !important;
  border-color: rgba(16,229,140,.3) !important;
}

/* light callout cards -> dark tinted cards */
body.blog-post [style*="background: #fef3c7"],
body.blog-post [style*="background:#fef3c7"]{
  background: rgba(247,166,0,.08) !important;
  border-color: rgba(247,166,0,.3) !important;
}
body.blog-post [style*="background: #fee2e2"],
body.blog-post [style*="background:#fee2e2"],
body.blog-post [style*="background: #fef2f2"],
body.blog-post [style*="background:#fef2f2"]{
  background: rgba(255,92,108,.08) !important;
  border-color: rgba(255,92,108,.3) !important;
}

/* ---------- dark-on-light text -> light-on-dark ---------- */
body.blog-post [style*="color: #0f172a"], body.blog-post [style*="color:#0f172a"]{ color:#eef2fa !important; }
body.blog-post [style*="color: #1e293b"], body.blog-post [style*="color:#1e293b"]{ color:#e2e8f0 !important; }
body.blog-post [style*="color: #334155"], body.blog-post [style*="color:#334155"]{ color:#c3cde0 !important; }
body.blog-post [style*="color: #475569"], body.blog-post [style*="color:#475569"]{ color:#a5b1c7 !important; }
body.blog-post [style*="color: #64748b"], body.blog-post [style*="color:#64748b"]{ color:#94a0b8 !important; }

/* dark accent text (made for light callouts) -> bright accents */
body.blog-post [style*="color: #92400e"], body.blog-post [style*="color:#92400e"],
body.blog-post [style*="color: #78350f"], body.blog-post [style*="color:#78350f"]{ color:#fbbf24 !important; }
body.blog-post [style*="color: #991b1b"], body.blog-post [style*="color:#991b1b"],
body.blog-post [style*="color: #7f1d1d"], body.blog-post [style*="color:#7f1d1d"]{ color:#ff8a95 !important; }
body.blog-post [style*="color: #1e40af"], body.blog-post [style*="color:#1e40af"],
body.blog-post [style*="color: #1e3a5f"], body.blog-post [style*="color:#1e3a5f"]{ color:#93c5fd !important; }
body.blog-post [style*="color: #166534"], body.blog-post [style*="color:#166534"],
body.blog-post [style*="color: #15803d"], body.blog-post [style*="color:#15803d"]{ color:#34d399 !important; }

/* ---------- light borders -> dark lines ---------- */
body.blog-post [style*="border: 1px solid #e2e8f0"],
body.blog-post [style*="border: 2px solid #e2e8f0"],
body.blog-post [style*="border: 1px solid #cbd5e1"],
body.blog-post [style*="border-top: 1px solid #e2e8f0"],
body.blog-post [style*="border-bottom: 1px solid #e2e8f0"]{
  border-color: rgba(255,255,255,.09) !important;
}

/* tables generated with light zebra rows */
body.blog-post [style*="background: #f9fafb"], body.blog-post [style*="background:#f9fafb"]{ background:#0d1526 !important; }

/* keep images readable: white product screenshots get a subtle frame */
body.blog-post section img{ border-radius: 12px; }

/* ---------- mobile: generated tables scroll inside their own box ---------- */
body.blog-post table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}