/* Mobile Responsiveness CSS for Blazor Blog
   Supporting both RTL (Arabic) and LTR (English) layouts */

/* Tablet and smaller devices */
@media (max-width: 992px) {

    /* General mobile adjustments */
    body {
        font-size: 14px;
        margin-top: 0;
        padding-top: 0;
    }

    .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Header adjustments */
    .navbar-brand1 {
        font-size: 1.2rem;
        max-width: 180px;
        text-align: center;
    }

    .topnav {
        top: 0;
        height: auto;
    }

    /* Hide top bar on mobile */
    .top-bar {
        position: relative;
        display: none;
    }

    .nav-spacer {
        height: 56px;
    }

    /* Mobile navigation improvements */
    .navbar .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }

    /* RTL-specific mobile adjustments */
    .rtl-container {
        text-align: right;
    }

    .rtl-container .navbar .dropdown-menu {
        padding-right: 1rem;
        padding-left: 0;
    }

    /* Megamenu mobile enhancements */
    .megamenu {
        padding: 1rem 0;
        max-height: none;
        overflow-y: visible;
        position: static !important;
        box-shadow: none !important;
        border: none;
    }

    .dropdown-menu {
        position: static !important;
        top: auto !important;
    }

    .megamenu-section {
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
    }

    .megamenu-title {
        font-size: 0.9rem;
        padding-bottom: 5px;
        margin-bottom: 8px;
    }

    .megamenu-list li a {
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Better touch areas */
    .navbar-nav .nav-link {
        padding: 12px 15px;
    }

    /* Footer mobile adjustments */
    footer h5 {
        margin-bottom: 1rem;
        padding-bottom: 8px;
    }

    footer h5:after {
        width: 40px;
    }

    .footer-links li,
    .footer-posts li,
    .footer-contact li {
        margin-bottom: 8px;
    }

    /* Top bar content adjustments */
    .top-bar-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-bar-item {
        margin-bottom: 5px;
    }

    /* Better spacing on mobile */
    .row {
        margin-right: -10px;
        margin-left: -10px;
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    body {
        font-size: 13px;
        margin-top: 0;
        padding-top: 0;
    }

    .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    /* Smaller headings on very small screens */
    h1,
    .h1 {
        font-size: 1.75rem;
    }

    h2,
    .h2 {
        font-size: 1.5rem;
    }

    h3,
    .h3 {
        font-size: 1.25rem;
    }

    h4,
    .h4 {
        font-size: 1.15rem;
    }

    h5,
    .h5 {
        font-size: 1rem;
    }

    /* Adjust button sizes for better touch targets */
    .btn {
        padding: 0.375rem 0.75rem;
        min-height: 40px;
    }

    /* RTL specific small device fixes */
    .rtl-container .dropdown-menu {
        right: 0;
        left: auto;
    }

    /* Stack elements vertically on very small screens */
    .d-flex {
        flex-wrap: wrap;
    }

    /* Fix for touch areas - ensure they're large enough for fingers */
    a,
    button,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Enhance mobile forms */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
        height: 44px;
        padding: 10px 12px;
    }

    textarea {
        height: auto;
        min-height: 100px;
    }

    /* Improve form controls for touch */
    .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0.15rem;
    }

    /* RTL language specific adjustments for small screens */
    .rtl-container .has-megamenu .dropdown-menu.show {
        text-align: right;
    }

    /* Adjust navbar brand for very small screens */
    .navbar-brand1 {
        font-size: 1rem;
        max-width: 150px;
    }

    /* Footer adjustments for very small screens */
    footer {
        padding: 2rem 0 0;
    }

    /* Improve scrolling experience */
    .overflow-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Improve card display on mobile */
    .card {
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .card-body {
        padding: 15px;
    }

    /* Improve image display on mobile */
    .img-fluid {
        border-radius: 6px;
    }

    /* Adjust spacing for mobile */
    .mb-4 {
        margin-bottom: 15px !important;
    }

    .mt-4 {
        margin-top: 15px !important;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Extra small devices (phones, less than 420px) */
@media (max-width: 420px) {

    /* Further reduce font sizes */
    body {
        font-size: 12px;
        margin-top: 0;
        padding-top: 0;
    }

    h1,
    .h1 {
        font-size: 1.5rem;
    }

    h2,
    .h2 {
        font-size: 1.3rem;
    }

    h3,
    .h3 {
        font-size: 1.1rem;
    }

    h4,
    .h4 {
        font-size: 1rem;
    }

    h5,
    .h5 {
        font-size: 0.9rem;
    }

    /* Tighter spacing */
    .container {
        padding-right: 8px;
        padding-left: 8px;
    }

    .card-body {
        padding: 12px;
    }

    /* Smaller buttons */
    .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }

    /* Optimize navbar */
    .navbar-brand1 {
        font-size: 0.9rem;
        max-width: 130px;
    }

    /* Adjust spacing */
    .mb-4 {
        margin-bottom: 10px !important;
    }

    .mt-4 {
        margin-top: 10px !important;
    }

    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Optimize images */
    .img-fluid {
        border-radius: 4px;
    }
}

/* Remove scrollbar styling for megamenu */
.megamenu::-webkit-scrollbar {
    display: none;
}

.megamenu {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Add overlay effect when dropdown is open */
.dropdown-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1010;
}

/* Fix for dropdown positioning */
.navbar {
    z-index: 1030;
}

#top-navbar-menu {
    z-index: 1030;
}

.nav-spacer {
    z-index: 1;
}

/* Optimize images for mobile */
@media (max-width: 768px) {
    .img-fluid {
        max-width: 100%;
        height: auto;
    }

    /* Improve skeleton loading appearance */
    .skeleton-image {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 6px;
    }

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

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