/**
 * Nagłówek i menu główne ISP — w języku strony szkolenia:
 *  - pasek jak .sp-subnav (biały, linia #E5E7EB, delikatny cień; linki #667085 → granat,
 *    aktywny z 2-px granatową kreską przy dolnej krawędzi paska),
 *  - przyciski jak .sp-sidebar__download (obrys #E5E7EB, 8 px, hover: granat + #F8FAFF),
 *  - panel podmenu jak .sp-sidebar__card (biała karta 16 px).
 * Prefiks #masthead — wygrywa ze starymi regułami z main.css / isp.css.
 */

#masthead {
    --hdr-navy: #0F1F4F;
    --hdr-text: #667085;
    --hdr-strong: #374151;
    --hdr-line: #E5E7EB;
    --hdr-soft: #F8FAFF;
    --hdr-sep: #EEF2FA;
    --hdr-h: 72px;
}

/* ---------------------------------------------------------------------------
 * Pasek
 * ------------------------------------------------------------------------- */
/* Bez backdrop-filter/transform na pasku: tworzą blok zawierający dla position:fixed,
   a panel menu (offcanvas) siedzi w środku paska — ściąłby się do jego wysokości. */
#masthead .fixed-top {
    background: #fff !important; /* nadpisuje .bg-body-tertiary */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}
#masthead .fixed-top.is-scrolled {
    box-shadow: 0 4px 14px rgba(15, 31, 79, 0.08);
}

/* Treść zaczyna się dokładnie pod nagłówkiem: --isp-header-h mierzy JS (enqueue.php),
   fallback = typowa wysokość, zanim skrypt zadziała. Zastępuje sztywne 82px z main.css. */
#page { margin-top: var(--isp-header-h, 73px); }
@media (max-width: 991.98px) { #page { margin-top: var(--isp-header-h, 65px); } }

#masthead #nav-main {
    min-height: var(--hdr-h);
    padding: 0;
    border-bottom: 1px solid var(--hdr-line);
}
#masthead #nav-main > .container {
    min-height: var(--hdr-h);
    align-items: stretch;
}
#masthead .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 2rem;
    padding: 0;
}
/* Poziome logo (SVG). !important: isp.css ma ".navbar-brand img { height: 80px !important;
   width: 85px !important; … }" — sztywną ramkę pod stare pionowe logo. */
#masthead .navbar-brand .logo.gora {
    height: 42px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}
#masthead .header-actions {
    align-items: center;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Linki — desktop (jak zakładki .sp-subnav, na całą wysokość paska)
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    #masthead #offcanvas-navbar,
    #masthead #offcanvas-navbar .offcanvas-body,
    #masthead #bootscore-navbar {
        align-self: stretch;
        align-items: stretch;
    }
    /* .offcanvas to na desktopie kolumna flex — wnętrze musi rosnąć w pionie (flex-grow),
       żeby linki miały całą wysokość paska, a kreska aktywnej pozycji leżała na jego dole. */
    #masthead #offcanvas-navbar .offcanvas-body {
        flex: 1 1 auto;
    }
    #masthead #bootscore-navbar {
        margin-right: 1.5rem;
    }
    #masthead #bootscore-navbar > .nav-item {
        display: flex;
        margin: 0;
    }
    #masthead #bootscore-navbar > .nav-item > .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 1.125rem;
        color: var(--hdr-text);
        font-size: 0.9375rem;
        font-weight: 500;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px; /* kreska aktywnej pozycji leży na linii paska */
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    #masthead #bootscore-navbar > .nav-item > .nav-link:hover,
    #masthead #bootscore-navbar > .nav-item > .nav-link:focus-visible,
    #masthead #bootscore-navbar > .nav-item.dropdown:hover > .nav-link,
    #masthead #bootscore-navbar > .nav-item > .nav-link.show {
        color: var(--hdr-navy);
    }
    #masthead #bootscore-navbar > .nav-item > .nav-link.active {
        color: var(--hdr-navy);
        border-bottom-color: var(--hdr-navy);
    }

    /* "Szkolenia": strzałka zamiast bootstrapowego trójkąta. */
    #masthead #bootscore-navbar > .dropdown > .dropdown-toggle {
        gap: 0.5rem;
    }
    #masthead #bootscore-navbar > .dropdown > .dropdown-toggle::after {
        content: "";
        width: 6px;
        height: 6px;
        margin: -3px 0 0;
        border: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease, margin 0.25s ease;
    }
    #masthead #bootscore-navbar > .dropdown:hover > .dropdown-toggle::after,
    #masthead #bootscore-navbar > .dropdown > .dropdown-toggle.show::after {
        transform: rotate(225deg);
        margin-top: 3px;
    }

    /* Panel podmenu — karta jak w panelu bocznym; otwiera się też na najechanie. */
    #masthead #bootscore-navbar > .dropdown {
        position: relative;
    }
    #masthead #bootscore-navbar > .dropdown:hover > .dropdown-menu {
        display: block;
    }
    #masthead #bootscore-navbar .dropdown-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: auto;
        min-width: 300px;
        width: max-content; /* nazwy kategorii w jednej linii */
        max-width: 420px;
        margin: 0;
        padding: 0.5rem;
        border: 0;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 0 0 1px rgba(15, 31, 79, 0.05), 0 4px 14px rgba(15, 31, 79, 0.06), 0 18px 36px -16px rgba(15, 31, 79, 0.22);
        animation: isp-menu-in 0.18s ease both;
    }
    /* Mostek nad panelem — kursor przechodzący z linku na panel nie zamyka go. */
    #masthead #bootscore-navbar .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }
    @keyframes isp-menu-in {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ---------------------------------------------------------------------------
 * Pozycje podmenu (desktop i telefon)
 * ------------------------------------------------------------------------- */
#masthead #bootscore-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    color: var(--hdr-strong);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* !important: isp.css ma ".dropdown-item:hover { background-color: transparent !important }". */
#masthead #bootscore-navbar .dropdown-item:hover,
#masthead #bootscore-navbar .dropdown-item:focus-visible,
#masthead #bootscore-navbar .dropdown-item.active,
#masthead #bootscore-navbar .dropdown-item:active {
    background-color: #F2F5FB !important;
    color: var(--hdr-navy);
}
#masthead #bootscore-navbar .dropdown-item:hover .isp-menu-dot {
    transform: scale(1.15);
}
#masthead .isp-menu-dot { transition: transform 0.2s ease; }
/* Kolor kategorii — ten sam gradient co kafel i baner. */
#masthead .isp-menu-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--isp-dot, var(--hdr-navy));
}
/* Pozycje bez koloru wyrównane do tych z kolorem (niewidoczny odstęp). */
#masthead #bootscore-navbar .dropdown-item:not(:has(.isp-menu-dot))::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    visibility: hidden;
}
/* Pozycje podmenu też mają .nav-item, a _bscore_custom.scss daje .nav-item { margin: 0 1rem } —
   bez zera wcięte o 16 px (poza separatorem, który ma własny margines). */
#masthead #bootscore-navbar .dropdown-menu > li {
    margin: 0;
}
/* Separator: klasa "menu-sep" na pozycji menu. */
#masthead #bootscore-navbar .dropdown-menu > li.menu-sep {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--hdr-sep);
}

/* ---------------------------------------------------------------------------
 * Przyciski z prawej — jak "Pobierz formularz" w panelu bocznym
 * ------------------------------------------------------------------------- */
#masthead .isp-hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 40px;
    min-width: 40px;
    padding: 0 1rem;
    border: 1px solid var(--hdr-line);
    border-radius: 8px;
    background: #fff;
    color: var(--hdr-strong);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
}
#masthead .isp-hdr-btn:hover {
    border-color: var(--hdr-navy);
    color: var(--hdr-navy);
    background: var(--hdr-soft);
}
#masthead .isp-hdr-btn:focus-visible { outline: 2px solid var(--hdr-navy); outline-offset: 2px; }
#masthead .isp-hdr-btn--account i { font-size: 0.8125rem; }
#masthead .isp-hdr-btn--menu { width: 40px; padding: 0; }
#masthead .isp-burger {
    display: grid;
    gap: 4px;
    width: 16px;
}
#masthead .isp-burger span {
    display: block;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
}

@media (max-width: 575.98px) {
    #masthead .isp-hdr-btn--account { padding: 0; width: 40px; }
    #masthead .isp-hdr-btn__label { display: none; }
}

/* ---------------------------------------------------------------------------
 * Panel menu na telefonie / tablecie
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #masthead { --hdr-h: 64px; }
    #masthead #nav-main > .container { align-items: center; }
    #masthead .navbar-brand .logo.gora { height: 34px !important; }

    #offcanvas-navbar {
        --bs-offcanvas-width: min(88vw, 380px);
        background: #fff;
        border-left: 0;
        box-shadow: -24px 0 60px -30px rgba(15, 31, 79, 0.45);
    }
    #offcanvas-navbar .offcanvas-header {
        padding: 0 1.25rem;
        min-height: var(--hdr-h);
        border-bottom: 1px solid var(--hdr-line);
    }
    #offcanvas-navbar .isp-oc-brand img { height: 32px !important; width: auto !important; max-width: none !important; display: block; }
    #offcanvas-navbar .isp-oc-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--hdr-line);
        border-radius: 8px;
        background: #fff;
        color: var(--hdr-strong);
        transition: all 0.2s ease;
    }
    #offcanvas-navbar .isp-oc-close:hover { border-color: var(--hdr-navy); color: var(--hdr-navy); background: var(--hdr-soft); }
    #offcanvas-navbar .offcanvas-body {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 1.25rem 1.5rem;
    }

    /* ms-auto z header.php w kolumnie zwężał listę do treści i spychał ją w prawo. */
    #masthead #bootscore-navbar {
        width: 100%;
        margin: 0 !important;
        padding: 0;
    }
    #masthead #bootscore-navbar > .nav-item { margin: 0; border-bottom: 1px solid var(--hdr-sep); }
    #masthead #bootscore-navbar > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0.25rem;
        color: var(--hdr-strong);
        font-size: 1rem;
        font-weight: 500;
    }
    #masthead #bootscore-navbar > .nav-item > .nav-link.active,
    #masthead #bootscore-navbar > .nav-item > .nav-link.show { color: var(--hdr-navy); }
    #masthead #bootscore-navbar > .dropdown > .dropdown-toggle::after {
        content: "";
        width: 7px;
        height: 7px;
        margin: -4px 0.25rem 0 0;
        border: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease, margin 0.25s ease;
    }
    #masthead #bootscore-navbar > .dropdown > .dropdown-toggle.show::after {
        transform: rotate(225deg);
        margin-top: 4px;
    }
    #masthead #bootscore-navbar .dropdown-menu {
        position: static;
        width: 100%;
        margin: -0.25rem 0 0.75rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    #masthead #bootscore-navbar .dropdown-item { padding: 0.6875rem 0.5rem; }
    /* Separator na pełną szerokość podmenu, równo z liniami pozycji głównych. */
    #masthead #bootscore-navbar .dropdown-menu > li.menu-sep { margin: 0.375rem 0 0; padding-top: 0.375rem; }

    #masthead .isp-oc-foot {
        margin-top: auto;
        padding-top: 1.5rem;
    }
    /* Konto: granat jak przycisk pomocy (.sp-fab), kształt jak przyciski w panelu bocznym. */
    #masthead .isp-oc-account {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 48px;
        border-radius: 8px;
        background: var(--hdr-navy);
        color: #fff;
        font-weight: 500;
        text-decoration: none;
    }
    #masthead .isp-oc-account:hover { background: #1A2D6B; color: #fff; }
    #masthead .isp-oc-contact {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-top: 1.25rem;
        font-size: 0.875rem;
    }
    #masthead .isp-oc-contact__label { color: var(--hdr-text); margin-bottom: 0.25rem; }
    #masthead .isp-oc-contact a { color: var(--hdr-navy); font-weight: 500; text-decoration: none; }
    #masthead .isp-oc-contact a:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
    #masthead *,
    #masthead *::before,
    #masthead *::after { transition: none !important; animation: none !important; }
}

/* Otwarty panel (menu albo konto) siedzi w kontekście .fixed-top (z-index 1030), więc pływające
   elementy strony szkolenia (pomoc „?", dolny przycisk zapisu) wchodziłyby na niego — chowamy je. */
body:has(.offcanvas.show) #sp-fab,
body:has(.offcanvas.showing) #sp-fab,
body:has(.offcanvas.show) .sp-mobile-cta,
body:has(.offcanvas.showing) .sp-mobile-cta {
    visibility: hidden;
}