/**
 * theme-override.css
 * Black · White · Silver color override for intl-chaplain-school landing pages
 * Loaded after main.css to supersede the gold/brown defaults.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Root token overrides ─────────────────────────────────────────────────── */
:root {
    --primary:   #18181b;
    --secondary: #3f3f46;
    --default:   #18181b;
    --tertiary:  #a1a1aa;
    --soft:      #f4f4f5;

    /* Silver palette */
    --silver-light:    #f4f4f5;
    --silver-border:   #d4d4d8;
    --silver-medium:   #a1a1aa;
    --silver-dark:     #71717a;
    --silver-gradient: linear-gradient(135deg, #ffffff 0%, #d4d4d8 50%, #71717a 100%);
    --silver-shiny:    linear-gradient(90deg, #f4f4f5 0%, #d4d4d8 25%, #ffffff 50%, #d4d4d8 75%, #a1a1aa 100%);
}

/* ── Body & typography ────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
}

/* ── Navbar — transparent at top, footer colour (#18181b) on scroll ─────── */
/*   app.js adds class "affix" to .navbar when scrollTop > 0             */

/* Default / at top: fully transparent */
nav.navbar.navbar-theme-primary,
.navbar-theme-primary {
    background-color: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* On scroll (.affix added by app.js): match footer bg-primary = #18181b */
nav.navbar.affix.navbar-theme-primary,
.navbar.affix.navbar-theme-primary,
.affix.navbar-theme-primary {
    background-color: #18181b !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.50) !important;
}

/* Nav links — always white */
.navbar-theme-primary .navbar-nav .nav-link {
    color: rgba(255,255,255,0.90) !important;
}
.navbar-theme-primary .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

/* Also keep headroom--not-top in case headroom fires too */
.headroom--not-top.navbar-theme-primary {
    background-color: #18181b !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
    color: #ffffff !important;
    background-color: #18181b !important;
    border-color: #18181b !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 8px;
    transition: all 0.22s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    color: #ffffff !important;
    background-color: #27272a !important;
    border-color: #27272a !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
    transform: translateY(-1px);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #09090b !important;
    border-color: #09090b !important;
}

.btn-secondary {
    color: #ffffff !important;
    background-color: #3f3f46 !important;
    border-color: #3f3f46 !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.22s ease;
}
.btn-secondary:hover {
    background-color: #52525b !important;
    border-color: #52525b !important;
    transform: translateY(-1px);
}

.btn-outline-light {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.22s ease;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-1px);
}

/* ── Backgrounds ──────────────────────────────────────────────────────────── */
.bg-primary   { background-color: #18181b !important; }
.bg-secondary { background-color: #27272a !important; }
.bg-default   { background-color: #09090b !important; }
.bg-soft      { background-color: #f4f4f5 !important; }

/* ── Section headings & underlines ───────────────────────────────────────── */
.section-heading h2::after,
.section-title::after {
    background: linear-gradient(90deg, #09090b, #a1a1aa) !important;
}

/* ── Course cards ─────────────────────────────────────────────────────────── */
.course-card,
.card {
    border-radius: 12px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.course-card:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

/* ── Promo / feature cards ────────────────────────────────────────────────── */
.card-body.bg-default { background-color: #09090b !important; }
.card-body.bg-secondary { background-color: #27272a !important; }
.card-body.bg-primary { background-color: #18181b !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer,
.footer-dark {
    background-color: #09090b !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}
footer a,
.footer-dark a {
    color: #a1a1aa !important;
    transition: color 0.2s;
}
footer a:hover,
.footer-dark a:hover {
    color: #ffffff !important;
}
.footer-brand-tagline,
.footer .text-muted {
    color: #71717a !important;
}

/* ── Badges / pills ───────────────────────────────────────────────────────── */
.badge-primary { background-color: #18181b !important; color: #fff !important; }
.badge-secondary { background-color: #3f3f46 !important; color: #fff !important; }
.badge-soft-primary { background-color: #f4f4f5 !important; color: #18181b !important; }

/* ── Links ────────────────────────────────────────────────────────────────── */
a { transition: color 0.2s; }
a.text-primary { color: #18181b !important; }
a.text-primary:hover { color: #71717a !important; }

/* ── Border accents ───────────────────────────────────────────────────────── */
.border-variant-primary { border-color: rgba(255,255,255,0.12) !important; }

/* ── Preloader dots ───────────────────────────────────────────────────────── */
.loader1 span { background: #d4d4d8 !important; }

/* ── Gradient overlay on hero ─────────────────────────────────────────────── */
.gradient-overly-right-color::before {
    background: linear-gradient(
        to right,
        rgba(9, 9, 11, 0.92) 0%,
        rgba(9, 9, 11, 0.68) 55%,
        rgba(9, 9, 11, 0.12) 100%) !important;
}

/* ── Scroll-to-top button ─────────────────────────────────────────────────── */
.scroll-top,
#scroll-top,
a[href='#home'].scroll-up,
.back-to-top {
    background: #18181b !important;
    border: 1px solid #3f3f46 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
    transition: all 0.2s;
}
.scroll-top:hover,
#scroll-top:hover,
.back-to-top:hover {
    background: #27272a !important;
    transform: translateY(-2px);
}

/* ── Feature / icon boxes ─────────────────────────────────────────────────── */
.icon-box .icon,
.feature-icon {
    background: linear-gradient(135deg, #18181b, #3f3f46) !important;
    color: #fff !important;
    border-radius: 12px;
}

/* ── Input focus ──────────────────────────────────────────────────────────── */
.form-control:focus {
    border-color: #18181b !important;
    box-shadow: 0 0 0 3px rgba(24,24,27,0.10) !important;
}

/* ── Navbar brand text (if any) ───────────────────────────────────────────── */
.navbar-brand-text,
.navbar-brand span {
    color: #ffffff !important;
    font-weight: 700;
}