/* Category card animations */
.category-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* Guide card animations */
.guide-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border-color: #3b82f6;
}

.guide-card a:hover {
background: #2563eb;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
.diy-hero h1 {
font-size: 2.5rem !important;
}

.diy-hero p {
font-size: 1.1rem !important;
}

.category-card {
padding: 20px !important;
}

.guide-card .padding {
padding: 20px !important;
}

h2 {
font-size: 2rem !important;
}

.guide-card h3 {
font-size: 1.1rem !important;
}
}

/* Search enhancement */
#guide-search:focus {
outline: 2px solid #059669;
outline-offset: 2px;
}

/* Category selection state */
.category-card.selected {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

document.addEventListener(‘DOMContentLoaded’, function() {
// Search functionality
const searchInput = document.getElementById(‘guide-search’);
const searchBtn = searchInput.nextElementSibling;

searchBtn.addEventListener(‘click’, function() {
const query = searchInput.value.trim();
if (query) {
window.location.href = ‘/diy-guides/search/?q=’ + encodeURIComponent(query);
}
});

searchInput.addEventListener(‘keypress’, function(e) {
if (e.key === ‘Enter’) {
searchBtn.click();
}
});

// Category selection
document.querySelectorAll(‘.category-card’).forEach(card => {
card.addEventListener(‘click’, function() {
const category = this.dataset.category;
window.location.href = ‘/diy-guides/category/’ + category + ‘/’;
});
});

// Guide card interactions
document.querySelectorAll(‘.guide-card’).forEach(card => {
const link = card.querySelector(‘a’);
if (link) {
card.addEventListener(‘click’, function(e) {
if (e.target.tagName !== ‘A’) {
link.click();
}
});
}
});

// Smooth scroll for community links
document.querySelectorAll(‘a[href^=”/community/”]’).forEach(link => {
link.addEventListener(‘click’, function(e) {
// Add tracking or special handling for community links
console.log(‘Community link clicked:’, this.href);
});
});

// Add view tracking for guides
function trackGuideView(guideId) {
// This would send analytics data in a real implementation
console.log(‘Guide viewed:’, guideId);
}

// Intersection Observer for guide cards
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}
});
}, {
threshold: 0.1,
rootMargin: ’50px’
});

// Observe all guide cards
document.querySelectorAll(‘.guide-card’).forEach(card => {
card.style.opacity = ‘0’;
card.style.transform = ‘translateY(20px)’;
card.style.transition = ‘opacity 0.6s ease, transform 0.6s ease’;
observer.observe(card);
});
});

// Popular search suggestions
const popularSearches = [
‘roof repair’, ‘door hinge’, ‘weatherproofing’, ‘maintenance checklist’,
‘foundation repair’, ‘window replacement’, ‘lock installation’
];

// Add search suggestions (placeholder for future enhancement)
function showSearchSuggestions(query) {
return popularSearches.filter(search =>
search.toLowerCase().includes(query.toLowerCase())
);
}