/* artykuły */
.article-border {
    border-color: #1c2024; /* Black/dark gray */
    transition: all 0.3s ease;
}
.article-border:hover {
    border-color: #bd7405; /* Dark yellow/gold */
    box-shadow: 0 4px 6px -1px rgba(189, 116, 5, 0.1), 0 2px 4px -1px rgba(189, 116, 5, 0.06);
}
.sidebar-sticky {
    position: sticky;
    top: 1rem;
}

/* Tytuły artykułów */
.page-header h1 {
    font-size: 2.25rem !important; /* większy i wyraźny */
    font-weight: 800 !important;
    color: #1c2024 !important; /* czarny */
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
}

/* Szczegóły artykułu (article-info) */
.article-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
    font-size: 0.825rem !important; /* mniejsze litery */
    color: #6b7280 !important;
    margin-bottom: 1.75rem !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.article-info dt {
    font-weight: 700 !important;
    margin: 0 !important;
}
.article-info dd {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.article-info dd::after {
    content: "•";
    margin-left: 1rem;
    color: #d1d5db;
}
.article-info dd:last-child::after {
    content: "" !important;
    margin-left: 0 !important;
}

.page-header h2,
.page-header h2 a,
.article-title,
.article-title a {
    font-size: 1.875rem !important; /* duże */
    font-weight: 800 !important;
    color: #1c2024 !important; /* czarne */
    text-decoration: none !important;
    line-height: 1.25 !important;
}
.page-header h2 a:hover,
.article-title a:hover {
    color: #bd7405 !important; /* ciemnożółty */
    text-decoration: underline !important;
}

/* Poziome menu główne - tylko poziom 1 */
#navbar {
    background-color: #1c2024 !important; /* Gwarantowane czarne tło (niezależne od Tailwind) */
}

/* Ukrycie menu zastępczego (React) na rzecz dynamicznego z Joomli */
#joomla-menu-placeholder:not(:empty) + .joomla-hide-fallback {
    display: none !important;
}

#navbar .mod-menu > ul,
#navbar .mod-menu,
#navbar .mod-list,
#navbar .nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Pozycjonowanie li rodzica podmenu */
#navbar .mod-menu li,
#navbar .mod-list li,
#navbar .nav li {
    position: relative;
    margin: 0;
}

/* Ukrywanie podmenu (poziom 2 i kolejne) */
#navbar .mod-menu li ul,
#navbar .mod-list li ul,
#navbar .nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1c2024; /* Czarne tło podmenu */
    min-width: 200px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    z-index: 50;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none;
}

/* Pokaż podmenu po najechaniu na rodzica */
#navbar .mod-menu li:hover > ul,
#navbar .mod-list li:hover > ul,
#navbar .nav li:hover > ul,
#navbar .mod-menu li:focus-within > ul,
#navbar .mod-list li:focus-within > ul,
#navbar .nav li:focus-within > ul {
    display: flex;
}

/* Wygląd linków głównych */
#navbar .mod-menu a,
#navbar .mod-list a,
#navbar .nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.2s;
    margin-right: 0.5rem;
}
#navbar .mod-menu a:hover,
#navbar .mod-list a:hover,
#navbar .nav a:hover {
    color: #f2bc5a; /* Jasnożółty/złoty */
}

/* Wygląd linków w podmenu */
#navbar .mod-menu li ul a,
#navbar .mod-list li ul a,
#navbar .nav li ul a {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    white-space: nowrap;
    transition: background-color 0.2s;
}
#navbar .mod-menu li ul a:hover,
#navbar .mod-list li ul a:hover,
#navbar .nav li ul a:hover {
    background-color: #bd7405; /* Ciemnożółte tło po najechaniu */
    color: white;
}

/* breadcrumb */
/* Breadcrumbs w jednym wierszu */
/* Nadpisz domyślne style breadcrumbs */
.mod-breadcrumbs ul,
.breadcrumb,
.mod-breadcrumbs__list {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mod-breadcrumbs__item,
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.mod-breadcrumbs__item:not(:last-child):after,
.breadcrumb-item:not(:last-child):after {
    content: '/' !important;
    margin: 0 0.5rem !important;
    color: #6b7280 !important;
}

.mod-breadcrumbs__separator {
    margin: 0 0.5rem !important;
}

/* Nawigacja stron (pagenavigation) */
.pagenavigation {
    margin: 2rem 0;
    display: flex;
    justify-content: flex-start;
}

.pagenavigation .pagination {
    display: flex;
    gap: 0.75rem;
}

.pagenavigation .pagination a.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    color: #1c2024 !important; /* Czarne */
    background-color: transparent !important;
    border: 1.5px solid #1c2024 !important; /* Sam border */
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

.pagenavigation .pagination a.btn:hover {
    color: #bd7405 !important; /* Ciemnożółty */
    border-color: #bd7405 !important;
    background-color: rgba(189, 116, 5, 0.05) !important;
}

/* Przycisk "Czytaj więcej" (Readmore) */
a.btn-secondary,
.readmore a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #1c2024 !important; /* Czarne */
    background-color: transparent !important;
    border: 1.5px solid #1c2024 !important; /* Sam border */
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 2rem !important; /* Odstęp na 1-2 wiersze poniżej */
}

a.btn-secondary:hover,
.readmore a:hover {
    color: #bd7405 !important; /* Ciemnożółty */
    border-color: #bd7405 !important;
    background-color: rgba(189, 116, 5, 0.05) !important;
}

/* Paginacja na blogu (kategoria) */
.pagination__wrapper .pagination,
.com-content-category-blog__pagination .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
    gap: 0 !important;
}

.pagination__wrapper .page-item,
.com-content-category-blog__pagination .page-item {
    margin: 0 !important;
    padding: 0 !important;
}

.pagination__wrapper .page-link,
.pagination__wrapper span.page-link,
.com-content-category-blog__pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #1c2024 !important; /* Czarne */
    background-color: transparent !important;
    border: 1px solid #1c2024 !important; /* Cieńsza ramka */
    border-radius: 0 !important; /* Bez zaokrąglania rogów */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    margin-left: -1px !important; /* Zapobiega podwójnym ramkom */
}

.pagination__wrapper .page-item:first-child .page-link,
.com-content-category-blog__pagination .page-item:first-child .page-link {
    margin-left: 0 !important;
}

/* Element aktywny */
.pagination__wrapper .page-item.active .page-link,
.com-content-category-blog__pagination .page-item.active .page-link {
    background-color: #1c2024 !important; /* Czarne tło */
    color: #f2bc5a !important; /* Złoty/żółty tekst */
    border-color: #1c2024 !important;
}

/* Hover */
.pagination__wrapper .page-link:hover,
.com-content-category-blog__pagination .page-link:hover {
    color: #bd7405 !important; /* Ciemnożółty */
    border-color: #bd7405 !important;
    background-color: rgba(189, 116, 5, 0.05) !important;
    z-index: 2 !important;
}

/* Disabled */
.pagination__wrapper .page-item.disabled .page-link,
.com-content-category-blog__pagination .page-item.disabled .page-link {
    color: #9ca3af !important;
    border-color: #d1d5db !important;
    cursor: not-allowed !important;
    background-color: #f9fafb !important;
}

/* Gwarantowane wyświetlanie strzałek paginacji za pomocą CSS (w przypadku braku czcionki ikon) */
.icon-angle-left,
.icon-angle-right,
.icon-angle-double-left,
.icon-angle-double-right {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
}

.icon-angle-left::before,
.icon-angle-right::before,
.icon-angle-double-left::before,
.icon-angle-double-left::after,
.icon-angle-double-right::before,
.icon-angle-double-right::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

/* Pojedyncza w lewo */
.icon-angle-left::before {
    transform: rotate(-45deg);
    margin-left: 2px;
}

/* Pojedyncza w prawo */
.icon-angle-right::before {
    transform: rotate(135deg);
    margin-right: 2px;
}

/* Podwójna w lewo */
.icon-angle-double-left::before,
.icon-angle-double-left::after {
    transform: rotate(-45deg);
}
.icon-angle-double-left::after {
    margin-left: -2px !important;
}

/* Podwójna w prawo */
.icon-angle-double-right::before,
.icon-angle-double-right::after {
    transform: rotate(135deg);
}
.icon-angle-double-right::after {
    margin-left: -2px !important;
}

/* Wcięcia i odstępy dla list (ul, ol) w treści artykułów */
.prose ul,
main ul,
#main-content ul {
    padding-left: 1.75rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    list-style-type: square !important; /* Domyślny typ punktora */
}

.prose ol,
main ol,
#main-content ol {
    padding-left: 1.75rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    list-style-type: decimal !important;
}

.prose li,
main li,
#main-content li {
    margin-bottom: 0.35rem !important;
}
/* =====================================================================
   STRONA KONTAKTU (com-contact) 
   ===================================================================== */
.com-contact {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Układ dwukolumnowy na desktopie */
@media (min-width: 992px) {
    .com-contact {
        display: grid;
        grid-template-columns: 1fr 1.75fr;
        gap: 2.5rem;
        align-items: start;
    }
    .com-contact .page-header {
        grid-column: 1 / -1;
    }
    .com-contact > .com-contact__container {
        grid-column: 1;
    }
    .com-contact > h2:nth-of-type(2) {
        grid-column: 2;
        margin-top: 0 !important;
    }
    .com-contact > .com-contact__form {
        grid-column: 2;
    }
}

/* Nagłówki sekcji */
.com-contact h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1c2024 !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px solid #bd7405;
    padding-bottom: 0.5rem;
}

/* Blok danych adresowych */
.com-contact__info {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.com-contact__address {
    margin: 0;
}

.com-contact__address dt {
    float: left;
    clear: left;
    width: 2.5rem;
    text-align: left;
    color: #bd7405 !important;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.com-contact__address dd {
    margin-left: 2.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.5;
}

.com-contact__address dd a {
    color: #1c2024 !important;
    text-decoration: underline;
}
.com-contact__address dd a:hover {
    color: #bd7405 !important;
}

/* ============================================================
   FORULARZ KONTAKTOWY - POPRAWKI
   ============================================================ */

/* Karta formularza */
.com-contact__form {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem 1.5rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.com-contact__form form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Legenda i nagłówki formularza */
.com-contact__form legend {
    font-size: 1.15rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 1.5rem;
    display: block;
    width: 100%;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.75rem;
}

/* Grupy pól - układ pionowy, czytelny */
.com-contact__form .control-group {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
}

/* Etykiety */
.com-contact__form .control-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.4rem;
    display: block;
    width: 100% !important;
}

/* Pola formularza - pełna szerokość */
.com-contact__form .controls {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* Wszystkie pola wejściowe, textarea, select */
.com-contact__form .form-control {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.9rem !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
    color: #1c2024 !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

.com-contact__form .form-control:focus {
    outline: none !important;
    border-color: #bd7405 !important;
    box-shadow: 0 0 0 3px rgba(189, 116, 5, 0.15) !important;
}

/* Textarea - zachowanie proporcji */
.com-contact__form textarea.form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Pola wymagane i komunikaty */
.com-contact__form .required {
    font-weight: 700;
}
.com-contact__form .star {
    color: #dc2626 !important;
    margin-left: 0.25rem;
}

/* Komunikat o polach wymaganych */
.com-contact__form .field-spacer {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.5rem !important;
}
.com-contact__form .field-spacer .text .red {
    color: #dc2626 !important;
    font-weight: 700;
}
.com-contact__form .field-spacer .control-label {
    font-weight: 400;
    color: #6b7280;
}
.com-contact__form .field-spacer .controls {
    display: none !important;
}

/* Checkbox - poprawne wyświetlanie */
.com-contact__form .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.com-contact__form .form-check-inline {
    display: flex !important;
    align-items: center !important;
}

.com-contact__form .form-check-input {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 0.25rem !important;
    accent-color: #bd7405 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Etykieta przy checkboxie - jeśli jest */
.com-contact__form .form-check-label {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}

/* Przycisk wyślij */
.com-contact__form button.btn-primary {
    background-color: #1c2024 !important;
    color: #f2bc5a !important;
    border: 1px solid #1c2024 !important;
    padding: 0.65rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 0.375rem !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out !important;
    width: auto !important;
    min-width: 150px !important;
}

.com-contact__form button.btn-primary:hover {
    background-color: #bd7405 !important;
    color: #ffffff !important;
    border-color: #bd7405 !important;
}

/* Przycisk - pełna szerokość na małych ekranach */
@media (max-width: 575px) {
    .com-contact__form button.btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   MOBILNE - DOSTOSOWANIE DO MAŁYCH EKRANÓW
   ============================================================ */

@media (max-width: 767px) {
    .com-contact {
        padding: 0 0.75rem;
        margin: 1rem auto;
    }

    .com-contact__form {
        padding: 1.25rem 1rem 1.5rem;
    }

    .com-contact__info {
        padding: 1.25rem;
    }

    .com-contact__address dt {
        width: 2rem;
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .com-contact__address dd {
        margin-left: 2rem;
        margin-bottom: 0.75rem;
        font-size: 0.85rem;
    }

    .com-contact__form .form-control {
        font-size: 0.85rem !important;
        padding: 0.55rem 0.7rem !important;
    }

    .com-contact h2 {
        font-size: 1.25rem !important;
    }
}

/* ============================================================
   MAłe tablety (768-991) - układ nadal w jednej kolumnie
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .com-contact {
        padding: 0 1.25rem;
    }
    .com-contact__form {
        padding: 1.5rem;
    }
}

/* ============================================================
   BARDZO MAŁE EKRANY
   ============================================================ */
@media (max-width: 399px) {
    .com-contact__form {
        padding: 1rem 0.75rem 1.25rem;
    }
    .com-contact__form .form-control {
        font-size: 0.8rem !important;
        padding: 0.45rem 0.6rem !important;
    }
    .com-contact__address dt {
        width: 1.75rem;
        font-size: 0.9rem;
    }
    .com-contact__address dd {
        margin-left: 1.75rem;
        font-size: 0.8rem;
    }
}