/*
 * responsive.css
 * Contains all @media queries for adapting the layout
 * to various screen sizes, primarily targeting mobile devices.
 */

@media (max-width: 768px) {
    body {
        padding: 0.5em;
    }
    header h1 {
        font-size: 2em;
    }

    #api-list {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .api-group h2 {
        font-size: 1.6em;
    }
     .api-group h3 {
        font-size: 1.3em;
     }

    .api-endpoint {
         padding: 1em;
         border-radius: 12px;
    }
    .api-endpoint h3 {
        font-size: 1.1em;
    }
    .api-endpoint .method-path {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }
     .api-endpoint .method {
        margin-right: 0;
        margin-bottom: 0;
     }
     .api-endpoint .path {
        width: 100%;
        box-sizing: border-box;
     }
     .api-endpoint pre {
        padding-right: 1em;
     }

     .copy-button {
         position: absolute;
         top: auto;
         bottom: 0.8em;
         right: 0.8em;
         opacity: 1;
         transform: none;
     }

     .api-test-area .parameters {
         flex-direction: column;
         gap: 0.8em;
     }
     .api-test-area .param-input {
         flex-direction: column;
         align-items: flex-start;
         gap: 0.2em;
     }
     .api-test-area .param-input input[type="text"] {
         width: 100%;
         min-width: auto;
     }

    #asset-list-container ul {
        grid-template-columns: 1fr;
        gap: 0.8em;
    }
     #asset-list-container li {
         padding: 0.8em;
         border-radius: 12px;
     }
     
     #back-to-top {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1.3em;
     }

    #categories-nav {
        justify-content: space-between;
        padding: 0.8em 0.5em;
    }
    .scroll-arrow {
        width: 25px;
        height: 25px;
        font-size: 1em;
    }
    #categories-list {
        gap: 1.2em;
    }
}