/* Custom Help Scout StyleSheet - by Devan Sabaratnam (founder of HR Partner - www.hrpartner.io) */
/* Color pallette chosen from https://coolors.co/54494b-7e8287-9da39a-b98389-333333 */

/* 01.10.2026: Open Sans nie był używany. Nunito ładujemy w grubościach 400, 600 i 700, żeby pogrubienia nie były sztuczne. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap');
/* */

body {
    background: #fbfbfc;
    font-family: 'Nunito', sans-serif;
}

/* Home Page Title */

#docsSearch h1 {
    font-size: 32px;
    font-weight: 300;
    text-align: center;
    margin-top: .4em;
    font-family: 'Nunito', sans-serif;
    color: #222256;
    padding: 10px;
}

.navbar .nav li {
    display: inline-block;
    float: none;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
}

.navbar .nav li a, .navbar .icon-private-w {
    font-size: 14px;
    font-weight: 300;
}

@media (max-width: 480px) {
    #docsSearch {
        display: inline-block;
        width: 100%;
    }
}
/* Header Size */


.navbar .navbar-inner {
    /* background: #333333; */
    height: 60px;
}

.navbar .navbar-inner .container-fluid {
    padding: 0;
    height: 60px;
}

.navbar .brand {
    float: left;
    display: block;
    padding: 0;
    margin-left: -20px;
    font-size: 20px;
    font-weight: 200;
    color: #FFF;
    text-shadow: 0 1px 0 #fff;
}

/* Home Page Search Bar Background */

#docsSearch {
    background: #ffffff;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/banner-930x360-01.png");
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3em;
    padding: 1.5em 0;
    height: 310px;
    border: none !important;
}

/* Search Input Box */

input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    margin-bottom: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-family: 'Nunito', sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
}

/* Home Page Category Title*/

.category-list h3 {
    color: #333333;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3em;
    font-family: 'Nunito', sans-serif;


}

/* Category Styles */

.category-list .category p {
    color: #7e8287;
    font-family: 'Nunito', sans-serif;
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 0.25px;
}

.category-list .category {
    background-color: #fff;
    background-position: top 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 100px auto !important;
    box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    min-height: 183px;
    padding: 120px 20px 15px;
    position: relative;
    width: 31.5%;
    transition: all 0.2s;
}

.category-list .category:hover {
    text-decoration: none;
    background: #f7f7f9;
}


.collection-category h2 {
    font-weight: 500;
    margin: 0 0 20px;
    text-align: center;
    padding-left: 0;
    font-family: 'Nunito', sans-serif;
    /* text-transform: uppercase; */
    color: #7e8287;
    font-size: 22px;
    letter-spacing: 1px;
}

.collection-category h2 a {
    color: #333333;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}


/* Home Page Link Style */

#serp-dd .result a, #serp-dd .result > li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
    font-weight: 500;
    letter-spacing: .25px;
    color: #333333;
    margin-top: 15px;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
}

#serp-dd .result a:hover, #serp-dd .result > li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
    letter-spacing: .25px;
    color: #333333;
    margin-top: 15px;
    /* text-decoration: underline; */
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

#contentArea.container-fluid {

    margin-top: 7em;
}
@media (max-width: 480px) {
    #contentArea.container-fluid {

        margin-top: 0;
    }
}
/* Home Page Search Button */

#searchBar {
    margin-top: 21em;


}


#searchBar button {
    color: #fff;
    text-shadow: 0 0 0 rgba(255, 255, 255, .0);
    background: #2C323D;
    border-radius: 0 5px 5px 0;
    border: 1px solid #b98389;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
}

#searchBar button:hover {
    background: #93210D;
    text-shadow: 0 0 0 rgba(255, 255, 255, .0);
    border: 1px solid #2ad7d7;
}

input, button, select, textarea {
    font-family: 'Nunito', sans-serif;
}

.article-count {
    display: none;
}


/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/


/* Getting Started (use your actual category names here in the comment to make it easier) */


#category-9 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/01_PIERWSZE_KROKI.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-13 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/02_FINANSE_I_KOSZTY.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-16 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/03_DOKUMENTY.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-15 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/04_RAPORT_I_STATYSTYKI.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-14 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/05_OBSLUGA_NIERUCHOMOSCI.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-17 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/06_ZARZADZANIE.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-18 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/07_PREZENTACJA_OFERT.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-20 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    text-align: center;
    vertical-align: middle;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/08_FAQ.svg");
    background-position: center !important;
    background-size: 50% !important;

}

#category-19 {
    width: 300px;
    height: 300px;
    padding: 17px 17px 17px 17px;
    background-image: url("https://systemobsluginajmu.pl/przewodnik/09_SZKOLENIA_I_KSIAZKI.svg");
    background-position: center !important;
    background-size: 50% !important;
}


/* Side Bar Styles */

#sidebar .nav-list a {
    display: inline-block;
    font-size: 14px;
    padding: 6px 15px 6px 0;
    line-height: 20px;
    margin-left: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    color: #212F3D;
}

#sidebar .nav-list a:hover {
    color: #0077b6;
}

#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
    font-weight: 500;
    background: 0 0;
    text-shadow: none;
    text-decoration: underline;
}

#sidebar h3 {
    text-transform: uppercase;
    font-size: 16px;
    color: #7e8287;
    font-weight: 400;
    margin-bottom: 4px;
    font-family: 'Nunito', sans-serif;
    letter-spacing: 2px;
}

/* Article Styles */

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle ul li a,  #fullArticle ul li a strong, #fullArticle h4 a, #fullArticle h3 a, #fullArticle h5 a, #fullArticle li a, #fullArticle p a, #fullArticle div a{
    color: #0077b6;
}

#fullArticle .title, .contentWrapper h1, .contentWrapper h2, .contentWrapper h3, .contentWrapper h4, .contentWrapper h5  {
    margin: 0 30px .5em 0;
    font-family: 'Nunito', sans-serif;
    color: #212F3D!important;
    font-weight: 700;
}

#fullArticle .title, .contentWrapper h1 strong, .contentWrapper h2 strong, .contentWrapper h3 strong, .contentWrapper h4 strong, .contentWrapper h5 strong {
    color: #212F3D!important;
}

#fullArticle .printArticle {
    position: absolute;
    right: 46px;
    top: 40px;
}

#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
    color: #212F3D;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
}

#categoryHead .sort select {
    width: 150px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
    color: #7e8287;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
}
@media (max-width: 480px) {
    #fullArticle .printArticle {
        top: 15px;
    }
}

/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
    color: #7e8287;
}

#fullArticle h2 {
    font-size: 24px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: #333333;
}

#fullArticle h3 {
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #333333;
}

#fullArticle h4 {
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    color: #333333;

}

.contentWrapper p {
    margin-top: -4px;
    word-wrap: break-word;
    font-family: 'Nunito', sans-serif;
    color: #7e8287;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
    color: #7e8287;
    display: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-style: italic;
}

.articleFoot .icon-contact {
    display: none;
}

/* Page Footers */

footer p a {
    color: #7e8287;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    display: none;
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
    background: #fff;
    margin: 0;
    padding: 11px 0 10px 18px;
    font-size: 22px;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: 'Nunito', sans-serif;
    color: #58A4B0;
    font-weight: 300;
}

#contactModal .control-label {
    width: 110px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #7e8287;
}

.btn {
    color: #fff;
    text-shadow: 0 0 0 rgba(255, 255, 255, .0);
    background: #03d3d5;
    border-radius: 5px;
    border: 1px solid #b98389;
    font-size: 14px;
    padding: .5em;
    /* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
    text-shadow: 0 0 0 rgba(255, 255, 255, .0);
    background: #8fa7c2;
    border: 1px solid #9da39a;
}

#search-query .btn:hover {
    color: #fff;
    text-shadow: 0 0 0 rgba(255, 255, 255, .0);
    background: #8fa7c2;
    border-radius: 5px;
    border: 1px solid #9da39a;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
}

.category-list {
    text-align: center;
    margin-top: 0;
}

@media (max-width: 480px) {
    .category-list {
        margin-top: 70px;
    }
    #main-content {
        background: none;
        float: none;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        display: block;
        margin: 70px auto;
    }
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
    section.category-list .category {
        width: 48.2%;
    }
}

@media screen and (max-width: 760px) {
    section.category-list .category {
        box-sizing: border-box;
        margin: 0 0 20px;
        padding: 120px 20px 15px;
        width: 100%;
    }
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .navbar .btn-navbar {
        margin-top: 16px;
        right: -10px;
    }

    .related {
        padding: 30px 25px 25px;
    }

    .related ul {
        margin-left: 0;
    }

    .related h3 {
        padding-left: 0;
    }

    .related ul > li a {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    #searchBar button {
        color: transparent;
        text-shadow: unset;
        background: transparent;
        border-radius: 0 5px 5px 0;
        border: 0;
        font-size: 18px;
        padding: 0 1.5em;
        height: 50px;
        position: absolute;
        display: flex;
        align-items: center;
        width: 60px;
    }

    #searchBar button .icon-search {
        display: block;
        text-shadow: none;
    }

    #searchBar button:hover .icon-search:hover {
        display: block;
        text-shadow: none;
        margin-top: 15px;
        background-color: transparent;
    }
}

@media (max-width: 480px) {
    #searchBar {
        display: inline-block;
        width: 100%;
    }

    #fullArticle .title, .contentWrapper h1 {
        font-size: 24px;
    }

    #fullArticle h2 {
        font-size: 20px;
    }
}


/* Collection Titles  */
.collection-category h2 a {
    color: #54494b;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: 'Nunito', sans-serif;
    text-align: center;
}

/* =====================================================================
   POPRAWKI CZYTELNOŚCI I DOSTĘPNOŚCI (WCAG 2.2, poziom AA)
   Dodane 01.10.2026. Reguły poniżej nadpisują wcześniejsze reguły tego pliku.
   Oryginał przed zmianami: style-(1)_oryginal_2026-10-01.css
   ===================================================================== */
/* 1. Tekst artykułu: 16 px i zwykła grubość
   Było: 14 px, grubość 300. Na małych i słabych ekranach tekst był drobny. */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}


/* 2. Pogrubienia w kolorze tekstu
   Było: #7e8287, kontrast 3,87:1 (wymóg AA: 4,5:1). Jest: 13,65:1. */
#fullArticle strong,
#fullArticle b {
    color: #212F3D;
    font-weight: 700;
}


/* 3. Linki w artykule: niebieskie wszędzie, także w tabelach, i podkreślone
   Kolor #0077b6 ma kontrast 4,87:1 z tłem, ale tylko 2,8:1 z tekstem obok
   (wymóg WCAG 1.4.1: 3:1). Dlatego link musi mieć też podkreślenie. */
#fullArticle a,
#fullArticle a strong,
#fullArticle p a,
#fullArticle li a,
#fullArticle td a,
#fullArticle th a,
#fullArticle div a {
    color: #0077b6;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    font-weight: inherit;
    margin-top: 0;
}

#fullArticle a:hover {
    color: #005a8c;
    text-decoration-thickness: 2px;
}

/* Ikona drukowania nie potrzebuje podkreślenia */
#fullArticle .printArticle,
#fullArticle .printArticle a {
    text-decoration: none;
}


/* 4. Widoczny fokus przy obsłudze klawiaturą (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0077b6;
    outline-offset: 2px;
}


/* 5. Tabele: krawędzie wszystkich komórek */
#fullArticle table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0 1.5em;
}

#fullArticle table th,
#fullArticle table td {
    border: 1px solid #c5ccd6;
    padding: 8px 12px;
    vertical-align: top;
    text-align: left;
}

#fullArticle table th,
#fullArticle table thead td {
    background: #f4f6f9;
    font-weight: 700;
}


/* 6. Nagłówki: wyraźna hierarchia
   Było: H2 o grubości 400, a H3 o grubości 700, więc niższy poziom
   wyglądał mocniej niż wyższy. Na telefonie H2 i H3 miały po 20 px. */
#fullArticle h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.5em;
}

#fullArticle h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 1.3em;
}

#fullArticle h4 {
    font-size: 17px;
    font-weight: 700;
}


/* 7. Tekst pomocniczy: ciemniejszy szary
   Było: #7e8287 (3,74-3,87:1), #919191 (3,15:1), #858585 (3,69:1),
   #9b9b9b (2,69:1). Jest: #5b6675, kontrast 5,64-5,83:1. */
#sidebar h3,
.collection-category h2,
.category-list .category p,
.contentWrapper p,
#categoryHead .sort select,
#contactModal .control-label,
.contentWrapper [class*="rating"],
footer p,
footer p a {
    color: #5b6675;
}

.category-list .category p {
    font-weight: 400;
}

#fullArticle figcaption,
#fullArticle [class*="caption"] {
    color: #5b6675;
    font-size: 14px;
}

footer p {
    font-size: 12px;
}


/* 8. Nawigacja: link na jasnoniebieskim pasku
   Było: #0077b6 na #e9f1f9, kontrast 4,27:1. Jest: #005a8c, 6,48:1. */
body .navbar .nav li a,
body .navbar .icon-private-w {
    color: #005a8c;
    font-weight: 400;
}

#sidebar .nav-list a {
    font-size: 15px;
    font-weight: 400;
}


/* 9. Powiązane artykuły pod artykułem
   Było: #4381b5, kontrast 4,16:1. Jest: kolor linków z artykułu. */
.related a {
    color: #0077b6;
}

.related h3 {
    font-size: 13px;
}


/* 10. Przyciski: biały napis na ciemniejszym tle
   Było: biały na turkusie #03d3d5, kontrast 1,86:1, po najechaniu 2,48:1.
   Jest: 4,87:1 i 7,39:1. */
.btn {
    background: #0077b6;
    border: 1px solid #0077b6;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
    background: #005a8c;
    border-color: #005a8c;
}


/* 11. Wyszukiwarka: czytelny tekst i podpowiedź
   Było: 12 px i grubość 100. Rozmiar 16 px zapobiega też
   automatycznemu powiększaniu strony na iPhonie. */
input.search-query {
    font-size: 16px;
    font-weight: 400;
}

input.search-query::placeholder {
    color: #5b6675;
    opacity: 1;
}


/* 12. Telefon: obrazy i tabele mieszczą się w szerokości ekranu (WCAG 1.4.10) */
#fullArticle img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    #fullArticle h2 {
        font-size: 21px;
    }

    #fullArticle h3 {
        font-size: 18px;
    }

    #fullArticle table {
        display: block;
        overflow-x: auto;
    }
}

/* 13. Poprawka z 01.10.2026, wersja 2
   Pogrubienie wewnątrz linku (np. tytuły w spisie „W tym artykule dowiesz się”)
   bierze kolor linku. Bez tej reguły tekst był ciemny, a tylko podkreślenie niebieskie. */
#fullArticle a b,
#fullArticle a strong {
    color: inherit;
}

/* Przyciski w treści artykułu (np. „View in Help Scout” dla zalogowanego zespołu)
   zostają białe i bez podkreślenia */
#fullArticle a.btn,
#fullArticle .btn {
    color: #ffffff;
    text-decoration: none;
}

/* 14. Szerszy układ strony (dodane 01.10.2026, wersja 3)
   Kontener był ograniczony do 1080 px. Teraz do 1240 px, żeby tabele
   i zrzuty miały więcej miejsca. Akapity i listy mają najwyżej ok. 85 znaków
   w wierszu, bo dłuższe wiersze czyta się trudniej (WCAG 1.4.8 zaleca
   najwyżej 80). Tabele, obrazy i ramki zajmują całą szerokość artykułu. */
#contentArea.container-fluid,
.navbar .navbar-inner .container-fluid {
    max-width: 1240px;
}

#fullArticle > p,
#fullArticle > ul,
#fullArticle > ol,
#fullArticle [class^="callout"] p {
    max-width: 40em;
}

/* Na dużych ekranach tekst o 1 px większy */
@media (min-width: 1400px) {
    #fullArticle,
    #fullArticle p,
    #fullArticle ul,
    #fullArticle ol,
    #fullArticle li,
    #fullArticle div,
    #fullArticle blockquote,
    #fullArticle dd,
    #fullArticle table {
        font-size: 17px;
    }
}

/* 15. Obrazy: lżejsza ramka i powiększanie po kliknięciu (dodane 01.10.2026, wersja 4)
   Było: szara ramka Help Scout (1 px, #d6d6d6) i 4 px odstępu, co dawało efekt
   podwójnej ramki. Jest: cienka, jasna krawędź bez odstępu. Krawędź zostaje,
   bo zrzuty z białym tłem bez niej zlewałyby się ze stroną.
   Powiększanie wymaga też skryptu w Custom Code -> Headers
   (plik powiekszanie-obrazow-headers.html). */
#fullArticle img {
    border: 1px solid #e3e7ec;
    padding: 0;
    border-radius: 4px;
}

#fullArticle img.son-powieksz {
    cursor: zoom-in;
}

.son-lightbox {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background: rgba(20, 26, 33, 0.85);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.son-lightbox.otwarte {
    display: flex;
}

.son-lightbox img {
    max-width: 100%;
    max-height: 100%;
    background: #ffffff;
    border-radius: 4px;
    cursor: default;
}

.son-lightbox-zamknij {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #212F3D;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
}

/* 16. Obrazy na pełną szerokość artykułu (dodane 01.10.2026, wersja 5)
   Edytor Help Scout wstawia obraz do akapitu, a akapity mają ograniczoną
   długość wiersza (blok 14). Akapit, w którym jest obraz, dostaje pełną szerokość,
   żeby wszystkie obrazy miały ten sam rozmiar. */
#fullArticle > p:has(> img),
#fullArticle > p:has(> a > img) {
    max-width: none;
}

/* 17. Obrazy z podpisem mieszczą się na telefonie (dodane 01.10.2026, wersja 6)
   Help Scout układa obraz z podpisem (figure) jak tabelę dopasowaną do naturalnej
   szerokości obrazu. Na telefonie figura miała przez to 740 px przy ekranie 375 px
   i cała strona przesuwała się na boki (WCAG 1.4.10). */
#fullArticle figure {
    display: block;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#fullArticle figure img {
    max-width: 100%;
    height: auto;
}

#fullArticle figcaption {
    max-width: none;
}


/* 18. Linki bez stałego podkreślenia (dodane 02.10.2026, wersja 7)
   Link wyróżnia się kolorem. Żeby to wystarczyło, tekst artykułu jest odrobinę
   ciemniejszy (#17202a zamiast #212F3D), a link odrobinę ciemniejszy (#0073b0
   zamiast #0077b6). Kontrast linku z tekstem obok: 3,2:1 (WCAG 1.4.1 wymaga 3:1),
   linku z białym tłem: 5,15:1 (wymóg 4,5:1). Podkreślenie pojawia się po najechaniu
   myszką i przy obsłudze klawiaturą. W kolorowych ramkach link zostaje podkreślony,
   bo na ich tle kolor sam nie odróżni linku od tekstu wystarczająco wyraźnie. */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle td,
#fullArticle th,
#fullArticle dd,
#fullArticle blockquote,
#fullArticle strong,
#fullArticle b,
#fullArticle [class^="callout"],
#fullArticle [class^="callout"] p {
    color: #17202a;
}

#fullArticle a,
#fullArticle p a,
#fullArticle li a,
#fullArticle ul li a,
#fullArticle ol li a,
#fullArticle ul li a strong,
#fullArticle td a,
#fullArticle th a,
#fullArticle div a,
#fullArticle h3 a,
#fullArticle h4 a,
#fullArticle h5 a {
    color: #0073b0;
    text-decoration: none;
}

#fullArticle a:hover,
#fullArticle a:focus-visible {
    color: #005a8c;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

#fullArticle [class^="callout"] a {
    text-decoration: underline;
    text-underline-offset: 2px;
}