/* ===== MOBILE RESPONSIVE CSS ===== */
/* This file contains additional mobile-specific styles */

/* Mobile-first approach */
@media (max-width: 767px) {
    /* Ensure proper mobile rendering */
    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Better mobile typography */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* Mobile-friendly headings */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* Mobile-friendly links */
    a {
        word-wrap: break-word;
    }
    
    /* Mobile-friendly images */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* Mobile-friendly tables */
    table {
        font-size: 12px;
    }
    
    /* Mobile-friendly forms */
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        max-width: 100%;
    }
    
    /* Mobile-friendly buttons */
    .btn, button {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 6px;
    }
    
    /* Mobile-friendly cards */
    .card {
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    /* Mobile-friendly navigation */
    .nav {
        flex-direction: column;
    }
    
    .nav-item {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Mobile-friendly pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-link {
        min-width: 40px;
        text-align: center;
        margin: 2px;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .trending-area .container {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .person-card {
        margin-bottom: 25px;
    }
    
    .article-block {
        margin-bottom: 30px;
    }
}

/* Large mobile devices */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .trending-area .container {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .person-card {
        padding: 20px !important;
    }
    
    .article-block {
        padding: 20px;
    }
}

/* Small mobile devices */
@media (max-width: 575px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .trending-area .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .person-card {
        padding: 15px !important;
    }
    
    .article-block {
        padding: 15px;
    }
    
    .trending-tittle {
        padding: 15px 10px;
    }
    
    .trending-tittle strong {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* Mobile landscape orientation */
@media (max-width: 767px) and (orientation: landscape) {
    .mobile-menu {
        max-height: 70vh;
        padding-top: 60px;
    }
    
    .mobile-menu ul li a {
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* Mobile portrait orientation */
@media (max-width: 767px) and (orientation: portrait) {
    .mobile-menu {
        max-height: 80vh;
        padding-top: 80px;
    }
    
    .mobile-menu ul li a {
        padding: 18px 20px;
        font-size: 18px;
    }
}

/* High DPI mobile devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mobile-menu-toggle {
        font-size: 28px;
    }
    
    .mobile-menu ul li a {
        font-size: 20px;
    }
}

/* Mobile devices with notches */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        .mobile-menu {
            padding-top: max(80px, env(safe-area-inset-top));
            padding-left: max(20px, env(safe-area-inset-left));
            padding-right: max(20px, env(safe-area-inset-right));
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }
        
        .mobile-menu-toggle {
            margin-top: max(10px, env(safe-area-inset-top));
        }
    }
}

/* Mobile devices with home indicators */
@media (max-width: 767px) {
    .mobile-menu {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Mobile performance optimizations */
@media (max-width: 767px) {
    /* Reduce motion for better performance */
    .bounce-animate,
    .heartbeat,
    .rotateme {
        animation: none;
    }
    
    /* Optimize transitions */
    * {
        transition: none !important;
    }
    
    /* Keep essential transitions */
    .mobile-menu-toggle,
    .mobile-menu,
    .mobile-menu ul li a,
    .btn:hover,
    .boxed-btn:hover {
        transition: all 0.3s ease !important;
    }
    
    /* Reduce box shadows */
    .block-card,
    .person-card,
    .card {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    /* Disable hover effects on mobile */
    .block-card:hover,
    .person-card:hover,
    .card:hover {
        transform: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
}

/* Mobile accessibility improvements */
@media (max-width: 767px) {
    /* Better focus states */
    .mobile-menu-toggle:focus,
    .mobile-menu ul li a:focus,
    .btn:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 3px solid #fc3f00;
        outline-offset: 2px;
    }
    
    /* Improve text contrast */
    .text-muted {
        color: #495057 !important;
    }
    
    /* Better link visibility */
    a:not(.btn):not(.boxed-btn) {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    
    /* Improve button contrast */
    .btn, .boxed-btn {
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    /* Better form labels */
    label {
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }
    
    /* Better form spacing */
    .form-group {
        margin-bottom: 20px;
    }
}

/* Mobile utility classes */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }
    
    .d-mobile-block {
        display: block !important;
    }
    
    .d-mobile-flex {
        display: flex !important;
    }
    
    .d-mobile-inline {
        display: inline !important;
    }
    
    .d-mobile-inline-block {
        display: inline-block !important;
    }
    
    .text-mobile-center {
        text-align: center !important;
    }
    
    .text-mobile-left {
        text-align: left !important;
    }
    
    .text-mobile-right {
        text-align: right !important;
    }
    
    .text-mobile-justify {
        text-align: justify !important;
    }
    
    .w-mobile-100 {
        width: 99% !important;
    }
    
    .w-mobile-auto {
        width: auto !important;
    }
    
    .h-mobile-auto {
        height: auto !important;
    }
    
    .p-mobile-0 {
        padding: 0 !important;
    }
    
    .p-mobile-1 {
        padding: 4px !important;
    }
    
    .p-mobile-2 {
        padding: 8px !important;
    }
    
    .p-mobile-3 {
        padding: 12px !important;
    }
    
    .m-mobile-0 {
        margin: 0 !important;
    }
    
    .m-mobile-1 {
        margin: 4px !important;
    }
    
    .m-mobile-2 {
        margin: 8px !important;
    }
    
    .m-mobile-3 {
        margin: 12px !important;
    }
    
    .border-mobile-0 {
        border: 0 !important;
    }
    
    .rounded-mobile-0 {
        border-radius: 0 !important;
    }
    
    .rounded-mobile-1 {
        border-radius: 4px !important;
    }
    
    .rounded-mobile-2 {
        border-radius: 8px !important;
    }
    
    .shadow-mobile-0 {
        box-shadow: none !important;
    }
    
    .shadow-mobile-1 {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .shadow-mobile-2 {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    }
}

/* Mobile print styles */
@media print and (max-width: 767px) {
    .mobile-menu,
    .mobile-menu-toggle,
    .left-ad,
    .right-ad,
    .ad-block,
    .btn,
    .boxed-btn {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .trending-area .container {
        margin: 0 !important;
    }
    
    .person-card {
        break-inside: avoid;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        padding: 15px;
    }
    
    .article-block {
        break-inside: avoid;
        margin-bottom: 20px;
    }
    
    .trending-area {
        break-inside: avoid;
    }
    
    .trending-top {
        break-inside: avoid;
        margin-bottom: 20px;
    }
    
    .trending-bottom {
        break-inside: avoid;
    }
    
    .trand-right-single {
        break-inside: avoid;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .trand-right-single:last-child {
        border-bottom: none;
    }
    
    /* Better print typography */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        font-weight: 600 !important;
    }
    
    p {
        color: #333 !important;
        line-height: 1.6 !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    /* Print spacing */
    .mb-30, .mb-35 {
        margin-bottom: 20px !important;
    }
    
    .mt-5, .my-5 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .p-4 {
        padding: 15px !important;
    }
    
    .p-3 {
        padding: 12px !important;
    }
    
    .p-2 {
        padding: 8px !important;
    }
    
    .p-1 {
        padding: 4px !important;
    }
}