/* 
   Modern Button Styles - Aligned with AlphaCode Design System
   Enhanced with gradients, shadows, and smooth animations
*/

/* Primary button style for all card buttons - including service card buttons */
.product-card a[href="contact.html"],
.application-solution-card a[href="contact.html"],
.industry-card a[href="contact.html"],
div[class*="-card"]:not(.service-card) a[href="contact.html"],
div[class*="-card"]:not(.service-card) a.cta-button,
.service-card a.cta-button,
.application-solution-card a.cta-button,
.project-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    font-weight: 600 !important; /* font-semibold for better readability */
    font-size: 0.875rem !important; /* text-sm */
    padding: 0.75rem 1.75rem !important; /* More horizontal padding */
    border-radius: 12px !important; /* Match card border-radius */
    border: none !important;
    box-shadow: 
        0 4px 14px 0 rgba(37, 99, 235, 0.25),
        0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure all instances have white text, including carousel and About section buttons */
.project-btn,
a.project-btn,
.carousel-slide .project-btn,
.carousel-slide a.inline-block[class*="bg-blue"],
section a.project-btn {
    color: white !important;
}

/* Force white text with highest specificity */
.carousel-slide a[style*="color"] {
    color: white !important;
}

section a.project-btn[style*="color"] {
    color: white !important;
}

/* Enhanced hover effects */
.product-card a[href="contact.html"]:hover,
.application-solution-card a[href="contact.html"]:hover,
.industry-card a[href="contact.html"]:hover,
div[class*="-card"]:not(.service-card) a[href="contact.html"]:hover,
div[class*="-card"]:not(.service-card) a.cta-button:hover,
.service-card a.cta-button:hover,
.application-solution-card a.cta-button:hover,
.project-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 25px 0 rgba(37, 99, 235, 0.35),
        0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Ensure hover states maintain white text for all instances */
.project-btn:hover,
a.project-btn:hover,
.carousel-slide .project-btn:hover,
.carousel-slide a.inline-block[class*="bg-blue"]:hover,
section a.project-btn:hover {
    color: white !important;
}

/* Force white text on hover with highest specificity */
.carousel-slide a[style*="color"]:hover {
    color: white !important;
}

section a.project-btn[style*="color"]:hover {
    color: white !important;
}

/* Universal button text override - highest priority */
.project-btn * {
    color: inherit !important;
}

/* Active state */
.product-card a[href="contact.html"]:active,
.application-solution-card a[href="contact.html"]:active,
.industry-card a[href="contact.html"]:active,
div[class*="-card"]:not(.service-card) a[href="contact.html"]:active,
div[class*="-card"]:not(.service-card) a.cta-button:active,
.project-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 
        0 6px 20px 0 rgba(37, 99, 235, 0.3),
        0 3px 8px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Modern icon styling for arrows */
.product-card a[href="contact.html"] svg,
.application-solution-card a[href="contact.html"] svg,
.industry-card a[href="contact.html"] svg,
div[class*="-card"]:not(.service-card) a[href="contact.html"] svg,
div[class*="-card"]:not(.service-card) a.cta-button svg,
.project-btn svg {
    height: 1rem !important;
    width: 1rem !important;
    display: inline !important;
    margin-left: 0.5rem !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Arrow animation on hover */
.product-card a[href="contact.html"]:hover svg,
.application-solution-card a[href="contact.html"]:hover svg,
.industry-card a[href="contact.html"]:hover svg,
div[class*="-card"]:not(.service-card) a[href="contact.html"]:hover svg,
div[class*="-card"]:not(.service-card) a.cta-button:hover svg,
.project-btn:hover svg {
    transform: translateX(2px) !important;
}

/* Add arrow icon if it doesn't exist - with modern styling */
.product-card a[href="contact.html"]:not(:has(svg))::after,
.application-solution-card a[href="contact.html"]:not(:has(svg))::after,
.industry-card a[href="contact.html"]:not(:has(svg))::after,
div[class*="-card"]:not(.service-card) a[href="contact.html"]:not(:has(svg))::after,
div[class*="-card"]:not(.service-card) a.cta-button:not(:has(svg))::after {
    content: "→";
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow animation for pseudo-element */
.product-card a[href="contact.html"]:not(:has(svg)):hover::after,
.application-solution-card a[href="contact.html"]:not(:has(svg)):hover::after,
.industry-card a[href="contact.html"]:not(:has(svg)):hover::after,
div[class*="-card"]:not(.service-card) a[href="contact.html"]:not(:has(svg)):hover::after,
div[class*="-card"]:not(.service-card) a.cta-button:not(:has(svg)):hover::after {
    transform: translateX(2px);
}

/* Secondary button style for open source links */
.product-card a[href="#"] {
    display: inline-flex !important;
    align-items: center !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.product-card a[href="#"]:hover {
    color: #1d4ed8 !important;
    border-bottom-color: #1d4ed8 !important;
}

/* Modern link buttons for advantage/feature cards */
.advantage-card a[href],
.feature-card a[href] {
    display: inline-flex !important;
    align-items: center !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.advantage-card a[href]:hover,
.feature-card a[href]:hover {
    color: #1d4ed8 !important;
    border-bottom-color: #1d4ed8 !important;
}

/* Arrow animation for service card buttons */
.service-card a.cta-button:not(:has(svg))::after,
.application-solution-card a.cta-button:not(:has(svg))::after {
    content: "→";
    font-size: 1rem;
    margin-left: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card a.cta-button:not(:has(svg)):hover::after,
.application-solution-card a.cta-button:not(:has(svg)):hover::after {
    transform: translateX(2px);
}

/* Product cards project buttons */
.product-card a.project-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
}

/* Explicit exceptions for navbar and footer links */
.nav-link, 
.footer-link, 
.social-icon, 
.navbar a,
#navbar-container a, 
#mobile-menu a,
#footer-container a,
footer a, 
.footer-container a {
    display: inline !important;
    background-color: transparent !important;
    color: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: color 0.2s ease-in-out !important;
}