/* ===========================================================
   WUZZIF.COM - FULL SITE DESIGN SYSTEM (Indigo / JobHive palette)
   Applies to the ENTIRE site, not just the hero.

   Confirmed selectors (via live DevTools inspection on wuzzif.com):
     - hero section:        
     - active pill tabs:    .nav-pills .nav-link.active
                             (driven by Bootstrap var --bs-nav-pills-link-active-bg)
     - buttons:              .btn-primary (Bootstrap standard)
     - job cards:            .job-box.card
   Selectors marked "best guess" below were NOT individually confirmed
   in DevTools yet (footer, badges) - verify the same way we did for
   the hero/buttons/cards if they don't pick up the new colors.
=========================================================== */

:root{
    --primary:#766DF4;
    --primary-dark:#4B44C7;      /* main button color */
    --primary-hover:#6259E8;
    --secondary-tint:#E6E4FB;    /* light tint */
    --accent:#A9A1F2;

    --bg:#F6F5FE;
    --white:#FFFFFF;
    --dark-section:#0F172A;
    --border:#E2E8F0;

    --heading:#0F172A;
    --text:#475569;
    --text-strong:#1A1A2E;
    --text-muted:#64748B;

    /* Bootstrap 5 CSS variable overrides - re-colors built-in
       Bootstrap components (buttons, active pills, links) site-wide
       without needing a selector for each one individually. */
    --bs-primary:var(--primary-dark);
    --bs-primary-rgb:75,68,199;
    --bs-nav-pills-link-active-bg:var(--primary-dark);
    --bs-nav-pills-link-active-color:#fff;
    --bs-btn-bg:var(--primary-dark);
    --bs-btn-border-color:var(--primary-dark);
    --bs-btn-hover-bg:var(--primary-hover);
    --bs-btn-hover-border-color:var(--primary-hover);

    --radius:14px;
    --radius-sm:10px;
    --shadow:0 10px 30px rgba(15,23,42,.06);
    --shadow-hover:0 20px 45px rgba(118,109,244,.18);
}

body{
    background:var(--bg) !important;
    color:var(--text);
    font-family:'Plus Jakarta Sans', 'Cairo', sans-serif !important;
}

h1, h2, h3, h4, h5, h6{
    font-family:'Outfit', 'Cairo', sans-serif !important;
}

/* ============ HEADER / NAVBAR ============ */
.navbar,
.header,
.site-header{
    background:var(--white) !important;
    border-bottom:1px solid var(--border);
}

/* ============ HERO ============ */
#home.bg-home2{
    position:relative;
    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f0eefd 40%,
        #e5e2fc 70%,
        #ece9fc 100%
    ) !important;
    overflow:hidden;
}
#home.bg-home2 h1,
#home.bg-home2 p{
    color:var(--text-strong) !important;
}
#home.bg-home2 h1 .highlight,
#home.bg-home2 h1 span{
    color:var(--primary) !important;
}
#home.bg-home2 .badge-accent{
    background:var(--accent) !important;
    color:var(--text-strong) !important;   /* 7.71:1 on dark bg - excellent */
    font-weight:700;
    border-radius:999px;
    padding:10px 24px;
}

/* ============ ACTIVE PILL TABS (أحدث الوظائف / الوظائف المميزة) ============ */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    background-color:var(--primary-dark) !important;
    color:#fff !important;
}

/* ============ BUTTONS ============ */
.btn-primary{
    background-color:var(--primary-dark) !important;
    border-color:var(--primary-dark) !important;
    color:#fff !important;   /* 7.12:1 - excellent */
}
.btn-primary:hover{
    background-color:var(--primary-hover) !important;
    border-color:var(--primary-hover) !important;
}

/* ============ JOB CARDS ============ */
.job-box.card{
    background:var(--white) !important;
    border:1px solid var(--border) !important;
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow) !important;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.job-box.card:hover{
    border-color:var(--primary) !important;
    box-shadow:var(--shadow-hover) !important;
    transform:translateY(-4px);
}

/* ============ TEXT-PRIMARY UTILITY (e.g. section headings) ============ */
.text-primary{
    color:var(--primary-dark) !important;
}

/* ============ BADGES (best guess - verify class name) ============ */
/* Currently the live "Full Time"/"Internship" tags use Bootstrap's
   default red (#DC3545). Left as red on purpose - in an otherwise
   indigo/white UI, a status tag benefits from staying a distinct
   color so it doesn't disappear next to job titles. Remove this
   comment block and uncomment below if you'd rather have it indigo. */
/*
.badge,
.job-type-badge{
    background:var(--secondary-tint) !important;
    color:var(--primary-dark) !important;
    border-radius:999px;
}
*/

/* ============ LINKS ============ */
a{ color:var(--primary-dark); }
a:hover{ color:var(--primary-hover); }

/* ============ DARK SECTIONS (e.g. stats band, CTA band - best guess) ============ */
.section-dark,
.bg-dark-section{
    background:var(--dark-section) !important;
    color:#fff !important;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.bg-dark-section h1, .bg-dark-section h2, .bg-dark-section h3, .bg-dark-section h4{
    color:#fff !important;
}
.section-dark .text-accent,
.bg-dark-section .text-accent{
    color:var(--accent) !important;
}

/* ============ NUMBERED STEP BADGES ("كيف تتقدم للوظائف" 1-2-3) ============ */
.process-menu .number,
.number.flex-shrink-0{
    background:var(--primary-dark) !important;
    color:#fff !important;
}

/* ============ CATEGORY CARDS (وظائف حكومية / عسكرية...) ============ */
.popu-category-box{
    transition:transform .3s ease, box-shadow .3s ease;
}
.popu-category-box:hover{
    box-shadow:var(--shadow-hover);
    transform:translateY(-4px);
}
.popu-category-icon{
    background:var(--secondary-tint) !important;
    color:var(--primary-dark) !important;
}

/* ============ FOOTER (confirmed: .bg-footer) ============ */
.bg-footer,
footer,
.footer{
    background:var(--dark-section) !important;
    color:#fff;
}
.bg-footer h1, .bg-footer h2, .bg-footer h3, .bg-footer h4, .bg-footer h5, .bg-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
    color:#fff !important;
}
.bg-footer a, footer a, .footer a{
    color:#CBD5E1;
    opacity:1;
}
.bg-footer a:hover, footer a:hover, .footer a:hover{
    color:var(--accent);
}
.bg-footer .copyright, footer .copyright, .footer .copyright{
    color:#94A3B8;
}
.footer-alt{
    background:var(--dark-section) !important;
    border-top:1px solid rgba(255,255,255,.1);
}