/*
Theme Name: Outlaw Woodworks
Description: Custom theme for Outlaw Woodworks premium wood siding company
Version: 1.0
Author: Custom Development
*/

/* Theme styles will be imported from the original static site */

/* Base styles from original site */
.fade-dropdown {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}

.fade-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    z-index: 20;
}

.fade-in-1 { opacity: 0; animation: fadeInUp .5s .08s forwards; }
.fade-in-2 { opacity: 0; animation: fadeInUp .5s .18s forwards; }
.fade-in-3 { opacity: 0; animation: fadeInUp .5s .26s forwards; }
.fade-in-4 { opacity: 0; animation: fadeInUp .5s .34s forwards; }
.fade-in-5 { opacity: 0; animation: fadeInUp .5s .42s forwards; }
.fade-in-6 { opacity: 0; animation: fadeInUp .5s .50s forwards; }
.fade-in-7 { opacity: 0; animation: fadeInUp .5s .58s forwards; }
.fade-in-8 { opacity: 0; animation: fadeInUp .5s .66s forwards; }

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        filter: blur(5px); 
        transform: translateY(16px);
    }
    to { 
        opacity: 1; 
        filter: blur(0px); 
        transform: translateY(0);
    }
}

body { 
    font-family: 'Inter', sans-serif; 
}

/* Hamburger animation */
.hamburger span { 
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.hamburger.open span:nth-child(1) { 
    transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) { 
    opacity: 0;
}
.hamburger.open span:nth-child(3) { 
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu animation */
.mobile-menu {
    transition: transform 0.38s cubic-bezier(.4,0,.2,1), opacity 0.25s;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.mobile-menu.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.mobile-menu-bg {
    transition: opacity 0.25s;
    opacity: 0;
    pointer-events: none;
}
.mobile-menu-bg.open {
    opacity: 1;
    pointer-events: auto;
}

/* Custom styles for WordPress */
.text-primary {
    color: #000;
}

.visible {
    opacity: 1 !important;
}

/* Add any other styles from the original CSS that are needed */