/**
 * Logo and Navbar Customization Styles
 * 
 * Handles responsive logo sizing, navbar behavior, and logo placement options.
 * 
 * @package WP_Corporate
 * @since 1.0.0
 */

/* ==========================================================================
   Logo Responsive Sizing System
   ========================================================================== */

/* Base logo styles */
.logo-responsive,
.logo-responsive-hero {
    transition: all 0.3s ease;
    object-fit: contain;
    height: auto;
    width: auto;
}

/* Logo in navbar */
.logo-responsive {
    max-width: 200px; /* Fallback max-width */
}

/* Logo in hero section */
.logo-responsive-hero {
    max-width: 300px; /* Fallback max-width for hero */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   Navbar Behavior Styles
   ========================================================================== */

/* Fixed navbar behavior */
.navbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Normal navbar behavior */
.navbar-normal {
    position: relative;
    background-color: rgb(17 24 39); /* gray-900 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Navbar with hero - transparent initially */
.navbar-with-hero {
    background-color: transparent;
}

.navbar-with-hero.scrolled {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Logo Placement Styles
   ========================================================================== */

/* Logo container */
.logo-container {
    display: flex;
    align-items: center;
}

/* Logo in navbar */
.logo-in-navbar {
    /* Standard navbar logo styles */
}

/* Site name in navbar (when logo is in hero) */
.site-name-in-navbar {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-name-in-navbar:hover {
    color: rgb(129 140 248); /* indigo-400 */
}

/* Logo in hero section */
.logo-in-hero {
    margin-bottom: 2rem;
    text-align: center;
}

.logo-in-hero img {
    margin: 0 auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
   Mobile Menu Enhancements
   ========================================================================== */

/* Mobile menu improvements */
#mobile-menu {
    backdrop-filter: blur(8px);
}

/* Mobile menu logo sizing */
#mobile-menu .logo-responsive {
    max-height: 40px;
    max-width: 160px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .logo-responsive {
        max-width: 180px;
    }
    
    .logo-responsive-hero {
        max-width: 250px;
    }
}

/* Desktop adjustments */
@media (min-width: 1024px) {
    .logo-responsive {
        max-width: 200px;
    }
    
    .logo-responsive-hero {
        max-width: 300px;
    }
}

/* Large desktop adjustments */
@media (min-width: 1280px) {
    .logo-responsive-hero {
        max-width: 350px;
    }
}

/* ==========================================================================
   Animation Enhancements
   ========================================================================== */

/* Logo hover effects */
.logo-responsive:hover,
.logo-responsive-hero:hover {
    transform: scale(1.05);
}

/* Smooth transitions for navbar changes */
#site-header {
    transition: all 0.3s ease;
}

/* Logo fade-in animation for hero placement */
@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-in-hero {
    animation: logoFadeIn 0.6s ease-out;
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Focus states for logo links */
.logo-container a:focus {
    outline: 2px solid rgb(129 140 248); /* indigo-400 */
    outline-offset: 2px;
    border-radius: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .site-name-in-navbar {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    .navbar-with-hero.scrolled {
        background-color: rgba(0, 0, 0, 0.9);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .logo-responsive,
    .logo-responsive-hero,
    #site-header {
        transition: none;
    }
    
    .logo-responsive:hover,
    .logo-responsive-hero:hover {
        transform: none;
    }
    
    .logo-in-hero {
        animation: none;
    }
}

/* ==========================================================================
   Navigation Color Customization
   ========================================================================== */

/* Navigation link styling with custom colors */
.nav-link-custom {
    transition: color 0.3s ease;
}

.nav-link-custom:hover {
    opacity: 0.8;
}

/* Mobile menu navigation links */
#mobile-menu nav a {
    transition: color 0.3s ease;
}

#mobile-menu nav a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   WhatsApp Integration Styles
   ========================================================================== */

/* Floating WhatsApp Button */
#floating-whatsapp {
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* WhatsApp button hover effects */
#floating-whatsapp a:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Navigation WhatsApp button */
.whatsapp-nav-button {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    transition: all 0.3s ease;
}

.whatsapp-nav-button:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* ==========================================================================
   Responsive WhatsApp Features
   ========================================================================== */

/* Hide floating button on desktop */
@media (min-width: 768px) {
    #floating-whatsapp {
        display: none !important;
    }
}

/* Adjust floating button position for mobile browsers */
@media (max-width: 767px) {
    #floating-whatsapp {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    /* Account for mobile browser UI */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        #floating-whatsapp {
            bottom: calc(1.5rem + env(safe-area-inset-bottom));
        }
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #site-header {
        position: static !important;
        background: white !important;
        box-shadow: none !important;
    }

    .logo-responsive,
    .logo-responsive-hero {
        max-height: 60px !important;
        filter: none !important;
    }

    #mobile-menu,
    #floating-whatsapp {
        display: none !important;
    }
}