/* ============================================================
   Sections Detail Page (sections/show.php) -- /comparisons/{slug}, /guides/{slug},
   /roadmaps/{slug}, /resources/{slug}, /case-studies/{slug}.

   Kept in its own file rather than assets/css/style.css (on request) because this page's
   .article-content rules intentionally OVERRIDE the global .prose, .article-content system
   already defined in style.css (used by blog/article.php -- 17px/1.9 line-height, a
   var(--secondary)-colored h2, a var(--primary)-based blockquote, etc.). Both files reuse
   the exact same unscoped .article-content class name, so appending this block after the
   existing rules in the same stylesheet would let it win by source order and silently
   corrupt blog/article.php's typography/theming for every blog article page. A dedicated
   file loaded only by this page keeps the override local without duplicating it inline.
   ============================================================ */
.article-content { font-size: 16px; line-height: 1.8; }
.article-content h2, .article-content h3 { margin-top: 1.75rem; font-weight: 700; }
.article-content > :first-child { margin-top: 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.article-content th, .article-content td { border: 1px solid #dee2e6; padding: 10px 14px; }
.article-content th { background: #f8f9fa; font-weight: 700; }
.article-content blockquote { border-left: 4px solid #0d6efd; padding-left: 1rem; color: #6c757d; margin: 1.5rem 0; }

/* ============================================================
   Comparisons + Roadmaps long-form blocks (added 5 Oct 2026)
   Classes used by the stored HTML of /comparisons/* and /roadmaps/*.
   Works in every site theme: colours are translucent tints, text inherits.
   ============================================================ */

/* ---------- Comparison table: desktop = real table, mobile = one card per row ---------- */
.article-content .cmp-wrap { margin: 1.5rem 0 2rem; border: 1px solid var(--border, #e2e8f0); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(10,35,66,.08); }
.article-content .cmp-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.65; }
.article-content .cmp-table th, .article-content .cmp-table td { border: 0; border-bottom: 1px solid var(--border, #e2e8f0); border-right: 1px solid var(--border, #e2e8f0); padding: 12px 16px; vertical-align: top; text-align: left; }
.article-content .cmp-table th:last-child, .article-content .cmp-table td:last-child { border-right: 0; }
.article-content .cmp-table tbody tr:last-child > * { border-bottom: 0; }
.article-content .cmp-table thead th { background: linear-gradient(135deg, #0a2342, #4a2a85); color: #fff; font-size: 14.5px; letter-spacing: .2px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.18); }
.article-content .cmp-table thead th:nth-child(2) { background: linear-gradient(135deg, #0d6efd, #0a58ca); }
.article-content .cmp-table thead th:nth-child(3) { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.article-content .cmp-table thead th:nth-child(4) { background: linear-gradient(135deg, #059669, #047857); }
.article-content .cmp-table tbody th { background: rgba(10,35,66,.06); font-weight: 700; width: 20%; min-width: 120px; }
.article-content .cmp-table tbody tr:nth-child(even) td { background: rgba(127,127,127,.05); }
.article-content .cmp-table tbody tr:hover td { background: rgba(13,110,253,.07); }
.article-content .cmp-table td .cmp-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; margin-right: 6px; background: rgba(5,150,105,.14); color: #047857; }
.article-content .cmp-table td .cmp-tag.warn { background: rgba(232,93,4,.14); color: #c2410c; }
.article-content .cmp-table td .cmp-tag.mid { background: rgba(244,162,97,.2); color: #b45309; }

@media (max-width: 767.98px) {
    .article-content .cmp-wrap { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
    .article-content .cmp-table, .article-content .cmp-table tbody, .article-content .cmp-table tr, .article-content .cmp-table th, .article-content .cmp-table td { display: block; width: 100%; }
    .article-content .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .article-content .cmp-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .article-content .cmp-table tbody tr { margin: 0 0 16px; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(10,35,66,.07); }
    .article-content .cmp-table tbody th { width: 100%; min-width: 0; background: linear-gradient(135deg, #0a2342, #4a2a85); color: #fff; padding: 10px 14px; font-size: 15px; border: 0; }
    .article-content .cmp-table td { border: 0; border-bottom: 1px solid var(--border, #e2e8f0); padding: 10px 14px 12px; background: transparent !important; }
    .article-content .cmp-table td:last-child { border-bottom: 0; }
    .article-content .cmp-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; color: #0d6efd; }
    .article-content .cmp-table td:nth-of-type(2)::before { color: #7c3aed; }
    .article-content .cmp-table td:nth-of-type(3)::before { color: #059669; }
}

/* ---------- Comparison: side-by-side pros/cons cards, quick-verdict, notes ---------- */
.article-content .cmp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.25rem 0 1.75rem; }
.article-content .cmp-card { border: 1px solid var(--border, #e2e8f0); border-top: 5px solid #0d6efd; border-radius: 14px; padding: 16px 18px 6px; background: rgba(13,110,253,.04); }
.article-content .cmp-card.b { border-top-color: #7c3aed; background: rgba(124,58,237,.045); }
.article-content .cmp-card.c { border-top-color: #059669; background: rgba(5,150,105,.05); }
.article-content .cmp-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.article-content .cmp-card ul { padding-left: 1.1rem; }
@media (max-width: 767.98px) { .article-content .cmp-cards { grid-template-columns: 1fr; } }

.article-content .cmp-verdict, .article-content .rm-callout, .article-content .rm-mistakes {
    border-radius: 14px; padding: 14px 18px; margin: 1.5rem 0; border: 1px solid rgba(13,110,253,.25); border-left: 5px solid #0d6efd; background: rgba(13,110,253,.06);
}
.article-content .cmp-verdict > :last-child, .article-content .rm-callout > :last-child, .article-content .rm-mistakes > :last-child { margin-bottom: 0; }
.article-content .cmp-verdict strong.cmp-vt, .article-content .rm-callout strong.rm-ct { display: block; margin-bottom: 4px; }
.article-content .cmp-verdict.warn, .article-content .rm-mistakes { border-color: rgba(232,93,4,.3); border-left-color: #e85d04; background: rgba(232,93,4,.07); }
.article-content .cmp-verdict.ok { border-color: rgba(5,150,105,.3); border-left-color: #059669; background: rgba(5,150,105,.07); }

/* ---------- Roadmap: snapshot strip + vertical timeline of phases ---------- */
.article-content .rm-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 1.25rem 0 1.75rem; }
.article-content .rm-snap { border-radius: 14px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #0a2342, #4a2a85); box-shadow: 0 6px 18px rgba(10,35,66,.16); }
.article-content .rm-snap:nth-child(2) { background: linear-gradient(135deg, #0d6efd, #0a58ca); }
.article-content .rm-snap:nth-child(3) { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.article-content .rm-snap:nth-child(4) { background: linear-gradient(135deg, #059669, #047857); }
.article-content .rm-snap small { display: block; opacity: .85; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 2px; }
.article-content .rm-snap b { display: block; font-size: 1.05rem; line-height: 1.35; }

.article-content .rm-timeline { position: relative; margin: 1.5rem 0 2rem; padding-left: 0; }
.article-content .rm-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #0d6efd, #7c3aed 50%, #059669); opacity: .45; }
.article-content .rm-phase { position: relative; padding-left: 62px; margin: 0 0 22px; --rm-c: #0d6efd; --rm-t: rgba(13,110,253,.06); }
.article-content .rm-phase.c2 { --rm-c: #7c3aed; --rm-t: rgba(124,58,237,.06); }
.article-content .rm-phase.c3 { --rm-c: #059669; --rm-t: rgba(5,150,105,.06); }
.article-content .rm-phase.c4 { --rm-c: #e85d04; --rm-t: rgba(232,93,4,.06); }
.article-content .rm-phase.c5 { --rm-c: #db2777; --rm-t: rgba(219,39,119,.06); }
.article-content .rm-phase.c6 { --rm-c: #0891b2; --rm-t: rgba(8,145,178,.06); }
.article-content .rm-num { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--rm-c); box-shadow: 0 0 0 5px var(--body-bg, #fff), 0 6px 14px rgba(0,0,0,.18); }
.article-content .rm-card { border: 1px solid var(--border, #e2e8f0); border-left: 5px solid var(--rm-c); border-radius: 14px; padding: 14px 18px 8px; background: var(--rm-t); box-shadow: 0 4px 16px rgba(10,35,66,.06); }
.article-content .rm-card h3 { margin: 4px 0 8px; font-size: 1.12rem; }
.article-content .rm-time { display: inline-block; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--rm-c); border-radius: 999px; padding: 2px 12px; letter-spacing: .2px; }
.article-content .rm-check { list-style: none; padding-left: 0; margin: .5rem 0 .9rem; }
.article-content .rm-check li { position: relative; padding: 4px 0 4px 30px; }
.article-content .rm-check li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 21px; height: 21px; line-height: 21px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--rm-c); border-radius: 50%; }
.article-content .rm-goal { display: block; margin: .6rem 0 .9rem; padding: 8px 12px; border-radius: 10px; background: rgba(127,127,127,.08); font-size: 14.5px; }
.article-content .rm-goal b { color: var(--rm-c); }
.article-content .rm-mistakes ul { padding-left: 1.15rem; margin-bottom: 0; }
.article-content .rm-mistakes strong.rm-ct { display: block; margin-bottom: 4px; }

@media (max-width: 575.98px) {
    .article-content .rm-timeline::before { left: 17px; }
    .article-content .rm-phase { padding-left: 50px; }
    .article-content .rm-num { width: 38px; height: 38px; font-size: 1rem; }
    .article-content .rm-card { padding: 12px 14px 6px; }
    .article-content .rm-snapshot { grid-template-columns: 1fr 1fr; }
}
@media print { .article-content .cmp-wrap, .article-content .rm-card { box-shadow: none; } .article-content .rm-timeline::before { display: none; } }


/* ============================================================
   Resources long-form blocks (/resources/{slug}) -- appended to show.css, 5 Oct 2026.
   Used by the Resources pages: official-website guides, complaint ladders, scam awareness,
   document checklists, books/learning lists and the rule-change digest.
   Colours are translucent tints and inherit text colour, so dark / sepia themes keep working.
   ============================================================ */
.article-content .rs-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.25rem; }
.article-content .rs-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: rgba(107,47,160,.10); border: 1px solid rgba(107,47,160,.22); color: #6b2fa0; }
.article-content .rs-meta span::before { content: "\F28B"; font-family: "bootstrap-icons"; font-size: .9em; }
.article-content .rs-callout { border-radius: 14px; padding: 14px 18px; margin: 1.5rem 0; border: 1px solid rgba(13,110,253,.25); border-left: 5px solid #0d6efd; background: rgba(13,110,253,.06); }
.article-content .rs-callout.rs-warn { border-color: rgba(232,93,4,.3); border-left-color: #e85d04; background: rgba(232,93,4,.07); }
.article-content .rs-callout.rs-ok { border-color: rgba(5,150,105,.3); border-left-color: #059669; background: rgba(5,150,105,.07); }
.article-content .rs-callout > strong { display: block; margin-bottom: 4px; }
.article-content .rs-callout > :last-child { margin-bottom: 0; }
/* numbered steps */
.article-content ol.rs-steps { list-style: none; counter-reset: rs; padding: 0; margin: 1.25rem 0; }
.article-content ol.rs-steps > li { counter-increment: rs; position: relative; padding: 6px 0 14px 54px; min-height: 46px; }
.article-content ol.rs-steps > li::before { content: counter(rs); position: absolute; left: 0; top: 2px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6b2fa0, #9333ea); box-shadow: 0 4px 10px rgba(107,47,160,.28); }
.article-content ol.rs-steps > li::after { content: ""; position: absolute; left: 18px; top: 44px; bottom: 2px; width: 2px; background: rgba(107,47,160,.18); }
.article-content ol.rs-steps > li:last-child::after { display: none; }
.article-content ol.rs-steps > li > strong { display: block; }
/* checklist */
.article-content ul.rs-check { list-style: none; padding: 0; margin: 1.1rem 0; }
.article-content ul.rs-check > li { position: relative; padding: 7px 10px 7px 38px; margin-bottom: 6px; border-radius: 10px; background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.16); }
.article-content ul.rs-check > li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 11px; top: 7px; color: #059669; font-size: 1.05rem; }
/* complaint / escalation ladder */
.article-content .rs-ladder { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.article-content .rs-rung { position: relative; margin-left: 18px; padding: 14px 18px 12px 26px; border-left: 3px solid #6b2fa0; background: rgba(107,47,160,.045); border-radius: 0 14px 14px 0; margin-bottom: 14px; }
.article-content .rs-rung:nth-child(2) { border-left-color: #0d6efd; background: rgba(13,110,253,.05); }
.article-content .rs-rung:nth-child(3) { border-left-color: #0891b2; background: rgba(8,145,178,.05); }
.article-content .rs-rung:nth-child(4) { border-left-color: #e85d04; background: rgba(232,93,4,.06); }
.article-content .rs-rung:nth-child(n+5) { border-left-color: #64748b; background: rgba(100,116,139,.06); }
.article-content .rs-rung h3 { margin: 4px 0 6px; font-size: 1.08rem; }
.article-content .rs-rung > :last-child { margin-bottom: 0; }
.article-content .rs-badge { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .02em; padding: 2px 11px; border-radius: 99px; color: #fff; background: #6b2fa0; }
.article-content .rs-rung:nth-child(2) .rs-badge { background: #0d6efd; }
.article-content .rs-rung:nth-child(3) .rs-badge { background: #0891b2; }
.article-content .rs-rung:nth-child(4) .rs-badge { background: #e85d04; }
.article-content .rs-rung:nth-child(n+5) .rs-badge { background: #64748b; }
/* official portal card */
.article-content .rs-portal { border: 1px solid rgba(107,47,160,.22); border-top: 5px solid #6b2fa0; border-radius: 16px; padding: 16px 20px 14px; margin: 1.1rem 0; background: rgba(107,47,160,.035); box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.article-content .rs-portal h3 { margin: 0 0 4px; font-size: 1.12rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-content .rs-portal > p { margin-bottom: 8px; }
.article-content .rs-portal ul { padding-left: 1.1rem; margin-bottom: 10px; }
.article-content .rs-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 99px; color: #047857; background: rgba(5,150,105,.14); border: 1px solid rgba(5,150,105,.3); }
.article-content a.rs-visit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; padding: 5px 14px; border-radius: 99px; text-decoration: none; color: #fff !important; background: linear-gradient(135deg, #6b2fa0, #9333ea); }
.article-content a.rs-visit::after { content: "\F1C5"; font-family: "bootstrap-icons"; font-size: .85em; }
.article-content a.rs-visit:hover { filter: brightness(1.1); }
/* tables (same stack-on-mobile pattern as comparison tables) */
.article-content .rs-tblwrap { margin: 1.25rem 0 1.6rem; border-radius: 14px; overflow: hidden; border: 1px solid rgba(107,47,160,.2); }
.article-content table.rs-tbl { width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.article-content table.rs-tbl th, .article-content table.rs-tbl td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid rgba(107,47,160,.14); text-align: left; }
.article-content table.rs-tbl thead th { background: linear-gradient(135deg, #4c1d95, #6b2fa0); color: #fff; font-weight: 700; }
.article-content table.rs-tbl tbody tr:nth-child(even) { background: rgba(107,47,160,.04); }
.article-content table.rs-tbl tbody th[scope=row] { font-weight: 700; }
@media (max-width: 767.98px) {
    .article-content table.rs-tbl thead { display: none; }
    .article-content table.rs-tbl, .article-content table.rs-tbl tbody, .article-content table.rs-tbl tr, .article-content table.rs-tbl th, .article-content table.rs-tbl td { display: block; width: 100%; }
    .article-content table.rs-tbl tr { padding: 8px 0; border-bottom: 3px solid rgba(107,47,160,.16); }
    .article-content table.rs-tbl td, .article-content table.rs-tbl th[scope=row] { border-bottom: 0; padding: 4px 14px; }
    .article-content table.rs-tbl th[scope=row] { font-size: 1.02rem; padding-top: 8px; }
    .article-content table.rs-tbl td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b2fa0; }
    .article-content ol.rs-steps > li { padding-left: 48px; }
}
@media print { .article-content a.rs-visit { color: #000 !important; background: none; padding: 0; } .article-content .rs-portal, .article-content .rs-rung { box-shadow: none; break-inside: avoid; } }

/* ---------- Resources: "next to read" card at the end of a resource page ---------- */
.rs-next { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 18px; border-radius: 14px; text-decoration: none; color: inherit; border: 1px solid rgba(107,47,160,.25); background: rgba(107,47,160,.05); transition: transform .15s, box-shadow .15s; }
.rs-next:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107,47,160,.14); color: inherit; }
.rs-next .rs-next-k { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b2fa0; }
.rs-next .rs-next-t { font-weight: 700; line-height: 1.3; }
.rs-next i { font-size: 1.4rem; color: #6b2fa0; }