/* Custom CSS styles for She Runs Ops - extends Tailwind CSS */

/* Note: Brand colors (navy, warm-orange, warm-orange-light, beige) are configured in Tailwind config */
/* Only custom styles that aren't available in Tailwind should be defined here */

/* Ensure main sections are always visible */
body, section, nav, footer {
    opacity: 1 !important;
}

/* Industry cards with responsive height */
.industry-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem;
}

.industry-card h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.industry-card p {
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
}

/* Social Share Widget Styles */
#socialShareWidget {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#socialShareWidget:hover {
    transform: translateY(-50%) scale(1.05);
}

/* Social share buttons hover effects */
.social-share-btn {
    transition: all 0.3s ease;
    transform: scale(1);
}

.social-share-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Modal animations */
#messageModal {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

#messageModal .bg-white {
    animation: slideIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Hide floating widget on mobile to avoid conflicts */
@media (max-width: 1023px) {
    #socialShareWidget {
        display: none !important;
    }
}

/* Contact information containers - better email handling */
.contact-info-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.contact-info-icon {
    flex-shrink: 0;
    padding: 1rem;
    border-radius: 1rem;
}

.contact-info-content {
    min-width: 0;
    flex: 1;
}

.contact-info-content h4 {
    margin-bottom: 0.25rem;
}

.contact-info-content a {
    word-break: break-all;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Ensure email text wraps properly on small screens */
@media (max-width: 640px) {
    .contact-info-content a {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

/* Responsive social share buttons in contact section */
@media (max-width: 640px) {
    .social-share-contact .flex {
        justify-content: center;
    }
    
    .social-share-contact button {
        flex: 1;
        min-width: 44px;
    }
}

/* Image hover rotation animations */
.image-hover-rotate {
    transition: transform 0.3s ease-in-out;
}

.image-hover-rotate:hover {
    transform: rotate(2deg) scale(1.02);
}

/* Reverse rotation for variety */
.image-hover-rotate-reverse {
    transition: transform 0.3s ease-in-out;
}

.image-hover-rotate-reverse:hover {
    transform: rotate(-2deg) scale(1.02);
}

/* Subtle rotation for smaller images */
.image-hover-rotate-subtle {
    transition: transform 0.3s ease-in-out;
}

.image-hover-rotate-subtle:hover {
    transform: rotate(1deg) scale(1.01);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .industry-card {
        min-height: 220px;
    }
    
    /* Reduce rotation on mobile for better UX */
    .image-hover-rotate:hover,
    .image-hover-rotate-reverse:hover {
        transform: rotate(1deg) scale(1.01);
    }
    
    .image-hover-rotate-subtle:hover {
        transform: rotate(0.5deg) scale(1.005);
    }
}

/* Fix for Industries section cards - uniform heights */
#industries .bg-beige {
    height: 280px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
    justify-content: space-between;
}

#industries .bg-beige .bg-warm-orange,
#industries .bg-beige .bg-navy {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

#industries .bg-beige h3 {
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

#industries .bg-beige p {
    flex: 1;
    display: flex;
    align-items: flex-start;
    text-align: center;
    line-height: 1.4;
    overflow: hidden;
}

@media (max-width: 768px) {
    #industries .bg-beige {
        height: 240px;
        padding: 1rem !important;
    }
    
    #industries .bg-beige h3 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    #industries .bg-beige p {
        font-size: 0.875rem;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    #industries .bg-beige {
        height: 220px;
        padding: 0.75rem !important;
    }
    
    #industries .bg-beige h3 {
        font-size: 0.9rem;
    }
    
    #industries .bg-beige p {
        font-size: 0.8rem;
        line-height: 1.2;
    }
}