/* =========================================================
   JOOMLA 5 - CASSIOPEIA
   WŁASNY CSS
   ========================================================= */

/* =========================================================
   1. KOLORY STRONY
   ========================================================= */
/*
   Kolor główny:              #996666
   Zwykłe linki:              #FF6633
   Hover zwykłych linków:     #996666

   Tytuły artykułów kategorii:
   normalnie:                 #993300
   hover:                     #996666

   Tytuł pojedynczego artykułu:
   normalnie:                 #996666
   hover:                     #993300

   Menu główne:
   normalnie:                 #FFFFFF
   hover:                     #FF6633

   Hover linków w stopce:     #FF3300

   Hover przycisku "Do góry": #993300
*/

/* =========================================================
   2. HEADER
   ========================================================= */

header.container-header.header {
    background-color: #996666 !important;
    background-image: none !important;
    color: #fff;
}

header.container-header {
    padding-top: 0px;
    padding-bottom: 0px;
	height: 350px;
}

header.container-header .navbar {
    background-color: transparent;
}

/* Logo / nazwa strony */
/*
.container-header .navbar-brand {
    height: 600px;
}
*/


/* =========================================================
   3. GŁÓWNE MENU POZIOME POD HEADEREM
   ========================================================= */

/* Menu wyrównane do prawej */
.container-header .mod-menu {
    justify-content: flex-end;
    width: 100% !important;
}
/*
@media (min-width: 992px) {
    header.container-header.header .grid-child.container-nav .mod-menu {
        justify-content: flex-end !important;
        width: 100% !important;
    }
}*/

/* Pozycje głównego menu */
header.container-header.header .grid-child.container-nav a {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    transition: color 0.5s ease;
}

/* Menu po najechaniu */
header.container-header.header .grid-child.container-nav a:hover {
    color: #FF6633 !important;
}

/* Aktywna pozycja menu */
header.container-header.header .grid-child.container-nav
.metismenu-item.active > a {
    color: #ffffff !important;
}

/* Podmenu */
.metismenu.mod-menu .mm-collapse .metismenu-item > a {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}


/* =========================================================
   4. PODSTAWOWY TEKST STRONY
   ========================================================= */

body {
    font-size: 1.25rem;
    line-height: 1.35 !important;
}


/* =========================================================
   5. ZWYKŁE HIPERŁĄCZA
   ========================================================= */

/* Normalny link */
body.site a:not(.btn):not(.dropdown-item) {
    color: #FF6633 !important;
}

/* Link po najechaniu */
body.site a:not(.btn):not(.dropdown-item):hover {
    color: #996666 !important;
}


/* =========================================================
   6. TYTUŁY ARTYKUŁÓW
   ========================================================= */

/* Blok tytułu */
.article-header {
    margin-bottom: 0;
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: bold;
}


/* =========================================================
   7. TYTUŁ ARTYKUŁU - WIDOK KATEGORII
   ========================================================= */

body.site .blog-items .item-title a,
body.site .blog-items .page-header a,
body.site .blog-items .page-header h2 a,
body.site .blog-items h2.item-title a {
    color: #993300 !important;
}

/* Tytuł artykułu kategorii - hover */
body.site .blog-items .item-title a:hover,
body.site .blog-items .page-header a:hover,
body.site .blog-items .page-header h2 a:hover,
body.site .blog-items h2.item-title a:hover {
    color: #996666 !important;
}


/* =========================================================
   8. TYTUŁ POJEDYNCZEGO ARTYKUŁU
   ========================================================= */

/* Sam tytuł */
body.site .article-header h1,
body.site .article-header h2,
body.site .article-header h3,
body.site .page-header h1,
body.site .page-header h2 {
    color: #996666 !important;
}

/* Jeżeli tytuł jest łączem */
body.site .article-header h1 a,
body.site .article-header h2 a,
body.site .article-header h3 a,
body.site .page-header h1 a,
body.site .page-header h2 a {
    color: #996666 !important;
}

/* Tytuł po najechaniu */
body.site .article-header h1 a:hover,
body.site .article-header h2 a:hover,
body.site .article-header h3 a:hover,
body.site .page-header h1 a:hover,
body.site .page-header h2 a:hover {
    color: #993300 !important;
}


/* =========================================================
   9. INFORMACJE O ARTYKULE
   ========================================================= */

dl.article-info,
.article-info-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 !important;
    padding: 3px 15px !important;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

/* Elementy informacji */
dl.article-info dt,
dl.article-info dd,
.article-info-horizontal li {
    margin: 0;
    padding: 0;
    display: inline;
    font-size: 0.9rem;
    color: #666;
}

/* Separatory */
dl.article-info dd::after {
    content: " •";
    margin: 0 5px;
}

/* Brak separatora po ostatnim elemencie */
dl.article-info dd:last-child::after {
    content: "";
}


/* =========================================================
   10. ODSTĘP OD "SZCZEGÓŁÓW" DO TREŚCI
   ========================================================= */

/* Pojedynczy artykuł */
body.site .com-content-article__body p:first-of-type {
    margin-top: 20px !important;
}

.com-content-article p:first-of-type {
    margin-top: 20px !important;
}

/* Widok kategorii */
body.site .blog-items .blog-item .item-content p:first-of-type {
    margin-top: 20px !important;
}

.blog-items .blog-item .item-content dl.article-info + p {
    margin-top: 20px !important;
}

/* 2. Naprawa braku odstępu między szczegółami artykułu (info block) a jego treścią */
.com-content-article .article-info,
.com-content-category-blog .article-info {
    margin-bottom: 1.5rem; /* Tworzy bezpieczną przestrzeń pod linią ze szczegółami (autor, data itp.) */
}


/* =========================================================
   11. ODSTĘPY MIĘDZY AKAPITAMI
   ========================================================= */

/* Pojedynczy artykuł */
body.site .com-content-article__body p {
    margin-bottom: 0.75rem !important;
}

body.site .com-content-article__body p + p {
    margin-top: 0.75rem !important;
}

/* Widok kategorii */
body.site .blog-items .blog-item .item-content p {
    margin-bottom: 0.75rem !important;
}

body.site .blog-items .blog-item .item-content p + p {
    margin-top: 0.75rem !important;
}


/* =========================================================
   12. POJEDYNCZY ARTYKUŁ
   ========================================================= */

.com-content-article {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #fff;
    overflow: auto;
}


/* =========================================================
   13. WIDOK KATEGORII / BLOG
   ========================================================= */

.blog-items .blog-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #fff;
    overflow: auto;
}


/* =========================================================
   14. OBRAZY W POJEDYNCZYM ARTYKULE
   ========================================================= */

.com-content-article__body img {
    margin-left: 10px !important;
    margin-right: 10px !important;
	margin-bottom: 15px !important;
}

/* Obraz float:left */
.com-content-article__body img[style*="float: left"],
.com-content-article__body img[style*="float: left"] {
    margin-right: 10px !important;
	margin-bottom: 15px !important;
}

/* Obraz float:right */
.com-content-article__body img[style*="float: right"],
.com-content-article__body img[style*="float:right"] {
    margin-left: 10px !important;
	margin-bottom: 15px !important;
}


/* =========================================================
   15. OBRAZY W WIDOKU KATEGORII
   ========================================================= */

.blog-items .blog-item img {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* Obraz po lewej */
.blog-items .blog-item img[style*="float: left"],
.blog-items .blog-item img[style*="float:left"] {
    float: left;
    margin-right: 15px !important;
    margin-bottom: 10px !important;
}

/* Obraz po prawej */
.blog-items .blog-item img[style*="float: right"],
.blog-items .blog-item img[style*="float:right"] {
    float: right;
    margin-left: 15px !important;
    margin-bottom: 10px !important;
}


/* =========================================================
   16. LISTY W WIDOKU KATEGORII
   ========================================================= */

.blog-items .blog-item ul,
.blog-items .blog-item ol {
    display: flow-root;
    margin-left: 15px !important;
    padding-left: 30px !important;
}


/* =========================================================
   17. LISTY W POJEDYNCZYM ARTYKULE
   ========================================================= */

.com-content-article__body ul,
.com-content-article__body ol {
    padding-left: 30px !important;
}


/* =========================================================
   18. CZYTAJ WIĘCEJ - ZAWSZE POD ZDJĘCIEM
   ========================================================= */

body.site .blog-items .blog-item .readmore {
    clear: both !important;
    margin-top: 10px !important;
	padding-top: 10px !important;
}


/* =========================================================
   19. PRZYCISKI
   ========================================================= */

body.site .btn,
body.site button,
body.site input[type="submit"],
body.site input[type="button"],
body:not(.com_jce) .btn,
body:not(.com_jce) button,
body:not(.com_jce) input[type="submit"],
body:not(.com_jce) input[type="button"] {
    background-color: #996666 !important;
    border-color: #996666 !important;
    color: #fff !important;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Przyciski po najechaniu */
body.site .btn:hover,
body.site button:hover,
body.site input[type="submit"]:hover,
body.site input[type="button"]:hover,
body:not(.com_jce) .btn:hover,
body:not(.com_jce) button:hover,
body:not(.com_jce) input[type="submit"]:hover,
body:not(.com_jce) input[type="button"]:hover {
    background-color: #993300 !important;
    border-color: #993300 !important;
    color: #fff !important;
}


/* =========================================================
   20. MODUŁY - NAGŁÓWKI
   ========================================================= */

.moduletable h1,
.moduletable h2,
.moduletable h3,
.moduletable h4,
.card-header,
.module-title,
.mod-title {
    color: #996666 !important;
}

/* Nagłówki modułów w prawym sidebarze */
.container-sidebar-right .card-header,
.container-sidebar-right .card-header h1,
.container-sidebar-right .card-header h2,
.container-sidebar-right .card-header h3,
.container-sidebar-right .card-header h4,
.container-sidebar-right .module-title,
.container-sidebar-right .mod-title {
    color: #996666 !important;
}


/* =========================================================
   21. STOPKA
   ========================================================= */

.container-footer {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    box-sizing: border-box !important;
    /*padding-top: 8px !important;*/
    padding-bottom: 8px !important;
    background-color: #996666 !important;
    background-image: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Zawartość stopki na środku */
.container-footer .grid-child {
    display: table !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Elementy wewnątrz stopki */
.container-footer .grid-child > * {
    text-align: center !important;
}


/* =========================================================
   22. LINKI W STOPCE
   ========================================================= */

/* Normalny link */
body.site .container-footer a {
    color: #FF6633 !important;
}

/* Link w stopce po najechaniu */
body.site .container-footer a:hover,
body.site .container-footer a:focus {
    color: #FF3300 !important;
}


/* =========================================================
   23. STOPKA ZAWSZE PRZY DOLE STRONY
   ========================================================= */

html {
    height: 100%;
}

body.site {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

body.site > .site-grid {
    flex: 1 0 auto !important;
    min-height: 0 !important;
}


/* =========================================================
   24. PRZYCISK "WRÓĆ NA GÓRĘ"
   ========================================================= */

/* Stan normalny */
body.site .back-to-top {
    color: #996666 !important;
    border-color: #996666 !important;
}

body.site .back-to-top:hover,
body.site .back-to-top:focus {
    color: #993300 !important;
    border-color: #993300 !important;
    background-color: transparent !important;
}


/* =========================================================
   25. STRZAŁKA "DO GÓRY"
   ========================================================= */

body.site #back-top.back-to-top-link {
    color: #996666 !important;
    border-color: #993300 !important;
}

body.site #back-top.back-to-top-link:hover,
body.site #back-top.back-to-top-link:focus {
    border-color: #993300 !important;
    background-color: #FFFFFF !important;
	color: #FF3300 !important;
}


/* =========================================================
   26. PAGINACJA
   ========================================================= */

/* AKTYWNY przycisk */
.pagination__wrapper .pagination li.active.page-item .page-link {
    background-color: #996666 !important;
    border-color: #996666 !important;
    color: #FF3300 !important;
}

/* AKTYWNY - HOVER */
.pagination__wrapper .pagination li.active.page-item .page-link:hover,
.pagination__wrapper .pagination li.active.page-item .page-link:focus {
    background-color: #993300 !important;
    border-color: #993300 !important;
    color: #996666 !important;
}

/* NIEAKTYWNY przycisk */
.pagination__wrapper .pagination li.page-item:not(.active) .page-link {
    background-color: transparent !important;
    border-color: #996666 !important;
    color: #FF6633 !important;
}

/* NIEAKTYWNY - HOVER */
.pagination__wrapper .pagination li.page-item:not(.active) .page-link:hover,
.pagination__wrapper .pagination li.page-item:not(.active) .page-link:focus {
    background-color: #993300 !important;
    border-color: #993300 !important;
    color: #996666 !important;
}


/* =========================================================
   27. MODUŁ BELOW TOP - mod-custom113
   ========================================================= */

/* Tytuł modułu - wyśrodkowany */
#mod-custom113 .card-header,
#mod-custom113 .module-title,
#mod-custom113 .mod-title,
#mod-custom113 > h1,
#mod-custom113 > h2,
#mod-custom113 > h3,
#mod-custom113 > h4 {
    text-align: center !important;
}

/* Zawartość modułu - wyśrodkowanie */
#mod-custom113 .mod-custom,
#mod-custom113 .custom,
#mod-custom113 .card-body {
    text-align: center !important;
}

/* ZWYKŁY LINK */
#mod-custom113 a,
#mod-custom113 a:link {
    color: #FFFFFF !important;
}

/* ODWIEDZONY LINK - nadal biały */
#mod-custom113 a:visited {
    color: #FFFFFF !important;
}

/* AKTYWNY LINK */
#mod-custom113 a.active,
#mod-custom113 li.active > a {
    color: #FF6633 !important;
}

/* AKTYWNY LINK + HOVER */
#mod-custom113 a.active:hover,
#mod-custom113 li.active > a:hover {
    color: #FF6633 !important;
}

/* Zwykły link po najechaniu */
#mod-custom113 a:not(.active):hover {
    color: #FF6633 !important;
}


/* =========================================================
   28. LISTY - WIDOK POJEDYNCZEGO ARTYKUŁU I KATEGORII
   ========================================================= */

/* Pojedynczy artykuł */
body.site .com-content-article__body > :first-child {
    margin-top: 20px !important;
}

/* Widok kategorii - pierwszy akapit */
body.site .blog-items .blog-item .item-content dl.article-info + p {
    margin-top: 20px !important;
}

/* Widok kategorii - pierwsza lista */
body.site .blog-items .blog-item .item-content dl.article-info + ul,
body.site .blog-items .blog-item .item-content dl.article-info + ol {
    margin-top: 20px !important;
}

/* Widok kategorii - pierwszy nagłówek */
body.site .blog-items .blog-item .item-content dl.article-info + h1,
body.site .blog-items .blog-item .item-content dl.article-info + h2,
body.site .blog-items .blog-item .item-content dl.article-info + h3,
body.site .blog-items .blog-item .item-content dl.article-info + h4,
body.site .blog-items .blog-item .item-content dl.article-info + h5,
body.site .blog-items .blog-item .item-content dl.article-info + h6 {
    margin-top: 20px !important;
}


/* =========================================================
   29. LISTY - PUNKTORY I NUMERY
   ========================================================= */

/* Pogrubienie samych punktorów i numerów */
body.site .com-content-article__body li::marker,
body.site .blog-items .blog-item li::marker {
    font-weight: 700;
}

/* Większa przestrzeń między numerem/punktorem a tekstem */
body.site .com-content-article__body ul,
body.site .com-content-article__body ol,
body.site .blog-items .blog-item ul,
body.site .blog-items .blog-item ol {
    padding-left: 2em !important;
}


/* =========================================================
   30. MENU - SIDEBAR RIGHT
   ========================================================= */

.container-sidebar-right .mod-menu a,
.container-sidebar-right .mod-menu button {
    font-weight: 700 !important;
}


/* =========================================================
   31. SIDEBAR RIGHT - BELKA MENU
   ========================================================= */

/* Belka / nagłówek modułu */
.container-sidebar-right .card-header,
.container-sidebar-right .module-title,
.container-sidebar-right .mod-title {
    background-color: #996666 !important;
    color: #ffffff !important;
}

/* Nagłówki znajdujące się na belce */
.container-sidebar-right .card-header h1,
.container-sidebar-right .card-header h2,
.container-sidebar-right .card-header h3,
.container-sidebar-right .card-header h4,
.container-sidebar-right .module-title,
.container-sidebar-right .mod-title {
    color: #ffffff !important;
}

/* Jeżeli nagłówek jest łączem */
.container-sidebar-right .card-header a,
.container-sidebar-right .module-title a,
.container-sidebar-right .mod-title a {
    color: #ffffff !important;
}

/* Link na belce po najechaniu */
.container-sidebar-right .card-header a:hover,
.container-sidebar-right .module-title a:hover,
.container-sidebar-right .mod-title a:hover {
    color: #ffffff !important;
}


/* =====================================================
   32. MENU - DESKTOP + HAMBURGER + ROZWINIĘTE MENU
   ===================================================== */

/* NAV zajmuje dostępne miejsce */
header.container-header.header
.grid-child.container-nav
nav.navbar {
    width: 100% !important;
    position: relative !important;
}


/* =========================
   DUŻY EKRAN
   ========================= */

@media (min-width: 992px) {

    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse {
        display: flex !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
    }

    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse
    ul.mod-menu {
        margin-left: auto !important;
        justify-content: flex-end !important;
    }
}


/* =========================
   MAŁY EKRAN
   ========================= */

@media (max-width: 991.98px) {

    /* hamburger zostaje po prawej */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-toggler {
        margin-left: auto !important;
        margin-right: 0 !important;
    }


    /* ROZWINIĘTE MENU */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;

        width: max-content !important;
        min-width: 230px !important;

        background-color: #996666 !important;

        padding: 10px 15px !important;

        z-index: 1000 !important;
    }


    /* lista linków */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    ul.mod-menu {
        width: auto !important;
        min-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-content: flex-end !important;
        text-align: right !important;
    }


    /* każdy element listy */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    li {
        text-align: right !important;
    }


    /* linki */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    li > a {
        display: block !important;
        text-align: right !important;
        color: #ffffff !important;
        /*padding: 4px 0 !important;*/
    }


    /* link po najechaniu */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    li > a:hover {
        color: #FF6633 !important;
    }
}

/* MOBILE MENU - tło również podczas rozwijania */
@media (max-width: 991.98px) {

    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse,
    
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.collapsing,
    
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show {
        background-color: #996666 !important;
    }
}

@media (max-width: 991.98px) {
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    ul.mod-menu li {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

	header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show
    ul.mod-menu li > a {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        line-height: 1.2 !important;
    }
}

/* =========================================================
   33. MOBILE MENU - STAŁA SZEROKOŚĆ TŁA PODCZAS ANIMACJI
   ========================================================= */

@media (max-width: 991.98px) {

    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse,
    
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.collapsing,
    
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.show {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;

        width: max-content !important;
        min-width: 230px !important;
        max-width: calc(100vw - 20px) !important;

        background-color: #996666 !important;
        z-index: 1000 !important;
    }

    /* W czasie animacji nie pozwalamy Bootstrapowi
       zmieniać szerokości menu */
    header.container-header.header
    .grid-child.container-nav
    nav.navbar
    .navbar-collapse.collapsing {
        width: max-content !important;
        min-width: 230px !important;
        right: 0 !important;
        left: auto !important;
    }
}


/* =========================================================
   34. NAZWA WITRYNY - TOP-BELOW
   ========================================================= */

#mod-custom113 a {
	font-family: "Comfortaa", sans-serif !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    transition: color 0.5s ease !important;
}

#mod-custom113 a:hover {
    color: #FF3300 !important;
}

/* ================================
   35. CZCIONKA COMFORTAA
   ================================ */

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa/Comfortaa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa/Comfortaa-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa/Comfortaa-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa/Comfortaa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =================================
   36. NAZWA STRONY - RESPONSYWNOŚĆ
   ================================= */

/* Telefon */
@media (max-width: 767.98px) {
    #mod-custom113 a {
        font-size: 1.3rem !important;
        line-height: 1.0 !important;
    }
}

/*#mod-custom113 a {
    font-size: clamp(1.3rem, 4vw, 2rem) !important;
    line-height: 1 !important;
}*/


/* Zmniejszenie odstępu między tytułem strony a menu */
#mod-custom113 {
    margin-bottom: -20px !important;
}

/* =========================================================
   KONIEC WŁASNEGO CSS
   ========================================================= */