/* Navigation styles for product simple pages with background images */

/* When hero has background image */
body.page-template-page-product-simple .navbar {
    background: transparent !important;
    transition: all 0.3s ease;
}

body.page-template-page-product-simple .navbar.navbar-light {
    background: transparent !important;
}

/* Make navbar transparent on pages with hero background */
body.page-template-page-product-simple .navbar-brand,
body.page-template-page-product-simple .navbar-nav .nav-link {
    color: #ffffff !important;
}

body.page-template-page-product-simple .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Dropdown styles */
body.page-template-page-product-simple .navbar .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Mobile menu toggle */
body.page-template-page-product-simple .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

body.page-template-page-product-simple .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Add background on scroll */
body.page-template-page-product-simple .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

body.page-template-page-product-simple .navbar.scrolled .navbar-brand,
body.page-template-page-product-simple .navbar.scrolled .navbar-nav .nav-link {
    color: #343f52 !important;
}

body.page-template-page-product-simple .navbar.scrolled .navbar-toggler {
    border-color: rgba(52, 63, 82, 0.5);
}

body.page-template-page-product-simple .navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2852, 63, 82, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}