:root {
    --color-main-black: rgb(0, 0, 0);
    --color-main-white: rgb(255, 255, 255);
    --color-main-turquoise: rgb(0, 255, 205);
    --color-text-1: rgb(255, 255, 255);
    --color-code-bg: rgb(238, 238, 255);
    --color-text-1000: rgb(0, 0, 0);
    --color-text-600: rgb(80, 80, 100);
    --color-text-300: rgb(150, 150, 170);
    --color-neutral-400: rgb(44, 44, 68);
    --color-neutral-200: rgb(150, 150, 170);
    --color-neutral-100: rgb(205, 205, 215);
    --color-neutral-50: rgb(246, 246, 246);
    --color-interactive-200: rgb(23, 119, 248);
    --color-interactive-100: rgb(144, 206, 254);
    --color-danger-200: rgb(229, 86, 54);
    --color-danger-50: rgb(255, 240, 237);
    --color-success-50: rgb(234, 255, 248);
    --color-warning-100: rgb(255, 227, 127);
    --color-warning-50: rgb(255, 250, 219);
    --elevation-100: 0 1px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--color-main-white);
    font-family: "Public Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-1000);
    display: flex;
    flex-direction: column;
}

main {
    padding: 0 16px 128px 32px;
    flex: 1;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-weight: 700;
    font-size: 2rem;
}

h2 {
    font-weight: 700;
    font-size: 1.75rem;
}

h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

section {
    margin-bottom: 1em;
}

ul, ol {
    margin: 0;
}

pre {
    white-space: pre-wrap;
    padding: 1rem;
    overflow-x: auto;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-neutral-100);
    border-radius: 6px;
    font-size: small;
}


.swagger-iframe {
    width: 100%;
    border: 1px solid var(--color-neutral-400);
    height: 60vh;
}

.swagger-iframe-gate {
    height: 60vh;
}

.swagger-iframe-platform {
    height: 68vh;
}

.logo {
    display: block;
    height: 18px;

    img {
        height: 18px;
    }
}

.site-footer {
    background-color: var(--color-main-black);
    color: var(--color-text-1);
    padding: 16px 32px 16px 24px;

    .footer-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .external-link {
        color: var(--color-text-1);
        text-decoration: none;

        &:hover {
            color: var(--color-text-300);
        }
    }

    .footer-divider {
        border-top: 1px solid var(--color-text-300);
        margin: 1rem 0;
    }

    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            a {
                text-decoration: none;
                color: var(--color-text-1);

                &:hover {
                    color: var(--color-text-300);
                }
            }
        }
    }
}

.info-banner {
    background: var(--color-warning-50);
    padding: 12px 24px;
    border-top: 1px solid var(--color-warning-100);
    border-bottom: 1px solid var(--color-warning-100);
}

.info-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-banner-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.info-banner-text {
    flex: 1;
}

.info-banner-content a {
    color: var(--color-interactive-200);
    text-decoration: underline;
}

.info-banner-content a:hover {
    color: var(--color-text-1000);
}

.desktop-visible {
    display: none
}

@media (min-width: 1110px) {
    main {
        margin-left: 20%;
        margin-right: 20%;
    }

    .desktop-visible {
        display: block;
    }

    .app-nav {
        background-color: var(--color-main-black);
        color: var(--color-text-1);
        padding: 0 32px 0 24px;
        position: relative;

        ul {
            display: flex;
            align-items: center;
            height: 48px;
            padding: 0;
            list-style: none;
            overflow-x: auto;
            overflow-y: hidden;

            li {
                white-space: nowrap;

                &:first-of-type {
                    margin-right: 8px;
                }

                &:not(:first-of-type) {
                    height: 48px;
                    line-height: 48px;
                    margin: 0 16px;
                }

                &.active a {
                    color: var(--color-main-turquoise);
                }
            }
        }

        a {
            color: var(--color-text-1);
            text-decoration: none;
            transition: color 100ms;

            &:hover {
                color: var(--color-text-300)
            }
        }

        .language-selector {
            position: absolute;
            line-height: 48px;
            height: 48px;
            color: var(--color-text-1);
            right: 32px;
            display: flex;
            align-items: center;
        }

        .language-icon {
            cursor: pointer;
            padding-left: 6px;
            padding-top: 19px;
        }

        .globe-icon {
            height: 18px;
            padding-right: 8px;
        }

        .toggle-language {
            display: none;
        }

        .language-dropdown {
            display: none;
            position: absolute;
            border: 1px solid var(--color-text-300);
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            right: 20px;
            height: 66px;
            width: 95px;
            top: 40px;
            text-align: center;
        }

        .language-dropdown li {
            background-color: var(--color-main-white);
        }


        .language-dropdown li:first-of-type {
            margin: 0;
            line-height: 2;
            height: 32px;
        }

        .language-dropdown li:not(:first-of-type) {
            margin: 0;
            line-height: 2;
            height: 32px;
        }

        .language-dropdown a {
            color: var(--color-text-1000);

        }

        .toggle-language:checked ~ .language-dropdown {
            display: block;
        }


    }
}

.mobile-visible {
    display: none;
}

@media (max-width: 1109px) {
    .mobile-visible {
        display: flex;
    }

    body {
        .linebreak {
            word-break: break-all;
        }
    }

    .topbar {
        position: relative;
        background-color: var(--color-main-black);
        color: var(--color-text-1);
        padding: 0 16px 0 20px;
        align-items: center;
        justify-content: space-between;
        height: 48px;

        .hamburger-icon {
            height: 28px;
            cursor: pointer;
        }
    }

    .nav {
        display: none;
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;

        ul {
            background-color: var(--color-main-black);
            color: var(--color-text-1);
            list-style: none;
            padding: 0;

            li {
                height: 48px;
                align-content: center;
                text-align: right;
                padding-right: 20px;
                border-bottom: 1px solid var(--color-neutral-400);

                &.active a {
                    color: var(--color-main-turquoise);
                }
            }
        }

        a {
            color: var(--color-text-1);
            text-decoration: none;
            transition: color 100ms;

            &:hover {
                color: var(--color-text-300)
            }
        }
    }

    .toggle {
        display: none;
    }

    .toggle:checked ~ .nav {
        display: block;
    }

    .language-selection-mobile {
        display: flex;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
        justify-content: flex-end;
        height: 75px;
        align-items: center;
    }

    ul.language-selection-mobile li {
        display: inline;
        border-bottom: none;
    }
}

/* Accessibility utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mermaid diagram accessibility */
figure[role="img"] {
    margin: 2rem 0;
}

figure[role="img"] figcaption {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--color-neutral-50);
    border-left: 4px solid var(--color-interactive-200);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-600);
}

figure[role="img"] figcaption strong {
    color: var(--color-text-1000);
    font-weight: 600;
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

figure[role="img"] figcaption strong:first-child {
    margin-top: 0;
}