/**
 * Job Portal - Branding & Customization
 * 
 * 🎨 BRAND COLORS ARE MANAGED IN: _branding-config.css
 * 
 * To change brand colors:
 * 1. Open: wp-content/themes/astra-child/assets/css/_branding-config.css
 * 2. Edit the color values in the :root section
 * 3. Save and refresh browser
 * 4. Done! All colors update everywhere
 * 
 * This file applies the colors to all UI components.
 * DO NOT edit color values here - change them in _branding-config.css instead.
 */

/* Import centralized brand color configuration */
@import url('./_branding-config.css');

/* ========================================
   1. HEADER & NAVIGATION
   ======================================== */

header, .site-header {
    background-color: var(--color-primary);
    color: white;
}

header a, .site-header a {
    color: white;
    transition: opacity 0.3s ease;
}

header a:hover, .site-header a:hover {
    opacity: 0.8;
}

/* Main Navigation */
.main-navigation a {
    color: white;
    font-weight: 500;
}

.main-navigation a:hover {
    color: var(--color-secondary);
}

/* ========================================
   2. BUTTONS & CTAs
   ======================================== */

.button, button, input[type="submit"], input[type="button"] {
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.button.primary, .button-primary {
    background-color: var(--color-primary);
}

.button.primary:hover, .button-primary:hover {
    background-color: var(--color-secondary);
}

.button.secondary, .button-secondary {
    background-color: var(--color-secondary);
    color: white;
}

/* ========================================
   3. BADGES & LABELS
   ======================================== */

.badge, .badge-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.badge-success {
    background-color: var(--color-success);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: white;
}

.badge-error, .badge-danger {
    background-color: var(--color-error);
    color: white;
}

/* ========================================
   4. JOB LISTINGS & CARDS
   ======================================== */

.job-card, .job-listing, .card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    background-color: white;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-small);
}

.job-card:hover, .job-listing:hover, .card:hover {
    box-shadow: var(--shadow-large);
    transform: translateY(-4px);
}

.job-card h3, .job-listing h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.job-card .company-name {
    color: var(--color-muted);
    font-size: 0.95em;
    font-weight: 500;
}

.job-card .location, .job-card .salary {
    color: var(--color-muted);
    font-size: 0.9em;
    margin: 5px 0;
}

/* ========================================
   5. FORMS & INPUTS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px;
    font-family: var(--font-primary);
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

label {
    color: var(--color-dark);
    font-weight: 500;
}

/* ========================================
   6. DASHBOARD & PANELS
   ======================================== */

.dashboard-panel, .user-dashboard {
    background-color: var(--color-light);
    border-radius: 8px;
    padding: 20px;
}

.dashboard-panel h2, .user-dashboard h2 {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);
    padding-bottom: 10px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-box {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    border-left: 4px solid var(--color-primary);
}

.stat-box .number {
    font-size: 2em;
    font-weight: bold;
    color: var(--color-primary);
}

.stat-box .label {
    color: var(--color-muted);
    font-size: 0.9em;
}

/* ========================================
   7. ALERTS & MESSAGES
   ======================================== */

.alert, .notice {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary);
}

.alert-success {
    background-color: var(--color-success-light);
    border-left-color: var(--color-success);
    color: #155724;
}

.alert-warning {
    background-color: var(--color-warning-light);
    border-left-color: var(--color-warning);
    color: #856404;
}

.alert-error, .alert-danger {
    background-color: var(--color-error-light);
    border-left-color: var(--color-error);
    color: #721c24;
}

.alert-info {
    background-color: var(--color-info-light);
    border-left-color: var(--color-info);
    color: #0c5460;
}

/* ========================================
   8. TABLES
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table thead {
    background-color: var(--color-primary);
    color: white;
}

table td, table th {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

table tbody tr:hover {
    background-color: var(--color-light);
}

/* ========================================
   9. FOOTER
   ======================================== */

footer, .site-footer {
    background-color: var(--color-dark);
    color: white;
    margin-top: 40px;
    padding: 40px 0;
}

footer a, .site-footer a {
    color: var(--color-secondary);
    text-decoration: none;
}

footer a:hover, .site-footer a:hover {
    text-decoration: underline;
}

/* ========================================
   10. HERO SECTION
   ======================================== */

.hero, .page-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 40px;
}

.hero h1, .page-hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p, .page-hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* ========================================
   11. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .hero h1, .page-hero h1 {
        font-size: 1.8em;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    header, .site-header {
        padding: 15px;
    }
}

/* ========================================
   12. UTILITY CLASSES
   ======================================== */

.text-primary {
    color: var(--color-primary);
}

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

.text-muted {
    color: var(--color-muted);
}

.bg-primary {
    background-color: var(--color-primary);
    color: white;
}

.bg-light {
    background-color: var(--color-light);
}

.rounded {
    border-radius: 8px;
}

header, .site-header {
    background-color: var(--color-primary);
    color: white;
}

header a, .site-header a {
    color: white;
    transition: opacity 0.3s ease;
}

header a:hover, .site-header a:hover {
    opacity: 0.8;
}

/* Main Navigation */
.main-navigation a {
    color: white;
    font-weight: 500;
}

.main-navigation a:hover {
    color: var(--color-secondary);
}

/* ========================================
   3. BUTTONS & CTAs
   ======================================== */

.button, button, input[type="submit"], input[type="button"] {
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.button.primary, .button-primary {
    background-color: var(--color-primary);
}

.button.primary:hover, .button-primary:hover {
    background-color: var(--color-secondary);
}

.button.secondary, .button-secondary {
    background-color: var(--color-secondary);
    color: white;
}

/* ========================================
   4. BADGES & LABELS
   ======================================== */

.badge, .badge-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.badge-success {
    background-color: var(--color-success);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: white;
}

.badge-error, .badge-danger {
    background-color: var(--color-error);
    color: white;
}

/* ========================================
   5. JOB LISTINGS & CARDS
   ======================================== */

.job-card, .job-listing, .card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    background-color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.job-card:hover, .job-listing:hover, .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.job-card h3, .job-listing h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.job-card .company-name {
    color: var(--color-muted);
    font-size: 0.95em;
    font-weight: 500;
}

.job-card .location, .job-card .salary {
    color: var(--color-muted);
    font-size: 0.9em;
    margin: 5px 0;
}

/* ========================================
   6. FORMS & INPUTS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px;
    font-family: var(--font-primary);
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

label {
    color: var(--color-dark);
    font-weight: 500;
}

/* ========================================
   7. DASHBOARD & PANELS
   ======================================== */

.dashboard-panel, .user-dashboard {
    background-color: var(--color-light);
    border-radius: 8px;
    padding: 20px;
}

.dashboard-panel h2, .user-dashboard h2 {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);
    padding-bottom: 10px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-box {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    border-left: 4px solid var(--color-primary);
}

.stat-box .number {
    font-size: 2em;
    font-weight: bold;
    color: var(--color-primary);
}

.stat-box .label {
    color: var(--color-muted);
    font-size: 0.9em;
}

/* ========================================
   8. ALERTS & MESSAGES
   ======================================== */

.alert, .notice {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary);
}

.alert-success {
    background-color: #d4edda;
    border-left-color: var(--color-success);
    color: #155724;
}

.alert-warning {
    background-color: #fff3cd;
    border-left-color: var(--color-warning);
    color: #856404;
}

.alert-error, .alert-danger {
    background-color: #f8d7da;
    border-left-color: var(--color-error);
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-left-color: var(--color-primary);
    color: #0c5460;
}

/* ========================================
   9. TABLES
   ======================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table thead {
    background-color: var(--color-primary);
    color: white;
}

table td, table th {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

table tbody tr:hover {
    background-color: var(--color-light);
}

/* ========================================
   10. FOOTER
   ======================================== */

footer, .site-footer {
    background-color: var(--color-dark);
    color: white;
    margin-top: 40px;
    padding: 40px 0;
}

footer a, .site-footer a {
    color: var(--color-secondary);
    text-decoration: none;
}

footer a:hover, .site-footer a:hover {
    text-decoration: underline;
}

/* ========================================
   11. HERO SECTION
   ======================================== */

.hero, .page-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 40px;
}

.hero h1, .page-hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p, .page-hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* ========================================
   12. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .hero h1, .page-hero h1 {
        font-size: 1.8em;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    header, .site-header {
        padding: 15px;
    }
}

/* ========================================
   13. UTILITY CLASSES
   ======================================== */

.text-primary {
    color: var(--color-primary);
}

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

.text-muted {
    color: var(--color-muted);
}

.bg-primary {
    background-color: var(--color-primary);
    color: white;
}

.bg-light {
    background-color: var(--color-light);
}

.rounded {
    border-radius: 8px;
}

.margin-top-20 { margin-top: 20px; }
.margin-bottom-20 { margin-bottom: 20px; }
.padding-20 { padding: 20px; }

/* ========================================
   END OF BRANDING STYLES
   
   ⚠️  TO CHANGE COLORS:
   Edit: wp-content/themes/astra-child/assets/css/_branding-config.css
   
   Changes to that file instantly update all brand colors everywhere!
   ======================================== */