/* --- 1. STRUKTURA BAZOWA --- */
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    main {
      flex: 1;
    }
    .sticky-sidebar {
      position: sticky;
      top: 2rem;
    }

    /* --- 2. GLOBALNY MOTYW CIEMNY --- */
    body.theme-dark {
      background-color: #111111;
      color: #f7f7f7;
    }
    body.theme-dark .p-strip, 
    body.theme-dark .p-strip--light {
      background-color: #1a1a1a;
      color: #f7f7f7;
    }
    body.theme-dark .p-heading--1, body.theme-dark .p-heading--2, 
    body.theme-dark .p-heading--3, body.theme-dark .p-heading--4, 
    body.theme-dark .p-heading--5, body.theme-dark .p-heading--6 {
      color: #ffffff;
    }
    body.theme-dark a:not(.p-button--positive):not(.p-button--base):not(.p-navigation__link) {
      color: #6eb3fb;
    }
    body.theme-dark p, body.theme-dark li {
      color: #e5e5e5;
    }
    body.theme-dark .p-rule {
      border-color: #444;
    }
    
    /* Nawigacja Boczna (Sidebar) w trybie ciemnym */
    body.theme-dark .p-side-navigation {
      background-color: transparent;
    }
    body.theme-dark .p-side-navigation__link {
      color: #cccccc;
    }
    body.theme-dark .p-side-navigation__link:hover,
    body.theme-dark .p-side-navigation__link:focus {
      background-color: #333333;
      color: #ffffff;
    }
    body.theme-dark .p-side-navigation__link[aria-current="page"] {
      background-color: #2b2b2b;
      color: #ffffff;
      border-left-color: #0e8420;
    }
    body.theme-dark .p-side-navigation__heading {
      color: #888888;
    }

    /* Rozwijane Menu (Dropdown) w trybie ciemnym */
    body.theme-dark .p-navigation__dropdown {
      background-color: #2b2b2b;
      border: 1px solid #444;
    }
    body.theme-dark .p-navigation__dropdown-item {
      color: #e5e5e5;
    }
    body.theme-dark .p-navigation__dropdown-item:hover,
    body.theme-dark .p-navigation__dropdown-item:focus {
      background-color: #333333;
      color: #ffffff;
    }

    /* Elementy kodu w trybie ciemnym */
    body.theme-dark .p-code-snippet {
      background-color: #000000;
      border-color: #444;
    }
    body.theme-dark .p-code-snippet__block {
      color: #f7f7f7;
    }
    body.theme-dark code:not(.p-code-snippet__block) {
      background-color: #333;
      color: #fff;
    }
	
	/* --- Karty i obiekty medialne w trybie ciemnym --- */
    body.theme-dark .p-card,
    body.theme-dark .p-card--highlighted,
    body.theme-dark .p-card--article {
      background-color: #2b2b2b;
      color: #f7f7f7;
      border-color: #444;
    }
    body.theme-dark .p-card__content {
      color: #e5e5e5;
    }
    body.theme-dark .p-media-object {
      border-bottom-color: #444;
    }
    body.theme-dark .u-text--muted {
      color: #aaaaaa !important;
    }
	
	/* Usuwa limit 40em ze wszystkich akapitów na stronie */
p {
  max-width: none !important;
}

/* --- Przycisk lajka w trybie ciemnym --- */
    body.theme-dark .like-btn {
      color: #f7f7f7; /* Jasny tekst licznika */
    }
    
    body.theme-dark .like-btn:hover {
      color: #ffffff; /* Pełna biel po najechaniu myszką */
    }
	
	/* --- Naprawa ucinającego się tooltipa w kartach --- */
    
    /* 1. Zdejmujemy blokadę obcinania wystających elementów z karty */
    .p-card, 
    .p-card__inner {
      overflow: visible !important;
    }
    
    /* 2. Wyciągamy sam dymek na samą górę i zapobiegamy zwijaniu tekstu */
    .p-tooltip__message {
      z-index: 100 !important;
      white-space: nowrap; /* Sprawia, że tekst w dymku jest w jednej, równej linii */
    }
/* --- Tagi (Chips) w trybie ciemnym --- */
    body.theme-dark .p-chip {
      background-color: #333333;
      color: #e5e5e5;
      border: 1px solid #444444; /* Delikatna ramka oddzielająca od tła karty */
    }
    
    body.theme-dark .p-chip__value {
      color: #e5e5e5;
    }
    
    body.theme-dark .p-chip:hover,
    body.theme-dark .p-chip:focus {
      background-color: #444444;
      border-color: #555555;
      color: #ffffff;
    }
    
    body.theme-dark .p-chip:hover .p-chip__value {
      color: #ffffff;
    }	
	
	/* --- Nadpisanie dolnego marginesu dla obiektów medialnych --- */
    .p-media-object--large, 
    .p-media-object {
      margin-bottom: 0.5rem !important;
    }
	
	/* --- Przycisk "Czytaj dalej" (Base button) w trybie ciemnym --- */
    body.theme-dark .p-button--base {
      color: #e5e5e5;
      background-color: transparent;
      border: 1px solid #555555;
    }

    body.theme-dark .p-button--base:hover,
    body.theme-dark .p-button--base:focus {
      color: #ffffff;
      background-color: #333333;
      border-color: #888888;
    }
	
	/* --- Blokada fioletowego koloru dla odwiedzonych linków --- */
    a:not([class*="p-button"]):not([class*="navigation"]):visited {
      color: #0066cc; /* Standardowy niebieski Vanilla Framework */
    }
    
    body.theme-dark a:not([class*="p-button"]):not([class*="navigation"]):visited {
      color: #6eb3fb; /* Jasnoniebieski dla trybu ciemnego */
    }
	
/* --- Kompleksowa obsługa sekcji z klasą .is-paper --- */
    
    /* 1. MOTYW JASNY: Wymuszenie równego koloru papieru i usunięcie gradientów z Hero */
    .p-section--hero.is-paper,
    .p-strip.is-paper {
      background: #f7f7f7 !important;
    }

    /* 2. MOTYW CIEMNY: Wymuszenie wskazanego tła #111111 dla obu sekcji */
    body.theme-dark .p-section--hero.is-paper,
    body.theme-dark .p-strip.is-paper {
      background: #111111 !important;
      color: #f7f7f7 !important;
    }

/* 1. STYL DLA MOTYWU JASNEGO (DOMYŚLNY) */
.p-pagination .p-pagination__link,
.p-pagination .p-pagination__link--previous,
.p-pagination .p-pagination__link--next {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dcdcdc !important;
}

.p-pagination .p-pagination__link:hover,
.p-pagination .p-pagination__link--previous:hover,
.p-pagination .p-pagination__link--next:hover {
    background-color: #f7f7f7 !important;
    color: #111111 !important;
}

.p-pagination .p-pagination__link.is-active {
    background-color: #e5e5e5 !important;
    border-color: #a5a5a5 !important;
    color: #111111 !important;
}

/* 2. STYL DLA MOTYWU CIEMNEGO (GDY BODY POSIADA KLASĘ .theme-dark) */
body.theme-dark .p-pagination .p-pagination__link,
body.theme-dark .p-pagination .p-pagination__link--previous,
body.theme-dark .p-pagination .p-pagination__link--next {
    background-color: #2c2c2c !important;
    color: #b3b3b3 !important;
    border: 1px solid #444 !important;
}

body.theme-dark .p-pagination .p-pagination__link:hover,
body.theme-dark .p-pagination .p-pagination__link--previous:hover,
body.theme-dark .p-pagination .p-pagination__link--next:hover {
    background-color: #444 !important;
    color: #ffffff !important;
}

body.theme-dark .p-pagination .p-pagination__link.is-active {
    background-color: #555 !important;
    color: #ffffff !important;
    border-color: #666 !important;
}


/* Ustawienia dla wersji mobilnej */
@media screen and (max-width: 1030px) {
    .layout-container {
        display: flex;
        flex-direction: column;
    }

    /* Wymuszamy, aby główna treść była pierwsza */
    .main-content {
        order: 1;
    }

    /* Wymuszamy, aby sidebar był drugi */
    .sidebar {
        order: 2;
    }
}

/* Wymuszenie jednakowego rozmiaru i kadrowania dla wszystkich obrazków w artykułach */
.article-image .p-image-container__image {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* To jest najważniejsza linijka - kadruje obraz */
    object-position: center; /* Centruje obrazek, aby zawsze wycinał środek */
    display: block;
}

/* Opcjonalnie: stała wysokość kontenera, jeśli 16-9 nie działa stabilnie */
.article-image {
    height: 200px; /* Ustaw taką wysokość, jaką chcesz widzieć na stronie */
    overflow: hidden;
}

/* Wymuszenie stałej wysokości dla kontenera 16:9 */
.p-image-container--16-9 {
    height: 200px; /* Ustaw taką wysokość, jaką chcesz (np. 180px, 200px, 250px) */
    overflow: hidden; /* Ukrywa fragmenty obrazka, które wykraczają poza ramkę */
}

/* Wymuszenie, aby obrazek wypełnił kontener bez zniekształceń */
.p-image-container--16-9 .p-image-container__image {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Kluczowa funkcja: inteligentne kadrowanie */
    object-position: center; /* Wyśrodkowanie obrazka */
}

/* --- Stylizacja komponentu Tabs w trybie ciemnym --- */

/* Kolor tekstu dla nieaktywnych zakładek */
body.theme-dark .p-tabs__link {
    color: #e5e5e5;
    border-bottom: 2px solid transparent;
}

/* Stan po najechaniu myszką */
body.theme-dark .p-tabs__link:hover {
    color: #ffffff;
}

/* Aktywna zakładka (podkreślenie i kolor) */
body.theme-dark .p-tabs__link[aria-selected="true"] {
    color: #ffffff;
    border-bottom: 2px solid #ffffff; /* Możesz zmienić na swój kolor akcentowy */
}

/* Linia oddzielająca zakładki od treści */
body.theme-dark .p-tabs__list {
    border-bottom: 1px solid #444;
}

/* Ewentualny kolor tekstu wewnątrz paneli, jeśli jest potrzeba */
body.theme-dark .p-tabs__panel {
    color: #e5e5e5;
}

/* --- Tryb Ciemny: Menu Kontekstowe --- */
body.theme-dark .p-contextual-menu__dropdown {
    background-color: #222222;
    border: 1px solid #444444;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Kolor tekstu i tła przycisków */
body.theme-dark .p-contextual-menu__link {
    color: #e5e5e5;
}

body.theme-dark .p-contextual-menu__link:hover,
body.theme-dark .p-contextual-menu__link:focus {
    background-color: #333333;
    color: #ffffff;
}

/* Linia oddzielająca sekcje (Kopiuj/Drukuj od Polubień) */
body.theme-dark .p-contextual-menu__group {
    border-bottom-color: #444444;
}

/* Nadpisanie kolorów strzałki (górnego trójkąta chmurki) */
body.theme-dark .p-contextual-menu__dropdown::before {
    border-bottom-color: #444444; /* Zewnętrzna krawędź strzałki */
}
body.theme-dark .p-contextual-menu__dropdown::after {
    border-bottom-color: #222222; /* Wnętrze strzałki */
}

@media print {
    /* 1. Ukrywamy nawigację, hero, paski oraz sidebar (col-3) */
    header,
    .p-navigation,
    .p-section--hero.is-paper,
    .p-strip--dark,
    .p-strip.is-shallow.is-paper,
    .col-3 {
        display: none !important;
    }

    /* 2. Rozciągamy główną kolumnę na całą szerokość kartki */
    .col-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Podstawowa kosmetyka: wymuszamy czarny tekst na białym tle */
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    /* 4. Ukrywamy przyciski i menu kontekstowe */
    button, 
    .p-contextual-menu {
        display: none !important;
    }
}

body strong, body b {
    font-family: "Ubuntu", sans-serif !important;
    font-weight: 900 !important; /* Użyj 900, żeby sprawdzić, czy w ogóle reaguje */
    font-variation-settings: normal !important;
}

/* Odwrócenie kolorów ikon listy 'is-ticked' w trybie ciemnym */
body.theme-dark .p-list__item.is-ticked::before {
    filter: invert(100%);
}
html {
  scroll-behavior: smooth;
}