/* =========================
   BODY
========================= */

body {
    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;
    color: #003366;

    min-height: 100vh;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 60%,
            #ffffff 100%
        ),
        url("tlo.png") no-repeat center top / cover;

    background-attachment: fixed;
}


/* =========================
   HAMBURGER
========================= */

#hamburger {

    position: fixed;

    top: 50px;
    left: 50%;

    transform: translateX(-50%);

    background: #003366;

    color: white;

    font-size: 24px;

    border: none;

    padding: 8px 12px;

    border-radius: 4px;

    cursor: pointer;

    z-index: 3000;
}



/* =========================
   GŁÓWNY UKŁAD
========================= */

#toc-layout {

    width: 100%;

    min-height: 100vh;

}



/* =========================
   SPIS TREŚCI
========================= */

#toc-container {

    position: fixed;

    top: 0;
    left: 0;

    width: 250px;

    height: 100vh;


    padding: 20px;

    box-sizing: border-box;


    background: #f0f8ff;


    border-right: 2px solid #003366;


    overflow-y: auto;


    z-index: 2000;


    transition: transform 0.3s ease-in-out;

}



/* schowany spis */

.toc-hidden {

    transform: translateX(-110%);

}



/* =========================
   ARTYKUŁ
========================= */

#article-viewer {

    width: min(900px, 90vw);


    margin-left: auto;

    margin-right: auto;


    padding: 2em;


    box-sizing: border-box;


    position: relative;

    z-index: 1;

}



/* =========================
   NAGŁÓWEK TOC
========================= */

#toc-container h2 {

    margin-top: 0;

}



.toc-header {

    margin-top: 1.5em;

    cursor: pointer;


    position: relative;


    padding-right: 20px;


    border-bottom: 1px solid #003366;


    user-select: none;

}



.toc-header::after {

    content: "▼";

    position: absolute;


    right: 0;


    transition: transform 0.2s ease;

}



.toc-header.collapsed::after {

    transform: rotate(-90deg);

}



/* =========================
   LISTY TOC
========================= */

#toc-container ul {

    list-style: none;


    margin: 0;


    padding-left: 15px;

}



#toc-container ul.collapsed {

    display: none;

}



#toc-container li {

    margin-bottom: 6px;

}



#toc-container a,
.clickable-title {

    color: #003366;


    text-decoration: underline;


    font-style: italic;


    cursor: pointer;

}



#toc-container a:hover,
.clickable-title:hover {

    color: #ffcc00;

}



/* =========================
   RESPONSYWNOŚĆ
========================= */

@media (max-width:768px) {


    #hamburger {

        top: 20px;

    }



    #toc-container {

        width: 80%;

        max-width: 300px;

    }



    #article-viewer {

        width: 100%;

        padding: 1em;

    }

}
#toc-container a,
.clickable-title {

    color: #003366;

    text-decoration: none; /* usuwa podkreślenie */

    font-style: italic;

    cursor: pointer;

    transition: color 0.2s ease;
}


#toc-container a:hover,
.clickable-title:hover {

    color: #ffcc00; /* żółty po najechaniu */}

    #toc-container a:visited {
    color: #003366;
    text-decoration: none;
}