:root {
  --share-facebook: url("/images/social/facebook.svg");
  --share-instagram: url("/images/social/instagram.svg");
  --share-linkedin: url("/images/social/linkedin.svg");
  --share-mastodon: url("/images/social/mastodon.svg");
  --share-substack: url("/images/social/substack.svg");
  --share-permalink: url("/images/social/permalink.svg");
}


/* Tryb jasny */
@media (prefers-color-scheme: light) {
  :root {
    --accent1-color: #616ab3;
    --accent2-color: #4dc9de;
    --site-logo-url: url("/images/light/3kreska_logo_day.svg");
    
    --site-bg-color: #f5f5f5;
    --site-color: #414141;
    
    --menu-bg-color: #ffffff;
    --menu-link-color: #414141;
    --menu-link-hover-color: var(--accent1-color);
    
    /* Moduł powitania na stronie głównej */
    --home-text-color: #414141;
    --home-text-header-color: #1a1a1a;
    --invert-social-icons: invert(0);
    
    /* Plakietka z postem */
    --post-badge-bg-color: #ffffff;
    --post-badge-border-color: #ededed;
    --post-badge-title-color: #353535;
    --post-badge-title-hover-color: var(--accent1-color);
    --post-badge-summary-color: #353535;
    --post-badge-meta-color: #a3a3a3;
    --post-image-opacity: 0.8;
    --post-badge--color: #777;
    --post-badge-tag-bg-color: #f3f3f3;
    
    /* Dodatkowe linki pod plakietkami na stronie głównej */
    --more-title-color: #222;
    --more-date-color: #999;
    --more-link-bg-hover-color: #ededed;
    --more-button-color: #fff;
    --more-button-bg-color: #ccc;
    --more-button-bg-hover-color: #b2b2b2;

    --pagination-link-color: #666;
    --pagination-hover-bg-color: #eeeeee;
    --pagination-border-color: #e4e4e4;
    --pagination-active-color: #fff;
    --pagination-active-bg-color: #ccc;
    

/* Stopka */
    --footer-color: #444;
    --footer-bg-color: #ffffff;
    --footer-link-color: #9b9b9b;
    --footer-link-hover-color: #000000;
    
    /* Nagłówki na stronie wpisu */
    --single-date-color: #6f6f6f;
    --single-title-color: #353535;
    --single-meta-color: #8e8e8e;
    
    /* Kolory treści na stronie wpisu */
    --single-color: #595959;
    --single-header-color: #2a2a2a;
    --single-title-link-color: #444;
    --single-link-color: #000;
    --single-link-underline-color: #bbb;
    --single-link-hover-color: var(--accent1-color);
    
    --single-code-color: #676767;
    --single-code-bg-color: #eaeaea;
    
    --single-blockquote-color: #000000;
    --single-blockquote-border-color: #a4a4a4;
    
    --single-tag-color: #555;
    --single-tag-bg-color: #e8e8e8;
    --single-tag-bg-hover-color: #d8d8d8;
    
    --single-nav-link-color: #757575;
    --single-nav-link-hover-color: #000000;
    
    --single-h6-color: #888;
    
    --single-hr-color: #ddd;
    
    /* Formularz */
    --form-textarea-bg-color: #e7e7e7;
    
    /* Cookies banner */
    --cookies-color: #4d4d4d;
    --cookies-bg-color: #e4e4e4;
    --cookies-button-color: #ffffff;
    --cookies-button-bg-color: #a9a9a9;
    --cookies-button-bg-hover-color: #828282;
    
  }
}

/* Tryb ciemny */
@media (prefers-color-scheme: dark) {
  :root {
    --accent1-color: #675db6;
    --accent2-color: #8b9feb;
    --site-logo-url: url("/images/dark/3kreska_logo_night.svg");
    
    --site-bg-color: #252525;
    --site-color: #cbcbcb;
    
    --menu-bg-color: #1f1f1f;
    --menu-link-color: #cbcbcb;
    --menu-link-hover-color: var(--accent2-color);
    
    /* Moduł powitania na stronie głównej */
    --home-text-color: #a0a0a0;
    --home-text-header-color: #e8e8e8;
    --invert-social-icons: invert(.8);
    
    /* Plakietka z postem */
    --post-badge-bg-color: #3e3e3e;
    --post-badge-border-color: #1b1b1b;
    --post-badge-title-color: #e9e9e9;
    --post-badge-title-hover-color: var(--accent2-color);
    --post-badge-summary-color: #c7c7c7;
    --post-badge-meta-color: #858585;
    --post-image-opacity: 0.7;
    --post-badge-tag-color: #bbb;
    --post-badge-tag-bg-color: #4c4c4c;
    
    /* Dodatkowe linki pod plakietkami na stronie głównej */
    --more-title-color: #eee;
    --more-date-color: #888;
    --more-link-bg-hover-color: #2e2e2e;
    --more-button-color: #fff;
    --more-button-bg-color: #444;
    --more-button-bg-hover-color: #8e8e8e;
    
    --pagination-link-color: #999;
    --pagination-hover-bg-color: #585858;
    --pagination-border-color: #3a3a3a;
    --pagination-active-color: #bbb;
    --pagination-active-bg-color: #666;
    
    /* Stopka */
    --footer-color: #000;
    --footer-bg-color: #5b5b5b;
    --footer-link-color: #c5c5c5;
    --footer-link-hover-color: #ffffff;
    
    /* Nagłówki na stronie wpisu */
    --single-date-color: #a1a1a1;
    --single-title-color: #d6d6d6;
    --single-meta-color: #8e8e8e;
    
    /* Kolory treści na stronie wpisu */
    --single-color: #c8c8c8;
    --single-header-color: #fafafa;
    --single-title-link-color: #ddd;
    --single-link-color: #fff;
    --single-link-underline-color: #777;
    --single-link-hover-color: var(--accent2-color);
    
    --single-code-color: #b0b0b0;
    --single-code-bg-color: #2c2c2c;
    
    --single-blockquote-color: #ffffff;
    --single-blockquote-border-color: #646464;
    
    --single-tag-color: #ccc;
    --single-tag-bg-color: #3d3d3d;
    --single-tag-bg-hover-color: #575757;
    
    --single-nav-link-color: #828282;
    --single-nav-link-hover-color: #ffffff;
    
    --single-h6-color: #888;
    
    --single-hr-color: #444;
    
    /* Formularz */
    --form-textarea-bg-color: #323232;
    
    /* Cookies banner */
    --cookies-color: #bdbdbd;
    --cookies-bg-color: #2e2e2e;
    --cookies-button-color: #ffffff;
    --cookies-button-bg-color: #7a7a7a;
    --cookies-button-bg-hover-color: #bcbcbc;
  }
}





body {
  background-color: var(--site-bg-color);
  color: var(--site-color);
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 10,
    "YTLC" 300;
}


h1, h2, h3, h4, h5{
  font-family: "Noto Serif", serif;

font-weight: 500;
font-style: normal;

}


/* Nagłówek */
.site-header {
  background-color: var(--menu-bg-color);
  display: flex;
  justify-content: center; /* centruje wrapper */
  padding: 0.5rem 1rem;
}

/* Kontener menu */
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo z lewej, menu z prawej */
  max-width: 1024px;
  width: 100%;
}

/* Logo jako tło */
.logo-link {
  display: block;          /* unika problemów z inline-block i whitespace */
  width: 100px;            /* szerokość logo */
  height: 40px;            /* wysokość logo */
  line-height: 0;          /* usuwa dodatkową przestrzeń pod elementem */

  background-image: var(--site-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Na telefony: logo nad menu */
@media (max-width: 700px) {
  .nav-wrapper {
    flex-direction: column; /* układa dzieci w kolumnie */
    align-items: center;    /* centrowanie logo i menu */
    gap: 0.5rem;            /* mała przerwa między logo a menu */
  }

  /* Menu główne pod logo, zachowując flex dla linków */
  .main-menu {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;        /* jeśli dużo linków, łamią się w kolejne wiersze */
  }

  /* Logo nadal w centrum */
  .logo-link {
    margin-bottom: 0.5rem;
  }
}



/* Główne menu */
.main-menu {
  display: flex;
  gap: 1.5rem;
}
.main-menu a {
  text-decoration: none;
  color: var(--menu-link-color);
  font-weight: 500;
  transition: color 0.2s;
}
.main-menu a:hover {
  color: var(--menu-link-hover-color);
}


@media (max-width: 700px) {
  .main-menu {
    gap: 1.0rem; /* zamiast 1.5rem */
  }
}


/* Moduł powitania na głównej stronie */

.home-text-wrapper {
  color: var(--home-text-color);
  max-width: 700px;       /* ta sama szerokość co plakietki */
  margin: 2rem auto;      /* wyśrodkowanie i odstęp od góry/dół */
  padding: 0 20px;
  border-radius: 8px;     /* lekko zaokrąglone rogi jak plakietki */
  line-height: 1.6;       /* lepsza czytelność tekstu */
}

.home-text-wrapper h1,
.home-text-wrapper h2,
.home-text-wrapper h3,
.home-text-wrapper h4 {
  color: var(--home-text-header-color);
}

.home-text-wrapper img {
  width: 30px;          /* szerokość ikonki */
  height: auto;         /* zachowanie proporcji */
  vertical-align: middle; /* wyrównanie względem tekstu */
  margin: 0 0.5rem;     /* odstęp z lewej i prawej */
  display: inline-block; /* aby była w jednej linii */
  transition: transform 0.2s ease; /* efekt hover */
  filter: var(--invert-social-icons);
}

.home-text-wrapper img:hover {
  transform: scale(1.1); /* lekkie powiększenie przy najechaniu */

}






.index-posts-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* centra plakietki poziomo */
  gap: 12px;           /* odstęp między plakietkami */
  padding: 0 20px;
}

.index-post-badge {
  display: flex;
  align-items: stretch;
  max-width: 700px;
  min-height: 170px;
  border-radius: 6px;
  overflow: hidden; /* trzyma całe badge w ramce */
  margin: 12px 0;
  text-decoration: none;
  color: inherit;
  background: var(--post-badge-bg-color);
  box-shadow: 0 2px 16px rgba(0,0,0,0.02);
  /* border: 1px solid var(--post-badge-border-color); */
}

.index-post-image-wrapper {
  width: 200px;
  flex-shrink: 0;
  overflow: hidden; /* <-- kluczowe: przycina powiększający się obraz */
  border-radius: 6px 0 0 6px; /* jeśli chcesz zaokrąglone rogi tylko po lewej */
}

.index-post-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: var(--post-image-opacity);
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.index-post-badge:hover .index-post-image {
  filter: grayscale(0%);
  transform: scale(1.05);
  opacity: 1;
}

.index-post-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  justify-content: center;
  flex: 1;
}

.index-post-title {
  font-size: 1.2em;
  /* font-weight: bold; */
  margin: 0 0 4px 0;
  color: var(--post-badge-title-color);
  transition: color 0.3s ease;
  
}

.index-post-summary {
  flex-grow: 1;
  font-size: 0.9em;
  color: var(--post-badge-summary-color);
}

.index-post-meta {
  font-size: 0.8em;
  color: var(--post-badge-meta-color);
  margin-top: 6px;
}

/* zmiana koloru tytułu przy najechaniu myszką na cały badge */
.index-post-badge:hover .index-post-title {
  color: var(--post-badge-title-hover-color);
  transition: color 0.3s ease;
}


.index-post-reading,
.index-more-card .index-post-reading {

  transition: opacity 0.5s ease;
  opacity: 0;
}

.index-post-badge:hover .index-post-reading,
.index-more-card:hover .index-post-reading{
opacity: 1;
}



/* --- WERSJA MOBILNA (iPhone i podobne) --- */
@media (max-width: 600px) {
  .index-post-badge {
    flex-direction: column;      /* obrazek na górze, treść pod spodem */
    min-height: auto;            /* wysokość dopasowana */
  }

  .index-post-image-wrapper {
    width: 100%;                 /* pełna szerokość */
    height: 150px;               /* wysokość obrazka */
    border-radius: 6px 6px 0 0;  /* zaokrąglenie tylko na górze */
  }

  .index-post-image {
    height: 100%;
  }

  .index-post-content {
    padding: 1rem;               /* trochę mniejszy padding na telefonie */
  }
}




/* Styl dla strony 404 */
.index-posts-wrapper.page-404 {
  display: flex;
  flex-direction: column;
  justify-content: center; /* wycentrowanie pionowe */
  align-items: center;     /* wycentrowanie poziome */
  min-height: 70vh;        /* zajmuje większość wysokości okna */
  text-align: center;
}

.index-posts-wrapper.page-404 a {
  color: var(--single-link-color);
  text-decoration-color: var(--single-link-underline-color);    /* kolor linii */
  text-decoration-thickness: 2px;    /* opcjonalnie grubość */
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.index-posts-wrapper.page-404 a:hover {
  color: var(--single-link-hover-color);
}

/* Strona przerwy w działaniu (serwis.html): jak 404, tekst autorki w kolumnie */
.page-serwis .serwis-tekst { max-width: 560px; }
.page-serwis .serwis-tekst p { margin: 0 0 1em; }
.page-serwis .serwis-powrot { margin-top: .5em; font-size: .9em; letter-spacing: .06em; text-transform: uppercase; color: var(--accent1-color); }





/* Wrapper i układ */
.pagination {
  display: flex;
  justify-content: center; /* centrowanie paginacji */
  list-style: none;
  padding: 0;
  margin: 50px 0;
  gap: 6px; /* odstęp między przyciskami */
  font-family: sans-serif;
}

/* Poszczególne elementy */
.pagination .page-item {
  display: inline-block;
}

/* Linki w przyciskach */
.pagination .page-link {
  display: block;
  padding: 6px 12px;
  color: var(--pagination-link-color);
  text-decoration: none;
  border: 1px solid var(--pagination-border-color);
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Hover dla dostępnych linków */
.pagination .page-link:hover:not([aria-disabled="true"]) {
  background-color: var(--pagination-hover-bg-color);
  /* border-color: #999; */
}

/* Aktywna strona */
.pagination .page-item.active .page-link {
  background-color: var(--pagination-active-bg-color);
  color: var(--pagination-active-color);
  /* border-color: #007acc; */
  cursor: default;
}

/* Ukrywanie niedostępnych przycisków */
.pagination .page-item.disabled,
.pagination [aria-disabled="true"] {
  display: none;
}


html, body {
  height: 100%;          /* potrzebne do pełnej wysokości */
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;     /* body zajmuje pełne okno */
}

main {
  flex: 1;               /* wypełnia przestrzeń między headerem a footerem */
}



.site-footer {
  margin-top: auto;      /* footer ląduje na dole */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.9rem;
  background-color: var(--footer-bg-color); /* białe tło */
  color: var(--footer-color);            /* ciemny tekst */
  flex-wrap: wrap;           /* zawijanie przy małych ekranach */
}

/* Wszystkie linki w stopce */
.site-footer a {
  color: var(--footer-link-color);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;               /* wysokość loga */
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  line-height: 1;            /* wyrównanie pionowe tekstu */
  vertical-align: middle;    /* dodatkowe wyśrodkowanie */
}

.site-footer a:hover {
  color:  var(--footer-link-hover-color);
}
/* Logo Obsidian */
.site-footer .footer-logo {
  width: 90px; 
  background-image: url('images/obsidian-logo-text-purple.svg');
}

/* Logo Hugo */
.site-footer .footer-powered {
  width: 50px;
  background-image: url('images/hugo-logo-wide.svg');
}








/* ====== Blok kolejnych postów jeden pod drugim ====== */
.index-more-section {
  margin-top: 3rem;
margin: 0 auto;
}

.index-more-group {
  max-width: 700px;
  width: 100%;

}

.index-more-card {
  
  display: block;
  background: transparent;
  padding: 0.5rem 1.0rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
  border-radius: 6px;

}



.index-more-card:hover {
  background: var(--more-link-bg-hover-color);
}

.index-more-date {
  font-size: 0.8rem;
  color: var(--more-date-color);
  display: block;
  margin-bottom: 0.25rem;
}

.index-more-title {
  color: var(--more-title-color);
  font-size: 1.1rem;
  margin: 0;
  text-align: left;
}

/* ====== Przycisk "Zobacz więcej wpisów" ====== */
.more-button-wrap {
  text-align: center; /* przycisk po środku */
  padding-bottom: 2em;
  padding-top: 1em;
}

.btn-see-more {
  display: inline-block;
  background: var(--more-button-bg-color);
  color: var(--more-button-color);
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-see-more:hover {
  background: var(--more-button-bg-hover-color);
}










/* ====== Layout ogólny ====== */

/* ====== Header (data + tytuł + meta + treść) ====== */
.single-content {

  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1rem;
  padding-top: 2rem;
  overflow-wrap: break-word;   /* długi adres albo słowo łamie się, gdy nie mieści się w wierszu (telefon), zamiast rozpychać stronę w bok */
}

.single-date {
  display: block;
  font-size: 1.0rem;
  color: var(--single-date-color);
  /* margin-bottom: 0.5rem; */
}

.single-title {
  color: var(--single-title-color);
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0.5rem 0 0.75rem 0;
}

.single-meta {
  font-size: 0.95rem;
  color: var(--single-meta-color);
  /* margin-bottom: 1.5rem; */
}

.single-title .single-title-link{
  color: var(--single-title-link-color); 
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0.5rem 0 0.75rem 0;
}

.single-title a:hover {
  color: var(--single-link-hover-color);

}


.single-content p {
  color: var(--single-color);
  font-size: 1.1rem;
  line-height: 1.6rem;
}




/* ====== Cover ====== */
.single-cover {
  text-align: center;
}

.single-cover img {
  width: 100%;         /* dopasowuje do rodzica */
  max-width: 900px;   /* ale nigdy większy niż 1024px */
  height: auto;
  border-radius: 3px;
  display: block;      /* żeby margin auto działał */
  margin: 0 auto;
}




/* ====== Tag footer ====== */
footer.single-content {
  /* border-top: 1px solid hsla(0, 0%, 52%, 0.2); */
  padding-top: 1rem;
  margin-bottom: 2rem;

}

footer.single-content hr {
  border: 0;
  border-top: 1px solid hsla(0, 0%, 52%, 0.2);
  padding: 0;
}


footer.single-content .single-tag {
  display: inline-block;
  background: var(--single-tag-bg-color);
  color: var(--single-tag-color);
  font-size: .8rem;
  padding: 0.35rem 0.7rem;
  
  margin: 0.25rem 0.4rem 0 0;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease;
  
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  
}

footer.single-content .single-tag:hover {
  background: var(--single-tag-bg-hover-color);
  color: var(--single-tag-color);
}






/* Markdown – nagłówki */

.single-content a{
  color: var(--single-link-color);
  transition: color 0.3s ease;
  text-decoration-color: var(--single-link-underline-color);    /* kolor linii */
  text-decoration-thickness: 2px;    /* opcjonalnie grubość */
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.single-content a:hover{
  color: var(--single-link-hover-color);
  transition: color 0.3s ease;
}

.single-content h2 {
  font-size: 1.5em;
  margin: 2rem 0 1rem;
  color: var(--single-header-color);
}
.single-content h3 {
  font-size: 1.25em;
  margin: 1.5rem 0 0.75rem;
  color: var(--single-header-color);
}

.single-content h4 {
  font-size: 1.1em;
  margin: 1.5rem 0 0.75rem;
  color: var(--single-header-color);
}




/* Akapity i listy */
.single-content p {
  margin: 1rem 0;
}
.single-content ul,
.single-content ol {
  margin: 1rem 0 1rem 2rem;
  padding: 0;
}

/* Cytaty */
.single-content blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--single-blockquote-border-color);
  font-style: italic;
}

.single-content blockquote p{
  color: var(--single-blockquote-color);
}

/* Kod */

.single-content pre{
  background: var(--single-code-bg-color) !important;
  color: var(--single-code-color) !important;
  padding: .7rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.2rem;
  white-space: pre-wrap;      
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.single-content code:not(pre code) {
  font-family: monospace;
  background: var(--single-code-bg-color) !important;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: .8em;
  font-weight: 400;
  font-style: normal;
}

.single-content pre *{
  color: var(--single-code-color) !important;
}



/* Obrazki i wideo wewnątrz treści */
.single-content img, .single-content video {
  display: block;
  max-width: 100%;
  margin: 1.5rem auto;
  height: auto;
  border-radius: 3px;
}
.single-content video { width: 100%; background: #000; }





.single-content h6 {
  font-size: 0.85em;
  color: var(--single-h6-color);
  text-align: center;
  margin-top: 0.2rem;
  line-height: 1.2;
}






.single-content hr:not(footer hr) {
  border: 0;
  border-top: 2px dotted var(--single-hr-color);
  margin: 3rem 0; /* 2rem nad i pod */
}


/* --- Mobile --- */
@media (max-width: 600px) {
  .single-wrapper {
    padding: 0 0.75rem;
  }
  .single-title {
    font-size: 1.6em;
  }
  .single-cover {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-radius: 0; /* na mobile może dotykać krawędzi */
  }
}


.single-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  gap: 15px;
}

.single-nav a {
  /* padding: 0.7rem 1rem; */
  text-decoration: none;
  background-color: transparent;
  color: var(--single-nav-link-color);
  border-radius: 4px;
  transition: color 0.3s ease;
  line-height: 1.3;
}

.single-nav a:hover {
  color: var(--single-nav-link-hover-color);
}

.single-nav a.single-prev {
  text-align: left;
}

.single-nav a.single-next {
  text-align: right;
}







.single-content.o-mnie {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2rem 1rem 1rem 1rem;
}

.o-mnie-flex {
  display: flex;
  align-items: flex-start;    /* obrazek wyrównany do góry względem tekstu */
  gap: 40px;                  /* odstęp między obrazkiem a tekstem */
  justify-content: flex-start; /* wszystko do lewej */
}

.o-mnie-flex img {
  width: 320px;
  border-radius: 10px;
  max-width: 100%;
  display: block;             /* zapobiega centrowaniu inline */
}

.o-mnie-flex div {
  flex: 1;
  text-align: left;           /* tekst do lewej */
}

/* Responsywność: mobile */
@media (max-width: 700px) {
  .o-mnie-flex {
    flex-direction: column;    /* obrazek nad tekstem */
    align-items: flex-start;   /* wszystko wyrównane do lewej */
    gap: 20px;                 /* mniejszy odstęp */
  }

  .o-mnie-flex img {
    width: 80%;
    max-width: 400px;
    margin: 0;                 /* usuwa marginesy auto */
  }

  .o-mnie-flex div {
    width: 100%;
    text-align: left;          /* tekst do lewej */
  }
}






/* pole-pułapka na boty w formularzu kontaktowym: niewidoczne dla ludzi i czytników ekranu */
.pole-pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Wrapper formularza */
.contact-form-wrapper {
  padding: 2rem 1rem;

  background: transparent;
  display: flex;
  justify-content: center;
}

/* Wewnętrzny kontener dla max-width */
.contact-form-inner {
  width: 100%;
  max-width: 700px; /* ograniczenie szerokości formularza */
  box-sizing: border-box;

}

/* Formularz */
.contact-form-inner form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

/* Nagłówek formularza */
.contact-form-inner h2 {
  margin-bottom: 1rem;
  color: var(--single-header-color);
  text-align: center;
}

/* Labelki i pola */
.contact-form-inner label {
  display: block;
  font-weight: 500;
  color: var(--single-header-color);
}

.contact-form-inner input,
.contact-form-inner textarea {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 0;
  background-color: var(--form-textarea-bg-color);
  color: var(--site-color);
}

.contact-form-inner input:focus,
.contact-form-inner textarea:focus {
  outline: none;
  /* box-shadow: 0 0 0 2px rgba(100, 100, 255, 0.2); */
}

/* Przycisk */
.contact-form-inner button {
  align-self: flex-start; /* przycisk przy lewej krawędzi formularza */
  background: var(--more-button-bg-color);
  color: var(--more-button-color);
  padding: 0.6rem 2.2rem;
  border: none;
  border-radius: 26px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.contact-form-inner button:hover {
  background: var(--more-button-bg-hover-color);
}

/* Responsywność na małe ekrany */
@media (max-width: 500px) {
  .contact-form-wrapper {
    /* padding: 2rem 2rem; */
  }

}

*, *::before, *::after {
  box-sizing: border-box;
}

.contact-form-inner,
.contact-form-inner input,
.contact-form-inner textarea,
.contact-form-inner button {
  box-sizing: border-box;
}








/* Cała strona archiwum */
.archive-page {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
  color: var(--site-color);
  background-color: var(--site-bg-color);
}

/* Nagłówek */
.archive-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Chmurka tagów */
.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.archive-tag {
  background: var(--single-tag-bg-color);
  color: var(--single-tag-color);
  padding: 0.2rem 0.7rem;
  border-radius: 1rem;
  text-decoration: none;
  font-size: 0.75rem;
  transition: background 0.2s;
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.archive-tag:hover {
  background: var(--single-tag-bg-hover-color);
}
.archive-tag-count {
  font-weight: normal;
  opacity: 0.5;
  margin-left: 0.3rem;
}

/* Lista wpisów */
.archive-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Każdy wpis jako grid: data po lewej, tytuł po prawej */
.archive-post-item {
  display: grid;
  grid-template-columns: 100px 1fr; /* lewa kolumna: data, prawa kolumna: tytuł */
  gap: 0.5rem;
  align-items: start;
  margin: 0.5rem 0;
}

.archive-post-date {
  font-size: 0.85rem;
  opacity: 0.6;
}

.archive-post-link {
  text-decoration: none;
  color: var(--site-color);
  font-weight: 500;
  transition: color 0.3s ease;
  word-break: break-word; /* długie tytuły zawijają się w swojej kolumnie */
}
.archive-post-link:hover {
  color: var(--accent1-color);
}

/* Separator między wpisami tylko na telefonach */
@media (max-width: 700px) {
  .archive-post-item {
    border-bottom: 1px solid hsla(0,0%,52%,0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    grid-template-columns: 80px 1fr; /* mniejsza kolumna dla daty na telefonach */
  }

  .archive-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Oddzielna kreska dla całej strony archiwum */
.archive-page hr {
  border: 0;
  border-top: 1px solid hsla(0,0%,52%,0.2);
  padding: 1rem;
}







.share-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

#share-toggle {
  background-color: var(--single-tag-bg-color);
  color: var(--single-tag-color);
  font-size: 0.9rem;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

#share-toggle:hover {
  background-color: var(--single-tag-bg-hover-color);
}



#share-icons {
  display: flex;
  gap: 0.5rem;
  opacity: 1;
  transition: opacity 0.3s ease !important;
}

#share-icons.hidden {
  opacity: 0;
}

.share-icon {
  width: 32px;
  height: 32px;
  /* border-radius: 50%; */
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease !important;
  filter: var(--invert-social-icons);
}

.share-icon:hover {
  transform: scale(1.1);
}

/* Tutaj zdefiniujesz swoje obrazki */
.share-icon.facebook {
  background-image: var(--share-facebook); /* <-- zamarkowana zmienna */
}
.share-icon.instagram {
  background-image: var(--share-instagram);
}
.share-icon.linkedin {
  background-image: var(--share-linkedin);
}
.share-icon.mastodon {
  background-image: var(--share-mastodon);
}
.share-icon.substack {
  background-image: var(--share-substack);
}
.share-icon.permalink {
background: none;
  background-image: var(--share-permalink);
  border: 0;
  cursor: pointer;
  
}










  /* Minimalny styl dla banneru */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cookies-bg-color);
  color: var(--cookies-color);
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}
.cookie-banner button {
  background: var(--cookies-button-bg-color);
  color: var(--cookies-button-color);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 25px;
  font-size: 1rem;
}
.cookie-banner button:hover {
  background: var(--cookies-button-bg-hover-color);

}
/* Tabele we wpisach (Markdown); szeroka tabela przewija się w bok zamiast rozpychać stronę */
.single-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: .95em;
  line-height: 1.5;
}
.single-content th,
.single-content td {
  padding: .45em .8em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  vertical-align: top;
}
.single-content th {
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  white-space: nowrap;
}
.single-content tbody tr:last-child td { border-bottom: 0; }

/* ==wyróżnienie== (panel: przycisk Wyróżnienie, ⌘J): półprzezroczysty marker w kolorze akcentu, czytelny w dzień i w nocy */
.post-content mark, mark { background: color-mix(in srgb, var(--accent1-color) 22%, transparent); color: inherit; padding: 0 .12em; border-radius: 2px; }

/* zadania „- [ ]” i „- [x]” (generator: <li class="zadanie"><span class="pole" aria-checked>): bez kropki, własne pole tylko do odczytu.
   Pole w linii tekstu, wysunięte w miejsce znacznika listy: szerokość + odstęp = 1.65em, więc tekst zadania zaczyna się równo
   z tekstem punktów i numerów. Kwadrat z ramką w kolorze akcentu; odhaczone: wypełnione akcentem, biały ptaszek */
li.zadanie { list-style: none; }
li.zadanie .pole {
  display: inline-block; box-sizing: border-box; width: .95em; height: .95em; margin: 0 .7em 0 -1.65em; vertical-align: -.16em;
  border: 2px solid var(--accent1-color); border-radius: 3px; background: transparent no-repeat center / 85%;
}
li.zadanie .pole[aria-checked=true] {
  background-color: var(--accent1-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* odstęp między pozycjami list większy niż interlinia: wielowierszowe pozycje nie zlewają się ze sobą */
.single-content li + li, .single-content li > ul, .single-content li > ol { margin-top: .5em; }


/* ===== Opcje wyglądu z panelu (okno „Wygląd bloga”), style zawsze w arkuszu, włączane klasami ===== */
/* układ kart: kafelki w 2 albo 3 kolumnach, albo pierwsza duża i reszta kafelkami */
.index-posts-wrapper:is(.uklad-kafelki2, .uklad-kafelki3, .uklad-pierwsza) { display: grid; gap: 20px; width: min(1024px, 100%); margin: 0 auto; box-sizing: border-box; align-items: stretch; }
.index-posts-wrapper.uklad-kafelki2, .index-posts-wrapper.uklad-pierwsza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.index-posts-wrapper.uklad-kafelki3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.uklad-kafelki2, .uklad-kafelki3, .uklad-pierwsza) > :not(.index-post-badge) { grid-column: 1 / -1; }
:is(.uklad-kafelki2, .uklad-kafelki3, .uklad-pierwsza) .index-post-badge { flex-direction: column; max-width: none; min-height: 0; margin: 0; }
:is(.uklad-kafelki2, .uklad-kafelki3, .uklad-pierwsza) .index-post-image-wrapper { width: 100%; height: 170px; border-radius: var(--karta-r, 6px) var(--karta-r, 6px) 0 0; }
.uklad-pierwsza .index-post-badge:first-of-type { grid-column: 1 / -1; flex-direction: row; min-height: 260px; }
.uklad-pierwsza .index-post-badge:first-of-type .index-post-image-wrapper { width: 50%; height: auto; border-radius: var(--karta-r, 6px) 0 0 var(--karta-r, 6px); }
.uklad-pierwsza .index-post-badge:first-of-type .index-post-title { font-size: 1.5em; }
@media (max-width: 760px) {
  .index-posts-wrapper:is(.uklad-kafelki2, .uklad-kafelki3, .uklad-pierwsza) { grid-template-columns: minmax(0, 1fr); }
  .uklad-pierwsza .index-post-badge:first-of-type { flex-direction: column; min-height: 0; }
  .uklad-pierwsza .index-post-badge:first-of-type .index-post-image-wrapper { width: 100%; height: 170px; border-radius: var(--karta-r, 6px) var(--karta-r, 6px) 0 0; }
}
/* tagi na karcie (nie są linkami: cała karta jest linkiem) */
.index-post-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.index-post-tag { padding: 0 7px; border-radius: 999px; background: var(--post-badge-tag-bg-color); color: var(--post-badge-meta-color); font-size: .92em; }
/* wpis: tagi pod tytułem, okładka w kolumnie tekstu, spis treści, „Czytaj też” */
.single-tags-top { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: 6px; }
.single-cover.w-kolumnie img { max-width: min(var(--kolumna, 700px), 100%); }
.single-toc { margin: 1.5rem 0 2rem; padding: .9rem 1.2rem; border-left: 3px solid var(--accent1-color); background: color-mix(in srgb, var(--accent1-color) 6%, transparent); border-radius: 0 6px 6px 0; }
.single-toc-tytul { margin: 0 0 .4rem !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent1-color) !important; }
.single-toc ul { margin: 0; padding: 0; list-style: none; }
.single-toc li { margin: .2rem 0; } .single-toc li.toc-h3 { padding-left: 1.1rem; font-size: .95em; }
.single-toc a { color: var(--single-link-color); text-decoration: none; } .single-toc a:hover { color: var(--single-link-hover-color); }
.single-czytaj { margin-top: 2rem; }
.single-czytaj-tytul { margin: 0 0 .5rem !important; font-size: .8rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent1-color) !important; }
.single-czytaj ul { margin: 0; padding: 0; list-style: none; }
.single-czytaj li { padding: .45rem 0; border-bottom: 1px solid var(--single-hr-color); }
.single-czytaj a { color: var(--single-link-color); text-decoration: none; font-family: "Noto Serif", serif; } .single-czytaj a:hover { color: var(--single-link-hover-color); }
.single-czytaj-data { color: var(--single-date-color); font-size: .8em; margin-left: .4rem; }
/* udostępnianie: dodatkowe serwisy */
.share-icon.bluesky { background-image: url("/images/social/bluesky.svg"); }
.share-icon.threads { background-image: url("/images/social/threads.svg"); }
.share-icon.x { background-image: url("/images/social/twitter.svg"); }
/* archiwum: grupy po latach i miesiącach */
.archive-posts .archive-group { list-style: none; margin: 1.4rem 0 .3rem; font-weight: 700; color: var(--accent1-color); }
.archive-posts .archive-year { font-size: 1.15rem; font-family: "Noto Serif", serif; }
.archive-posts .archive-month { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .8rem; color: var(--single-date-color); }

/* przełącznik dzień/noc w menu (opcja), przycisk „do góry” (opcja), ikony serwisów w stopce */
.motyw-przelacz { width: 22px; height: 22px; padding: 0; border: 0; background: var(--menu-link-color); cursor: pointer; align-self: center;
  -webkit-mask: url("/images/motyw.svg") center / contain no-repeat; mask: url("/images/motyw.svg") center / contain no-repeat; transition: background .2s; }
.motyw-przelacz:hover { background: var(--menu-link-hover-color); }
.do-gory { position: fixed; right: 20px; bottom: 24px; z-index: 50; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent1-color); opacity: .85; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.do-gory::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("/images/do-gory.svg") center / 18px no-repeat; mask: url("/images/do-gory.svg") center / 18px no-repeat; }
.do-gory:hover { opacity: 1; }
.do-gory[hidden] { display: none; }
.site-footer .footer-social { width: 1.4em; height: 1.4em; background: var(--footer-link-color); -webkit-mask: var(--ikona) center / contain no-repeat; mask: var(--ikona) center / contain no-repeat; }
.site-footer .footer-social:hover { background: var(--footer-link-hover-color); }
.footer-instagram { --ikona: url("/images/social/instagram.svg"); } .footer-facebook { --ikona: url("/images/social/facebook.svg"); }
.footer-linkedin { --ikona: url("/images/social/linkedin.svg"); } .footer-mastodon { --ikona: url("/images/social/mastodon.svg"); }
.footer-bluesky { --ikona: url("/images/social/bluesky.svg"); } .footer-threads { --ikona: url("/images/social/threads.svg"); }
.footer-substack { --ikona: url("/images/social/substack.svg"); } .footer-github { --ikona: url("/images/social/github.svg"); }
body:has(#cookie-banner[style*="flex"]) .do-gory { bottom: 130px; }   /* nad paskiem ciasteczek, póki widoczny */