/*
 * JusticeSA editorial theme
 * Inspired by the visual language of The Common Sense (South Africa):
 * charcoal surfaces, burnt-orange accent, strong editorial typography,
 * compact uppercase navigation and flatter, sharper content panels.
 * This is an original JusticeSA treatment; no third-party logos or assets are copied.
 */

:root {
    --bg: #1b2125;
    --bg-alt: #22292e;
    --header: #171c20;
    --accent: #dc5200;
    --accent-soft: rgba(220, 82, 0, .14);
    --accent-danger: #e15b4b;
    --text: #f4f0e7;
    --muted: #b9bbb8;
    --border: #3b4348;
    --card: #232a2f;
    --surface: #1f262a;
    --card-hover: #2b3338;
    --highlight: #2b3338;
    --radius-lg: .35rem;
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .24);
    --editorial-serif: Georgia, "Times New Roman", Times, serif;
    --editorial-sans: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.theme-light {
    --bg: #f1ede4;
    --bg-alt: #faf7f0;
    --header: #171c20;
    --accent: #cf4c00;
    --accent-soft: rgba(207, 76, 0, .11);
    --accent-danger: #a8342b;
    --text: #1c2226;
    --muted: #62676a;
    --border: #cec7ba;
    --card: #fffdf8;
    --surface: #f7f2e9;
    --card-hover: #ece5da;
    --highlight: #ece5da;
}

html { scroll-behavior: smooth; }

body.bg-app,
body.theme-light.bg-app {
    background: var(--bg);
    color: var(--text);
    font-family: var(--editorial-sans);
}

main { min-height: 65vh; }

/* Header: compact, high-contrast editorial masthead */
.bg-header {
    background: #171c20 !important;
    backdrop-filter: none;
    border-bottom: 3px solid var(--accent) !important;
    box-shadow: none !important;
}

.navbar { min-height: 72px; }

.navbar-brand {
    color: #fff !important;
    text-decoration: none;
}

.logo-mark {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 2px;
    background: var(--accent);
    color: #fff;
    box-shadow: none;
    font-family: var(--editorial-serif);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

.navbar-brand > span:last-child {
    color: #fff !important;
    font-family: var(--editorial-serif);
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: .025em;
}

.navbar .nav-link {
    position: relative;
    padding: .8rem .62rem !important;
    color: rgba(255,255,255,.78);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
}

.navbar .nav-link.active {
    color: #fff;
}

.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    right: .62rem;
    bottom: .35rem;
    left: .62rem;
    height: 2px;
    background: var(--accent);
}

.navbar-toggler {
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 2px;
}

/* Buttons: flatter, rectangular, publication-like */
.btn-accent,
body.theme-light .btn-accent {
    border: 1px solid var(--accent);
    border-radius: 2px;
    background: var(--accent);
    color: #fff !important;
    box-shadow: none;
    font-weight: 800;
    letter-spacing: .035em;
}

.btn-accent:hover,
.btn-accent:focus,
body.theme-light .btn-accent:hover,
body.theme-light .btn-accent:focus {
    border-color: #f06a19;
    background: #f06a19;
    color: #fff !important;
    filter: none;
}

.btn-outline-soft,
body.theme-light .btn-outline-soft {
    border: 1px solid var(--border);
    border-radius: 2px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    font-weight: 700;
}

.bg-header .btn-outline-soft,
.bg-header .btn-language {
    border-color: rgba(255,255,255,.28);
    color: rgba(255,255,255,.88);
    background: transparent;
}

.btn-outline-soft:hover,
.btn-outline-soft:focus,
body.theme-light .btn-outline-soft:hover,
body.theme-light .btn-outline-soft:focus {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

.bg-header .btn-outline-soft:hover,
.bg-header .btn-outline-soft:focus,
.bg-header .btn-language:hover,
.bg-header .btn-language:focus {
    border-color: var(--accent);
    background: rgba(220,82,0,.13);
    color: #fff;
}

.btn-language,
body.theme-light .btn-language {
    border-radius: 2px;
    background: transparent;
    color: #fff;
    font-weight: 750;
}

.support-nav-button.is-active {
    outline: 2px solid rgba(220,82,0,.35);
}

/* Editorial type hierarchy */
h1, h2,
.section-title,
.hero-title,
.justice-hero h1,
.justice-wealth-heading h2,
.justice-ai-heading h2,
.justice-home-campaigns-heading h2,
.justice-section-heading h2,
.justice-featured-campaign h2,
.justice-research-band h2,
.justice-final-cta h2,
.justice-status-heading h2,
.justice-credibility-band h2,
.support-hero h1,
.evidence-hero h1,
.evidence-section-heading h2,
.wealth-page h1,
.wealth-page h2,
.bee-page h1,
.bee-page h2 {
    font-family: var(--editorial-serif);
    font-weight: 700;
    letter-spacing: -.025em;
}

.section-kicker,
.justice-eyebrow,
.support-eyebrow,
.evidence-eyebrow,
.wealth-eyebrow,
.bee-eyebrow {
    color: var(--accent) !important;
    font-family: var(--editorial-sans);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.card-app,
.card-soft,
.support-option-card,
.campaign-detail-hero,
.dropdown-menu {
    border-radius: 3px;
    background: var(--card);
    border-color: var(--border);
    box-shadow: none;
}

.card-app { background: var(--card); }

.dropdown-item:hover,
.dropdown-item:focus { background: var(--card-hover); }

.pill,
.support-badge,
.justice-estimate-tag {
    border-radius: 2px;
}

/* Home / landing page */
.justice-landing {
    --justice-blue: var(--accent);
    --justice-blue-soft: var(--accent-soft);
}

.justice-hero {
    min-height: min(620px, calc(100vh - 105px));
    border: 1px solid var(--border);
    border-top: 5px solid var(--accent);
    border-radius: 3px;
    background: #20272b;
    box-shadow: none;
}

.justice-hero-overlay {
    background:
        linear-gradient(110deg, rgba(0,0,0,.20), transparent 55%),
        linear-gradient(180deg, transparent 72%, rgba(0,0,0,.18));
}

.justice-hero h1 {
    color: #f7f2e9;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .98;
}

.justice-hero h1 span { color: var(--accent); }
.justice-hero-lead { color: #e5e1d9; }
.justice-hero-principle { border-left-color: var(--accent); color: #c4c3be; }

.justice-hero .btn-outline-soft {
    border-color: rgba(255,255,255,.32);
    border-radius: 2px;
    background: transparent;
    color: #f3eee6;
}

.justice-hero .btn-outline-soft:hover {
    border-color: var(--accent);
    background: rgba(220,82,0,.12);
}

.justice-hero-trust span {
    border-color: rgba(255,255,255,.18);
    border-radius: 2px;
    background: rgba(0,0,0,.16);
    color: #d9d7d1;
}

.justice-hero-panel {
    border: 1px solid #454d52;
    border-left: 4px solid var(--accent);
    border-radius: 2px;
    background: #181e22;
    backdrop-filter: none;
    box-shadow: none;
}

.justice-hero-panel blockquote { font-family: var(--editorial-serif); }
.justice-text-link { color: #ff6a17; }
.justice-text-link:hover { color: #fff; }

/* Landing page explainer: true white treatment in light mode.
   Shared by the English and Afrikaans home pages. */
body.theme-light .justice-hero-explainer {
    background: #fff !important;
    border-color: #d6d0c5;
    border-top-color: var(--accent);
    color: #1c2226;
}

body.theme-light .justice-hero-explainer .justice-hero-overlay {
    display: none;
    background: none;
}

body.theme-light .justice-hero-explainer h1 {
    color: #1c2226;
}

body.theme-light .justice-hero-explainer h1 span,
body.theme-light .justice-hero-explainer .justice-eyebrow,
body.theme-light .justice-hero-explainer .section-kicker {
    color: var(--accent) !important;
}

body.theme-light .justice-hero-explainer .justice-hero-lead {
    color: #343b3f;
}

body.theme-light .justice-hero-explainer .justice-hero-principle {
    color: #62676a;
    border-left-color: var(--accent);
}

body.theme-light .justice-hero-explainer .justice-legal-identity {
    color: #6b7073;
}

body.theme-light .justice-hero-explainer .btn-outline-soft {
    border-color: #7d817f;
    background: #fff;
    color: #1c2226;
}

body.theme-light .justice-hero-explainer .btn-outline-soft:hover,
body.theme-light .justice-hero-explainer .btn-outline-soft:focus {
    border-color: var(--accent);
    background: #f7f2e9;
    color: #1c2226;
}

body.theme-light .justice-hero-explainer .justice-hero-trust span {
    border-color: #d8d2c8;
    background: #f7f2e9;
    color: #444b4f;
}

body.theme-light .justice-hero-explainer .justice-hero-panel {
    border-color: #d6d0c5;
    border-left-color: var(--accent);
    background: #fff;
    color: #1c2226;
}

body.theme-light .justice-hero-explainer .justice-hero-panel blockquote {
    color: #1c2226;
}

body.theme-light .justice-hero-explainer .justice-model-note {
    color: #62676a;
}

body.theme-light .justice-hero-explainer .justice-text-link {
    color: var(--accent);
}

body.theme-light .justice-hero-explainer .justice-text-link:hover,
body.theme-light .justice-hero-explainer .justice-text-link:focus {
    color: #8f3600;
}

.justice-ai-inquiry,
.justice-home-campaigns,
.justice-wealth-highlight,
.justice-campaign-status,
.justice-credibility-band,
.justice-final-cta {
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    box-shadow: none;
}

.justice-ai-inquiry,
.justice-wealth-highlight {
    border-top: 4px solid var(--accent);
}

.justice-wealth-highlight {
    background: var(--card);
}

.justice-wealth-highlight::before { display: none; }

.justice-wealth-callout {
    border: 1px solid rgba(220,82,0,.45);
    border-radius: 2px;
    background: var(--accent-soft);
}

.justice-wealth-callout strong { color: var(--accent); }

.justice-original-prompt-text {
    border-radius: 2px;
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface) 92%, #000 8%);
}

.justice-wealth-table-wrap {
    border-radius: 2px;
    background: var(--surface);
}

.justice-wealth-table thead th {
    background: #181e22;
    color: #f7f2e9;
    border-color: #41494e;
}

.justice-wealth-table tbody th {
    background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
}

body.theme-light .justice-wealth-table thead th {
    background: #20262a;
    color: #fff;
}

.justice-ai-card,
.justice-home-campaign-card,
.justice-purpose-card,
.justice-campaign-questions,
.justice-research-stats div,
.justice-status-grid > div,
.justice-how-grid article {
    border-radius: 2px;
    border-color: var(--border);
    background: var(--card);
    box-shadow: none;
}

.justice-ai-prompt-card,
.justice-ai-result-card,
.justice-home-campaign-card-primary,
.justice-purpose-card,
.justice-featured-campaign,
.justice-research-band {
    background: var(--card);
}

.justice-ai-prompt-card,
.justice-home-campaign-card-primary {
    border-top: 3px solid var(--accent);
}

.justice-ai-result-card { border-left: 3px solid var(--accent); }

.justice-ai-card-label span,
.justice-home-campaign-number,
.justice-purpose-icon,
.justice-how-grid article > span,
.justice-research-stats strong,
.justice-campaign-questions li span,
.justice-campaign-legal-question strong,
.justice-home-update-link a {
    color: var(--accent) !important;
}

.justice-ai-conclusion,
.justice-campaign-legal-question {
    border-left-color: var(--accent);
    border-radius: 0;
    background: var(--accent-soft);
}

.justice-ai-sources a {
    border-radius: 2px;
}

.justice-purpose-card:hover {
    transform: none;
    border-color: var(--accent);
}

.justice-featured-campaign {
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 3px;
    box-shadow: none;
}

.justice-campaign-summary { color: var(--accent); }

.justice-research-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.justice-campaign-status { border-left: 4px solid var(--accent); }
.justice-status-progress .progress { border-radius: 0; background: #42494d; }
.justice-status-progress .progress-bar { background: var(--accent); }

.justice-credibility-band { border-top: 3px solid var(--accent); }
.justice-final-cta { border-bottom: 4px solid var(--accent); }

/* Support / funding pages */
.support-home-cta,
.support-hero,
.support-principles {
    border-radius: 3px;
    background: var(--card);
    box-shadow: none;
}

.support-home-cta,
.support-hero { border-top: 4px solid var(--accent); }
.support-home-cta::after { color: rgba(220,82,0,.07); }
.support-hero::before { display: none; }
.support-hero h1 span,
.support-hero-mark span { color: var(--accent); }
.support-hero-mark {
    border-color: rgba(220,82,0,.45);
    border-radius: 2px;
    background: var(--accent-soft);
    box-shadow: none;
}
.support-option-featured { border-color: var(--accent); background: var(--card); }
.support-option-icon { color: rgba(220,82,0,.12); }
.support-principles { border-left-color: var(--accent); }

/* Campaign detail cards */
.campaign-detail-hero {
    border-top: 4px solid var(--accent);
    background: var(--card);
}
.campaign-detail-image { border-radius: 2px; }

/* Campaign 1 evidence page */
.evidence-campaign {
    --ev-navy: #171c20;
    --ev-navy-2: #232a2f;
    --ev-blue: var(--accent);
    --ev-blue-soft: rgba(220,82,0,.12);
    --ev-gold: var(--accent);
    --ev-line: var(--border);
    border-radius: 3px;
}

.evidence-hero {
    border-top: 5px solid var(--accent);
    background: #20272b;
}
.evidence-hero::before { display: none; }
.evidence-hero .evidence-eyebrow,
.evidence-section-dark .evidence-eyebrow { color: #ff7b32 !important; }
.evidence-hero h1 { font-weight: 700; letter-spacing: -.04em; }
.evidence-scorecard {
    border-radius: 2px;
    border-color: #485055;
    background: #181e22;
    box-shadow: none;
    backdrop-filter: none;
}
.evidence-progress .progress-bar { background: var(--accent); }
.evidence-btn-primary,
.evidence-submit {
    border-radius: 2px;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff !important;
}
.evidence-btn-primary:hover,
.evidence-submit:hover { border-color: #f06a19; background: #f06a19; }
.evidence-btn-secondary { border-radius: 2px; }
.evidence-section-dark { background: #1b2125; }
.evidence-household-card,
.evidence-alert,
.evidence-question-card,
.evidence-action-card,
.evidence-source-card {
    border-radius: 2px !important;
    box-shadow: none !important;
}
.evidence-household-card-highlight { border-color: var(--accent); background: var(--card); }
.evidence-group-number,
.evidence-card-label { color: var(--accent); }

/* Wealth report page: editorial ivory + charcoal + orange */
.wealth-page {
    --wealth-navy-950: #171c20;
    --wealth-navy-900: #20272b;
    --wealth-navy-800: #2a3237;
    --wealth-blue-600: #cf4c00;
    --wealth-blue-100: #f5e3d6;
    --wealth-ink: #1c2226;
    --wealth-muted: #646a6e;
    --wealth-surface: #f7f3eb;
    --wealth-surface-alt: #eee8dd;
    --wealth-line: #cbc3b6;
    --wealth-warning: #f7e6d9;
    --wealth-warning-line: #cf4c00;
    --wealth-shadow: none;
    --wealth-radius: 3px;
    font-family: var(--editorial-sans);
}
.wealth-page h1,
.wealth-page h2,
.wealth-page h3 { font-family: var(--editorial-serif); }
.wealth-toolbar a,
.wealth-print-button,
.wealth-button,
.wealth-ai-credit span { border-radius: 2px; }
.wealth-toolbar a[aria-current="page"] { border-color: var(--accent); background: var(--accent); }
.wealth-hero {
    border-top: 5px solid var(--accent);
    background: #20272b;
}
.wealth-hero::after { display: none; }
.wealth-hero .wealth-eyebrow { color: #ff7b32 !important; }
.wealth-button-primary { color: #fff !important; background: var(--accent); }
.wealth-button-primary:hover { background: #f06a19; }
.wealth-hero-summary { border-radius: 2px; box-shadow: none; backdrop-filter: none; }

/* B-BBEE impact page */
.bee-page {
    --bee-border: var(--border);
    --bee-panel: color-mix(in srgb, var(--card) 92%, transparent);
    --bee-panel-strong: var(--card);
    --bee-accent-soft: var(--accent-soft);
    --bee-accent-border: rgba(220,82,0,.38);
}
.bee-hero {
    border-top: 5px solid var(--accent);
    background: #20272b;
}
.bee-eyebrow,
.bee-callout-label,
.bee-fact-grid strong,
.bee-number,
.bee-row-icon { color: var(--accent) !important; }
.bee-hero-callout,
.bee-fact-grid article,
.bee-alert-card,
.bee-table-wrap,
.bee-example-card,
.bee-question-panel {
    border-radius: 2px !important;
    box-shadow: none !important;
}
.bee-hero-callout { background: var(--card); border-top: 3px solid var(--accent); }
.bee-section-highlight { background: var(--accent-soft); }
.bee-table thead th { background: var(--accent-soft); }
.bee-nuance { border-left-color: var(--accent); }

/* Forms / tables / alerts: keep the same publication language */
.form-control,
.form-select,
.input-group-text,
.alert,
.table,
.pagination .page-link {
    border-radius: 2px !important;
}

.form-control,
.form-select {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem rgba(220,82,0,.15);
    background: var(--surface);
    color: var(--text);
}

body.theme-light .form-control,
body.theme-light .form-select { background: #fffdf8; }

/* Footer */
footer {
    border-top: 4px solid var(--accent) !important;
    background: #171c20;
    color: rgba(255,255,255,.68);
}
footer .footer-support-link,
body.theme-light footer .footer-support-link {
    color: #f3eee6;
    font-weight: 700;
}
footer .footer-support-link:hover { color: #ff7b32; }
.footer-legal-status { color: rgba(255,255,255,.54); }

/* Mobile masthead/nav polish */
@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: .6rem;
        padding: .8rem 0 1rem;
        border-top: 1px solid rgba(255,255,255,.15);
    }
    .navbar .nav-link { padding: .65rem .25rem !important; }
    .navbar .nav-link.active::after {
        right: auto;
        bottom: .35rem;
        left: .25rem;
        width: 34px;
    }
}

@media (max-width: 575.98px) {
    .navbar { min-height: 62px; }
    .logo-mark { width: 38px; height: 38px; }
    .navbar-brand > span:last-child { font-size: .95rem !important; }
    .justice-hero { border-top-width: 4px; }
    .justice-ai-inquiry,
    .justice-wealth-highlight,
    .justice-featured-campaign { border-top-width: 3px; }
}

/* Campaign 1 hero: true white treatment in light mode.
   Shared by the English and Afrikaans Show Us the Evidence pages. */
body.theme-light .evidence-campaign .evidence-hero {
    background: #fff !important;
    border-color: #d6d0c5;
    border-top-color: var(--accent);
    color: #1c2226;
}

body.theme-light .evidence-campaign .evidence-hero::before {
    display: none;
    background: none;
}

body.theme-light .evidence-campaign .evidence-hero h1 {
    color: #1c2226;
}

body.theme-light .evidence-campaign .evidence-hero .evidence-eyebrow {
    color: var(--accent) !important;
}

body.theme-light .evidence-campaign .evidence-lead {
    color: #343b3f;
}

body.theme-light .evidence-campaign .evidence-btn-secondary {
    border-color: #7d817f;
    background: #fff;
    color: #1c2226 !important;
}

body.theme-light .evidence-campaign .evidence-btn-secondary:hover,
body.theme-light .evidence-campaign .evidence-btn-secondary:focus {
    border-color: var(--accent);
    background: #f7f2e9;
    color: #1c2226 !important;
}

body.theme-light .evidence-campaign .evidence-scorecard {
    border-color: #d6d0c5;
    background: #fff;
    color: #1c2226;
}

body.theme-light .evidence-campaign .evidence-scorecard-top span,
body.theme-light .evidence-campaign .evidence-scorecard > p,
body.theme-light .evidence-campaign .evidence-scorecard dt {
    color: #62676a;
}

body.theme-light .evidence-campaign .evidence-scorecard-top strong,
body.theme-light .evidence-campaign .evidence-scorecard dd {
    color: #1c2226;
}

body.theme-light .evidence-campaign .evidence-progress {
    background: #e7e1d8;
}

body.theme-light .evidence-campaign .evidence-scorecard dl div {
    border-top-color: #ddd7cd;
}

/* Light-mode top-bar theme toggle readability (2026-08-12)
   The masthead remains dark in light mode, so keep the theme-toggle label
   aligned with the same light navigation text used by HOME and other links. */
body.theme-light .bg-header #themeToggle {
    color: rgba(255,255,255,.78) !important;
    border-color: rgba(255,255,255,.28);
    background: transparent;
}

body.theme-light .bg-header #themeToggle #themeLabel {
    color: inherit !important;
}

body.theme-light .bg-header #themeToggle:hover,
body.theme-light .bg-header #themeToggle:focus {
    color: #fff !important;
    border-color: var(--accent);
    background: rgba(220,82,0,.13);
}