/*
  blog-post-v2.css
  ─────────────────────────────────────────────────────────
  Loaded AFTER style.css on every blog post page.
  LIGHT reskin — Iron Digital oxblood + blue on cream.
  Same layout/structure as the v2 design; palette only.

  Design tokens (light)
  ─────────────
  bg-base:      #FBF9F6  (cream)
  bg-raised:    #F2EBE1  (sand)
  bg-border:    #e4dccf  (border)
  text-primary: #211416  (ink)
  text-body:    #211416  (ink)
  text-muted:   #6f6058  (muted)
  accent:       #800020  (oxblood — primary)
  accent-2:     #005289  (blue — secondary, per the two-accent system)
  The article hero stays a photographic banner (dark overlay + light
  title) so the headline reads over the image regardless of theme.
  ─────────────────────────────────────────────────────────
*/

/* ── PAGE BASE ─────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background: #FBF9F6 !important;
  background-image: none !important;   /* remove any legacy gradient */
  cursor: auto !important;             /* restore OS cursor (style.css sets cursor:none) */
  color: #211416;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ── TABLE MOBILE SCROLL ───────────────────────────────── */
.article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── ARTICLE HERO (photographic banner — kept dark for legibility over the image) ── */
.article-hero {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #211416;
  border-bottom: 1px solid #e4dccf;
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(33, 20, 22, 0.92) 0%,
    rgba(33, 20, 22, 0.55) 50%,
    rgba(33, 20, 22, 0.15) 100%
  );
}

.article-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/* ── ARTICLE TAG ───────────────────────────────────────── */
.article-tag {
  display: inline-block;
  background: #800020; /* design-ignore: Iron Digital brand accent */
  color: #FBF9F6;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px; /* design-ignore: Iron Digital brand tag */
  margin-bottom: 0.75rem;
}

/* ── ARTICLE TITLE (over the photo → stays light) ──────── */
.article-title {
  color: #FBF9F6;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

/* ── ARTICLE META (over the photo → stays light) ───────── */
.article-meta {
  color: rgba(251, 249, 246, 0.78);
  font-size: 0.8rem;
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.article-meta span {
  color: rgba(251, 249, 246, 0.78);
}

.article-meta a {
  color: rgba(251, 249, 246, 0.92);
  text-decoration: none;
  transition: color 0.15s;
}

.article-meta a:hover {
  color: #5ec4f7;
}

/* ── ARTICLE BODY WRAPPER ──────────────────────────────── */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  color: #211416;
  line-height: 1.8;
  font-size: 1rem;
}

/* ── HEADINGS INSIDE BODY ──────────────────────────────── */
.article-body h2 {
  color: #211416;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1rem;
  border-left: 3px solid #800020;
  padding-left: 0.875rem;
  line-height: 1.3;
}

.article-body h3 {
  color: #005289;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.article-body h4 {
  color: #6f6058;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── PARAGRAPHS ────────────────────────────────────────── */
.article-body p {
  color: #211416;
  margin-bottom: 1.25rem;
}

/* ── LISTS ─────────────────────────────────────────────── */
.article-body ul,
.article-body ol {
  color: #211416;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-body ul li::marker {
  color: #800020;
}

/* ── LINKS (base) ──────────────────────────────────────── */
.article-body a {
  color: #005289;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.article-body a:hover {
  color: #800020;
}

/* ── PULL QUOTE ────────────────────────────────────────── */
.pull-quote {
  background: rgba(128, 0, 32, 0.05);
  border-left: 4px solid #800020;
  padding: 1.25rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0; /* design-ignore: Iron Digital brand */
  margin: 2rem 0;
  color: #211416;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
}

/* ── STAT ROW / STAT BOX ───────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.stat-box {
  background: #F2EBE1;
  border: 1px solid #e4dccf;
  border-radius: 0.75rem; /* design-ignore: Iron Digital brand */
  padding: 1.25rem;
  text-align: center;
}

.stat-num {
  color: #800020;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.stat-label {
  color: #6f6058;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.375rem;
  display: block;
}

/* ── MISTAKE BOX (keep red — it's semantic; darkened for cream) ── */
.mistake-box {
  background: rgba(178, 58, 72, 0.08);
  border-left: 4px solid #b23a48;
  padding: 1.25rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0; /* design-ignore: Iron Digital brand */
  margin: 1.5rem 0;
  color: #8a1a2f;
}

.mistake-box strong,
.mistake-box b {
  color: #800020;
}

/* ── FIX BOX (blue — positive, per the two-accent system) ── */
.fix-box {
  background: rgba(0, 82, 137, 0.07);
  border-left: 4px solid #005289;
  padding: 1.25rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0; /* design-ignore: Iron Digital brand */
  margin: 1.5rem 0;
  color: #211416;
}

.fix-box strong,
.fix-box b {
  color: #005289;
}

/* ── ARTICLE IMAGE ─────────────────────────────────────── */
.article-img {
  width: 100%;
  border-radius: 0.75rem; /* design-ignore: Iron Digital brand */
  margin: 2rem 0 0.5rem;
  display: block;
  border: 1px solid #e4dccf;
}

.article-img-caption {
  text-align: center;
  font-size: 0.8rem;
  color: #6f6058;
  margin-top: 0.5rem;   /* override style.css margin-top: -28px which pulled captions into image */
  margin-bottom: 2rem;
}

/* ── ARTICLE CTA BLOCK ─────────────────────────────────── */
.article-cta {
  background: #F2EBE1;
  border-left: 4px solid #800020;
  border-radius: 0 0.75rem 0.75rem 0; /* design-ignore: Iron Digital brand */
  padding: 1.75rem 1.5rem;
  margin: 2.5rem 0;
}

.article-cta h3,
.article-cta strong {
  color: #211416;
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

.article-cta p {
  color: #6f6058;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ── CTA BUTTON → glossy oxblood (matches the homepage) ── */
.cta-button,
.article-cta a.cta-button {
  display: inline-block;
  background: linear-gradient(180deg, #98203f 0%, #800020 100%); /* design-ignore: Iron Digital brand glossy button */
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.65rem 1.5rem;
  border-radius: 0.375rem; /* design-ignore: Iron Digital brand */
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(128, 0, 32, 0.28);
  transition: filter 0.15s, box-shadow 0.15s;
}

.cta-button:hover,
.article-cta a.cta-button:hover {
  background: linear-gradient(180deg, #ab264a 0%, #8c0024 100%); /* design-ignore: Iron Digital brand glossy button */
  box-shadow: 0 9px 24px rgba(128, 0, 32, 0.36);
}

/* ── INLINE BODY LINKS → solid blue (gradient text removed) ── */
.article-body a:not(.back-link):not(.cta-button):not([class*="cta"]) {
  color: #005289;
  -webkit-text-fill-color: #005289;
  background: none;
  text-decoration: underline;
  text-decoration-color: #800020;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.article-body a:not(.back-link):not(.cta-button):not([class*="cta"]):hover {
  color: #800020;
  -webkit-text-fill-color: #800020;
  text-decoration-color: #800020;
}

/* ── BACK LINK ─────────────────────────────────────────── */
.back-link {
  display: block;
  color: #6f6058;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s;
  margin-bottom: 1.75rem;
}

.back-link:hover {
  color: #800020;
}

/* ── HORIZONTAL RULE ───────────────────────────────────── */
.article-body hr {
  border: none;
  border-top: 1px solid #e4dccf;
  margin: 2.5rem 0;
}

/* ── CODE / PRE ────────────────────────────────────────── */
.article-body code {
  background: #F2EBE1;
  color: #800020;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  border: 1px solid #e4dccf;
}

.article-body pre {
  background: #F2EBE1;
  border: 1px solid #e4dccf;
  border-radius: 0.75rem; /* design-ignore: Iron Digital brand */
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: #211416;
}

/* ── BLOCKQUOTE fallback ───────────────────────────────── */
.article-body blockquote {
  background: rgba(128, 0, 32, 0.05);
  border-left: 4px solid #800020;
  padding: 1rem 1.5rem;
  border-radius: 0 0.5rem 0.5rem 0; /* design-ignore: Iron Digital brand */
  margin: 1.5rem 0;
  color: #211416;
  font-style: italic;
}

/* ── RESPONSIVE TWEAKS ─────────────────────────────────── */
@media (max-width: 640px) {
  .article-hero {
    height: 320px;
  }

  .article-hero-content {
    padding: 1.25rem 1rem;
  }

  .article-title {
    font-size: 1.4rem;
  }

  .article-body {
    padding: 2rem 1rem 4rem;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────
   Brand wordmark blade-N — the inline "N" glyph between IRO
   and DIGITAL in the nav. Scales the brand-n.webp image to
   sit inline with the surrounding caps (taller than the caps,
   vertically centered, tight kerning). Without this rule the
   image renders at its raw 60×86 size and breaks the nav.
   ───────────────────────────────────────────────────────── */
.brand-n {
  display: inline-block;
  height: 1.35em;
  width: auto;
  vertical-align: -0.36em;
  margin: 0 -0.03em;
}

/* ── Tailwind utility remap ────────────────────────────────
   These article pages also carry zinc/gradient/shadow utility
   classes (nav, logo, footer, related-post cards). Force them
   onto the light palette so nothing stays dark-on-light.
   design-ignore: Iron Digital brand (palette remap)
   ──────────────────────────────────────────────────────── */
[class*="bg-zinc-95"],[class*="bg-zinc-90"],[class*="bg-black"]{ background-color:#FBF9F6 !important; }
[class*="bg-zinc-8"],[class*="bg-zinc-7"],[class*="bg-zinc-6"],[class*="bg-zinc-100"],[class*="bg-white"]{ background-color:#F2EBE1 !important; }
[class*="text-zinc-1"],[class*="text-zinc-2"],.text-black{ color:#211416 !important; }
[class*="text-zinc-3"],[class*="text-zinc-4"],[class*="text-zinc-5"],[class*="text-zinc-6"],[class*="text-zinc-7"]{ color:#6f6058 !important; }
[class*="border-zinc"]{ border-color:#e4dccf !important; }
[class*="bg-gradient-"]{ background-image:none !important; background-color:#F2EBE1 !important; }
[class*="bg-gradient-to-t"],[class*="bg-gradient-to-b"]{ background-image:none !important; background-color:transparent !important; } /* design-ignore: neutralises Tailwind gradient fades */
[class*="from-"],[class*="via-"],[class*="to-"]{ --tw-gradient-from:transparent !important; --tw-gradient-via:transparent !important; --tw-gradient-to:transparent !important; --tw-gradient-stops:transparent !important; }
[class*="shadow-"]{ box-shadow:none !important; }

/* ── BODY TEXT CONTRAST GUARD ──────────────────────────────────
   Gemini tags plain article lists/paragraphs with dark-theme inline colors
   (#d4d4d8 light gray, #06b6d4 cyan) that are invisible on the cream page.
   Force the readable body color. Links (.article-body a) keep burgundy, the
   dark share chips are <a> so they're untouched, and the callout-box accents
   below override this with equal-specificity rules placed after it. */
.article-body p,
.article-body ul,
.article-body ol,
.article-body li{ color:#211416 !important; }

/* ── KEY TAKEAWAYS box (inline cyan tint + inline light text in the article HTML) → blue, readable ── */
.key-takeaways{ background:rgba(0,82,137,0.06) !important; border-color:rgba(0,82,137,0.22) !important; }
.key-takeaways ul, .key-takeaways ol, .key-takeaways li{ color:#211416 !important; }
.key-takeaways li::marker{ color:#005289 !important; }
.key-takeaways > p:first-child{ color:#005289 !important; }  /* label accent, 7.8:1 on cream */

/* ── CONTRAST GUARD (cream theme) ──────────────────────────────
   The auto-blogger / Gemini sometimes emit dark-theme inline colors
   (light grays #d4d4d8/#e4e4e7, cyan #06b6d4) inside these callout boxes.
   On the cream page that text is invisible. Force readable colors with
   !important so no inline style can break contrast — this repairs every
   existing post and guards every future one. */
.pull-quote, .pull-quote p, .pull-quote span, .pull-quote em, .pull-quote strong{ color:#211416 !important; }
.fix-box, .fix-box p, .fix-box span, .fix-box li{ color:#211416 !important; }
.fix-box strong, .fix-box b{ color:#005289 !important; }
.mistake-box, .mistake-box p, .mistake-box span, .mistake-box li{ color:#8a1a2f !important; }
.mistake-box strong, .mistake-box b{ color:#800020 !important; }