/* ---------------------- */
/* MENU GŁÓWNE – UKŁAD    */
/* ---------------------- */

/* Kontener menu głównego */
.main-navigation {
    display: flex;
    justify-content: center; /* centrowanie poziome */
}

/* Lista UL w menu */
.main-navigation ul.menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* jeśli menu za długie, przechodzi do nowej linii */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Elementy LI w menu */
.main-navigation ul.menu li {
    margin: 0; /* odstępy między elementami (poprawione – wcześniej było '0 px') */
}

/* Linki w menu */
.main-navigation ul.menu li a {
    text-decoration: none;
    font-size: 18px;       /* rozmiar czcionki menu */
    font-weight: 600;      /* pogrubienie */
    padding: 12px 16px;    /* wewnętrzne odstępy – wygląd "kafelków" */
    border-radius: 0px;    /* brak zaokrągleń rogów */
    transition: background-color 0.3s, color 0.3s; /* płynne przejścia */
}

/* Efekt hover (podświetlenie) oraz wyróżnienie aktualnej strony */
.main-navigation ul.menu li a:hover,
.main-navigation ul.menu li.current-menu-item > a {
    background-color: #FFA500; /* pomarańczowe tło */
    color: #ffffff;           /* biały tekst */
}

/* ---------------------- */
/* NAGŁÓWEK I LOGO        */
/* ---------------------- */

/* Cały nagłówek wycentrowany */
.site-header .site-branding {
    text-align: center;
}

/* Logo jako element inline-block (żeby dało się centrować) */
.site-header .site-branding .custom-logo-link {
    display: inline-block;
}

/* Tytuł i opis strony */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
    margin: 0 auto;
    text-align: center;
}

/* Logo – domyślnie dość duże */
.site-header .site-branding .custom-logo {
    max-width: 250px;
    height: auto; /* zachowanie proporcji */
}

/* Tytuł strony – bardzo duży na dużych ekranach */
.site-header .site-branding .site-title {
    font-size: 105px !important; /* !important wymusza wielkość */
    font-weight: 700;
	margin-top: 160px;
    line-height: 1.2;
}

/* Opis strony */
.site-header .site-branding .site-description {
    font-size: 30px;
}

/* ---------------------- */
/* TREŚĆ STRONY           */
/* ---------------------- */

/* Ukrywanie tytułów na stronach i wpisach (np. WordPressowe nagłówki) */
.entry-header .entry-title,
.page-header .page-title,
.entry-title,
.page-title,
.twentyseventeen-front-page .panel-content .entry-title,
.twentyseventeen-panel .entry-title,
.home .page-title,
.blog .page-title,
.archive .page-title,
.search .page-title {
    display: none !important;
}

/* Marginesy i paddingi treści na podstronach */
body.page:not(.home) .site-content,
body.single .site-content,
body.archive .site-content {
    margin-top: 30px !important;
    padding-top: 30px !important;
}

/* Dodatkowe odstępy nagłówków wpisów/stron */
body.page:not(.home) .entry-header,
body.single .entry-header,
body.archive .page-header {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* Obrazki w nagłówkach (np. tło, slider) */
.panel-image,
.custom-header {
    height: 400px; /* wysoki nagłówek na dużych ekranach */
    background-size: cover;
    background-position: center;
}

/* ====================== */
/* RESPONSYWNOŚĆ          */
/* ====================== */

/* TABLETY (max 1024px) */
@media (max-width: 1024px) {
    /* Logo trochę mniejsze */
    .site-header .site-branding .custom-logo {
        max-width: 180px;
    }

    /* Tytuł i opis mniejsze */
    .site-header .site-branding .site-title {
        font-size: 60px !important;
    }
    .site-header .site-branding .site-description {
        font-size: 22px;
    }

    /* Menu bardziej kompaktowe */
    .main-navigation ul.menu li a {
        font-size: 16px;
        padding: 10px 18px;
    }
}

/* TELEFONY (max 768px) */
@media (max-width: 768px) {
    /* Logo jeszcze mniejsze */
    .site-header .site-branding .custom-logo {
        max-width: 140px;
    }

    /* Tytuł i opis zmniejszone */
    .site-header .site-branding .site-title {
        font-size: 45px !important;
    }
    .site-header .site-branding .site-description {
        font-size: 18px;
    }

    /* Menu zmienia się z poziomego na pionowe */
    .main-navigation ul.menu {
        flex-direction: column; /* pionowo */
        align-items: center;    /* wyśrodkowane */
    }

    /* Linki menu rozciągają się na szerokość */
    .main-navigation ul.menu li a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
    }

    /* Nagłówki/obrazy niższe */
    .panel-image,
    .custom-header {
        height: 250px;
    }
}

/* BARDZO MAŁE TELEFONY (max 480px) */
@media (max-width: 480px) {
    /* Logo jeszcze bardziej kompaktowe */
    .site-header .site-branding .custom-logo {
        max-width: 100px;
    }

    /* Tytuł i opis */
    .site-header .site-branding .site-title {
        font-size: 39px !important;
    }
    .site-header .site-branding .site-description {
        font-size: 14px;
    }

    /* Menu bardziej oszczędne */
    .main-navigation ul.menu li a {
        font-size: 18px;
        padding: 8px 0;
    }
}
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 15px;
    }
    nav a {
        flex: none; /* linki w kolumnie nie rozciągają się */
        width: 80%; /* estetyczna szerokość */
    }

/* ---------------------- */
/* HAMBURGER MENU         */
/* ---------------------- */

/* Ukrycie checkboxa */
#menu-toggle {
    display: none;
}

/* Hamburger widoczny tylko na telefonach */
.menu-icon {
    display: none;
    cursor: pointer;
    font-size: 28px; 
    text-align: center;
    padding: 10px;
}

/* TELEFONY (max 768px) */
@media (max-width: 768px) {
    /* pokaż hamburger */
    .menu-icon {
        display: block;
    }

    /* domyślnie ukryj menu */
    .main-navigation ul.menu {
        display: none;
        width: 100%;
    }

    /* po kliknięciu checkboxa – pokaż menu */
    #menu-toggle:checked + ul.menu {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    /* Powiększenie napisu Menu obok hamburgera */
    .menu-toggle {
        content: " Menu"; /* upewniamy się, że jest napis */
        font-size: 20px; /* zmień na dowolny rozmiar */
        font-weight: 600; /* jeśli chcesz pogrubiony */
        vertical-align: middle; /* wyrównanie w pionie */
    }
}
/* ---------------------- */
/* AUTOMATYCZNE DZIELENIE SŁÓW W TREŚCI STRON */
/* ---------------------- */

/* Akapity i bloki tekstowe we wszystkich stronach i wpisach */
.page p,
.single p,
.entry-content p,
.page .wp-block,
.single .wp-block,
.entry-content .wp-block {
    hyphens: auto !important;           /* automatyczne dzielenie słów */
    overflow-wrap: break-word !important; /* łamanie długich wyrazów */
    word-break: break-word !important;    /* dodatkowa ochrona */
}

/* Prefiksy dla starszych przeglądarek */
.page .wp-block,
.single .wp-block,
.entry-content .wp-block {
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}