@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {background:#0000ff; margin:10px 0; max-width:630px; padding:0 10px; font-family: serif; font-size:22px;}

a {color:#ffff00; font-weight:bold; }
a:hover {background:#ffff00; color:#0000ff}

header {margin-bottom:0px}

.logo {margin-bottom:20px;}

nav a {margin-right: 15px;}
nav a.aktywny {font-weight: bold;}

article {}

footer {}




/* ----- NAGLOWEK -----*/
.naglowek {
    position:fixed;
    top:10px; 
    right:20px;
    padding:5px;
    writing-mode: vertical-rl; 
    text-orientation: mixed;
    filter:url(#n1);
    color:#ffff00
}

.naglowek hr {
    max-width:112px;
    margin-left:0
}

.opis {
    color:pink;     
    text-align:center;
}

.zt {
    background:pink;
    animation: mruganie 1s infinite steps(1);
    display: inline-block;
}

@keyframes mruganie {
    0%, 100% { background: pink; }
    50% { background: transparent; }
}





.post-item {
    scroll-margin-top: 20px; 
}


/* Ustalamy pozycjonowanie dla kontenera, aby X odnosił się do niego */
.post-tytul-link {
    position: relative;
    padding-left: 15px; /* Robimy stałe, bezpieczne miejsce na X z lewej strony */
    text-indent: 0 !important; /* Resetujemy dawne wcięcie, które przesuwało tekst */
    margin: 1px 12px;
    font-size:24px;
}

/* Styl dla samego iksa - wypychamy go absolutnie na przygotowane lewe miejsce */
.znacznik-x {
    position: absolute;
    left: -15px;
    top: 0;
    color: #ffff00; /* Jaskrawy żółty kolor */
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.post-tytul-link a {
    
   
   }
   
.lista-postow {filter:url(#n1)}
   
   
.post-tresc-wrapper {
    max-height: 0;
    overflow: hidden;
    /* transition na 0.8s - pasuje do opóźnienia w JavaScript (800ms) */
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}


/* Kliknięty, aktualnie czytany tytuł (Kolor Blue) */
.post-tytul-link a.aktywny-blue {background:#ffff00; color: #0000ff !important;}

/* Pozostałe niekliknięte tytuły (Kolor Szary) */
.post-tytul-link a.nieaktywny-szary {
    color: #FFFF00 !important;
}

/* Hover, żeby szare tytuły po najechaniu lekko ciemniały */
.post-tytul-link a.nieaktywny-szary:hover {
    color: #0000ff !important;
    background:#ffff00;
}

/* Kontener na treść pod niebieskim tytułem */
.wysunieta-tresc-wpisu {
   max-width: 90% !important; /* Usuwa dawne 180px, dając pełną szerokość z body (650px) */
   margin-left:7px;
   padding: 20px 0 30px;
   }
   



/* Wygląd wstrzykiwanego tekstu opisu */
/* Wygląd wstrzykiwanego tekstu opisu pod postem */
.wysuniety-opis-tekst {
    color: #ffff00;
    border-left:1px solid #ffff00;
    padding:0 18px;
    margin-right:10px
             
}


.wysunieta-tresc-wpisu div {

margin:0 0 -5px 0;

}


.post-tytul-link a {
    transition: color 0.6s ease-in-out; 
    
}







/* Styl dla nagłówków rocznych w strumieniu wpisów */
.sekcja-roku {
  font-weight:bold;  
  margin-top:40px;
}




/* Tło modalu rozciągnięte na 100% ekranu */
.custom-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Biała karta */
    z-index: 999999; /* Zawsze na samym wierzchu */
    display: block;
    overflow-y: auto; /* Pasek przewijania modalu zawsze po prawej stronie ekranu */
    
    /* Płynne, łagodne wyłanianie i znikanie */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Klasa aktywująca wywołana przez JS */
.custom-modal-bg.aktywny {
    opacity: 0.95;
    visibility: visible;
}

/* Wyśrodkowany kontener kolumny tekstowej artykułu */
.custom-modal-content {
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px; /* Optymalna szerokość do czytania */
    margin: 0 auto;
    padding: 60px 20px;
    position: relative;
}

/* Duży, nieruchomy krzyżyk zamykania podążający za scrollem */
.custom-modal-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 42px;
    font-weight:bold;
    font-weight: 300;
    color: #333333;
    cursor: pointer;
    z-index: 1000000;
    transition: color 0.2s, transform 0.2s;
}
.custom-modal-close:hover {
    color: red;
    transform: scale(1.1);
}

/* Wygląd tekstu z pola opis w modalu */
#custom-modal-text-target {
    font-size: 20px;
    line-height: 1.3;
    color: #222222;
    margin-top: 30px;
}




/* Nadajemy tekstowi wewnątrz h2 modalu wygląd normalnego artykułu */
#custom-modal-title-target {max-width:200px; line-height:1.2}
   
/* UKRYWANIE PRZYCISKU OPIS WEWNĄTRZ MODALU: 
   Gdy treść artykułu wstrzykuje się do h2 modalu, ten styl automatycznie 
   znajduje czerwony przycisk i całkowicie go ukrywa, żeby nie szpecił widoku */
#custom-modal-title-target .opis-modal-btn {
    display: none !important;
}





/*-----POBIERZ_WPIS-----*/
.opis-link {color:red; cursor:pointer; display:inline-block; margin-top:15px;}
.opis-link:hover {background:red; color:#fff}



.tresc {font-size:25px; font-weight:bold; max-width:40%; line-height:1.2}
.tlo {
  background:#ffff00; 
  color:#0000ff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 10px;
  padding-left: 5px; 
  padding-top: 0px;
  padding-bottom: 0px;}


@media screen and (max-width:600px) {

body {background:#0000ff; margin:10px 0; max-width:620px; padding:0 10px; font-family: serif; font-size:21px;}

.wysunieta-tresc-wpisu {
   max-width: 100% !important; /* Usuwa dawne 180px, dając pełną szerokość z body (650px) */
   margin-left:5px;
  
   }
   
.tresc {font-size:24px; max-width:80%}

.post-tytul-link {
   font-size:21px;
}

}