/* ============================================================
   Compat styles for blog posts imported from the old Next.js site.
   Those bodies carry Tailwind utility classes and rely on its typography plugin ("prose"), neither of which
   this site (Bootstrap 5 + site.css) has. This is NOT Tailwind: only the classes the imported posts use,
   mapped to the site palette, every rule scoped under .cx-prose and loaded on blog post pages only.
   Utilities are !important because Bootstrap's own .p-3 / .border / .bg-white / .mb-4 / .gap-3 are
   !important and mean something different (Bootstrap p-5 = 3rem, Tailwind p-5 = 1.25rem).
   The class list is tests/fixtures/blog-compat-classes.txt; BlogTest fails if one loses its rule.
   ============================================================ */

.cx-prose {
  --bc-teal-50: #EAF4F6; --bc-teal-100: #D2E7EC; --bc-teal-200: #A9CFD8; --bc-teal-300: #7FB4C1;
  --bc-teal-600: var(--cx-teal); --bc-teal-700: #2F5E6C;
  --bc-navy: var(--cx-dark); --bc-navy-50: #EDF3F5; --bc-navy-100: #D3E0E5;
  --bc-amber-100: #FEF3C7; --bc-gray-100: #F3F4F6; --bc-gray-200: #E5E7EB; --bc-gray-500: #6B7280; --bc-gray-700: #374151;
}

/* ---------- Prose parity (the live <article> was Tailwind "prose"; Bootstrap has no equivalent) ---------- */
.cx-prose p { margin: 1.25em 0; }
.cx-prose strong { color: var(--bc-navy); font-weight: 600; }
/* WCAG 1.4.1: a link in running text is told apart from the text by more than colour. Buttons keep none:
   Bootstrap .btn and the site's own .btn-cx-primary / .btn-cx-outline / ... (any class containing "btn"). */
.cx-prose a:not([class*="btn"]) { text-decoration: underline; text-underline-offset: 2px; }
.cx-prose ul, .cx-prose ol { margin: 1.25em 0; padding-left: 1.6em; }
.cx-prose li { margin: .5em 0; }
.cx-prose blockquote {
  margin: 1.5em 0; padding: .4em 1.5em; border-left: 4px solid var(--bc-teal-600);
  background: rgba(234, 244, 246, .6); color: var(--bc-navy); font-style: normal;
}
.cx-prose blockquote p { margin: .6em 0; }
.cx-prose code { padding: .15em .4em; border-radius: 6px; background: var(--bc-teal-50); color: var(--bc-teal-700); font-size: .875em; }
.cx-prose img { height: auto; box-shadow: 0 10px 30px -14px rgba(31, 54, 61, .35); }

/* Tables: up to 8 columns in the imports, so they scroll sideways on a phone instead of stretching the page. */
.cx-prose table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: .9em; line-height: 1.6; }
.cx-prose th { padding: .65em .85em; text-align: left; vertical-align: bottom; font-weight: 600; color: var(--bc-navy); background: var(--cx-ice); border-bottom: 2px solid var(--bc-teal-200); }
.cx-prose td { padding: .65em .85em; vertical-align: top; border-bottom: 1px solid rgba(64, 121, 140, .18); }
.cx-prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .cx-prose table { display: block; overflow-x: auto; } }

/* ---------- Tailwind's "not-prose" escape hatch: these blocks style themselves ---------- */
.cx-prose .not-prose p, .cx-prose .not-prose ul, .cx-prose .not-prose li { margin: 0; }
.cx-prose .not-prose ul { padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.cx-prose .flex { display: flex !important; }
.cx-prose .flex-col { flex-direction: column !important; }
.cx-prose .items-center { align-items: center !important; }
.cx-prose .text-center { text-align: center !important; }
.cx-prose .grid { display: grid !important; }
.cx-prose .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cx-prose .inline-block { display: inline-block !important; }
.cx-prose .gap-1\.5 { gap: .375rem !important; }
.cx-prose .gap-3 { gap: .75rem !important; }
.cx-prose .gap-4 { gap: 1rem !important; }
.cx-prose .space-y-2\.5 > * + * { margin-top: .625rem !important; }
@media (min-width: 640px) {
  .cx-prose .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cx-prose .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ---------- Spacing ---------- */
.cx-prose .my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.cx-prose .mb-2 { margin-bottom: .5rem !important; }
.cx-prose .mb-4 { margin-bottom: 1rem !important; }
.cx-prose .p-3 { padding: .75rem !important; }
.cx-prose .p-5 { padding: 1.25rem !important; }
.cx-prose .p-6 { padding: 1.5rem !important; }
.cx-prose .px-3 { padding-left: .75rem !important; padding-right: .75rem !important; }
.cx-prose .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
@media (min-width: 1024px) {
  .cx-prose .lg\:p-6 { padding: 1.5rem !important; }
  .cx-prose .lg\:p-7 { padding: 1.75rem !important; }
}

/* ---------- Boxes: borders, radius, backgrounds ---------- */
.cx-prose .rounded-xl { border-radius: .75rem !important; }
.cx-prose .rounded-2xl { border-radius: 1rem !important; }
.cx-prose .rounded-full { border-radius: 9999px !important; }
.cx-prose .border { border: 1px solid var(--bc-gray-200) !important; }
.cx-prose .border-2 { border: 2px solid var(--bc-gray-200) !important; }
.cx-prose .border-gray-100 { border-color: var(--bc-gray-100) !important; }
.cx-prose .border-gray-200 { border-color: var(--bc-gray-200) !important; }
.cx-prose .border-teal-100 { border-color: var(--bc-teal-100) !important; }
.cx-prose .border-teal-200 { border-color: var(--bc-teal-200) !important; }
.cx-prose .border-teal-300 { border-color: var(--bc-teal-300) !important; }
.cx-prose .border-amber-100 { border-color: var(--bc-amber-100) !important; }
.cx-prose .border-navy-100 { border-color: var(--bc-navy-100) !important; }
.cx-prose .bg-white { background-color: #fff !important; }
.cx-prose .bg-navy-50 { background-color: var(--bc-navy-50) !important; }
.cx-prose .bg-teal-50\/40 { background-color: rgba(234, 244, 246, .4) !important; }
.cx-prose .from-teal-50 { --bc-from: var(--bc-teal-50); }
.cx-prose .to-white { --bc-to: #fff; }
.cx-prose .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--bc-from, transparent), var(--bc-to, transparent)) !important; }

/* ---------- Type ---------- */
.cx-prose .text-xs { font-size: .75rem !important; line-height: 1rem !important; }
.cx-prose .text-sm { font-size: .875rem !important; line-height: 1.25rem !important; }
.cx-prose .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.cx-prose .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
@media (min-width: 1024px) { .cx-prose .lg\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } }
.cx-prose .font-medium { font-weight: 500 !important; }
.cx-prose .font-bold { font-weight: 700 !important; }
.cx-prose .uppercase { text-transform: uppercase !important; }
.cx-prose .tracking-widest { letter-spacing: .1em !important; }
.cx-prose .leading-relaxed { line-height: 1.625 !important; }
.cx-prose .text-gray-500 { color: var(--bc-gray-500) !important; }
.cx-prose .text-gray-700 { color: var(--bc-gray-700) !important; }
.cx-prose .text-teal-600 { color: var(--bc-teal-600) !important; }
.cx-prose .text-teal-700 { color: var(--bc-teal-700) !important; }
.cx-prose .text-navy-600, .cx-prose .text-navy-700 { color: var(--bc-navy) !important; }