/**
 * WorkBridge WB - PROFESSIONAL DESIGN SYSTEM
 * Clean, Modern, User-Friendly Design
 * Author: Eng Abdiwahab Vision Software
 */

/* ==================== CSS VARIABLES ==================== */
:root {
    --primary-blue: #14213d;
    --primary-blue-dark: #14213d;
    --primary-gold: #fca311;
    --primary-gold-dark: #fca311;
    --text-white: #ffffff;
    --danger-red: #ef4444;
    --success-green: #22c55e;
    
    --bg-primary: #f4f5f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.98);
    --text-primary: #14213d;
    --text-secondary: #2c3e50;
    --text-muted: #475569;
    --border-color: #e2e4e8;
    --bg-hover: #eef0f2;
    
    --bg-dark-primary: #14213d;
    --bg-dark-secondary: #14213d;
    --bg-dark-card: #14213d;
    --bg-dark-navbar: rgba(20, 33, 61, 0.98);
    --text-dark-primary: #ffffff;
    --text-dark-secondary: #c8d8e8;
    --border-dark: #fca311;
    
    --gradient-primary: linear-gradient(135deg, #14213d 0%, #14213d 100%);
    --gradient-gold: linear-gradient(135deg, #fca311 0%, #fca311 100%);
    --gradient-emerald: linear-gradient(135deg, #14213d 0%, #fca311 100%);
    --gradient-cyan: linear-gradient(135deg, #14213d 0%, #fca311 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --gradient-success: linear-gradient(135deg, #14213d 0%, #fca311 100%);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(20, 33, 61, 0.08);
    --shadow-md: 0 4px 20px rgba(20, 33, 61, 0.1);
    --shadow-lg: 0 10px 40px rgba(20, 33, 61, 0.12);
    --shadow-gold: 0 8px 25px rgba(252, 163, 17, 0.3);
    --shadow-blue: 0 8px 25px rgba(252, 163, 17, 0.3);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50px;
    
    /* Transitions */
    --transition: all 0.3s ease;
}

/* ==================== DARK MODE ==================== */
body.dark-mode {
    --bg-primary: #14213d;
    --bg-secondary: #14213d;
    --bg-card: #14213d;
    --bg-navbar: rgba(20, 33, 61, 0.98);
    --text-primary: #ffffff;
    --text-secondary: #c8d8e8;
    --text-muted: #8aa8c0;
    --border-color: #2d3f63;
    --bg-hover: #14213d;
}

body.dark-mode {
    background-color: #14213d;
    color: #ffffff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode label,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
    color: #c8d8e8;
}

[data-lang] {
    color: inherit;
}



body.dark-mode a {
    color: #94b4d4;
}

body.dark-mode a:hover {
    color: #fca311;

}

body.dark-mode .text-muted {
    color: #8aa8c0 !important;
}

body.dark-mode .hero-title {
    color: #ffffff;
}

body.dark-mode .hero-subtitle {
    color: #c8d8e8;
}

body.dark-mode .section-title {
    color: #fca311 !important;
}

body.dark-mode .section-subtitle {
    color: #c8d8e8;
}

body.dark-mode .card {
    background: #14213d;
    border-color: #fca311;
}

body.dark-mode .card-body {
    color: #c8d8e8;
}

body.dark-mode .form-control {
    background-color: #14213d !important;
    border-color: #fca311 !important;
    color: #ffffff !important;
}

body.dark-mode .form-control::placeholder {
    color: #8aa8c0 !important;
}

body.dark-mode .form-select {
    background-color: #14213d !important;
    border-color: #fca311 !important;
    color: #ffffff !important;
}

body.dark-mode .badge-primary {
    background: linear-gradient(135deg, #14213d 0%, #14213d 100%);
    color: #fca311;
    border: 1px solid #fca311;
}

body.dark-mode .btn-primary {
    background: linear-gradient(135deg, #14213d 0%, #14213d 100%);
    color: #fca311;
    border: 2px solid #fca311;
}

body.dark-mode .btn-gold {
    background: #fca311;
    color: #14213d;
}

body.dark-mode .btn-outline {
    border-color: #fca311;
    color: #fca311;
}

body.dark-mode .btn-join {
    background: linear-gradient(135deg, #fca311, #fca311);
    color: #14213d !important;
    box-shadow: 0 4px 15px rgba(252, 163, 17, 0.3);
}

body.dark-mode .btn-join i {
    color: #14213d !important;
}

body.dark-mode .btn-join:hover {
    background: linear-gradient(135deg, #fca311, #fca311);
    color: #14213d !important;
    box-shadow: 0 8px 25px rgba(252, 163, 17, 0.5);
}

body.dark-mode .modal-content {
    background: #14213d;
    border: 1px solid #fca311;
}

body.dark-mode .pagination .page-link {
    background: #14213d;
    border-color: #fca311;
    color: #c8d8e8;
}

/* COMPREHENSIVE DARK MODE FOR ALL TEXT */
body.dark-mode .hero {
    background: linear-gradient(135deg, #14213d 0%, #1a2a4a 50%, #14213d 100%) !important;
}

body.dark-mode .hero .hero-title .text-primary,
body.dark-mode .hero .hero-title .text-cyan {
    color: #fca311 !important;
}

body.dark-mode .hero .badge-primary {
    background: #fca311 !important;
    color: #14213d !important;
    border: none !important;
}

body.dark-mode .hero .btn-outline {
    border-color: #fca311 !important;
    color: #fca311 !important;
}

body.dark-mode .hero .btn-outline:hover {
    background: #fca311 !important;
    color: #14213d !important;
}

body.dark-mode .job-hero {
    background: linear-gradient(135deg, #14213d 0%, #1a2a4a 50%, #14213d 100%) !important;
    border-bottom: 3px solid #fca311 !important;
}

body.dark-mode .job-hero h1,
body.dark-mode .job-hero h2,
body.dark-mode .job-hero h3,
body.dark-mode .job-hero h4,
body.dark-mode .job-hero p,
body.dark-mode .job-hero span,
body.dark-mode .job-hero div,
body.dark-mode .job-hero strong,
body.dark-mode .job-hero small {
    color: #ffffff !important;
}

body.dark-mode .job-hero .job-type-badge {
    background: #fca311 !important;
    color: #14213d !important;
}

body.dark-mode .job-hero a {
    color: #fca311 !important;
}

body.dark-mode .job-hero a:hover {
    color: #ffffff !important;
}

body.dark-mode .hero h1,
body.dark-mode .hero h2,
body.dark-mode .hero h3,
body.dark-mode .hero h4,
body.dark-mode .hero span,
body.dark-mode .hero p,
body.dark-mode .hero div,
body.dark-mode .hero strong {
    color: #ffffff !important;
}

body.dark-mode .hero .hero-title {
    color: #ffffff !important;
}

body.dark-mode .hero .hero-title span:not([data-lang]) {
    background: #fca311 !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #14213d !important;
    padding: 2px 12px;
    border-radius: 8px;
}

body.dark-mode .hero .hero-subtitle {
    color: #c8d8e8 !important;
}

body.dark-mode .search-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .search-card h4,
body.dark-mode .search-card strong {
    color: #ffffff !important;
}

body.dark-mode .search-card small,
body.dark-mode .search-card .text-muted {
    color: #8aa8c0 !important;
}

body.dark-mode .section {
    background: #14213d !important;
}

body.dark-mode .section-bg {
    background: #14213d !important;
}

body.dark-mode .section h2,
body.dark-mode .section h3,
body.dark-mode .section h4,
body.dark-mode .section p,
body.dark-mode .section span,
body.dark-mode .section div,
body.dark-mode .section strong {
    color: #ffffff !important;
}

body.dark-mode .section .section-title {
    color: #ffffff !important;
}

body.dark-mode .section .section-subtitle {
    color: #c8d8e8 !important;
}

body.dark-mode .section .text-muted {
    color: #8aa8c0 !important;
}

body.dark-mode .card-stats {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .card-stats h4,
body.dark-mode .card-stats h5,
body.dark-mode .card-stats strong,
body.dark-mode .card-stats small {
    color: #ffffff !important;
}

body.dark-mode .stats-number {
    color: #fca311 !important;
    -webkit-text-fill-color: #fca311 !important;
    background: none;
}

body.dark-mode .card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .card h4,
body.dark-mode .card h5,
body.dark-mode .card h6,
body.dark-mode .card p,
body.dark-mode .card span,
body.dark-mode .card strong,
body.dark-mode .card small {
    color: #ffffff !important;
}

body.dark-mode .card .text-muted {
    color: #8aa8c0 !important;
}

body.dark-mode .badge-success {
    background: linear-gradient(135deg, #14213d 0%, #fca311 100%) !important;
    color: #14213d !important;
}

body.dark-mode .job-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .job-card h4,
body.dark-mode .job-card h5,
body.dark-mode .job-card p,
body.dark-mode .job-card span,
body.dark-mode .job-card strong {
    color: #ffffff !important;
}

body.dark-mode .contact-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .contact-card h5,
body.dark-mode .contact-card p,
body.dark-mode .contact-card span {
    color: #ffffff !important;
}

body.dark-mode .contact-form {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .info-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .info-card h5,
body.dark-mode .info-card p,
body.dark-mode .info-card span,
body.dark-mode .info-card strong {
    color: #ffffff !important;
}

body.dark-mode .profile-hero {
    background: linear-gradient(180deg, #14213d 0%, #14213d 100%) !important;
}

body.dark-mode .profile-meta-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .company-container {
    background: #14213d !important;
}

body.dark-mode .company-header {
    background: #14213d !important;
}

body.dark-mode .company-meta {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .section-card {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .meta-item {
    background: #14213d !important;
    border: 1px solid #fca311 !important;
}

body.dark-mode .meta-item h6,
body.dark-mode .meta-item p,
body.dark-mode .meta-item span,
body.dark-mode .meta-item a {
    color: #ffffff !important;
}

/* Ensure all headings are white in dark mode */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode p, body.dark-mode span, body.dark-mode div {
    color: #c8d8e8 !important;
}

body.dark-mode strong {
    color: #ffffff !important;
}

body.dark-mode small {
    color: #8aa8c0 !important;
}

body.dark-mode .text-primary {
    color: #fca311 !important;
}

body.dark-mode .text-gold {
    color: #fca311 !important;
}

body.dark-mode .text-cyan {
    color: #fca311 !important;
}

body.dark-mode .bg-light {
    background: #1a2a4a !important;
}

/* ==================== GLOBAL STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #ffffff !important;
    color: var(--text-primary);
    line-height: 1.7;
    transition: var(--transition);
}

body.dark-mode {
    background: #14213d !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

p {
    color: var(--text-secondary);
}

/* ==================== THEME TOGGLE BUTTON ==================== */
.theme-toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: var(--transition);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .theme-toggle {
    background: #14213d;
    border-color: #fca311;
    box-shadow: 0 4px 15px rgba(252, 163, 17, 0.3);
}

.theme-toggle i {
    font-size: 1.3rem;
    color: #14213d;
    transition: var(--transition);
}

body.dark-mode .theme-toggle i {
    color: #fca311;
}

.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline; }
body.dark-mode .theme-toggle .fa-sun { display: inline; }
body.dark-mode .theme-toggle .fa-moon { display: none; }

/* ==================== NAVBAR ====================
   Light-mode values live here; the dark-mode counterparts are grouped in the
   single authoritative NAVBAR section at the end of this file. */
.navbar {
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    padding: 1rem 0;
    transition: var(--transition);
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-brand img {
    height: 50px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: #ffffff;
    padding: 5px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.navbar-brand img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.navbar-brand-text {
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-link {
    color: #14213d;
    font-weight: 500;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin: 0 4px;
    transition: var(--transition);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: calc(100% - 36px);
}

.nav-link:hover,
.nav-link.active {
    background: rgba(252, 163, 17, 0.15);
}

body.dark-mode .footer .nav-link {
    color: #ffffff !important;
}

/* Join Free Button */
.btn-join {
    background: var(--gradient-gold);
    color: #14213d;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    box-shadow: var(--shadow-gold);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(252, 163, 17, 0.5);
    box-shadow: 0 12px 30px rgba(252, 163, 17, 0.4);
    color: #14213d;
}

/* ==================== HERO SECTION ==================== */
.hero {
    background: #ffffff;
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(252, 163, 17, 0.15) 0%, transparent 60%);
    border-radius: 50%;
}

body.dark-mode .hero {
    background: linear-gradient(180deg, #14213d 0%, #14213d 100%);
}

body.dark-mode .hero::before {
    background: radial-gradient(circle, rgba(252, 163, 17, 0.2) 0%, transparent 60%);
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-title span:not([data-lang]) {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

body.dark-mode .hero-title span:not([data-lang]) {
    background: #fca311 !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #14213d !important;
    padding: 2px 12px;
    border-radius: 8px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* ==================== CARDS ==================== */
.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-xl);
    padding: 0;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .card {
    background: #14213d;
    border-color: #2d3f63;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.card-body {
    padding: 28px;
}

.card-stats {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
}

body.dark-mode .card-stats {
    background: #14213d;
    border-color: #2d3f63;
}

.card-stats:hover {
    border-color: var(--primary-gold);
    transform: translateY(-5px);
}

.stats-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

/* ==================== BUTTONS ==================== */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 8px 25px rgba(252, 163, 17, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(252, 163, 17, 0.4);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    padding: 14px 32px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
}

.btn-gold {
    background: var(--gradient-gold);
    color: #14213d;
    border: none;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(252, 163, 17, 0.4);
    color: #14213d;
}

/* ==================== BADGES ==================== */
.badge-primary {
    background: var(--gradient-primary);
    color: white;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
}

.badge-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 13px;
}

.badge-success {
    background: var(--gradient-emerald);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 12px;
}

/* ==================== FORMS ==================== */
.form-control {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    color: #14213d;
    transition: var(--transition);
}

body.dark-mode .form-control {
    border-color: #2d3f63;
    background: #14213d;
    color: #ffffff;
}

.form-control:focus {
    border-color: #fca311;
    box-shadow: 0 0 0 4px rgba(252, 163, 17, 0.2);
}

.form-select {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    color: #14213d;
    transition: var(--transition);
}

body.dark-mode .form-select {
    border-color: #2d3f63;
    background: #14213d;
    color: #ffffff;
}

/* ==================== SEARCH CARD ==================== */
.search-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

body.dark-mode .search-card {
    background: #14213d;
    border-color: #2d3f63;
}

.btn-search {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 36px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 8px 25px rgba(252, 163, 17, 0.3);
}

.btn-search:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(252, 163, 17, 0.4);
    color: white;
}

/* ==================== SECTION ==================== */
.section {
    padding: 80px 0;
    background: #ffffff;
}

body.dark-mode .section {
    background: #14213d;
}

.section-bg {
    background: #ffffff;
}

body.dark-mode .section-bg {
    background: #14213d;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

/* ==================== STEP/PROCESS ==================== */
.step-icon {
    width: 90px;
    height: 90px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 30px rgba(252, 163, 17, 0.3);
}

.step-number {
    width: 35px;
    height: 35px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #14213d;
    margin: 0 auto 15px;
}

/* ==================== LOGO CARD ==================== */
.logo-card {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 3px solid var(--primary-gold);
    box-shadow: 0 8px 25px rgba(252, 163, 17, 0.2);
}

/* ==================== CTA SECTION ==================== */
.cta-section {
    background: linear-gradient(135deg, #14213d 0%, #14213d 50%, #fca311 100%);
    padding: 100px 0;
    color: white;
}

.cta-section h2 {
    color: white;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .cta-section {
    background: linear-gradient(135deg, #14213d 0%, #14213d 50%, #fca311 100%);
}

.btn-white {
    background: white;
    color: var(--primary-blue);
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    color: var(--primary-blue);
}

.btn-white-outline {
    background: transparent;
    color: var(--primary-gold);
    border: 2px solid var(--primary-gold);
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

.btn-white-outline:hover {
    background: var(--primary-gold);
    color: var(--primary-blue-dark);
    transform: translateY(-3px);
}

/* ==================== FOOTER ==================== */
.footer {
    background: #14213d !important;
    border-top: 2px solid #fca311;
    padding: 60px 0 30px;
}

body.dark-mode .footer {
    background: #14213d !important;
    border-top: 2px solid #fca311;
}

.footer,
.footer p,
.footer a,
.footer span,
.footer div,
.footer li,
.footer strong,
.footer small,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: rgba(255, 255, 255, 0.85);
}

.footer h3,
.footer h5 {
    color: #fca311 !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.footer a:hover {
    color: #fca311;
    transform: translateX(5px);
}

.footer ul li a i {
    color: #fca311;
}

.footer-link {
    position: relative;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fca311;
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.footer-bottom {
    border-top: 1px solid rgba(252, 163, 17, 0.3);
    padding-top: 25px;
    margin-top: 30px;
}

body.dark-mode .footer-bottom {
    border-top-color: rgba(252, 163, 17, 0.2);
}

body.dark-mode .footer-bottom p,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
}

/* Footer Social Icons */
.footer-social a,
.footer a.btn-sm {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14213d;
    background: #fca311;
    transition: var(--transition);
    border: none;
}

.footer-social a:hover,
.footer a.btn-sm:hover {
    background: #fca311;
    color: #14213d;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(252, 163, 17, 0.4);
}

/* Footer Contact Links */
.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    padding: 10px 0;
    transition: var(--transition);
}

.footer-contact-link:hover {
    color: #fca311;
}

.footer-contact-link i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fca311;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14213d;
    font-size: 0.9rem;
}

.footer-contact-link:hover i {
    transform: scale(1.1);
}

/* Footer Email/Phone - Make them clickable */
.footer a[href^="mailto:"],
.footer a[href^="tel:"] {
    color: rgba(255, 255, 255, 0.85);
}

.footer a[href^="mailto:"]:hover,
.footer a[href^="tel:"]:hover {
    color: #fca311;
}

/* Footer List Styles */
.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer ul li {
    padding: 6px 0;
}

.footer ul li a {
    font-size: 0.95rem;
}

/* Footer Titles */
.footer h5 img {
    vertical-align: middle;
}

/* ==================== MODAL ==================== */
.modal-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-xl);
}

body.dark-mode .modal-content {
    background: #14213d;
    border: 1px solid #2d3f63;
}

.modal-header {
    background: linear-gradient(135deg, #14213d 0%, #14213d 100%);
    color: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 25px 30px;
}

body.dark-mode .modal-header {
    background: #14213d;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

body.dark-mode .modal-header .btn-close {
    filter: invert(1);
}

/* ==================== CONTACT CARDS ==================== */
.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
}

body.dark-mode .contact-card {
    border-color: var(--border-dark);
}

.contact-card:hover {
    border-color: var(--primary-gold);
    transform: translateY(-5px);
}

.contact-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: white;
}

/* ==================== CONTACT FORM ==================== */
.contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

body.dark-mode .contact-form {
    border-color: var(--border-dark);
}

.btn-submit {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--transition);
    width: 100%;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(252, 163, 17, 0.4);
    color: white;
}

/* ==================== PAGINATION ==================== */
.pagination .page-link {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: var(--transition);
}

body.dark-mode .pagination .page-link {
    border-color: var(--border-dark);
}

.pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: var(--primary-blue);
    color: white;
}

.pagination .page-link:hover {
    background: var(--primary-gold);
    border-color: var(--primary-gold);
    color: var(--primary-blue-dark);
}

/* ==================== ALERT ==================== */
.alert-info {
    background: rgba(252, 163, 17, 0.08);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    color: var(--primary-blue);
    padding: 20px 25px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .theme-toggle {
        top: 15px;
        right: 70px !important;
        z-index: 10001 !important;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .search-card {
        padding: 25px;
    }
    
    /* Footer Mobile */
    .footer {
        padding: 50px 0 30px;
        text-align: center;
    }
    
    .footer h5 {
        margin-top: 30px;
        margin-bottom: 1rem;
    }
    
    .footer a {
        display: block;
        padding: 8px 0;
        text-align: center;
    }
    
    .footer a:hover {
        transform: none;
    }
    
    .footer-link::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-social {
        justify-content: center;
        display: flex;
        gap: 15px;
    }
    
    .footer-contact-link {
        justify-content: center;
        text-align: left;
    }
    
    .footer-bottom {
        text-align: center;
        padding-top: 20px;
        margin-top: 30px;
    }
    
    /* Navbar Mobile */
    .navbar {
        padding: 0.8rem 0;
    }

    .navbar-brand img {
        height: 40px;
    }

    .navbar-brand-text {
        font-size: 1.1rem;
    }

    /* no gold underline on touch layouts; hover styling comes from the
       authoritative NAVBAR section */
    .nav-link::after {
        display: none;
    }

    /* Theme Toggle Mobile */
    .theme-toggle {
        width: 45px;
        height: 45px;
        top: 10px;
        right: 70px !important;
        z-index: 10001 !important;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 40px 15px 20px;
    }
    
    .footer h5 {
        font-size: 1.1rem;
    }
    
    .footer p,
    .footer a {
        font-size: 0.9rem;
    }
    
    .navbar-brand-text {
        font-size: 1rem;
    }
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 5px;
}

/* ==================== TEXT COLORS ==================== */
.text-primary { color: var(--primary-blue) !important; }
.text-success { color: var(--primary-gold) !important; }
.text-gold { color: var(--primary-gold) !important; }
.text-cyan { color: var(--primary-blue) !important; }

/* ==================== BG COLORS ==================== */
.bg-primary { background: var(--bg-card) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-gradient { background: var(--gradient-primary) !important; }

/* ==================== UTILITIES ==================== */
.shadow { box-shadow: var(--shadow-md) !important; }
.rounded { border-radius: var(--radius-lg) !important; }
.border { border-color: var(--border-color) !important; }

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* Footer Mobile Fix */
@media (max-width: 767px) {
    .footer {
        padding: 40px 0 30px !important;
    }
    
    .footer h3, .footer h5 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .footer p {
        font-size: 0.85rem !important;
        text-align: center !important;
    }
    
    .footer a {
        font-size: 0.85rem !important;
        padding: 3px 0 !important;
    }
    
    .footer-contact-link {
        padding: 6px 0 !important;
        justify-content: center !important;
    }
    
    .footer-contact-link i {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .footer-social {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .footer-social a {
        width: 38px !important;
        height: 38px !important;
        margin: 0 5px !important;
    }
    
    .footer ul {
        text-align: center !important;
    }
    
    .footer ul li {
        display: inline-block !important;
        margin: 0 8px !important;
    }
    
    .footer ul li a {
        display: inline !important;
    }
    
    .footer-bottom {
        padding-top: 15px !important;
        margin-top: 20px !important;
    }
    
    .footer-bottom p {
        font-size: 0.75rem !important;
        text-align: center !important;
    }
}

/* Stats number mobile */
@media (max-width: 767px) {
    .stats-number {
        font-size: 2rem !important;
    }
}

/* WorkBridge WB - unified theme.
   Set by the inline bootstrap before the first paint, so refreshing a page in
   dark mode never flashes the light background. */
html.dark-mode-pre { background: #14213d !important; color-scheme: dark; }
html.dark-mode-pre body { background: #14213d !important; color: #ffffff; }
/* ================================================================
   NAVBAR - SINGLE SOURCE OF TRUTH
   ================================================================
   Everything navbar-related lives in this one section. All previous
   duplicate blocks were removed; do not add another override block
   elsewhere in this file.

   THEME MECHANISM (unchanged, do not replace):
     - localStorage key   : 'wb_theme'  ('light' | 'dark')
     - cookie             : wb_theme    (server renders body class)
     - documentElement    : .dark-mode-pre   (pre-paint, kills the white flash)
     - body               : .dark-mode       (all dark rules hang off this)

   STRUCTURE USED (preserved from the existing markup):
     <button class="navbar-toggler">
       <span>                       <- flex column wrapper
         <span class="toggler-bar"/> x3
   Bootstrap's .navbar-toggler-icon is NOT used, so the bars are styled
   directly instead of through a background-image.

   ORDER BELOW IS INTENTIONAL:
     1 NAVBAR BASE      - theme-independent geometry
     2 LIGHT NAVBAR     - white bar, navy links, navy bars
     3 DARK NAVBAR      - navy bar, light links, white bars
     4 MOBILE NAVBAR    - floating panel, no page-cover
     5 MOBILE DARK      - navy panel
     6 HAMBURGER        - button chrome
   ================================================================ */

/* ---------- 1. NAVBAR BASE ---------- */
/* Wide grid rows (e.g. .row.g-5 inside a .container) overflow the
   body, and because body defaults to overflow-x:visible that overflow
   reaches the viewport scrollbar. The scrollbar widens the initial
   containing block, which stretches this fixed navbar past the visible
   area. Clipping on both elements keeps the bar exactly viewport-wide. */
html,
body {
    overflow-x: hidden;
}

.navbar.navbar-expand-lg {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* the logo artwork is navy, so it needs a light chip in both themes */
.navbar-brand img {
    height: 50px;
    padding: 5px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.navbar-brand img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.navbar-nav {
    background: transparent;
}

/* ---------- 2. LIGHT MODE NAVBAR ---------- */
.navbar.navbar-expand-lg .navbar-nav .nav-link {
    color: #14213d;
}

.navbar.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar.navbar-expand-lg .navbar-nav .nav-link.active {
    background: rgba(252, 163, 17, 0.15);
    color: #14213d;
}

.navbar-brand-text {
    display: inline;
    color: #14213d;
    background: none;
    -webkit-text-fill-color: currentColor;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.navbar .btn-join {
    background: var(--gradient-gold);
    color: #14213d;
}

.navbar .btn-join:hover {
    background: var(--gradient-gold);
    color: #14213d;
}

/* ---------- 3. DARK MODE NAVBAR ---------- */
/* One background only: navy, matching the dark page. Never white, never gray. */
body.dark-mode .navbar.navbar-expand-lg,
body.dark-mode .navbar.navbar-expand-lg.navbar,
body.dark-mode .navbar.navbar-expand-lg.fixed-top {
    background: #14213d;
    background-color: #14213d;
    border-bottom: 1px solid #2d3f63;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand:hover,
body.dark-mode .navbar-brand:focus {
    color: #ffffff;
}

body.dark-mode .navbar-brand img {
    background: #ffffff;
    border-color: #2d3f63;
}

body.dark-mode .navbar-brand-text,
body.dark-mode .navbar-brand-text:hover {
    color: #fca311;
}

body.dark-mode .navbar.navbar-expand-lg .navbar-nav .nav-link {
    color: #c8d8e8;
}

body.dark-mode .navbar.navbar-expand-lg .navbar-nav .nav-link:hover,
body.dark-mode .navbar.navbar-expand-lg .navbar-nav .nav-link.active {
    background: rgba(252, 163, 17, 0.18);
    color: #fca311;
}

body.dark-mode .navbar .btn-join,
body.dark-mode .navbar .btn-join:hover {
    background: #fca311;
    color: #14213d;
}

body.dark-mode .navbar .btn-join i {
    color: #14213d;
}

/* ---------- 4. MOBILE NAVBAR (<=991px) ---------- */
@media (max-width: 991.98px) {
    /* The collapse used to expand the fixed <nav> itself, so the bar grew to
       ~590px and its background covered the whole page. Anchoring the panel
       instead keeps the bar at its natural height. */
    .navbar.navbar-expand-lg {
        padding: 0.8rem 0;
    }

    .navbar.navbar-expand-lg > .container {
        position: relative;
        flex-wrap: nowrap;
        align-items: center;
    }

    .navbar.navbar-expand-lg > .container > .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1045;
        margin: 0;
        padding: 10px 12px 16px;
        background: #ffffff;
        background-color: #ffffff;
        border: 1px solid var(--border-color);
        border-top: 0;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 45px rgba(20, 33, 61, 0.18);
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .navbar.navbar-expand-lg .navbar-collapse .navbar-nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .navbar.navbar-expand-lg .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0 0 6px;
        padding: 11px 14px;
        font-size: 0.98rem;
        border-radius: 10px;
        background: rgba(20, 33, 61, 0.04);
        color: #14213d;
    }

    .navbar.navbar-expand-lg .navbar-collapse .nav-link:hover,
    .navbar.navbar-expand-lg .navbar-collapse .nav-link.active {
        background: rgba(252, 163, 17, 0.18);
        color: #14213d;
    }

    .navbar.navbar-expand-lg .navbar-collapse .nav-link i,
    .navbar.navbar-expand-lg .navbar-collapse .nav-link svg {
        flex: 0 0 18px;
        width: 18px;
        text-align: center;
        color: #14213d;
    }

    .navbar.navbar-expand-lg .navbar-collapse .btn-join {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 4px;
        padding: 12px;
    }

    /* ---------- 5. MOBILE DARK ---------- */
    body.dark-mode .navbar.navbar-expand-lg > .container > .navbar-collapse,
    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse.show,
    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse.collapsing {
        background: #14213d;
        background-color: #14213d;
        border-color: #2d3f63;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
    }

    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse .nav-link {
        background: rgba(255, 255, 255, 0.06);
        color: #c8d8e8;
    }

    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse .nav-link:hover,
    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse .nav-link.active {
        background: rgba(252, 163, 17, 0.18);
        color: #fca311;
    }

    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse .nav-link i,
    body.dark-mode .navbar.navbar-expand-lg .navbar-collapse .nav-link svg {
        color: inherit;
    }
}

/* ---------- 6. HAMBURGER ---------- */
/* Bars carry no inline background, so this rule is the single place the
   colour is decided - that is what removes the "white square" bug. */
.navbar-toggler > span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.navbar-toggler .toggler-bar {
    display: block;
    width: 25px;
    height: 3px;
    background: #14213d;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.navbar.navbar-expand-lg .navbar-toggler {
    padding: 10px 14px;
    background: transparent;
    border: 2px solid #14213d;
    border-radius: 8px;
}

/* dark: navy button, gold ring, white bars */
body.dark-mode .navbar-toggler,
body.dark-mode .navbar-toggler:hover,
body.dark-mode .navbar-toggler:focus,
body.dark-mode .navbar-toggler:focus-visible,
body.dark-mode .navbar-toggler[aria-expanded="true"] {
    background: #14213d;
    border-color: #fca311;
}

body.dark-mode .navbar-toggler .toggler-bar {
    background: #ffffff;
}

body.dark-mode .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(252, 163, 17, 0.35);
}

/* ================================================================
   END NAVBAR
   ================================================================ */