/* ============================================
    Spis treści:
    0. Globalne
    1. Header
    2. DJ Hero
    3. DJ Card Default
    4. DJ Tile
    5. DJ List
    6. DJ FAQ
    7. DJ Form
    8. DJ Footer Links
    9. DJ Challenge Solution
    10. DJ Video
    11. DJ Slideshow
    12. DJ Position Label
    13. DJ Submenu
============================================ */


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

.dj-rounded-column {
    .uk-tile {
        border-radius: 14px;
    }
}

.dj-font-500 {
    font-weight: 500;
}


/* .dj-text {
    strong {
        font-weight: 500;
    }
} */

.uk-text-lead {
    @media screen and (max-width: 600px) {
        p {
            font-size: 18px;
        }
    }
}

blockquote {
    padding: 12px;
    font-size: 18px;
    background-color: #F4F4F1;
    box-sizing: border-box;
    a {
        text-decoration: underline;
    }
}

.dj-count {
    width: 52px;
    font-size: 86px;
    font-weight: 500;
    line-height: 1.2;
    &.accent {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        width: 64px;
        color: #fff !important;
        font-size: 48px;
        background-color: #f7a600;
        border-radius: 16px;
    }
    @media screen and (max-width: 600px) {
        font-size: 64px;
        width: 40px;
    }
}

.uk-table:not(.uk-table-divider):not(.uk-table-striped) {
    border: 1px solid #e4e4e4;
    border-collapse: collapse;
    overflow: hidden;
    td,
    th {
        border: 1px solid #e4e4e4;
    }
}

@media screen and (max-width: 600px) {
    .uk-button {
        padding-block: 12px;
        font-size: 14px;
        line-height: 1.5;
    }
}


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

.tm-header {
    @media screen and (max-width: 1300px) {
        .uk-navbar-nav {
            gap: 28px;
            a {
                font-size: 14px;
            }
        }
        .uk-logo {
            img {
                width: 90px;
            }
        }
    }
}


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

.dj-hero {
    .uk-dotnav {
        padding: 6px 14px;
        background-color: #FFFFFF;
        border-radius: 50px;
        box-sizing: border-box;
    }
    li {
        &:first-of-type {
            padding-left: 0;
        }
    }
}


/* =========== [3. DJ Card Default] =========== */

.uk-tile-primary {
    >h2 {
        color: #333 !important;
    }
    .dj-card-default {
        .el-title {
            color: #333333;
        }
        .el-content {
            color: #777;
        }
    }
}

.dj-card-default {
    .el-image {
        border-radius: 14px;
    }
}


/* =========== [4. DJ Tile] =========== */

.dj-tile {
    .uk-tile-muted {
        border-radius: 14px;
    }
}


/* =========== [5. DJ List] =========== */

.dj-list {
    .el-content,
    .el-title {
        font-size: 16px;
    }
    .el-image {
        transform: translateY(-2px);
    }
    .uk-link {
        text-decoration: underline;
    }
    @media screen and (max-width: 600px) {
        .el-content,
        .el-title {
            font-size: 14px;
        }
    }
    @media screen and (max-width: 400px) {
        .el-content,
        .el-title {
            font-size: 13px;
        }
    }
}


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

.dj-faq {
    .el-title {
        padding: 28px 28px 28px 28px;
    }
    .el-item {
        background-color: #F4F4F1;
        border-radius: 24px;
        box-sizing: border-box;
    }
    .uk-accordion-content {
        padding: 0px 28px 28px 28px;
        color: #333333;
    }
}


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

.dj-acceptance {
    font-size: 12px;
}

.uk-form-large {
    @media screen and (max-width: 600px) {
        font-size: 14px;
    }
}


/* =========== [8. DJ Footer Links] =========== */

.dj-footer-links {
    .uk-grid {
        >div {
            display: none;
            opacity: 0;
            transition: opacity 250ms ease-in-out;
            &:nth-of-type(1),
            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(4),
            &:nth-of-type(5),
            &:nth-of-type(6) {
                display: block !important;
                opacity: 1 !important;
            }
            &.active {
                display: block;
            }
            &.visible {
                opacity: 1;
            }
        }
    }
}

#seo-show {
    width: fit-content;
    margin: 0 auto;
    @media screen and (max-width: 600px) {
        .uk-button {
            font-size: 12px;
        }
    }
    @media screen and (max-width: 400px) {
        .uk-button {
            font-size: 10px;
        }
    }
}


/* =========== [9. DJ Challenge Solution] =========== */

.dj-challenge,
.dj-question {
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        width: 40px;
        border-style: dashed;
        border-width: 1px;
        transform: translate(100%, -50%);
    }
    @media screen and (max-width: 960px) {
        .uk-list {
            &:before {
                color: #FF0004;
            }
        }
        &::after {
            width: 0px;
            height: 30px;
            top: auto;
            left: calc(50% + 15px);
            right: auto;
            bottom: 0;
            transform: translate(-50%, 100%);
        }
    }
}

.dj-solution,
.dj-challenge,
.dj-question {
    .el-content {
        line-height: 1.4;
    }
    @media screen and (max-width: 960px) {
        .uk-list {
            &:before {
                content: attr(data-title);
                font-size: 12px;
                font-weight: 500;
                text-transform: uppercase;
            }
        }
        .uk-grid {
            flex-direction: column;
            gap: 6px;
        }
    }
    @media screen and (max-width: 600px) {
        .el-item {
            margin-top: 10px;
        }
        .uk-width-auto {
            display: flex;
        }
        .el-image {
            width: 20px;
            height: 20px;
        }
        .el-content:not(.uk-h3) {
            font-size: 16px;
        }
    }
}

.dj-solution {
    @media screen and (max-width: 960px) {
        .uk-list {
            &:before {
                color: #556437;
            }
        }
    }
}

.dj-question {
    @media screen and (max-width: 960px) {
        .uk-list {
            &:before {
                color: #0077FF;
            }
        }
    }
}


/* =========== [10. DJ Video] =========== */

.dj-video {
    iframe {
        border-radius: 24px;
    }
}


/* =========== [11. DJ Slideshow] =========== */

.dj-slideshow {
    .uk-slideshow-items {
        .el-image {
            border-radius: 24px;
        }
    }
    .uk-slideshow-nav {
        img {
            border-radius: 14px;
        }
    }
}


/* =========== [12. DJ Position Label] =========== */

.dj-position-label {
    padding: 2px 16px;
    width: fit-content;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #556437;
    border-radius: 32px;
    box-sizing: border-box;
}


/* =========== [13. DJ Submenu] =========== */

.dj-submenu {
    @media screen and (max-width: 960px) {
        .el-link {
            font-size: 14px;
        }
    }
}

.dj-submenu-small {
    .el-link {
        font-size: 14px;
    }
    @media screen and (max-width: 960px) {
        .el-link {
            font-size: 12px;
        }
    }
}