/* ===================================
   Lagi Header & Footer Customizer
   Frontend Styles
   =================================== */

/* Custom Header Styles */
.site-header.lagi-hfc-header {
    transition: all 0.3s ease;
}

.lagi-hfc-header .custom-logo {
    height: auto;
    transition: all 0.3s ease;
}

.lagi-hfc-header .custom-logo:hover {
    transform: scale(1.05);
}

/* Custom Footer Styles */
.site-footer.lagi-hfc-footer {
    transition: all 0.3s ease;
}

.lagi-hfc-footer .custom-logo {
    max-width: 200px;
    height: auto;
}

/* Smooth transitions for all links */
.lagi-hfc-header a,
.lagi-hfc-footer a {
    transition: all 0.3s ease;
}

/* Button styles with brand colors */
.lagi-hfc-header .btn-primary,
.lagi-hfc-footer .btn-primary {
    background-color: var(--lagi-hfc-primary, #2563eb);
    transition: all 0.3s ease;
}

.lagi-hfc-header .btn-primary:hover,
.lagi-hfc-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.lagi-hfc-header .btn-accent,
.lagi-hfc-footer .btn-accent {
    background-color: var(--lagi-hfc-accent, #f59e0b);
    transition: all 0.3s ease;
}

.lagi-hfc-header .btn-accent:hover,
.lagi-hfc-footer .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lagi-hfc-header .custom-logo {
        max-width: var(--lagi-hfc-logo-mobile-width, 140px) !important;
    }
}

/* Animation for header on scroll */
.lagi-hfc-header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Footer social links hover effect */
.lagi-hfc-footer .social-link {
    transition: all 0.3s ease;
}

.lagi-hfc-footer .social-link:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

/* Contact items hover effect */
.lagi-hfc-footer .contact-item {
    transition: all 0.3s ease;
}

.lagi-hfc-footer .contact-item:hover {
    transform: translateX(5px);
}