/*
Theme Name: SKN Jobs
Description: A modern WordPress theme for the SKN Jobs platform, designed to showcase jobs and services in St. Kitts and Nevis. Features responsive design, filtering capabilities, and seamless integration with the SKN Jobs plugin.
Version: 1.0.0
Author: SKN Jobs Team
Text Domain: skn-jobs
Domain Path: /languages
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

SKN Jobs is a custom WordPress theme built specifically for the SKN Jobs platform.
It provides a modern, responsive interface for browsing jobs, services, and connecting
with local talent in St. Kitts and Nevis.

Features:
- Responsive design optimized for all devices
- Custom page templates for jobs, services, and worker profiles
- Advanced filtering and search functionality
- Integration with SKN Jobs plugin
- Modern Bootstrap 5 styling
- Font Awesome icons
- SEO optimized
- Fast loading and performance focused

This theme is designed to work seamlessly with the SKN Jobs WordPress plugin
and provides a complete web presence alongside the mobile application.
*/

/* Mobile App Style Enhancements */

/* Line clamp utility for text truncation */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .max-w-4xl {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Mobile header adjustments */
    .sticky.top-0 {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    /* Card spacing for mobile */
    .space-y-4 > * + * {
        margin-top: 1rem;
    }
    
    /* Button sizing for mobile */
    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    /* Text sizing for mobile */
    .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* Enhanced card shadows and borders */
.bg-white.rounded-xl {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.bg-white.rounded-xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease-in-out;
}

/* Status badges */
.bg-green-100.text-green-600 {
    background-color: #dcfce7;
    color: #16a34a;
}

.bg-gray-100.text-gray-600 {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Application count badges */
.bg-green-50 {
    background-color: #f0fdf4;
}

/* Mobile app color scheme */
.text-orange-600 {
    color: #ea580c;
}

.bg-orange-600 {
    background-color: #ea580c;
}

.bg-orange-600:hover {
    background-color: #c2410c;
}

.text-green-600 {
    color: #16a34a;
}

.bg-green-600 {
    background-color: #16a34a;
}

.bg-green-600:hover {
    background-color: #15803d;
}

/* Smooth transitions */
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Focus states for accessibility */
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-orange-500:focus {
    --tw-ring-color: #f97316;
}

.focus\:ring-green-500:focus {
    --tw-ring-color: #22c55e;
}

/* Mobile navigation improvements */
@media (max-width: 640px) {
    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    /* Stack stats on very small screens */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Notification styles */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state svg {
    margin: 0 auto 1rem;
    color: #d1d5db;
}

/* Menu item hover effects */
.menu-item:hover {
    background-color: #f9fafb;
    transition: background-color 0.15s ease-in-out;
}

/* Profile image styling */
.profile-image {
    border: 4px solid white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Action button styling */
.action-button {
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.action-button:hover {
    background-color: #f3f4f6;
}

/* Status indicator */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}