/* 
 * Mobile Styles - Minimal Clean Version
 * Version: 3.0 - Safe for Material 9.7.x
 * Last Updated: January 2026
 * 
 * NOTE: Only includes safe mobile optimizations
 * Does NOT override any navigation/drawer styles
 */

/* ========================================================================
   MOBILE TYPOGRAPHY
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4, h5, h6 { font-size: 1.1rem; }
}

@media screen and (max-width: 60em) {
    body { font-size: 13px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}

/* ========================================================================
   MOBILE IMAGES
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ========================================================================
   MOBILE TABLES
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    .md-typeset table:not([class]) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table { font-size: 0.85rem; }
    th, td { padding: 0.4rem 0.6rem; }
}

/* ========================================================================
   MOBILE CODE BLOCKS
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    pre {
        font-size: 0.75rem;
        padding: 0.8rem;
        overflow-x: auto;
    }
    
    code {
        font-size: 0.85em;
        word-break: break-word;
    }
}

/* ========================================================================
   MOBILE FEEDBACK WIDGET
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    .feedback-widget {
        margin: 2rem 0 1rem 0;
        padding: 1.2rem 0.8rem;
    }
    
    .feedback-btn {
        flex: 1;
        min-width: 120px;
        padding: 0.8rem 1rem;
        min-height: 44px;
    }
    
    .star {
        font-size: 2rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .feedback-submit {
        width: 100%;
        padding: 0.9rem;
        min-height: 44px;
    }
}

/* ========================================================================
   MOBILE ADMONITIONS
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    .admonition {
        padding: 0.8rem;
        margin: 1rem 0;
        font-size: 0.9rem;
    }
}

/* ========================================================================
   DARK MODE MOBILE
   ======================================================================== */

@media screen and (max-width: 76.1875em) {
    [data-md-color-scheme="slate"] .feedback-widget {
        background-color: #2d2d2d;
        border-color: #ff5722;
    }
}

/* ========================================================================
   PRINT
   ======================================================================== */

@media print {
    .feedback-widget {
        display: none !important;
    }
}

/* ========================================================================
   VERY SMALL SCREENS
   ======================================================================== */

@media screen and (max-width: 360px) {
    body { font-size: 12px; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
}