/* Additional styles for career tools pages */

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2563eb;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Loading animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Progress bar styles */
.progress-container {
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transition: width 0.5s ease;
}

/* Book card styles */
.book-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.book-card:hover {
    border-color: #2563eb;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Option selection styles */
.option-selected {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    border-color: #2563eb;
}

/* Domain category badges */
.domain-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-ai {
    background: rgba(168, 85, 247, 0.1);
    color: #7c3aed;
}

.badge-cloud {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.badge-cyber {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.badge-web {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.badge-data {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

/* Skill level indicators */
.level-beginner {
    background: #dcfce7;
    color: #16a34a;
}

.level-intermediate {
    background: #fef3c7;
    color: #d97706;
}

.level-advanced {
    background: #fee2e2;
    color: #dc2626;
}

/* Responsive table */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.responsive-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

@media (max-width: 768px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
    }
}