/* ============================================
    Spis treści:
    0. Globalne
    1. Header
    2. DJ Socials
    3. DJ Search
    4. DJ Category Cards
    5. DJ Post Card
    6. DJ Footer
    7. DJ TOC
============================================ */


/* =========== [0. Globalne] =========== */

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6em;
    &.blocked {
        overflow: hidden;
    }
}

h3,
.h3-style {
    @media screen and (max-width: 500px) {
        font-size: 20px;
    }
}

.dj-icon-fix {
    margin-left: 2px;
    transform: translateY(-1px);
}

.dj-btn-link {
    padding-bottom: 4px;
    text-decoration: none !important;
    border-bottom: 1px solid #29166f;
}

.dj-text-xs {
    font-size: 12px;
}


/* =========== [1. Header] =========== */

.tm-headerbar-default>.uk-container>.uk-grid>.uk-margin-auto-left {
    padding-left: 24px;
    flex: 1;
}

.uk-dropbar {
    a {
        &:hover {
            text-decoration: underline;
        }
    }
    .uk-active {
        a {
            text-decoration: underline;
        }
    }
}

.uk-navbar-dropdown {
    a {
        &:hover {
            text-decoration: underline;
        }
    }
}


/* =========== [2. DJ Socials] =========== */

.dj-socials>.uk-panel {
    display: flex;
    gap: 8px;
}

.dj-panel {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid;
    transition: 250ms linear;
    box-sizing: border-box;
    &:hover {
        opacity: 0.6;
    }
}

.dj-panel-bip {
    background-color: #E91B24;
    border-color: #E91B24;
}

.dj-panel-facebook {
    color: #FFFFFF;
    background-color: #365396;
    border-color: #365396;
}

.dj-panel-youtube {
    color: #FFFFFF;
    background-color: #FF0000;
    border-color: #FF0000;
}

.dj-panel .uk-panel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* =========== [3. DJ Search] =========== */

.dj-search {
    margin-right: 24px;
}

.dj-search .uk-search {
    display: flex;
    border: 1px solid #D1E0F3;
    border-radius: 14px;
    overflow: hidden;
}

.dj-search .uk-search-input {
    padding-left: 16px;
    font-size: 14px;
    background-color: #FFFFFF;
}

.dj-search .uk-search-icon {
    flex-shrink: 0;
    width: 48px;
    border-left: 1px solid #D1E0F3;
    background-color: #FFFFFF;
}


/* =========== [4. DJ Category Cards] =========== */

.dj-category-cards {
    .uk-card {
        padding: 8px 16px;
        border-radius: 10px;
        &.active,
        &:hover {
            color: #FFFFFF !important;
            background-color: #29166F;
        }
    }
}


/* =========== [5. DJ Post Card] =========== */

.dj-post-card {
    .uk-card {
        border-radius: 18px;
        overflow: hidden;
    }
    .dj-category {
        margin-right: 12px;
        padding: 6px 10px;
        color: #1F2F54;
        background-color: #D1E0F3;
        border-radius: 8px;
        box-sizing: border-box;
    }
}


/* =========== [6. DJ Footer] =========== */

.dj-footer-menu {
    a {
        &:hover {
            text-decoration: underline;
        }
    }
}


/* =========== [7. DJ TOC] =========== */

#sticky-toc {
    padding: 30px !important;
    background-color: #D1E0F3;
    border-radius: 18px;
    .uk-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        padding: 12px 24px;
        display: block;
        text-decoration: none;
        border-radius: 13px;
        box-sizing: border-box;
        &.is-active,
        &:hover {
            color: #D1E0F3;
            background-color: #1F2F54;
        }
    }
    @media screen and (max-width: 500px) {
        padding: 24px 16px !important;
        a {
            padding: 8px 16px;
        }
    }
}