/* Blog Mobile Responsiveness Fixes */

/* Override prose max-width to use full container width */
.prose {
    max-width: 100% !important;
}

/* Ensure no horizontal scroll on small screens */
@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }

    /* Fix prose content overflow issues */
    .prose {
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }

    /* Fix code blocks and preformatted text */
    .prose pre {
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .prose code {
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* Ensure images are responsive */
    .prose img,
    .prose picture,
    .prose video {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }

    /* Fix table overflow */
    .prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Fix very long URLs or text strings */
    .prose a {
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* Reduce margins on very small screens */
    .prose h1,
    .prose h2,
    .prose h3,
    .prose h4,
    .prose h5,
    .prose h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix container padding on extra small screens */
    @media (max-width: 400px) {
        .container {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
    }
}

/* Extra small screens (under 400px) */
@media (max-width: 400px) {
    /* Reduce font sizes slightly for better fit */
    .prose {
        font-size: 0.9rem;
    }

    /* Reduce heading sizes on very small screens */
    .prose h1 {
        font-size: 1.8rem !important;
    }

    .prose h2 {
        font-size: 1.5rem !important;
    }

    .prose h3 {
        font-size: 1.3rem !important;
    }

    /* Reduce button and interactive element sizes */
    .mobile-nav-item {
        padding: 6px 0;
    }

    .mobile-nav-item i {
        font-size: 1.1rem;
    }

    .mobile-nav-item span {
        font-size: 0.65rem;
    }
}

/* Landscape orientation on mobile devices */
@media (max-width: 896px) and (orientation: landscape) {
    .prose {
        font-size: 0.95rem;
    }

    /* Adjust container padding in landscape */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}