/* 1. Pobieramy czcionkę Questrial */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

/* 2. Stylujemy linki wewnątrz menu */
#menu_categories ul li a,
#menu_navbar ul li a,
.menu__item a {
    /* Ustawienie nowej czcionki */
    font-family: 'Questrial', sans-serif !important;
    
    /* Zmniejszenie rozmiaru (standardowo bywa 14-16px, dajemy 13px) */
    font-size: 13px !important;
    
    /* KLUCZOWE: Zmniejszenie odstępów bocznych */
    /* Zmieniamy szerokie odstępy na wąskie (np. 5px lub 8px z każdej strony) */
    padding-left: 8px !important;
    padding-right: 8px !important;
    
    /* Zmniejszenie odstępów między literami (Questrial jest szeroki, więc to pomoże) */
    letter-spacing: 0px !important;
    
    /* Opcjonalnie: Jeśli menu się nie mieści, usuń pogrubienie */
    font-weight: 400 !important;
}

/* Wyśrodkowanie menu głównego na komputerach */
@media (min-width: 992px) {
    #menu_categories .navbar-collapse {
        justify-content: center;
    }
    
    #menu_categories .navbar-nav {
        justify-content: center;
        width: 100%; /* Opcjonalnie: rozciąga kontener, by ułatwić centrowanie */
    }
}
/* Ukrycie przycisku RSS na blogu */
#menu_blog_rss {
    display: none !important;
}


/* --- UNIWERSALNA POPRAWKA: TELEFONY I TABLETY (do 1024px) - Wersja Dopasowana --- */

@media only screen and (max-width: 1024px) {
    
    /* 1. Obniżenie bannera - zmniejszyliśmy odstęp */
    .main_page #main_banner1 {
        margin-top: 50px !important; /* Było 85px. Jeśli nadal za dużo, zmień na 60px */
        padding-top: 0px !important;
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
    }

    /* 2. Naprawa uciętego zdjęcia (skalowanie) */
    .main_page .main_slider__item,
    .main_page .swiper-slide,
    .main_page #main_banner1 img {
        height: auto !important; 
        min-height: auto !important; 
        width: 100% !important; 
        object-fit: contain !important; 
    }
    
    /* 3. Zabezpieczenie kontenera */
    .main_page .swiper-wrapper {
        height: auto !important;
    }
}
/* --- Zmiana układu strony wpisu blogowego na 10%-80%-10% --- */

/* 1. Ukrywamy lewy pasek boczny (menu kategorii, logowanie) */
#container.blog-item_page #layout aside {
    display: none !important;
}

/* 2. Zmuszamy kontener z treścią do zajęcia 100% szerokości (zamiast dzielenia miejsca z paskiem bocznym) */
#container.blog-item_page #layout #content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. Ustawiamy szerokość samej treści artykułu na 60% i centrujemy ją */
#container.blog-item_page #blog-item {
    width: 80%;
    margin: 0 auto; /* To polecenie tworzy automatyczne marginesy po lewej i prawej (Twoje "wolne przestrzenie") */
}

/* --- Responsywność (Mobile) --- */
/* Na telefonach i tabletach (poniżej 992px) przywracamy szerokość 100%, 
   aby tekst nie był zbyt wąski i czytelny */
@media (max-width: 991px) {
    #container.blog-item_page #blog-item {
        width: 100%;
        padding: 0 15px; /* Drobny odstęp od krawędzi ekranu */
    }
}