/* Mobile-only styles - Only applies to screens 768px and below */
@media (max-width: 768px) {
    /* Global container styles */
    .main,
    .posts-list,
    .tags-list,
    .tag-posts,
    .home-posts,
    .search-content,
    .archive,
    .terms-tags {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px !important;
    }

    /* Post container specific */
    .post-single {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .post-content {
        padding: 0 24px !important;
    }

    /* Header area padding and layout */
    .header {
        padding: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    .header .logo {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .header .logo a {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .theme-toggle {
        flex-shrink: 0 !important;
        margin-left: 12px !important;
    }

    /* Content elements */
    .post-content,
    .tag-content,
    .search-results,
    .archive-content {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Lists */
    .post-content ul,
    .post-content ol {
        padding: 0 0 0 20px !important;
        margin: 16px 0 !important;
    }

    /* Post entries in lists */
    .post-entry {
        padding: 24px 0 !important;
        margin: 0 !important;
    }

    /* Search result items */
    .search-result-item {
        padding: 24px 0 !important;
        margin: 0 !important;
    }

    /* Tag cloud and tag items */
    .terms-tags {
        margin-top: 24px !important;
    }

    .terms-tags .tag {
        margin: 8px !important;
    }

    /* Full-width elements */
    .post-content img,
    .post-content table,
    .post-content pre,
    .post-content blockquote {
        width: calc(100% + 48px) !important;
        max-width: calc(100% + 48px) !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    /* Code blocks */
    .post-content pre {
        padding: 24px !important;
        border-radius: 0 !important;
    }

    /* Tables */
    .post-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 24px 0 !important;
        border-radius: 0 !important;
        font-family: inherit !important;
        font-size: 16px !important;
    }

    .post-content table th,
    .post-content table td {
        min-width: 120px !important;
        padding: 12px !important;
        line-height: 1.6 !important;
        white-space: nowrap !important;
        font-family: inherit !important;
    }

    .post-content table th {
        font-weight: 600 !important;
        background: var(--entry) !important;
        font-size: 16px !important;
    }

    /* Table container for better scrolling experience */
    .post-content .table-wrapper {
        position: relative !important;
        width: calc(100% + 48px) !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
        padding: 0 24px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Blockquotes */
    .post-content blockquote {
        padding: 20px 24px !important;
        border-radius: 0 !important;
    }

    /* Footer area */
    .footer {
        padding: 24px !important;
    }

    /* LaTeX formula handling */
    .post-content .katex-display {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
    }

    .post-content .katex-display > .katex {
        white-space: nowrap !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    /* Global container styles */
    .main,
    .posts-list,
    .tags-list,
    .tag-posts,
    .home-posts,
    .search-content,
    .archive,
    .terms-tags {
        padding: 20px !important;
    }

    /* Post container specific */
    .post-single {
        padding: 0 !important;
    }

    .post-content {
        padding: 0 20px !important;
    }

    /* Header area padding */
    .header {
        padding: 20px !important;
    }

    .header .logo {
        gap: 8px !important;
    }

    .theme-toggle {
        margin-left: 8px !important;
    }

    /* Post entries in lists */
    .post-entry {
        padding: 20px 0 !important;
    }

    /* Search result items */
    .search-result-item {
        padding: 20px 0 !important;
    }

    /* Full-width elements */
    .post-content img,
    .post-content table,
    .post-content pre,
    .post-content blockquote {
        width: calc(100% + 40px) !important;
        max-width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }

    /* Code blocks and blockquotes */
    .post-content pre,
    .post-content blockquote {
        padding: 20px !important;
    }

    /* Content scaling */
    .post-content,
    .tag-content,
    .search-results,
    .archive-content {
        font-size: 15px !important;
    }

    /* Lists */
    .post-content ul,
    .post-content ol {
        padding: 0 0 0 20px !important;
    }

    /* Footer area */
    .footer {
        padding: 20px !important;
    }

    /* Tables for smaller screens */
    .post-content .table-wrapper {
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding: 0 20px !important;
    }

    .post-content table {
        font-size: 15px !important;
    }

    .post-content table th {
        font-size: 15px !important;
    }

    .post-content table th,
    .post-content table td {
        padding: 10px !important;
        min-width: 100px !important;
        line-height: 1.6 !important;
    }
}