/*
Theme Name: Spellrox Theme
Theme URI: http://example.com/spellrox
Author: Your Name
Description: A fully customizable, elegant, light red/pastel pink lifestyle blog theme. Features WordPress Customizer and Menu support.
Version: 2.1
Text Domain: spellrox
*/

body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Hero Gradient Animation */
.hero-gradient {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 50%, #fff5f5 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

.dark .hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e1115 50%, #0f172a 100%);
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scroll Reveal Animation */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image Zoom on Hover */
.img-zoom-container {
    overflow: hidden;
}
.img-zoom {
    transition: transform 0.6s ease;
}
.group:hover .img-zoom {
    transform: scale(1.05);
}

/* Floating elements */
.float-animation {
    animation: float 4s ease-in-out infinite;
}
.float-animation-delayed {
    animation: float 5s ease-in-out infinite 1s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- WORDPRESS DYNAMIC MENU STYLING --- */

/* Desktop Nav Styling */
.wp-desktop-menu { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; }
.wp-desktop-menu li { list-style: none; }
.wp-desktop-menu a {
    font-weight: 500;
    color: #4b5563; /* gray-600 */
    position: relative;
    transition: color 0.3s ease;
}
.dark .wp-desktop-menu a { color: #d1d5db; /* gray-300 */ }
.wp-desktop-menu a:hover { color: #ff6b6b; }
.wp-desktop-menu a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
    background-color: #ff6b6b; transition: width 0.3s ease;
}
.wp-desktop-menu a:hover::after { width: 100%; }

/* Mobile Menu Styling */
.wp-mobile-menu { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; }
.wp-mobile-menu li { list-style: none; }
.wp-mobile-menu a { font-weight: 500; color: #374151; transition: color 0.3s; display: block; }
.dark .wp-mobile-menu a { color: #e5e7eb; }
.wp-mobile-menu a:hover { color: #ff6b6b; }

/* Footer Menu Styling (For Privacy Policy, Terms, etc.) */
.wp-footer-menu { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; }
.wp-footer-menu li { list-style: none; }
.wp-footer-menu a { color: #6b7280; transition: color 0.3s; }
.dark .wp-footer-menu a { color: #9ca3af; }
.wp-footer-menu a:hover { color: #ff6b6b; }

/* --- POST CONTENT TYPOGRAPHY (Nayi CSS) --- */
.post-content p { margin-bottom: 1.5rem; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    color: #111827; 
    font-weight: 700; 
    margin-top: 2.5rem; 
    margin-bottom: 1rem; 
    line-height: 1.3;
}
.dark .post-content h1, .dark .post-content h2, .dark .post-content h3, .dark .post-content h4, .dark .post-content h5, .dark .post-content h6 { 
    color: #f9fafb; 
}
.post-content h2 { font-size: 2rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }

.post-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.post-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.post-content li { margin-bottom: 0.5rem; }

.post-content a { color: #ff6b6b; text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s; }
.post-content a:hover { color: #ff4d4d; }

.post-content blockquote { 
    border-left: 4px solid #ff6b6b; 
    padding: 1.5rem; 
    font-style: italic; 
    color: #4b5563; 
    background: #fff5f5; 
    border-radius: 0.5rem; 
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}
.dark .post-content blockquote { color: #d1d5db; background: #1e293b; border-color: #ff4d4d; }

.post-content img { 
    border-radius: 1rem; 
    margin: 2rem auto; 
    height: auto; 
    max-width: 100%; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.post-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}