/*
Theme Name: Hooked On A Needle
Theme URI: https://hookedonaneedle.com
Author: Hooked On A Needle
Author URI: https://hookedonaneedle.com
Description: A cozy crochet fiber arts theme for Hooked On A Needle. Features a modern design with light/dark mode, email waitlist functionality, and ACF-powered content management.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hookedonaneedle

This theme requires Advanced Custom Fields Pro plugin for full functionality.
*/

/* Additional custom styles beyond Tailwind */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Dark mode transitions */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Crochet background pattern */
.crochet-bg {
    background-image: linear-gradient(rgba(253, 246, 245, 0.85), rgba(253, 246, 245, 0.85)), url('assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.dark .crochet-bg {
    background-image: linear-gradient(rgba(26, 22, 22, 0.9), rgba(26, 22, 22, 0.9)), url('assets/images/hero-bg.jpg');
}

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

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Form focus states */
input:focus {
    outline: none;
}

/* Loading spinner */
.spinner {
    border: 2px solid rgba(139, 74, 78, 0.2);
    border-top-color: #8B4A4E;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* JS-controlled hidden state (use .js-hidden instead of .hidden to avoid Tailwind conflict) */
.js-hidden {
    display: none !important;
}

/* Mobile menu styles */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.open {
    transform: translateX(0);
}