/* =========================================================
   DockB Hamburg — Nawigacja mobilna (offcanvas → fullscreen overlay)
   Standard: mobile-first, BEM/Bootstrap, bez :nth-child, bez JS.
   Ładowane po custom.css — nadpisuje reguły z dist/app.css siłą kolejności.

   Pod 1200px (navbar-expand-xl) menu otwiera się jako overlay na CAŁY viewport.
   Logo (lewy górny) i przycisk X (prawy górny) ustawione tak, by pokrywały się
   1:1 z logo strony i ikoną burgera — overlay "wyrasta" z nagłówka.
   Powyżej 1200px nav jest inline w pasku — tych reguł NIE dotykamy.

   Punkty kotwiczące (mobile, odwzorowanie nagłówka strony):
     navbar height = 115px; gutter = 18px;
     logo strony:  left 18, top 16, ~85×84;
     burger:       left 332..372, top 43..73 (środek x≈352, y≈58).
   ========================================================= */

@media (max-width: 1199.98px) {

    /* --- Overlay: cały viewport. Jawne fixed/inset, bo reguła z dist/app.css
       degraduje offcanvas pod 1200px (panel startował od ~86px, nie od góry).
       Wysokość daje samo inset:0 (top:0 + bottom:0). NIE ustawiamy jawnego
       height — top+bottom+height to over-constraint: gdy height (100dvh) ≠
       wysokość viewportu, przeglądarka liczy top = viewport − height i panel
       startuje za nisko (bug widoczny na 320px / przy chowaniu paska adresu).

       align-self: stretch jest KLUCZOWE: dist/app.css ustawia na offcanvas
       align-self: flex-end (navbar to flex container). Wg css-align-3
       self-alignment działa też na elementy position:fixed — wartość inna niż
       stretch/normal sprawia, że box z top:0 + bottom:0 NIE rozciąga się,
       tylko kurczy do wysokości treści i dokleja do DOLNEJ krawędzi
       viewportu (top = viewport − treść; np. 62px luki przy 320×864, gdy
       menu jest krótsze niż ekran). Stretch przywraca pełne rozciągnięcie. --- */
    .site-header .navbar .offcanvas {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        align-self: stretch;
        border: 0; /* kasuje border-left z bootstrapowego .offcanvas-end (kreska przy lewej krawędzi) */
    }

    /* --- Animacja: fade in/out zamiast wjazdu z prawej. Zabijamy transform
       (slide) z Bootstrapa we wszystkich stanach i animujemy opacity. --- */
    .site-header .navbar .offcanvas,
    .site-header .navbar .offcanvas.showing,
    .site-header .navbar .offcanvas.hiding {
        transform: none !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .site-header .navbar .offcanvas.show,
    .site-header .navbar .offcanvas.showing {
        opacity: 1;
    }

    .site-header .navbar .offcanvas.hiding {
        opacity: 0;
    }

    /* --- Nagłówek overlay: logo (lewo) + X (prawo), pokrywa nagłówek strony --- */
    .site-header .navbar .offcanvas .offcanvas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 115px;
        padding: 16px 18px;
    }

    .site-header .navbar .offcanvas .offcanvas-logo-link {
        display: inline-flex;
        align-items: center;
        line-height: 0;
    }

    .site-header .navbar .offcanvas .offcanvas-logo {
        display: block;
        width: 85px;
        height: auto;
    }

    /* X w miejscu burgera (środek y≈58, prawa krawędź = gutter 18px). */
    .site-header .navbar .offcanvas .offcanvas-header .btn-close {
        width: 40px;
        height: 30px;
        margin: 0;
        padding: 0;
        opacity: 1;
    }

    /* --- Ciało overlay: kolumna pozycji menu od góry, gutter zrównany z logo.
       Top-align (nie center) — wycentrowanie skakało, gdy mobilny pasek adresu
       chował się po otwarciu i zmieniał dvh. --- */
    .site-header .navbar .offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 8px 18px 32px;
        overflow-y: auto;
    }

    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Kasuje poziomy margin-right z dist (overlay jest pionowy). */
    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item {
        margin: 0;
        border-bottom: 1px solid rgba(52, 58, 64, 0.08);
    }

    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item:last-child {
        border-bottom: 0;
    }

    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item a {
        display: block;
        padding: 18px 4px;
        font-family: "Barlow", sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: #343a40;
        text-transform: uppercase;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item a:hover,
    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item a:focus {
        color: #6fb4dc;
    }

    /* Pozycja aktywna — zgodnie z konwencją dist (#6fb4dc, bold). */
    .site-header .navbar .offcanvas .offcanvas-body .navbar-nav--header .menu-item.current-menu-item a {
        font-weight: 700;
        color: #6fb4dc;
    }
}