/*
 * CMP3.eu — mobile-navbar.css
 * ════════════════════════════════════════════════════════
 * Poprawki estetyczne navbara na mobile + zwijana wyszukiwarka
 *
 * DODAJ ten plik do strony po style.css:
 *   <link rel="stylesheet" href="/themes/assets/css/mobile-navbar.css">
 *
 * Zwijana szukajka działa przez czysty CSS:
 *   klik w #cmp3-search-toggle → pokazuje/ukrywa .search (input)
 *   Wymaga drobnej zmiany w HTML — patrz komentarz przy .search
 */

/* ════════════════════════════════════════════════════════
   1. PRZYCISK TOGGLE SZUKAJKI (pojawia się tylko mobile)
   Dodaj do HTML navbara PRZED .search:
   <label for="cmp3-search-cb" class="search-toggle-btn" aria-label="Szukaj">
     <i class="icon-search"></i>
   </label>
   <input type="checkbox" id="cmp3-search-cb" class="search-toggle-cb">
════════════════════════════════════════════════════════ */

/* Checkbox — ukryty, tylko logika */
.search-toggle-cb {
  display: none;
}

.search-toggle-btn:hover {
  background: var(--bg4, #22252b);
  border-color: var(--red-color, #d4001a);
}
.search-toggle-btn i { pointer-events: none; }

/* ════════════════════════════════════════════════════════
   2. MOBILE ≤ 900px — navbar layout
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {


  /* Wyszukiwarka — domyślnie ukryta, pojawia się po kliknięciu */
  .navbar .search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg2, #1a1c20);
    border-top: 1px solid var(--border, #252830);
    border-bottom: 2px solid var(--red-color, #d4001a);
    padding: 10px 12px;
    z-index: 10001;
    animation: searchSlideDown .2s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
  }

  @keyframes searchSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Checkbox zaznaczony → pokaż wyszukiwarkę */
  .search-toggle-cb:checked ~ * .search,
  .search-toggle-cb:checked + .search {
    display: grid;
  }

  /* Input w otwartej szukajce — szerszy */
  .navbar .search input {
    font-size: 15px;
    padding: 10px 10px 10px 40px;
  }



  /* Zostaw tylko: wiadomości, powiadomienia, user-menu, hamburger */
  ul.nav li.dropdown.nav-messages-wrap,
  ul.nav li.dropdown.nav-notif-wrap,
  ul.nav li.user-menu,
  ul.nav li:last-child { display: flex; }

  /* User menu — ukryj tekst, zostaw tylko avatar */
  .nav li.user-menu > a {
    padding: 5px 6px;
  }

}

/* ════════════════════════════════════════════════════════
   3. MOBILE ≤ 600px — jeszcze mniejsze ekrany
════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  .navbar .container {
    padding: 5px 10px;
    gap: 6px;
  }
  /* Avatar usera — trochę mniejszy */
  .nav li.user-menu > a img.avatar {
    width: 26px; height: 26px;
  }

}
/* ════════════════════════════════════════════════════════
   4. PC ≥ 901px — upewnij się że szukajka jest widoczna
════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .search-toggle-btn { display: none; }
}

/* ════════════════════════════════════════════════════════
   5. COLLAPSE-NAV — poprawki mobile
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  #collapse-nav {
    padding: 6px 10px;
    gap: 6px;
    border-radius: var(--radius, 8px);
    margin: 4px 0 6px;
  }


  /* Separator między grupami — usuń border, zastąp pełną szerokością */
  #collapse-nav > div + div {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--border, #252830);
    padding-top: 6px;
  }

  #collapse-nav .top-grid + .top-grid {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }

  /* Przyciski w collapse-nav — mniejsze na mobile */
  .panel-top .button {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: .3px;
  }

}

/* ════════════════════════════════════════════════════════
   6. SUGESTIE WYSZUKIWANIA — mobile
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  #suggestions {
    top: 100%;
    left: 0; right: 0;
    padding: 0;
    z-index: 20000;
  }

  #searchresults {
    border-radius: var(--radius, 8px);
    margin: 4px 12px;
  }

}