/* ════════════════════════════════════════════════════════
   blogcta.css — the free-risk-checker call to action on blog posts

   WHY THIS FILE EXISTS, AND WHY IT IS NOT TAILWIND
   ------------------------------------------------
   This component was first written with Tailwind utilities from
   `static/css/website.css`, on the reasoning that the base template loads
   that sheet on every page, so one partial would style itself identically on
   both blog systems. Every class was checked against the compiled file. It
   still did not work, and nothing failed:

   `website.css` is Tailwind v4, which puts its utilities inside `@layer`.
   **An unlayered rule beats a layered one no matter what the specificities
   are.** `blog.css` is unlayered, so its `:where(.blog-inner) p` — specificity
   0,0,1 — overrode `.text-amber-700` and `.text-slate-600` on all 34 static
   posts, collapsing the eyebrow, the heading and the body copy to one colour.
   The 12 DB-driven posts do not load `blog.css`, so there the utilities won.
   One component, two appearances, and the rendered page looked plausible in
   both because the colour it fell back to is a readable dark ink.

   ⭐ A screenshot could not catch this and neither could any assertion about
   the text. It was found by reading the COMPUTED colour off the rendered
   element and noticing three different classes reporting one value.

   So the component owns its colours here, unlayered, and wins on both halves
   of the blog by the same mechanism that broke it.

   ⚠️ Every value below is literal ON PURPOSE. `blog.css` defines --navy,
   --amber and --ink-on-navy INSIDE its `.blog-hero, .blog-body` selector
   rather than at :root, so a var() here resolves to nothing on any page that
   is not a static blog post.

   ⚠️ A per-page stylesheet link is NOT inherited from the base template. Both
   blog templates must link this file, and
   `EveryRiskCtaCarriesItsStylesheetTest` fails the build if a page renders the
   markup without serving the CSS.

   Contrast, measured on the painted pixel (4.5:1 floor):
     #b45309 eyebrow on #f8fafc   4.80:1
     #0f172a heading on #f8fafc  17.06:1
     #475569 body    on #f8fafc   7.24:1
     #0a1628 label   on #f59e0b   8.44:1   (dark on amber — never white)

   These are READ OFF THE RENDERED PAGE, not computed from a table. The
   eyebrow is the one with no margin left: amber-700 is 5.05:1 on pure white,
   which is the figure `rules-frontend.md` quotes, and 4.80:1 on this box's
   slate-50 — still over the 4.5 floor, but do not darken the background
   further without re-measuring.
════════════════════════════════════════════════════════ */

.oicta {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: 4px solid #f59e0b;
  padding: 28px;
  margin: 64px 0 40px;
}

.oicta-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}

.oicta-head {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #0f172a;
}

.oicta-body {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: #475569;
}

/* 44px minimum target: 13px text on a 1.2 line-box plus 2x15px padding. */
.oicta-btn {
  display: inline-block;
  padding: 15px 28px;
  background: #f59e0b;
  color: #0a1628;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  transition: background-color 0.15s ease;
}

.oicta-btn:hover,
.oicta-btn:focus-visible {
  background: #fbbf24;
  color: #0a1628;
  text-decoration: none;
}

@media (max-width: 640px) {
  .oicta { padding: 22px; margin: 48px 0 32px; }
  .oicta-btn { display: block; text-align: center; }
}