/* Content pages (M10): article header, body typography, sidebar, page header with image, drafts table. */
.article-header, .page-header--image { position: relative; background: var(--color-bg-alt); padding: var(--space-5) 0; overflow: hidden; }
.article-header--image, .page-header--image { background: var(--color-dark); color: var(--color-on-dark); }
.article-header__image, .page-header__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.article-header__content { position: relative; text-align: center; max-width: 860px; }
.article-header h1 { margin: 0; }
.article-header--image h1, .page-header--image h1 { color: var(--color-on-dark); }
.page-header--image .container { position: relative; }
.article-header__service-icon { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto var(--space-2); border-radius: 50%; border: 3px solid var(--color-brand); background: var(--color-bg); }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); font-size: var(--font-size-small); color: var(--color-muted); margin-bottom: var(--space-2); }
.article-header--image .article-meta, .article-header--image .article-meta a { color: #e0e0e0; }
.article-meta__category { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem; }

.rich-text { font-size: 1.0625rem; line-height: 1.75; max-width: 760px; }
.rich-text h2 { font-size: 1.5rem; margin-top: var(--space-5); }
.rich-text h3 { margin-top: var(--space-4); }
.rich-text ul, .rich-text ol { padding-left: 1.4em; margin: 0 0 var(--space-3); }
.rich-text li { margin-bottom: var(--space-1); }
.rich-text img { border-radius: var(--radius); }
.rich-text blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-brand); background: var(--color-bg-alt); }
.rich-text table { border-collapse: collapse; width: 100%; margin-bottom: var(--space-3); display: block; overflow-x: auto; }
.rich-text td, .rich-text th { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); }
.page-body { margin: 0 auto; }
.article-find { margin: var(--space-4) 0; }
.article-find .btn { white-space: normal; text-align: center; }
.article-tags { font-size: var(--font-size-small); color: var(--color-muted); }
.share-links { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); font-weight: 600; }
.share-links span { color: var(--color-muted); font-weight: 400; }

.article-sidebar .sidebar-section { margin-bottom: var(--space-5); }
.article-sidebar h2 { font-size: 1.125rem; color: var(--color-brand-text); }
.article-sidebar .form-panel h2 { color: var(--color-on-brand); }
.search-form--sidebar .form-field { margin-bottom: var(--space-2); }
.search-form--sidebar label { font-size: var(--font-size-small); }
.sidebar-posts { list-style: none; margin: 0; padding: 0; }
.sidebar-posts li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.sidebar-posts a { font-weight: 600; display: block; }
.sidebar-posts time { font-size: .8125rem; color: var(--color-muted); }

.drafts-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.drafts-table th, .drafts-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); vertical-align: top; }
/* Live article bodies use h4-h6 as subheadings (57 x h6); keep them readable. */
.rich-text h4 { font-size: 1.1875rem; margin-top: var(--space-4); }
.rich-text h5 { font-size: 1.125rem; margin-top: var(--space-4); }
.rich-text h6 { font-size: 1.0625rem; margin-top: var(--space-4); text-transform: none; letter-spacing: 0; }

/* How It Works: call to action for debt counsellors (tester #14). */
.dc-cta { max-width: 760px; margin: var(--space-5) auto 0; padding: var(--space-4); background: var(--color-bg-alt);
          border-left: 4px solid var(--color-brand); border-radius: var(--radius-card); }
.dc-cta h2 { font-size: 1.375rem; margin-bottom: var(--space-2); }
.dc-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
.dc-cta__claim { font-weight: 600; }