/* PCSW Website Styles */

/* HTMX Loading States and Transitions */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Smooth content transitions */
#main-content {
    transition: opacity 150ms ease-in-out;
}

.htmx-swapping #main-content {
    opacity: 0.5;
}

/* Tab button active states */
.tab-button.active {
    background-color: #1d4ed8 !important;
}

/* Hover effects for interactive elements */
.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Form styling improvements */
input[type="text"], 
input[type="email"], 
textarea {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Navigation improvements */
nav a {
    position: relative;
    transition: all 0.2s ease-in-out;
}

nav a:hover {
    transform: translateY(-1px);
}

/* Loading animation for content areas */
.content-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}