/**
 * Pasek nawigacji witryny — paleta i zachowanie wzorowane na #wpadminbar (WordPress core).
 * Źródło: wp-includes/css/admin-bar.css (kolory, typografia, hover, panele rozwijane).
 * Aktywacja: klasa .np-wp-admin-bar-nav na <header class="site-header">.
 */

:root {
    --np-wp-ab-bg: #ffffff;
    --np-wp-ab-sub-bg: #ffffff;
    --np-wp-ab-sub-bg-2: #ffffff;
    --np-wp-ab-text: #111111;
    --np-wp-ab-text-bright: #111111;
    --np-wp-ab-text-muted: #6b7280;
    --np-wp-ab-accent: var(--primary-color, #4a7c37);
    --np-wp-ab-icon: #4b5563;
    --np-wp-ab-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    --np-wp-ab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --np-wp-ab-font-size: 13px;
    --np-wp-ab-line-height: 2.46153846;
}

/* Gdy widoczny pasek WP — sticky pod admin barem (32px / 46px jak w core) */
body.admin-bar .site-header.np-wp-admin-bar-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header.np-wp-admin-bar-nav {
        top: 46px;
    }
}

.site-header.np-wp-admin-bar-nav {
    font-family: var(--np-wp-ab-font);
    background-color: var(--np-wp-ab-bg);
    color: var(--np-wp-ab-text);
    border-left: 2px solid rgba(0, 0, 0, 0.08);
    border-right: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.site-header.np-wp-admin-bar-nav.scrolled {
    box-shadow: var(--np-wp-ab-shadow);
}

.site-header.np-wp-admin-bar-nav .logo a {
    border: none;
    text-decoration: none;
    box-shadow: none;
}

.site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item) {
    font-family: var(--np-wp-ab-font);
    font-size: var(--np-wp-ab-font-size);
    font-weight: 700;
    line-height: var(--np-wp-ab-line-height);
    color: var(--np-wp-ab-text-bright);
    text-transform: none;
    letter-spacing: normal;
    padding: 0 10px;
    margin: 0;
    border-radius: 0;
    -webkit-font-smoothing: subpixel-antialiased;
}

.site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item)::after {
    display: none;
}

.site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item):hover,
.site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item):focus-visible {
    color: var(--np-wp-ab-accent);
    background: transparent;
    background-color: transparent;
}

/* Karty kategorii produktów / siatki — nie styluj jak zwykłych linków paska */
.site-header.np-wp-admin-bar-nav .main-nav .nav-dropdown-card {
    font-family: 'Inter', sans-serif;
    font-size: initial;
    font-weight: 400;
    line-height: normal;
    color: #111;
    padding: 12px 12px 14px;
    margin: 0;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(236, 236, 236, 0.439);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.site-header.np-wp-admin-bar-nav .main-nav a.nav-dropdown-card:hover,
.site-header.np-wp-admin-bar-nav .main-nav a.nav-dropdown-card:focus-visible {
    color: #111;
    background: rgba(220, 222, 220, 0.75);
}

.site-header.np-wp-admin-bar-nav .main-nav .nav-dropdown-card-img {
    border-radius: 12px;
    overflow: hidden;
}

.site-header.np-wp-admin-bar-nav .main-nav__primary > li,
.site-header.np-wp-admin-bar-nav .main-nav__secondary > li {
    align-items: stretch;
}

.site-header.np-wp-admin-bar-nav .main-nav__primary > li > a,
.site-header.np-wp-admin-bar-nav .main-nav__secondary > li > a,
.site-header.np-wp-admin-bar-nav .nav-item-dropdown__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    box-sizing: border-box;
}

.site-header.np-wp-admin-bar-nav .header-separator {
    background-color: #e0e0e0;
}

.site-header.np-wp-admin-bar-nav .lang-selector {
    font-family: var(--np-wp-ab-font);
    font-size: var(--np-wp-ab-font-size);
    font-weight: 600;
    color: var(--np-wp-ab-text-bright);
}

.site-header.np-wp-admin-bar-nav .ue-text {
    color: var(--np-wp-ab-text-muted);
}

.site-header.np-wp-admin-bar-nav .nav-toggle-bar {
    background: var(--np-wp-ab-text-bright);
}

/* Panele dropdown (desktop) — jak .ab-sub-wrapper */
@media (min-width: 993px) {
    .site-header.np-wp-admin-bar-nav .nav-dropdown {
        background: var(--np-wp-ab-sub-bg);
        box-shadow: var(--np-wp-ab-shadow);
        border-left-color: rgba(0, 0, 0, 0.15);
        border-right-color: rgba(0, 0, 0, 0.15);
        border-bottom-color: rgba(0, 0, 0, 0.15);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown--cards {
        background: var(--np-wp-ab-sub-bg);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown--mega {
        background: var(--np-wp-ab-sub-bg);
        border-left-color: rgba(0, 0, 0, 0.12);
        border-right-color: rgba(0, 0, 0, 0.12);
        border-bottom-color: rgba(0, 0, 0, 0.12);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-col-title {
        color: var(--np-wp-ab-text-muted);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-item {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav a.nav-mega-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--np-wp-ab-accent);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-item__title {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-item__desc {
        color: var(--np-wp-ab-text-muted);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-item__icon {
        color: var(--np-wp-ab-icon);
    }

    .site-header.np-wp-admin-bar-nav .nav-mega-badge {
        background: var(--np-wp-ab-sub-bg-2);
        color: var(--np-wp-ab-text-bright);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown-card-title {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown-card .nav-dropdown-card-specs .spec-name {
        color: var(--np-wp-ab-text-muted);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown-card .nav-dropdown-card-specs .spec-val {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav .nav-dropdown-card .nav-dropdown-card-specs .spec-item {
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }
}

/* Mobile: panel boczny i podmenu */
@media (max-width: 768px) {
    .site-header.np-wp-admin-bar-nav .header-inner .main-nav {
        background: var(--np-wp-ab-sub-bg);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
    }

    .site-header.np-wp-admin-bar-nav .main-nav li {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item) {
        color: var(--np-wp-ab-text-bright);
        font-size: var(--np-wp-ab-font-size);
        font-weight: 400;
    }

    .site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item):hover,
    .site-header.np-wp-admin-bar-nav .main-nav a:not(.nav-dropdown-card):not(.nav-mega-item):focus-visible {
        color: var(--np-wp-ab-accent);
        background: transparent;
        background-color: transparent;
    }

    .site-header.np-wp-admin-bar-nav .nav-item-dropdown__chev {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav .main-nav .nav-item-dropdown .nav-dropdown {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .site-header.np-wp-admin-bar-nav .main-nav .nav-item-dropdown.is-submenu-open .nav-dropdown.nav-dropdown--cards,
    .site-header.np-wp-admin-bar-nav .main-nav .nav-item-dropdown.is-submenu-open .nav-dropdown.nav-dropdown--mega {
        background: var(--np-wp-ab-sub-bg-2) !important;
        border-left-color: rgba(255, 255, 255, 0.06) !important;
        border-right-color: rgba(255, 255, 255, 0.06) !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }

    .site-header.np-wp-admin-bar-nav .main-nav .nav-mega-col-title {
        color: var(--np-wp-ab-text-muted);
    }

    .site-header.np-wp-admin-bar-nav .main-nav .nav-mega-item {
        color: var(--np-wp-ab-text-bright);
    }

    .site-header.np-wp-admin-bar-nav .main-nav a.nav-mega-item:active {
        background: rgba(255, 255, 255, 0.08);
    }
}