/* Mobile Improvements for SOLO API Documentation */

/* Mobile-first responsive design */
@media screen and (max-width: 768px) {
    
    /* Stack query parameters and example blocks vertically on mobile */
    .sd-row {
        flex-direction: column !important;
    }
    
    /* Make columns full width on mobile */
    .sd-col-7, .sd-col-5 {
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 1rem;
    }
    
    /* Remove sticky positioning on mobile */
    .example-card {
        position: static !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    /* Improve table scrolling on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better code block handling */
    .highlight pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
    
    /* Improve sidebar navigation */
    .bd-sidebar-primary {
        z-index: 1050;
    }
    
    /* Better touch targets for buttons */
    .parameters-child-toggle,
    .attribute-toggle-button {
        min-height: 44px;
        padding: 8px 12px;
        touch-action: manipulation;
    }
    
    /* Improve dropdown spacing */
    .dropdown {
        margin-bottom: 1rem;
    }
    
    /* Better form inputs on mobile */
    input[type="text"],
    input[type="search"] {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Improve tooltip positioning */
    .tippy-box {
        max-width: 95vw !important;
    }

    .parameter-item,
    .parameter-name,
    .parameter-description {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Tablet improvements */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    /* Adjust column widths for tablet */
    .sd-col-7 {
        width: 60% !important;
    }
    
    .sd-col-5 {
        width: 40% !important;
    }
    
    /* Less aggressive sticky positioning */
    .example-card {
        top: 2rem;
        max-height: calc(100vh - 4rem);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    
    /* Better touch targets */
    a, button, .btn {
        min-height: 44px;
        padding: 8px 12px;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    a:hover {
        background-color: initial;
    }
    
    /* Improve scrollable areas */
    .bd-sidebar,
    .example-card {
        -webkit-overflow-scrolling: touch;
    }
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    /* Sharper borders */
    .border {
        border-width: 0.5px;
    }
}

/* Landscape mobile optimizations */
@media screen and (max-width: 768px) and (orientation: landscape) {
    
    /* Reduce top spacing in landscape */
    .example-card {
        margin-top: 0.5rem;
    }
    
    /* Compact sidebar in landscape */
    .bd-sidebar-primary {
        font-size: 0.9rem;
    }
}