/* Instrukcja systemu Logos - logos.pl/system-logos/
   Wszystko w obrebie #il (izolacja od stylow Enfolda). */

#il {
    --il-akcent: #719430;
    --il-akcent-ciemny: #56731f;
    --il-akcent-tlo: #f2f7ea;
    --il-tekst: #2b3340;
    --il-tekst-2: #5b6573;
    --il-linia: #e3e7ec;
    --il-tlo: #ffffff;
    --il-tlo-2: #f7f8fa;
    --il-prawo: #6d4bd1;
    --il-prawo-tlo: #f4f0ff;
    --il-uwaga: #b45309;
    --il-uwaga-tlo: #fff8eb;
    --il-wskazowka: #0e7490;
    --il-wskazowka-tlo: #ecfbfe;
    --il-blad: #b42318;
    --il-blad-tlo: #fef3f2;
    --il-promien: 10px;
    --il-cien: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
    color: var(--il-tekst);
    font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    background: var(--il-tlo);
}

#il *, #il *::before, #il *::after { box-sizing: border-box; }
#il p { margin: 0 0 1em; }
#il a { color: var(--il-akcent-ciemny); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
#il a:hover { color: var(--il-akcent); }
#il h1, #il h2, #il h3, #il h4 {
    font-family: oswald, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--il-tekst);
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.25;
}
#il ul, #il ol { margin: 0 0 1em 1.3em; padding: 0; }
#il li { margin: .25em 0; }
#il strong { color: var(--il-tekst); }

/* ---------- uklad ---------- */
#il .il-uklad {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 48px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

#il .il-boczny {
    position: sticky;
    top: 110px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow: auto;
    padding-right: 6px;
    scrollbar-width: thin;
}

#il .il-tresc { max-width: 820px; min-width: 0; }

/* ---------- wyszukiwarka ---------- */
#il .il-szukaj { position: relative; margin-bottom: 18px; }
#il .il-szukaj input {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px 0 38px;
    border: 1px solid var(--il-linia);
    border-radius: 8px;
    background: var(--il-tlo-2);
    color: var(--il-tekst);
    font: inherit;
    font-size: 15px;
    box-shadow: none;
}
/* Enfold (#top input[type=search]) nadpisuje odstep - lupka nachodzila na tekst */
html #il .il-szukaj input[type="search"] { padding: 0 12px 0 38px !important; height: 42px; margin: 0; }
#il .il-szukaj input:focus { outline: 2px solid var(--il-akcent); outline-offset: 1px; background: #fff; }
#il .il-szukaj svg { position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; color: var(--il-tekst-2); }
#il .il-szukaj-wynik { font-size: 13px; color: var(--il-tekst-2); margin-top: 6px; min-height: 1em; }

/* ---------- spis tresci ---------- */
#il .il-spis-tytul { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--il-tekst-2); margin: 0 0 8px; }
#il .il-spis { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--il-linia); }
#il .il-spis li { margin: 0; }
#il .il-spis a {
    display: block;
    margin-left: -2px;
    padding: 5px 10px 5px 14px;
    border-left: 2px solid transparent;
    color: var(--il-tekst-2);
    font-size: 14.5px;
    line-height: 1.4;
    text-decoration: none;
}
#il .il-spis a:hover { color: var(--il-tekst); border-left-color: #b9c2cc; }
#il .il-spis a.il-aktywny { color: var(--il-akcent-ciemny); border-left-color: var(--il-akcent); font-weight: 700; }
#il .il-spis .il-spis-pod a { padding-left: 28px; font-size: 13.5px; }
#il .il-spis li.il-ukryty { display: none; }

#il .il-boczny-stopka { margin-top: 22px; padding: 14px; border-radius: var(--il-promien); background: var(--il-tlo-2); font-size: 13.5px; color: var(--il-tekst-2); }
#il .il-boczny-stopka strong { display: block; margin-bottom: 2px; }

/* ---------- naglowek strony ---------- */
#il .il-hero { padding: 6px 0 26px; border-bottom: 1px solid var(--il-linia); margin-bottom: 34px; }
#il .il-hero .il-etykieta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--il-akcent-tlo); color: var(--il-akcent-ciemny);
    font-size: 13px; font-weight: 700;
}
#il .il-hero h1 { font-size: 42px; margin: 12px 0 10px; }
#il .il-hero .il-lead { font-size: 18.5px; color: var(--il-tekst-2); max-width: 680px; margin: 0; }

#il .il-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
@media (min-width: 1180px) { #il .il-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { #il .il-kafel span { display: none; } #il .il-kafel { padding: 12px; } #il .il-kafel strong { font-size: 15px; } }
#il .il-kafel {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px; border: 1px solid var(--il-linia); border-radius: var(--il-promien);
    background: #fff; color: var(--il-tekst); text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
#il .il-kafel:hover { border-color: var(--il-akcent); box-shadow: var(--il-cien); transform: translateY(-1px); color: var(--il-tekst); }
#il .il-kafel svg { width: 26px; height: 26px; color: var(--il-akcent); }
#il .il-kafel strong { font-size: 16px; }
#il .il-kafel span { font-size: 13.5px; color: var(--il-tekst-2); line-height: 1.45; }

/* ---------- sekcje ---------- */
#il .il-sekcja { scroll-margin-top: 110px; margin-bottom: 56px; }
#il .il-sekcja > h2 {
    display: flex; align-items: center; gap: 12px;
    font-size: 30px; margin: 0 0 14px; padding-top: 6px;
}
#il .il-sekcja > h2 .il-nr {
    flex: none; display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--il-akcent); color: #fff; font-size: 18px;
}
#il h3 { font-size: 22px; margin: 34px 0 10px; scroll-margin-top: 110px; }
#il h4 { font-size: 17px; margin: 22px 0 8px; }
#il .il-kotwica { opacity: 0; margin-left: 6px; color: var(--il-tekst-2); text-decoration: none; font-size: .8em; }
#il h2:hover .il-kotwica, #il h3:hover .il-kotwica { opacity: 1; }
#il .il-sekcja.il-ukryty { display: none; }
#il mark.il-traf { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---------- elementy interfejsu w tekscie ---------- */
#il .il-btn, #il .il-menu, #il kbd {
    display: inline-flex; align-items: center;
    padding: 0 7px; border-radius: 6px;
    font-size: .88em; font-weight: 700; line-height: 1.7;
    white-space: nowrap; vertical-align: baseline;
}
#il .il-btn { border: 1px solid #cfd6de; background: #fff; color: var(--il-tekst); box-shadow: 0 1px 0 rgba(16, 24, 40, .05); }
#il .il-btn.il-glowny { background: #171717; border-color: #171717; color: #fff; }
#il .il-menu { background: var(--il-tlo-2); color: var(--il-tekst); border: 1px dashed #c8d0d9; font-weight: 600; }
#il kbd { border: 1px solid #cfd6de; border-bottom-width: 2px; background: #fff; font-family: inherit; }
#il .il-pole { font-weight: 700; color: var(--il-tekst); }
#il .il-sciezka { display: inline; }
#il .il-sciezka .il-menu + .il-menu::before { content: "›"; margin: 0 6px 0 -2px; color: var(--il-tekst-2); font-weight: 400; }

/* ---------- kroki ---------- */
#il ol.il-kroki { list-style: none; margin: 18px 0 22px; padding: 0; counter-reset: krok; }
#il ol.il-kroki > li {
    position: relative; counter-increment: krok;
    margin: 0; padding: 0 0 20px 50px;
}
#il ol.il-kroki > li::before {
    content: counter(krok);
    position: absolute; left: 0; top: -1px;
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--il-akcent-tlo); color: var(--il-akcent-ciemny);
    border: 2px solid var(--il-akcent);
    font-weight: 700; font-size: 15px;
}
#il ol.il-kroki > li:not(:last-child)::after {
    content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px;
    width: 2px; background: var(--il-linia);
}
#il ol.il-kroki > li > strong:first-child { display: block; font-size: 17px; margin-bottom: 2px; }

/* ---------- ramki ---------- */
#il .il-ramka {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
    margin: 18px 0; padding: 14px 16px;
    border-radius: var(--il-promien); border: 1px solid; border-left-width: 4px;
    font-size: 15px;
}
#il .il-ramka > svg { width: 22px; height: 22px; margin-top: 2px; }
#il .il-ramka p:last-child, #il .il-ramka ul:last-child { margin-bottom: 0; }
#il .il-ramka-tytul { display: block; font-weight: 700; margin-bottom: 2px; }
#il .il-ramka.il-prawo { background: var(--il-prawo-tlo); border-color: #d9ccff; border-left-color: var(--il-prawo); }
#il .il-ramka.il-prawo > svg, #il .il-ramka.il-prawo .il-ramka-tytul { color: var(--il-prawo); }
#il .il-ramka.il-uwaga { background: var(--il-uwaga-tlo); border-color: #fbe2b5; border-left-color: var(--il-uwaga); }
#il .il-ramka.il-uwaga > svg, #il .il-ramka.il-uwaga .il-ramka-tytul { color: var(--il-uwaga); }
#il .il-ramka.il-wskazowka { background: var(--il-wskazowka-tlo); border-color: #bfeef7; border-left-color: var(--il-wskazowka); }
#il .il-ramka.il-wskazowka > svg, #il .il-ramka.il-wskazowka .il-ramka-tytul { color: var(--il-wskazowka); }
#il .il-ramka.il-blad { background: var(--il-blad-tlo); border-color: #fecdca; border-left-color: var(--il-blad); }
#il .il-ramka.il-blad > svg, #il .il-ramka.il-blad .il-ramka-tytul { color: var(--il-blad); }

/* znaczek prawa w tekscie */
#il .il-p {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 7px; border-radius: 999px;
    background: var(--il-prawo-tlo); color: var(--il-prawo);
    border: 1px solid #d9ccff;
    font-size: .84em; font-weight: 700; line-height: 1.65; white-space: nowrap;
}
#il .il-p::before { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--il-klucz) center / contain no-repeat; mask: var(--il-klucz) center / contain no-repeat; }
#il { --il-klucz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* ---------- zrzuty ---------- */
#il figure.il-zrzut { margin: 20px 0 24px; }
#il figure.il-zrzut button {
    display: block; width: 100%; padding: 0; margin: 0;
    border: 1px solid var(--il-linia); border-radius: var(--il-promien);
    background: var(--il-tlo-2); overflow: hidden; cursor: zoom-in;
    box-shadow: var(--il-cien);
}
#il figure.il-zrzut img { display: block; width: 100%; height: auto; max-width: none; border: 0; }
#il figure.il-zrzut figcaption { margin-top: 8px; font-size: 13.5px; color: var(--il-tekst-2); text-align: center; }

/* ---------- tabele ---------- */
#il .il-tabela-owijka { overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--il-linia); border-radius: var(--il-promien); }
#il table.il-tabela { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; background: #fff; border: 0; }
#il table.il-tabela th, #il table.il-tabela td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--il-linia); text-align: left; vertical-align: top; background: transparent; color: var(--il-tekst); }
#il table.il-tabela thead th { position: sticky; top: 0; background: var(--il-tlo-2); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--il-tekst-2); font-weight: 700; }
#il table.il-tabela tbody tr:nth-child(even) td { background: #fbfcfd; }
#il table.il-tabela tbody tr:hover td { background: var(--il-akcent-tlo); }
#il table.il-tabela tr:last-child td { border-bottom: 0; }
#il table.il-tabela td.il-nowrap { white-space: nowrap; }

/* ---------- FAQ ---------- */
#il details.il-faq { border: 1px solid var(--il-linia); border-radius: var(--il-promien); margin: 10px 0; background: #fff; }
#il details.il-faq summary { cursor: pointer; padding: 13px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
#il details.il-faq summary::-webkit-details-marker { display: none; }
#il details.il-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--il-akcent); }
#il details.il-faq[open] summary::after { content: "–"; }
#il details.il-faq > div { padding: 0 16px 14px; }

/* ---------- powiekszenie zrzutu ---------- */
.il-lupa {
    position: fixed; inset: 0; z-index: 100000;
    display: grid; place-items: center;
    padding: 24px; background: rgba(15, 20, 28, .86);
    cursor: zoom-out;
}
.il-lupa img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #fff; }
.il-lupa span { position: absolute; top: 14px; right: 22px; color: #fff; font: 700 30px/1 Arial, sans-serif; }

/* ---------- przycisk spisu na telefonie ---------- */
#il .il-spis-przelacz { display: none; }

@media (max-width: 960px) {
    #il .il-uklad { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 16px 60px; }
    #il .il-boczny {
        position: static; max-height: none; overflow: visible; padding: 0;
        margin-bottom: 24px;
    }
    #il .il-spis-przelacz {
        display: flex; justify-content: space-between; align-items: center; width: 100%;
        padding: 10px 14px; margin: 0 0 10px;
        border: 1px solid var(--il-linia); border-radius: 8px; background: #fff;
        font: inherit; font-weight: 700; color: var(--il-tekst); cursor: pointer;
    }
    #il .il-boczny:not(.il-otwarty) .il-spis-blok { display: none; }
    #il .il-hero h1 { font-size: 32px; }
    #il .il-hero .il-lead { font-size: 17px; }
    #il .il-sekcja > h2 { font-size: 25px; }
    #il ol.il-kroki > li { padding-left: 44px; }
}

@media print {
    #il .il-boczny, #il .il-kafle { display: none; }
    #il .il-uklad { display: block; }
    #il .il-sekcja.il-ukryty { display: block; }
}

/* ---------- dwie kolumny, drobiazgi ---------- */
#il figure.il-zrzut { margin-left: auto; margin-right: auto; }
#il .il-dwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin: 8px 0; }
#il .il-dwa > figure.il-zrzut { margin-top: 6px; }
#il .il-dwa h4:first-child { margin-top: 0; }
#il .il-nowrap { white-space: nowrap; }
#il .il-stopka-tekst { margin-top: 28px; font-size: 14px; color: var(--il-tekst-2); }
@media (max-width: 760px) {
    #il .il-dwa { grid-template-columns: minmax(0, 1fr); }
}

/* Enfold ma overflow:hidden na #wrap_all i body - to wylacza position:sticky spisu tresci */
body:has(#il), .page-template-page-system-logos, body:has(#il) #wrap_all, .page-template-page-system-logos #wrap_all { overflow-x: clip; overflow-y: visible; }
#il .il-sekcja, #il .il-tresc h3[id] { scroll-margin-top: 100px; }
#il.il-szuka .il-hero { display: none; }
#il mark.il-traf.il-biezace { outline: 2px solid var(--il-akcent); outline-offset: 1px; }