/* ==========================================================================
   TJNA BRAND TOKENS
   Source: https://brand.taxjusticeafrica.net/pages/colour-palette.html
           https://brand.taxjusticeafrica.net/pages/typography.html
   60-30-10 Rule: 60% White | 30% Carrot Orange | 10% Red/Blue/Black
   ========================================================================== */

/* ── Google Fonts: Oswald (Futura substitute for impact moments) ────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand palette */
    --tjna-orange:      #F39422;   /* Carrot Orange  — 30% dominant CTA  */
    --tjna-orange-dk:   #d07810;   /* Darker orange  — hover/pressed      */
    --tjna-red:         #D00000;   /* Free Speech Red — 10% urgent accent  */
    --tjna-red-dk:      #a80000;   /* Darker red      — hover              */
    --tjna-blue:        #052443;   /* Oxford Blue     — 10% authority       */
    --tjna-blue-dk:     #031729;   /* Darker blue     — hover              */
    --tjna-blue-md:     #073d6b;   /* Mid blue        — lighter contexts   */
    --tjna-white:       #FFFFFF;
    --tjna-black:       #000000;
    --tjna-grey-body:   #333333;   /* Davy's Grey     — all body text      */
    --tjna-grey-dim:    #666666;   /* Dim Grey        — secondary/captions */
    --tjna-grey-light:  #F8F8F8;   /* Light bg                            */

    /* Gradient tokens */
    --tjna-grad-cta:      linear-gradient(135deg, #D00000 0%, #F39422 100%);
    --tjna-grad-advocacy: linear-gradient(135deg, #D00000 0%, #052443 100%);
    --tjna-grad-blue:     linear-gradient(135deg, #052443 0%, #073d6b 100%);
    --tjna-grad-orange:   linear-gradient(135deg, #F39422 0%, #d07810 100%);

    /* Typography */
    --font-heading: 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    --font-body:    'Calibri', 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', sans-serif;
    --font-impact:  'Oswald', 'Futura', 'Trebuchet MS', sans-serif;

    /* Bootstrap custom property overrides */
    --bs-primary:           #F39422;
    --bs-primary-rgb:       243, 148, 34;
    --bs-secondary:         #052443;
    --bs-secondary-rgb:     5, 36, 67;
    --bs-body-color:        #333333;
    --bs-body-font-family:  'Calibri', 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', sans-serif;
    --bs-link-color:        #F39422;
    --bs-link-hover-color:  #d07810;
    --bs-warning:           #F39422;
    --bs-warning-rgb:       243, 148, 34;
}

/* ==========================================================================
   GLOBAL FOUNDATION
   ========================================================================== */

html, body {
    font-family: var(--font-body);
    color: var(--tjna-grey-body);
    background-color: var(--tjna-white);
}

/* Body text & link colours */
body { font-size: 16px; line-height: 1.6; }
p, li, td, th { font-family: var(--font-body); color: var(--tjna-grey-body); }

a:hover, a:active { color: var(--tjna-orange) !important; }

/* ── Heading typography (Tahoma Bold) ───────────────────────────────────── */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
h1 a, .h1 a, h2 a, .h2 a {
    font-family: var(--font-heading) !important;
    font-weight: 700;
}

h1, .h1 { font-size: 2.25rem; line-height: 1.2; color: var(--tjna-blue); }
h2, .h2 { font-size: 1.75rem; line-height: 1.3; color: var(--tjna-blue); }
h3, .h3 { font-size: 1.3rem;  line-height: 1.4; color: var(--tjna-grey-body); }
h4, .h4 { font-size: 1.1rem;  line-height: 1.45; color: var(--tjna-grey-body); }

h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
    color: var(--tjna-orange) !important;
}

/* Impact / Oswald — pull quotes, slogans, stat numbers */
.font-impact,
.display-3, .display-4,
.hero-landing h1.display-3 {
    font-family: var(--font-impact) !important;
}

/* ── Muted / caption text ───────────────────────────────────────────────── */
.text-muted { color: var(--tjna-grey-dim) !important; }
small, .small, .caption { color: var(--tjna-grey-dim); font-family: var(--font-body); }

/* ==========================================================================
   COLOUR UTILITY OVERRIDES  (supersedes styles.css hardcoded values)
   ========================================================================== */

/* Primary = Oxford Blue (authority dark backgrounds) */
.bg-primary    { background-color: var(--tjna-blue)   !important; }
.text-primary  { color:            var(--tjna-blue)   !important; }
.border-color-primary { border-color: var(--tjna-blue) !important; }
.primary-overlay[data-overlay-dark]:before { background: var(--tjna-blue); }

/* Secondary = Carrot Orange (dominant accent) */
.bg-secondary   { background-color: var(--tjna-orange) !important; }
.text-secondary { color:            var(--tjna-orange) !important; }
.border-color-secondary { border-color: var(--tjna-orange) !important; }

/* Hover variants */
.text-primary-hover:hover  { color: var(--tjna-blue)   !important; }
.text-secondary-hover:hover { color: var(--tjna-orange) !important; }

/* ==========================================================================
   BUTTON SYSTEM  (`.butn` theme component)
   Orange = primary CTA  |  Blue = authority/secondary  |  Red = urgent
   ========================================================================== */

.butn {
    background-color: var(--tjna-orange) !important;
    color: #fff !important;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: .02em;
}
.butn .icon-arrow { color: #fff; }

.butn:hover, .butn:active, .butn:focus {
    background-color: var(--tjna-red) !important;
    color: #fff !important;
}
.butn:hover .icon-arrow.before, .butn:active .icon-arrow.before, .butn:focus .icon-arrow.before {
    opacity: 0; transform: translateX(-75%) scaleX(0.1);
}
.butn:hover .icon-arrow.after, .butn:active .icon-arrow.after, .butn:focus .icon-arrow.after {
    opacity: 1; transform: translateX(0) scaleX(1);
}
.butn:hover .label, .butn:active .label, .butn:focus .label {
    transform: translateX(-32px);
}

/* Secondary butn → Oxford Blue (authority) */
.butn.secondary, .btn-secondary {
    background-color: var(--tjna-blue) !important;
}
.butn.secondary:hover, .butn.secondary:active, .butn.secondary:focus,
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--tjna-orange) !important;
}

/* White butn → accent colour becomes orange */
.butn.white { background-color: #fff !important; color: var(--tjna-orange) !important; }
.butn.white .icon-arrow { color: var(--tjna-orange); }
.butn.white:hover .icon-arrow, .butn.white:active .icon-arrow, .butn.white:focus .icon-arrow { color: #fff; }

/* butn-style1 variants */
.butn-style1 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--tjna-blue) !important;
    border-color: var(--tjna-blue) !important;
}
.butn-style1:hover { color: var(--tjna-orange) !important; border-color: var(--tjna-orange) !important; }
.butn-style1.secondary {
    color: var(--tjna-orange) !important;
    border-color: var(--tjna-orange) !important;
}
.butn-style1.secondary:hover {
    color: var(--tjna-red) !important;
    border-color: var(--tjna-red) !important;
}

/* Bootstrap standard buttons */
.btn-primary { background-color: var(--tjna-orange) !important; border-color: var(--tjna-orange) !important; color: #fff !important; }
.btn-primary:hover { background-color: var(--tjna-red) !important; border-color: var(--tjna-red) !important; }

/* ==========================================================================
   BADGE SYSTEM
   ========================================================================== */

.badge-soft {
    background-color: rgba(5, 36, 67, 0.10);
    color: var(--tjna-blue) !important;
}
.badge-soft.secondary {
    background-color: rgba(243, 148, 34, 0.15);
    color: var(--tjna-orange) !important;
}

.course-tag.secondary, .course-tag {
    background-color: var(--tjna-orange);
    color: #fff;
}
.course-tag.secondary:hover, .course-tag:hover {
    background-color: var(--tjna-red);
    color: #fff;
}

/* ==========================================================================
   SECTION HEADING COMPONENT  (`.sub-title` / section dividers)
   ========================================================================== */

.sub-title {
    color: var(--tjna-orange) !important;
    font-family: var(--font-impact);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8rem;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar-nav li.current > a,
.navbar-nav li.active > a {
    color: var(--tjna-orange) !important;
}
.navbar-nav .nav-link:hover { color: var(--tjna-orange) !important; }

/* Scroll-to-top button */
#back-to-top, .scroll-top {
    background: var(--tjna-orange) !important;
    border-color: var(--tjna-orange) !important;
}
#back-to-top:hover, .scroll-top:hover {
    background: var(--tjna-red) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer.bg-dark { background-color: var(--tjna-blue) !important; }
footer .text-primary { color: var(--tjna-orange) !important; }
footer .footer-list a:hover { color: var(--tjna-orange); }

/* ==========================================================================
   FORM CONTROLS (Bootstrap override)
   ========================================================================== */

.form-control:focus {
    border-color: var(--tjna-orange);
    box-shadow: 0 0 0 .2rem rgba(243, 148, 34, .20);
}
.form-select:focus {
    border-color: var(--tjna-orange);
    box-shadow: 0 0 0 .2rem rgba(243, 148, 34, .20);
}

/* ==========================================================================
   HERO SECTION  (home page)
   ========================================================================== */

.hero-landing::before {
    background: linear-gradient(115deg, rgba(5,36,67,.86) 0%, rgba(20,10,5,.40) 100%);
}

/* ── Stats strip ── */
.hero-stats-inner .display-18.font-weight-800.text-primary {
    color: var(--tjna-blue) !important;
}

/* ── How it works circles ── */
.hiw-primary  { background-color: var(--tjna-blue)   !important; }
.hiw-secondary { background-color: var(--tjna-orange) !important; }
.hiw-primary  .hiw-num { color: var(--tjna-blue); border-color: var(--tjna-blue); }
.hiw-secondary .hiw-num { color: var(--tjna-orange); border-color: var(--tjna-orange); }

/* ── Spotlight section ── */
.spotlight-card { border-left-color: var(--tjna-orange) !important; }
.spotlight-badge { background: #fff3e0; color: #b87600; border-color: var(--tjna-orange); }
.spotlight-pulse { background: var(--tjna-orange) !important; }
.spotlight-meta i { color: var(--tjna-orange) !important; }

/* ==========================================================================
   ACCOUNT AREA (My dashboard)
   ========================================================================== */

/* Dashboard stat cards */
.db-stat-primary { background: var(--tjna-grad-blue)   !important; }
.db-stat-warning  { background: var(--tjna-grad-orange) !important; }
.db-stat-success  { background: linear-gradient(135deg,#157347,#1a9e60) !important; }
.db-stat-accent   { background: linear-gradient(135deg, var(--tjna-red), #e0464c) !important; }

/* Progress bars */
.db-progress-bar,
.mc-progress-fill {
    background: linear-gradient(90deg, var(--tjna-blue), var(--tjna-orange)) !important;
}

/* Quick action buttons */
.db-btn-primary {
    background: var(--tjna-orange) !important;
    color: #fff !important;
}
.db-btn-primary:hover { background: var(--tjna-red) !important; color: #fff !important; }
.db-btn-cert {
    background: linear-gradient(135deg, var(--tjna-orange), var(--tjna-orange-dk)) !important;
}
.db-btn-cert:hover { opacity: .88; }

/* Certificates gold accent */
.cert-card          { border-left-color: var(--tjna-orange) !important; }
.cert-medal-ring    { background: linear-gradient(135deg, var(--tjna-orange), var(--tjna-orange-dk)) !important; }
.cert-download-btn  { background: linear-gradient(135deg, var(--tjna-orange), var(--tjna-orange-dk)) !important; }

/* ==========================================================================
   ABOUT  & MISC COMPONENTS
   ========================================================================== */

.about-border {
    border-left: 3px solid var(--tjna-orange);
    padding-left: 1.2rem;
}
.dotted-seprator { border-top: 2px dashed rgba(243,148,34,.35); }

/* Inline image check icons */
.fa-check-circle.text-secondary { color: var(--tjna-orange) !important; }

/* ==========================================================================
   IDENTITY MANAGE PAGES
   ========================================================================== */

.mgmt-submit-btn { background: var(--tjna-blue) !important; }
.mgmt-submit-btn:hover { background: var(--tjna-blue-md) !important; }
.mgmt-input:focus { border-color: var(--tjna-orange) !important; box-shadow: 0 0 0 3px rgba(243,148,34,.12) !important; }

/* Profile hero */
.prof-hero    { background: linear-gradient(135deg, var(--tjna-blue) 0%, var(--tjna-blue-md) 100%); }
.prof-avatar  { background: linear-gradient(135deg, var(--tjna-red), #e84040); }
.prof-edit-btn:hover { background: rgba(255,255,255,.25); }
.prof-inline-link { color: var(--tjna-orange) !important; }
.prof-inline-link:hover { color: var(--tjna-orange-dk) !important; }

/* ==========================================================================
   PRINT SAFETY
   ========================================================================== */

@media print {
    body { font-family: var(--font-body); color: #000; }
    h1, h2, h3, h4 { font-family: var(--font-heading); }
}