:root {
    --color-blue-primary: #101956;
}

/* --- Article Related Resources --- */
.article-related-resources {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding: 40px 16px;
}

.article-related-inner {
    max-width: var(--content-width, 820px);
    margin: 0 auto;
}

.article-related-inner h2 {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--color-heading);
    margin-bottom: 16px;
}

.article-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-related-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--color-forground);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.article-related-links a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.article-related-links a svg {
    flex-shrink: 0;
}

main {
    padding: 0 !important;
    padding-top: var(--padding-main) !important;

    section {
        max-width: unset !important;
        padding: 0 var(--padding-main);
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .content {
            width: 100%;
            max-width: var(--content-width);
        }
    }
}

.back-to-blog {
    width: 96%;
    align-items: start;

    a {
        font-weight: 600;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;

        color: var(--color-text-black);
        transition: color 0.3s ease-in-out;

        &:hover {
            color: #3B82F6;
        }
    }
}

.article {
    .content {
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-card);
        border-radius: var(--card-radius);

        .img-container {
            border-radius: var(--card-radius) var(--card-radius) 0 0;
            width: 100%;
            overflow: hidden;

            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }

        .down-side {
            background-color: var(--color-forground);
            padding: var(--padding-main);
            border-radius: 0 0 var(--card-radius) var(--card-radius);

            display: flex;
            flex-direction: column;
            gap: 10px;

            color: var(--color-text);

            h1 {
                font-size: var(--text-heading1);
                font-weight: bold;
                color: var(--color-heading);
            }

            p {
                color: var(--color-text);
            }

            .types {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 10px;
                background-color: var(--color-forground);

                span {
                    white-space: nowrap;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 5px;
                    padding: 10px;

                    border-radius: var(--box-radius);
                    background-color: var(--color-button);

                    svg {
                        fill: var(--color-heading);
                    }
                }
            }

            .views {
                display: flex;
                align-items: center;
                gap: 10px;

                div {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }

                svg {
                    fill: var(--color-text);
                }
            }
        }
    }
}

.article-content {
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        background-color: var(--color-forground);
        padding: var(--padding-main);
        box-shadow: var(--shadow-card);
        border-radius: var(--card-radius);

        p {
            width: 100%;
            color: var(--color-text);
            white-space: pre-line;
        }

        hr {
            margin: 10px 0;
        }

        h2 {
            width: 100%;
            font-size: var(--text-heading2);
            font-weight: 600;
            color: var(--color-heading);
        }

        .text {
            width: 100%;

            b {
                font-weight: 600;
            }

            i {
                font-style: italic;
            }

            /* Level 1: 1. 2. 3. (decimal with period) */
            ol {
                margin-top: 5px;
                list-style-type: none;
                counter-reset: item;
                padding-left: 0;
                margin-left: 20px;

                color: var(--color-text);
            }

            ol>li {
                counter-increment: item;
                position: relative;
                padding-left: 30px;
                margin-bottom: 5px;
            }

            ol>li::before {
                content: counter(item) ". ";
                position: absolute;
                left: 0;
                font-weight: 500;
            }

            /* Level 2: 1) 2) 3) (decimal with parenthesis) */
            ol ol {
                counter-reset: subitem;
                margin-top: 5px;
                margin-left: 20px;
            }

            ol ol>li {
                counter-increment: subitem;
            }

            ol ol>li::before {
                content: counter(subitem) ") ";
            }

            /* Level 3: a. b. c. (lowercase letter with period) */
            ol ol ol {
                counter-reset: subsubitem;
            }

            ol ol ol>li {
                counter-increment: subsubitem;
            }

            ol ol ol>li::before {
                content: counter(subsubitem, lower-alpha) ". ";
            }

            /* Level 4: a) b) c) (lowercase letter with parenthesis) */
            ol ol ol ol {
                counter-reset: subsubsubitem;
            }

            ol ol ol ol>li {
                counter-increment: subsubsubitem;
            }

            ol ol ol ol>li::before {
                content: counter(subsubsubitem, lower-alpha) ") ";
            }

            /* Level 5+: i. ii. iii. (roman numerals with period) */
            ol ol ol ol ol {
                counter-reset: subsubsubsubitem;
            }

            ol ol ol ol ol>li {
                counter-increment: subsubsubsubitem;
            }

            ol ol ol ol ol>li::before {
                content: counter(subsubsubsubitem, lower-roman) ". ";
            }

            /* Unordered List Styling (for consistency) */
            ul {
                margin-top: 5px;
                list-style-type: disc;
                padding-left: 0;
                margin-left: 20px;
            }

            ul>li {
                padding-left: 10px;
                margin-bottom: 5px;
            }

            /* Nested unordered lists */
            ul ul {
                list-style-type: circle;
                margin-top: 5px;
                margin-left: 20px;
            }

            ul ul ul {
                list-style-type: square;
            }

            /* Mixed nesting (UL inside OL) */
            ol ul {
                margin-top: 5px;
                margin-left: 20px;
            }

            /* Mixed nesting (OL inside UL) - reset to level 1 style */
            ul ol {
                counter-reset: item;
                margin-top: 5px;
                margin-left: 20px;
            }

            ul ol>li::before {
                content: counter(item) ". ";
            }

            ul ol ol>li::before {
                content: counter(subitem) ") ";
            }

            /* General list item spacing */
            li {
                line-height: 1.6;
            }

            /* Ensure nested lists don't have extra top margin on first item */
            li>ul,
            li>ol {
                margin-top: 5px;
                margin-bottom: 0;
            }

            /* Optional: Add some visual hierarchy with subtle color changes */
            ol>li::before {
                color: var(--color-text);
            }

            ol ol>li::before {
                color: var(--color-text);
            }

            ol ol ol>li::before {
                color: var(--color-text);
            }

            u {
                text-decoration: underline;
            }

            a {
                font-weight: 600;
                color: var(--color-primary);
                text-decoration: underline;
                text-decoration-color: var(--color-primary);

                cursor: pointer;
            }
        }

        .img {
            width: 100%;
            border-radius: var(--card-radius);
            overflow: hidden;
            box-shadow: var(--shadow-card);

            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;

                position: relative;
                z-index: 1;
            }
        }

        .cta {
            padding: var(--padding-button);
            border-radius: var(--box-radius);
            box-shadow: var(--shadow-card);

            transition: all 0.3s ease-in-out;

            &.initial {}

            &.primary {
                background-color: var(--color-primary);
                color: white;
            }

            &.secondary {
                background-color: var(--color-secondary);
                color: white;
            }

            &:hover {
                box-shadow: var(--shadow-inset);
            }
        }
    }
}

.related-articles {
    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
        color: var(--color-heading);
    }

    p {
        text-align: center;
        color: var(--color-text);
    }

    .related-boxes {
        margin-top: var(--padding-main);
        display: flex;
        flex-direction: column;
        gap: var(--padding-card);

        a {
            background-color: var(--color-forground);
            padding: var(--padding-card);
            border: 1px solid var(--color-button);
            box-shadow: var(--shadow-card);
            border-radius: var(--box-radius);

            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                text-align: left;
                color: var(--color-heading);
                font-weight: 600;
            }

            svg {
                font-weight: 300;
                fill: var(--color-heading);
            }
        }
    }
}

.contact {
    padding: 50px 10%;
    background-color: var(--color-primary);
    background: linear-gradient(to right, var(--color-blue-primary), #1E3A8A, var(--color-blue-primary));

    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
        color: #fff;
    }

    h2 {
        font-size: var(--text-heading2);
        font-weight: bold;
        color: #fff;
        margin-bottom: 4px;
        text-align: center;
    }

    p,
    span {
        text-align: center;
        color: var(--color-text-white);
    }

    .item {
        margin-top: var(--padding-main);

        width: 100%;
        background-color: #fff2;
        padding: var(--padding-card);
        border-radius: var(--card-radius);
        box-shadow: var(--shadow-card);
        border: 1px solid #FFFFFF33;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;

        .row {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .icon {
            padding: 16px;
            border-radius: var(--box-radius);
            background-color: #A855F7;
            background: linear-gradient(to right, #3B82F6, #A855F7);

            &.group {
                background-color: #F97316;
                background: linear-gradient(to right, #EC4899, #F97316);
            }
        }

        span {
            display: block;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        a {
            text-wrap: nowrap;
            padding: var(--padding-button);
            border: none;
            border-radius: var(--box-radius);
            background-color: #A855F7;
            background: linear-gradient(to right, #3B82F6, #A855F7);
            color: #fff;
        }
    }
}

.advertiser {
    .content {
        background-color: var(--color-primary);
        padding: var(--padding-main);
        box-shadow: var(--shadow-card);
        border-radius: var(--card-radius);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    h3 {
        font-size: var(--text-heading3);
        font-weight: bold;
        color: white;
    }

    p {
        font-size: var(--text-paragraph);
        color: white;
    }

    a {
        margin-top: 10px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        gap: 5px;
        background-color: white;
        padding: 10px 20px;
        border-radius: var(--box-radius);

        svg {
            fill: var(--color-primary);
        }

        p {
            color: var(--color-primary);
        }
    }

}