/* Custom CSS for Hydropower Company Website */

/* General Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hero Section Styles */
.hero-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

/* Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-semibold;
}

.btn-secondary {
    @apply bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg hover:bg-white hover:text-blue-600 transition-colors font-semibold;
}

.btn-accent {
    @apply bg-red-500 text-white px-6 py-3 rounded-lg hover:bg-red-600 transition-colors font-semibold;
}

/* Card Styles */
.card-hover {
    @apply bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300;
}

/* Text Truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .mobile-menu.active {
        max-height: 500px;
    }
}

/* Project Status Badges */
.status-planning {
    @apply bg-blue-500 text-white;
}

.status-under_construction {
    @apply bg-yellow-500 text-white;
}

.status-completed {
    @apply bg-green-500 text-white;
}

.status-operational {
    @apply bg-purple-500 text-white;
}

/* Team Member Cards */
.team-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300;
}

.team-card:hover {
    transform: translateY(-5px);
}

/* News Cards */
.news-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300;
}

.news-card:hover {
    transform: translateY(-5px);
}

/* Service Cards */
.service-card {
    @apply bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-all duration-300;
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Contact Form Styles */
.contact-form input,
.contact-form textarea {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

.contact-form input:focus,
.contact-form textarea:focus {
    @apply border-blue-500;
}

/* Footer Styles */
.footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
}

/* Social Media Icons */
.social-icon {
    @apply w-10 h-10 bg-gray-700 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors;
}

/* Loading Spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.bg-gradient-accent {
    background: linear-gradient(135deg, #1e40af 0%, #dc2626 100%);
}

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

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

/* Responsive Grid Adjustments */
@media (max-width: 640px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* Image Placeholder Styles */
.image-placeholder {
    @apply bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center;
}

/* Section Spacing */
.section-padding {
    @apply py-16;
}

.section-margin {
    @apply mb-16;
}

/* Typography */
.heading-primary {
    @apply text-4xl md:text-5xl font-bold text-gray-800;
}

.heading-secondary {
    @apply text-3xl md:text-4xl font-bold text-gray-800;
}

.heading-tertiary {
    @apply text-2xl font-bold text-gray-800;
}

.text-large {
    @apply text-xl text-gray-600;
}

/* Color Scheme */
.text-primary {
    color: #1e40af;
}

.text-accent {
    color: #dc2626;
}

.bg-primary {
    background-color: #1e40af;
}

.bg-accent {
    background-color: #dc2626;
}

.border-primary {
    border-color: #1e40af;
}

.border-accent {
    border-color: #dc2626;
}

/* Hover Effects */
.hover-lift {
    @apply transition-transform duration-300 hover:scale-105;
}

.hover-shadow {
    @apply transition-shadow duration-300 hover:shadow-xl;
}

/* Custom Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Button Variants */
.btn-outline {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-600 hover:text-white transition-colors font-semibold;
}

.btn-text {
    @apply text-blue-600 hover:text-blue-800 font-medium transition-colors;
}

/* Card Variants */
.card-simple {
    @apply bg-white rounded-lg shadow-lg p-6;
}

.card-featured {
    @apply bg-white rounded-lg shadow-xl p-8 border-2 border-blue-600;
}

/* List Styles */
.list-unstyled {
    @apply list-none p-0;
}

.list-inline {
    @apply flex space-x-4;
}

/* Badge Styles */
.badge-primary {
    @apply bg-blue-600 text-white px-3 py-1 rounded-full text-sm;
}

.badge-accent {
    @apply bg-red-500 text-white px-3 py-1 rounded-full text-sm;
}

.badge-success {
    @apply bg-green-500 text-white px-3 py-1 rounded-full text-sm;
}

.badge-warning {
    @apply bg-yellow-500 text-white px-3 py-1 rounded-full text-sm;
}

/* Alert Styles */
.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded;
}

/* Responsive Text */
.text-responsive {
    @apply text-lg sm:text-xl lg:text-2xl;
}

/* Responsive Padding */
.padding-responsive {
    @apply px-4 sm:px-6 lg:px-8;
}

/* Responsive Margin */
.margin-responsive {
    @apply mx-4 sm:mx-6 lg:mx-8;
}