/**
 * Responsywność paska nawigacji (logo + menu + auth + szukajka + hamburger).
 *
 * Plik wpięty w partials/header.php PO dark-theme.css, więc ładuje się jako
 * ostatni arkusz na stronie - dzięki temu wygrywa kaskadę z regułami z
 * style.css, fixes.css, ui-enhancements.css i auth.css bez użycia !important.
 *
 * Problemy, które ten plik rozwiązuje:
 *
 * 1. Napis "KS Perła Węgrów" wychodził poza swoje pudełko i wchodził na menu.
 *    Winowajcą jest połączenie dwóch rzeczy: `.logo-text h1` ma `white-space:
 *    nowrap`, a `.logo` jest elementem flex, który przy ciasnocie kurczy się
 *    poniżej szerokości swojej treści. Tekst wtedy nie łamie się ani nie
 *    zwęża - po prostu wylewa się na sąsiada. Objawiało się to dwa razy:
 *    około 1046 px (nachodzenie na "Aktualności") i około 390 px
 *    (nachodzenie na ikonę logowania / awatar).
 *
 * 2. Pełne menu poziome mieści się dopiero od ~1160 px szerokości treści.
 *    Poniżej tego pozycje i logo stykały się bez odstępu. Stąd dwa stopnie:
 *    kompaktowy pasek 992-1199 px i hamburger poniżej 992 px (było 769 px).
 *
 * 3. Na urządzeniach dotykowych szerszych niż 992 px (tablet w poziomie)
 *    rozwijane menu otwierało się tylko przez :hover, a dotknięcie "Klub"
 *    od razu przenosiło na "Informacje" - nie dało się zobaczyć podpozycji.
 *    Tu wyłączamy otwieranie hoverem przy braku myszy; resztę robi
 *    js/script.js, dokładając klasę .active na <li>.
 *
 * Uwaga o `.touch-friendly`: js/script.js dokleja tę klasę KAŻDEMU <a> i
 * <button> na stronie (nie tylko na dotyku), a fixes.css daje jej
 * `padding: 12px` oraz `min-width/min-height: 44px`. Dlatego samo logo
 * ma 24 px zbędnego marginesu wewnętrznego po bokach, a ikona lupy 44 px
 * szerokości mimo kilkunastopikselowego glifu.
 */

/* ============================================================
   1. LOGO - nigdy nie wylewa się na sąsiadów
   ============================================================ */

/* Poziomy padding od `.touch-friendly` jest tu do niczego (logo i tak jest
   duże), a kosztuje 24 px szerokości na każdej rozdzielczości. Pionowy
   zostaje - trzyma dotychczasową wysokość paska. */
.logo a.touch-friendly,
.logo a {
    padding-left: 0;
    padding-right: 0;
}

/* Bezpiecznik: gdyby mimo drabinki rozmiarów zabrakło miejsca, tekst zostanie
   przycięty wielokropkiem wewnątrz swojego pudełka zamiast wejść na menu. */
.logo-text {
    min-width: 0;
    overflow: hidden;
}

.logo-text h1,
.logo-text p {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   2. KOMPAKTOWY PASEK (992-1199 px)
   Menu w jednym wierszu wciąż się mieści, ale trzeba mu pomóc:
   mniejsze logo, ciaśniejsze odstępy, drobniejszy tekst pozycji.

   Granice łamane po ułamku (991.98 / 1199.98), a nie 992/993: przy skalowaniu
   ekranu w Windows szerokość okna bywa ułamkowa i wartość 992.4 px nie łapała
   się ani w "max-width: 992px", ani w "min-width: 993px". Pasek wracał wtedy
   do pełnego układu, na który nie było miejsca, i nazwa klubu znów wchodziła
   na menu. Ten sam wzorzec co w Bootstrapie.
   ============================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .logo img {
        width: 44px;
        height: 44px;
        margin-right: 9px;
    }

    .logo-text h1 {
        font-size: 1.02rem;
    }

    .logo-text p {
        font-size: 0.62rem;
    }

    .menu li {
        margin-left: 10px;
    }

    .menu a {
        font-size: 0.86rem;
    }

    .nav-right {
        margin-left: 10px;
    }

    .search-container {
        margin-left: 10px;
    }
}

/* Podpis "Zaloguj się" chowamy już od 1279 px (auth.css robił to od 1200 px).
   Między 1200 a 1279 px kontener ma pełne 1200 px, a pełna etykieta zostawiała
   logu i menu tylko ~16 px odstępu. Sama ikona daje ~90 px zapasu. */
@media (max-width: 1279px) {
    .auth-button span {
        display: none;
    }

    .auth-button {
        padding: 0.4rem 0.55rem;
    }

    .auth-button i {
        font-size: 1.15rem;
    }
}

/* ============================================================
   3. MENU HAMBURGEROWE OD 992 px W DÓŁ (wcześniej od 768 px)
   Poniżej ~960 px poziome menu nie mieści się już nawet po kompresji,
   więc zamiast ściskać je dalej - zwijamy do hamburgera. Reguły są
   powtórzeniem tych z bloku max-width 768 px w style.css, rozszerzonym
   na cały zakres tabletów.
   ============================================================ */

@media (max-width: 991.98px) {
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    .menu.active {
        display: flex;
    }

    .menu li {
        margin: 10px 0;
        margin-left: 0;
    }

    /* Rozwinięte menu to panel na całą szerokość - skalowanie po przewinięciu
       strony (header.scrolled .menu) przesuwałoby je względem headera. */
    header.scrolled .menu {
        transform: none;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 12px;
    }

    /* Rozwijane podmenu: statycznie w kolumnie, otwierane klasą .active */
    .menu li .dropdown {
        position: static;
        background-color: #f5f5f5;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        width: 100%;
        margin-top: 0;
        border-radius: 0;
    }

    .menu li.has-dropdown.active .dropdown {
        display: block;
    }

    .menu .dropdown li a {
        padding-left: 30px;
    }

    .menu a .dropdown-indicator {
        margin-left: 8px;
        font-size: 0.8em;
    }

    /* Przełączniki motywu i języka: znikają z paska, żyją w rozwijanym menu */
    .nav-switches {
        display: none;
    }

    .menu-switches {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 22px;
        padding: 16px 0 6px;
        margin: 6px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .auth-slot {
        margin-right: 0;
    }

    /* Tryb ciemny: rozwinięte menu dziedziczy ciemniejszy granat headera */
    [data-theme="dark"] .menu {
        background-color: var(--bg-navy-dark);
    }

    [data-theme="dark"] .menu li .dropdown {
        background-color: var(--bg-surface);
    }
}

/* ============================================================
   4. DOTYK NA SZEROKIM EKRANIE (tablet w poziomie, > 992 px)
   Bez myszy nie ma hovera, więc podmenu musi otwierać dotknięcie.
   JS dokłada .active na <li>; tu tylko przestawiamy wyzwalacz z :hover.
   ============================================================ */

@media (hover: none) and (min-width: 992px) {
    .menu li:hover .dropdown {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
    }

    .menu li.has-dropdown.active .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ============================================================
   5. TELEFONY - odzyskanie miejsca w pasku
   Przy 390 px napis klubu wchodził na ikonę konta, a między lupą
   a hamburgerem zostawało kilkadziesiąt pikseli pustki (dwa pudełka
   44 px wokół kilkunastopikselowych ikon plus marginesy po 20 px).
   Wysokość dotykowa 44 px zostaje, zwężamy tylko szerokości i odstępy.
   ============================================================ */

@media (max-width: 768px) {
    .nav-right {
        margin-left: 10px;
    }

    .search-container {
        margin-left: 4px;
    }

    /* fixes.css nadaje na mobile każdemu <button> margines 5 px. Na ikonach
       w pasku to 20 px pustki, której nie widać, a której brakuje logu. */
    .search-toggle {
        min-width: 0;
        width: 38px;
        padding: 12px 4px;
        margin: 0;
    }

    .auth-button {
        min-width: 0;
        padding: 0.35rem 0.5rem;
        margin: 0;
    }

    .auth-avatar {
        margin: 0;
    }
}

@media (max-width: 430px) {
    .logo img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }

    .logo-text h1 {
        font-size: 0.95rem;
    }

    .logo-text p {
        font-size: 0.56rem;
    }

    .nav-right {
        margin-left: 8px;
    }

    .search-toggle {
        width: 34px;
    }

    .menu-toggle {
        width: 40px;
        padding: 12px 6px;
    }
}

@media (max-width: 360px) {
    .logo img {
        width: 36px;
        height: 36px;
        margin-right: 7px;
    }

    .logo-text h1 {
        font-size: 0.88rem;
    }

    .logo-text p {
        font-size: 0.52rem;
    }
}

/* Najstarsze i najwęższe telefony (iPhone SE 1. generacji ma 320 px).
   Granica 349 px, a nie 340 px: przy 341-349 px poprzedni stopień zostawiał
   nazwie klubu około 2 px za mało i ucinała się końcówka. */
@media (max-width: 349px) {
    .logo img {
        width: 32px;
        height: 32px;
        margin-right: 6px;
    }

    .logo-text h1 {
        font-size: 0.78rem;
    }

    .logo-text p {
        font-size: 0.48rem;
    }

    .nav-right {
        margin-left: 6px;
    }

    .search-toggle {
        width: 30px;
    }
}