/**
 * Mobile & Responsive Improvements
 * Ensures great UX on all screen sizes
 */

/* ========== RESPONSIVE IMAGES ========== */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent layout shift */
img[width][height] {
    height: auto;
}

/* ========== TOUCH TARGETS ========== */
/* Minimum 44x44px for touch accessibility */
button,
a.button,
input[type="button"],
input[type="submit"],
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
}

/* Icon buttons */
button:not(.btn-text),
a.icon-button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========== MOBILE-FRIENDLY TABLES ========== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table thead {
        display: none;
        /* Hide headers on mobile, show data inline */
    }

    table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.75rem;
    }

    table td {
        display: block;
        text-align: right;
        padding: 0.5rem;
        border: none;
    }

    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: #6b7280;
    }
}

/* ========== CONTAINER FIXES ========== */
.container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========== PREVENT HORIZONTAL SCROLL ========== */
body {
    overflow-x: hidden;
}

* {
    max-width: 100%;
}

/* Long words break */
.entry-content,
.topic-content,
.comment-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ========== MOBILE SPACING ========== */
@media (max-width: 768px) {

    /* Reduce spacing on mobile */
    .space-y-8>*+* {
        margin-top: 1.5rem;
    }

    .space-y-6>*+* {
        margin-top: 1rem;
    }

    /* Smaller padding */
    .p-6 {
        padding: 1rem;
    }

    .p-8 {
        padding: 1.5rem;
    }

    /* Smaller text */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .text-3xl {
        font-size: 1.75rem;
    }

    /* Responsive Typography for readability on mobile */
    .entry-content p,
    .message-bubble p,
    .standard-text {
        font-size: 15px;
        line-height: 1.65;
    }
}

/* ========== VERY SMALL SCREENS ========== */
@media (max-width: 480px) {

    .entry-content p,
    .message-bubble p,
    .standard-text {
        font-size: 14.5px;
        line-height: 1.7;
    }
}

/* ========== MOBILE NAVIGATION SPACING ========== */
@media (max-width: 768px) {

    /* Add bottom padding to prevent content hiding behind mobile nav */
    body {
        padding-bottom: 80px;
    }
}

/* ========== SAFE AREA INSETS (iPhone notch) ========== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    @media (max-width: 768px) {
        body {
            padding-bottom: max(80px, env(safe-area-inset-bottom));
        }
    }
}

/* ========== SMOOTH SCROLLING ========== */
html {
    scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ========== FOCUS VISIBLE (Accessibility) ========== */
*:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

*:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* ========== LOADING SKELETON STYLES ========== */
.skeleton {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

.dark .skeleton {
    background: linear-gradient(90deg,
            #2a3749 25%,
            #36393f 50%,
            #2a3749 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
    width: 100%;
}

/* ========== RESPONSIVE UTILITY CLASSES ========== */
@media (max-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }

    .md\:flex {
        display: flex !important;
    }
}