/***** 0 *** Kursywa to kolor ****/
em {
    color: #000070 !important;
}


/****** TOPBAR określona szerokość *******/
.container-topbar {
    max-width: 1327px;
    padding: 15px 0px 0px 0px; /* top right bottom left */
    display: block;
    margin: 0 auto;
}


/****** Tło na stronę *******/
html, body {
    height: 100%;
}

body {
    position: relative; /* ważne — tworzy kontekst */
    z-index: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/images/headers/tlo.jpg") center center / cover no-repeat;
    z-index: -1; /* teraz jest ZA treścią, ale widoczne */
    pointer-events: none;
}




/****** H1 — statyczne tło + mocny błysk *******/
h1 {
    position: relative;
    overflow: hidden;
    padding: 10px;
    background: linear-gradient(
        90deg,
        var(--btnbg),
        var(--btnbgh)
    );
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
    color: #333;
}

/* tekst nad efektem */
h1,
h1 * {
    position: relative;
    z-index: 2;
}

/* efekt błysku — wzmocniony */
h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;  /* startuje dalej, więc wejście płynniejsze */
    width: 60%;  /* szerszy refleks → mocniej widać */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.95) 95%, /* prawie białe, mocny połysk */
        transparent 100%
    );
    transform: translateX(-200%) skewX(-20deg);
    z-index: 1;
    pointer-events: none;
    animation: h1BeamStrong 2.8s ease-in-out infinite;
}

/* płynny przejazd bez złych mignięć */
@keyframes h1BeamStrong {
    0% {
        transform: translateX(-200%) skewX(-20deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) skewX(-20deg);
        opacity: 0;
    }
}



/****** efekt świecenia na literach i nagłówkach *******/
.shine-text,h2,h2 {
    position: relative;
    background: linear-gradient(
        90deg,
        var(--body-color) 0%,
        #ffffff 8%,
        var(--body-color) 16%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    color: transparent;
    animation: shineText 3s linear infinite;
}



@keyframes shineText {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}




/* globalny efekt zoom dla wszystkich obrazków */
img {
    transition: transform .45s ease;
}

/* powiększenie przy hover */
img:hover {
    transform: scale(1.07);
}


/* Wszystkie zdjęcia - zaokrąglenia  **************/
img {
    border-radius: 6px;
}

/* Zdjęcia na głównej efekty  **************/
.boxed.item-image, .item-image {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-radius: 6px;
}

/*brak odstępu nad zdjęciem   */
.blog-item .item-image {
    margin-top: 0px !important;
}

.boxed .blog-item {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    border-radius: 6px; /* zaokrąglanie okien*/
}




/* Gradient dla nagłówków kart **************/
.card-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--btnbg),
        var(--btnbgh)
    ) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
    color: #333;
}

/* Tekst zawsze nad efektem */
.card-header * {
    position: relative;
    z-index: 1;
}

/* Błysk pod tekstem, z łagodnym wejściem/wyjściem */
.card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55),
        transparent
    );
    transform: skewX(-20deg);
    z-index: 0;
    pointer-events: none;
    animation: shineMove 3s linear infinite;
}

/* brak "szarpnięcia" na końcu dzięki opacity */
@keyframes shineMove {
    0% {
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    85% {
        transform: translateX(260%) skewX(-20deg);
        opacity: 0;
    }
}





/* Cieniowanie kart na stronie głównej ***********/
.boxed .blog-item {
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}



/***** 1 *** Tło u góry i stopa na dole ****/
.container-header, .container-footer {
    background: linear-gradient(
        to right,
        var(--btnbg),
        var(--btnbgh)
    ) !important;
    border: none;
}



/***** 2 *** Banner główny na srodku ****/

.navbar-brand, .navbar-brand a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Jeśli chcesz, aby rozciągało się na całą szerokość */
}

.brand-logo {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}




/***** 3 *** Banner pod menu srodku ****/

.mod-banners {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Upewnij się, że rodzic zajmuje całą szerokość */
}

.mod-banners__item {
    justify-content: center;
    align-items: center;
    width: fit-content;
}




/****** 4 ******* Pozycja TOP-A bez wypełniania *******/
.container-top-a>* {
    margin: 0;
}




/***** 5 *** Kolejność TOP-B ****/

.grid-child.container-top-b {
    flex-direction: column;
}




/***** 6 **** Nagłówki H ******/
.h1,h1{font-size:var(--h1size);}@media(min-width:1200px){.h1,h1{font-size:var(--h1size);}}
.h2,h2{font-size:var(--h2size);}@media(min-width:1200px){.h2,h2{font-size:var(--h2size);}}
.h3,h3{font-size:var(--h3size);}@media(min-width:1200px){.h3,h3{font-size:var(--h3size);}}
.h4,h4{font-size:calc(var(--h3size)*0.90);}@media(min-width:1200px){.h4,h4{font-size:calc(var(--h3size)*0.90);}}
.h5,h5{font-size:calc(var(--h3size)*0.85);}@media(min-width:1200px){.h5,h5{font-size:calc(var(--h3size)*0.85);}}
.h6,h6{font-size:calc(var(--h3size)*0.80);}@media(min-width:1200px){.h6,h6{font-size:calc(var(--h3size)*0.80);}}




/**** 7 zdjęcia na środku *****/
figure {
    margin: 0 0 2em;
    text-align: center;
}



/***** 8 *** Menu główne - zawijanie tekstu i odstępy *****/

/* Kontener menu głównego */
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list {
    display: flex;
    flex-wrap: wrap;              /* może przechodzić do nowej linii */
    justify-content: center;
    max-width: 100%;
    background: linear-gradient(
        to right,
        var(--btncolor),
        var(--btncolorh)
    ) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.30);
    margin: 0 0.5em;              /* odstęp od krawędzi strony */
    gap: 0 0.15rem;               /* odstępy między kategoriami */
    padding: 0 0.7rem;            /* odstęp od lewej/prawej w samym boxie menu */
}

/* Reset marginesów/paddingu na li – inaczej łapie z szablonu */
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Linki w menu – zawijanie + wysokość/szerokość kafelków */
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li > a {
    display: block;
    font-weight: 500 !important;
    white-space: normal !important;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 0.5rem 0.6rem !important;  /* 0.7 = wysokość, 0.6 = szerokość */
}

/* Ikonki rozwijania (mm-toggler) – dosunięte do tekstu i równe na wysokość */
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li > .mm-toggler {
    margin-left: -0.7rem;
    padding: 0.7rem 0.2rem;
}

/* STAŁE POGRUBIENIE KATEGORII, W KTÓREJ JESTEŚ (active/current) */
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li.active > a,
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li.current > a {
    font-weight: 700 !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.25);
}

/* AKTYWNY ELEMENT – wciśnięty, delikatnie świecący*/
.container-header .navbar .mod-menu_dropdown-metismenu.mod-menu.mod-list > li:not(.active):not(.current) > a:hover {
    font-weight: 700 !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
    animation: pulseText 2s ease-in-out infinite;
}


@keyframes pulseText {
    50% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}



/***** 9 ****** Kolor skrótu na komórki ************/
.container-header .navbar-toggler {
    color: var(--headercolor);
    border: 1px solid var(--headercolor);
}

/***** 10 *** Menu na myszę – MOBILE + DESKTOP *****/

/* WSPÓLNE STYLOWANIE PODMENU (wygląd) */
.mm-collapse {
    background: linear-gradient(
        to right,
        var(--btncolorh),
        var(--btncolor)
    ) !important;
    border-radius: 0 0 10px 10px;           /* zaokrąglenie dołu */
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);/* lekkie oderwanie od tła strony */
    margin-top: 0.15rem;                    /* mini odstęp pod paskiem menu */
    padding: 0.3rem 0.4rem;                 /* żeby tekst nie kleił się do krawędzi */
}

/* ---------- MOBILE (domyślnie) ---------- */
/* Na telefonach – proste otwieranie/zamykanie, BEZ animacji, pionowo w dół */
@media (max-width: 991.98px) {

    .mm-collapse {
        display: none;                /* domyślnie ukryte */
        max-height: none;
        opacity: 1;
        overflow: visible;

        /* ważne – żeby nie otwierało się bokiem */
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;

        /* brak animacji na mobile */
        transition: none !important;
    }

    /* Pokaż podmenu po kliknięciu (klasa .mm-show dodawana przez MetisMenu) */
    .mm-show {
        display: block !important;    /* normalny blok, wypycha wszystko w dół */
    }

    /* Kontener menu ma się wydłużać razem z podmenu */
    .metismenu,
    .navbar-nav,
    .nav {
        height: auto !important;
        overflow: visible !important;
        position: static !important;
    }
}

/* ---------- DESKTOP (animowane wysuwanie) ---------- */
@media (min-width: 992px) {

    /* bazowe ukrycie + animacja z opóźnieniem */
    .mm-collapse {
        display: block !important;   /* MetisMenu tak lubi, my chowamy max-height */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 3s ease,
            opacity 1.1s ease;
    }

    /* wysuwanie przy najechaniu myszą */
    .metismenu-item.parent:hover > .mm-collapse {
        max-height: 2000px;
        opacity: 1;
    }

    /* jakby MetisMenu dodało .mm-show na desktopie – też pokaż normalnie */
    .mm-show {
        max-height: 2000px !important;
        opacity: 1 !important;
    }
}




/******* 11 ***** menu Porównania u góry******/

.porownania-gora {
    color: #ff0000 !important; /* Kolor tekstu */
    font-weight: 500 !important; /* Grubsza czcionka po najechaniu */
}

.porownania-gora:hover {
    color: #b200ff !important; /* Ciemniejszy odcień po najechaniu */
    font-weight: 500 !important; /* Grubsza czcionka po najechaniu */
}





/***** 12 *** Paginacja jest łamana ****/

.pagination {
    flex-wrap: wrap;
    justify-content: center;
}


/******* 13 ******** Stopka tekst po najechaniu *********/
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
    color: var(--link-hover-color);
}



/***** 14 ****** Paginacja ************/

.page-link:hover {
    z-index: 2;
}

.page-link:focus {
    z-index: 3;
    box-shadow: 0 0 5px var(--cassiopeia-color-primary);
    outline: 0;
}

.page-link.active, .active > .page-link {
    z-index: 3;
}

.page-link.disabled, .disabled > .page-link {
    pointer-events: none;
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--pagination-border-radius);
    border-bottom-left-radius: var(--pagination-border-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--pagination-border-radius);
    border-bottom-right-radius: var(--pagination-border-radius);
}






/********* 15 ****** Mniejsze odstępy w tabeli ********/

[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel]>[data-rlta-element=panel-content],[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel]>[data-rlta-element=panel-content] {
padding-left: 3px !important;
padding-right: 3px !important;
}

[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel]>[data-rlta-element=panel-content],[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel]>[data-rlta-element=panel-content] {
padding-left: 3px !important;
padding-right: 3px !important;
}



[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-positioning=top][data-rlta-type=accordions]>[data-rlta-element=panel],[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-positioning=top][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel] {
padding-left: 3px !important;
padding-right: 3px !important;
}




/********* 16 ****** Cookie bardziej po lewej ********/
.cc-revoke.cc-left {
    left: 1em;
}

.cc-revoke.cc-bottom {
    bottom: 0;
    left: 1em;
  }

.cc-revoke.cc-center.cc-revoke-bottom {
    bottom: 0;
    left: 6em;
}





/****** 17 ******** komentarze na działach *******/
ul.jcomment-latest .author {
color: var(--body-color) !important;
font-size: 0.90rem !important;
}

ul.jcomment-latest .date {
color: var(--body-color) !important;
font-size: 0.90rem !important;
}

ul.jcomment-latest .comment-rounded {
color: var(--body-color) !important;
font-size: 1.00rem !important;
}





/****** 18 ******** ramki spisu treści *******/

/* odstęp dookoła całej karty TOC */
.rl_quickindex.card {
  margin: 1.25rem 0;     /* odstęp nad i pod */
    background-color: #f8f9fa; /* jasny szary */
}

/* offset dla skoków do #kotwic */
html { scroll-padding-top: 5px; }  /* dostosuj 5 do wysokości headera */


/* RESET tylko dla spisu treści */
.rl_quickindex.card ul,
.rl_quickindex.card li {
  margin-left: 0;            /* usuń wcześniejsze cofanie */
}

/* poziom 1 – daj wystarczający padding na marker */
.rl_quickindex.card ul {
  padding-left: 0.75rem;     /* albo padding-inline-start: 1.25rem; */
  list-style-position: outside;
  overflow: visible;         /* na wszelki wypadek */
}




/****** 19 ******* łamanie indeksu *******/
sup {
  white-space: normal;        /* pozwala łamać wiersz */
  word-break: break-word;     /* dopuszcza łamanie w środku wyrazu */
  overflow-wrap: anywhere;    /* pozwala łamać nawet bez spacji */
}


/******* 20 ***** button wlasny 1 ******/

.button-wlasny-1 {
    background-color: #000762;
    color: #ffac00;
    font-weight: 700;
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;

    position: relative;
    overflow: hidden;

    /* ✅ auto-błysk całego przycisku co 5s */
    animation: buttonFlash 5s infinite ease-in-out;

    transition: transform .3s ease, box-shadow .3s ease;
}

/* efekt „błysku” – tylko na chwilę jaśniejszy i mocniejszy glow */
@keyframes buttonFlash {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 10px rgb(0 0 0);
    }
    6% {
        filter: brightness(1.45);
        box-shadow: 0 0 26px rgb(0 39 255);
    }
}

a.button-wlasny-1:hover,
a.button-wlasny-1:focus,
a.button-wlasny-1:active {
    color: #ebebeb !important;
    text-decoration: none;
}



/******* 21 ***** button wlasny 2******/

.button-wlasny-2 {
    background-color: #000762; /* Kolor tła */
    color: #ffac00; /* Kolor tekstu */
    font-weight: 500; /* Grubość czcionki */
    border-radius: .25rem; /* Zaokrąglenie rogów */
    padding: .6rem 1rem; /* Wewnętrzny odstęp */
    font-size: 1rem; /* Wielkość czcionki */
    text-align: center; /* Wyśrodkowanie tekstu */
    text-decoration: none; /* Brak podkreślenia */
    display: inline-block; /* Ustawienie inline-block, by działało jako przycisk */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    transition: color .15s ease-in-out, 
                background-color .15s ease-in-out, 
                border-color .15s ease-in-out, 
                box-shadow .15s ease-in-out; /* Efekty płynnych przejść */
    user-select: none; /* Blokowanie zaznaczania tekstu */
    vertical-align: middle; /* Wyśrodkowanie w pionie */
}

.button-wlasny-2:hover {
    background-color: #ff0000; /* Ciemniejszy odcień po najechaniu */
    color: #000000; /* Nowy kolor tekstu po najechaniu */
    font-weight: 700; /* Grubsza czcionka po najechaniu */
}



/******  ******** mapa odstępu punktowanie *******/

/* Ogólnie zmniejsz wcięcia wszystkich poziomów w sitemapie OSMap */
.osmap-items ul {
    margin-left: 0 !important;;          /* usuwa domyślny margines przeglądarki */
    padding-left: 30px !important;;      /* mniejsze wcięcie zamiast ~30–40px */
}

/* Dalsze poziomy – jeszcze trochę mniejsze */
.osmap-items ul ul {
    padding-left: 0.75rem !important;;
}

.osmap-items ul ul ul {
    padding-left: 0.75rem !important;;
}