/**
 * Hero Section Button Styles
 * 
 * Centers the buttons and styles the second button with dark maroon background
 * Includes smooth transition effects for dynamic interactions
 */

/* Center the hero section buttons */
.mandyju-hero-section .wp-block-buttons {
    justify-content: center !important;
}

/* Base styles for all hero buttons with smooth transitions */
.mandyju-hero-section .wp-block-buttons .wp-block-button .wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover effects for all hero buttons */
.mandyju-hero-section .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Active/focus states for accessibility and feedback */
.mandyju-hero-section .wp-block-buttons .wp-block-button .wp-block-button__link:active {
    transform: translateY(0) !important;
    transition-duration: 0.1s !important;
}

/* Style the second button with dark maroon background */
.mandyju-hero-section .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-alt) !important;
    color: var(--wp--preset--color--white) !important;
    border-color: var(--wp--preset--color--primary-alt) !important;
}

/* Enhanced hover effect for the second button */
.mandyju-hero-section .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary-alt-hover) !important;
    border-color: var(--wp--preset--color--primary-alt-hover) !important;
    box-shadow: 0 6px 20px rgba(118, 50, 53, 0.3) !important;
}

/* Smooth scaling animation on button container load */
.mandyju-hero-section .wp-block-buttons {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

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