/**
 * Header & Menu Styles - Unified
 * Includes: Menu styling, Cart icon, Sticky header on scroll up
 */

/* ===== STICKY HEADER ON SCROLL UP ===== */

.has-sticky-header .site-header {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease !important;
}

/* When header becomes sticky (past 50px scroll) */
.site-header.header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Hide header when scrolling down */
.site-header.header-hidden {
    transform: translateY(-100%) !important;
}

/* Show header when scrolling up */
.site-header:not(.header-hidden) {
    transform: translateY(0) !important;
}


/* ===== MENU STYLES ===== */

/* Main menu container */
.main-navigation ul,
.primary-menu,
nav ul {
    display: flex !important;
    gap: 8px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Base menu item style - rounded pills */
.menu-item a {
    display: flex !important;
    height: 48px !important;
    align-items: center;
    justify-content: center;
    padding: 12px 16px !important;
    background-color: transparent !important;
    color: var(--contrast) !important;
    text-decoration: none;
    border-radius: 32px;
    white-space: nowrap;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover state for all menu items */
.menu-item a:hover {
    border-color: var(--contrast-2) !important;
    color: var(--contrast) !important;
}

/* Active/current state */
.menu-item.current-menu-item a,
.menu-item.current_page_item a,
.menu-item.current-menu-ancestor a,
.menu-item a:active {
    background-color: transparent !important;
    color: var(--contrast) !important;
    border-color: var(--contrast) !important;
}


/* ===== CART MENU ITEM ===== */

/* Cart menu item - circular icon only */
.menu-item a[href*="cart"],
.menu-item a[href*="koszyk"],
.menu-item.menu-item-cart a {
    padding: 16px !important;
    border-radius: 32px;
    background-color: transparent !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    position: relative;
}

/* Hide cart text label, show only icon */
.menu-item a[href*="cart"] .nav-text,
.menu-item a[href*="koszyk"] .nav-text,
.menu-item.menu-item-cart a .nav-text {
    display: none !important;
}

/* Cart icon styling */
.menu-item a[href*="cart"] svg,
.menu-item a[href*="koszyk"] svg,
.menu-item.menu-item-cart a svg,
.menu-item a[href*="cart"] .heroicon,
.menu-item a[href*="koszyk"] .heroicon {
    width: 18px;
    height: 18px;
    stroke-width: 4 !important;
    fill: none;
}

/* Target the path/shapes inside the SVG */
.menu-item a[href*="cart"] svg path,
.menu-item a[href*="koszyk"] svg path,
.menu-item.menu-item-cart a svg path,
.menu-item a[href*="cart"] .heroicon path,
.menu-item a[href*="koszyk"] .heroicon path {
    stroke-width: 4 !important;
}

.menu-item a[href*="cart"] svg *,
.menu-item a[href*="koszyk"] svg * {
    stroke-width: inherit !important;
}

/* Cart hover state */
.menu-item a[href*="cart"]:hover,
.menu-item a[href*="koszyk"]:hover,
.menu-item.menu-item-cart a:hover {
    border-color: var(--contrast-2) !important;
}

/* Cart active state */
.menu-item.current-menu-item a[href*="cart"],
.menu-item.current-menu-item a[href*="koszyk"],
.menu-item.current_page_item a[href*="cart"],
.menu-item.menu-item-cart.current-menu-item a {
    background-color: transparent !important;
    border-color: var(--contrast) !important;
}

.menu-item.current-menu-item a[href*="cart"] svg,
.menu-item.current-menu-item a[href*="koszyk"] svg,
.menu-item.current_page_item a[href*="cart"] svg,
.menu-item.menu-item-cart.current-menu-item a svg,
.menu-item.current-menu-item a[href*="cart"] .heroicon,
.menu-item.current-menu-item a[href*="koszyk"] .heroicon {
    stroke: var(--contrast) !important;
    background-color: transparent !important;
    border-color: var(--contrast) !important;
}

/* Cart item count badge (WooCommerce) */
.menu-item a[href*="cart"] .cart-contents-count,
.menu-item a[href*="koszyk"] .cart-contents-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ff3b30;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 18px;
    text-align: center;
}


/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 768px) {
    /* Prevent body scroll when mobile menu is open */
    body:has(.main-navigation.toggled) {
        overflow: hidden;
    }

    /* Add blur effect to content below menu when open */
    body:has(.main-navigation.toggled) .site-content,
    body:has(.main-navigation.toggled) .site-footer,
    body:has(.main-navigation.toggled) main {
        filter: blur(8px);
        -webkit-filter: blur(8px);
        transition: filter 0.3s ease;
    }

    /* Hide mobile menu by default */
    .main-navigation .main-nav {
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        width: 100vw;
        height: calc(100vh - 100px);
        background-color: rgba(255, 255, 255, 0.98);
        padding: 24px;
        overflow-y: auto;
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Add white background to header when menu is open - no blur for performance */
    .main-navigation.toggled ~ .site-header,
    body:has(.main-navigation.toggled) .site-header {
        background-color: rgba(255, 255, 255, 0.98) !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 10000 !important;
        transition: background-color 0.3s ease !important;
    }

    /* Remove top margin from toggled navigation */
    .main-navigation.sub-menu-right.toggled {
        margin-top: 0 !important;
    }

    /* Show menu when toggled - no blur for performance */
    .main-navigation.toggled .main-nav {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile menu layout */
    .main-navigation.toggled .main-nav ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Mobile menu items */
    .main-navigation.toggled .menu-item a {
        padding: 12px 16px !important;
        border-radius: 32px;
        height: 48px !important;
        justify-content: center;
        border: 1px solid var(--contrast-3) !important;
    }

    /* Mobile menu hover/active states */
    .main-navigation.toggled .menu-item a:hover,
    .main-navigation.toggled .menu-item a:active,
    .main-navigation.toggled .menu-item.current-menu-item a,
    .main-navigation.toggled .menu-item.current_page_item a,
    .main-navigation.toggled .menu-item.current-menu-ancestor a {
        border-color: var(--contrast) !important;
    }

    /* Show cart text in mobile */
    .main-navigation.toggled .menu-item a[href*="cart"] .nav-text,
    .main-navigation.toggled .menu-item a[href*="koszyk"] .nav-text {
        display: inline !important;
    }
}


/* ===== CLEAN UP DEFAULT WORDPRESS STYLES ===== */

.main-navigation li {
    margin: 0;
}

.main-navigation a {
    padding: 0;
}