/* Global Mobile Responsive Styles for Natroy Site */
/* Apply to all pages for consistent mobile experience */

/* Base Mobile Styles */
@media (max-width: 1024px) {
    /* Navigation */
    .main-header .main-menu {
        display: none;
    }
    
    .mobile-nav-toggler {
        display: block !important;
    }
    
    /* Container adjustments */
    .auto-container {
        padding: 0 20px;
    }
    
    /* Section spacing */
    section {
        padding: 60px 0 !important;
    }
}

/* Tablet View */
@media (max-width: 768px) {
    /* Typography */
    h1, .h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: 24px !important;
    }
    
    h4, .h4 {
        font-size: 20px !important;
    }
    
    /* Grid layouts */
    .row > [class*='col-'] {
        margin-bottom: 30px;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 20px;
    }
    
    .contact-form .form-group {
        width: 100% !important;
    }
    
    /* Buttons */
    .btn, .theme-btn {
        padding: 12px 25px !important;
        font-size: 15px !important;
        width: 100%;
        text-align: center;
    }
    
    /* Cards and boxes */
    .service-block,
    .feature-block,
    .news-block,
    .team-block {
        margin-bottom: 30px;
    }
    
    /* Tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Contact specific */
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer */
    .main-footer .widgets-section .row > div {
        margin-bottom: 40px;
    }
    
    .footer-bottom .text {
        text-align: center !important;
        margin-bottom: 10px;
    }
}

/* Mobile Phone View */
@media (max-width: 480px) {
    /* Typography - Smaller sizes */
    h1, .h1 {
        font-size: 26px !important;
    }
    
    h2, .h2 {
        font-size: 22px !important;
    }
    
    h3, .h3 {
        font-size: 20px !important;
    }
    
    h4, .h4 {
        font-size: 18px !important;
    }
    
    p, body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Container padding */
    .auto-container {
        padding: 0 15px;
    }
    
    /* Section padding */
    section {
        padding: 40px 0 !important;
    }
    
    /* Forms - Prevent zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Buttons */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn, .theme-btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Navigation */
    .main-header {
        padding: 10px 0;
    }
    
    .main-header .logo img {
        max-height: 40px;
    }
    
    /* Banner/Hero sections */
    .banner-section,
    .page-title {
        padding: 60px 0 !important;
        min-height: auto !important;
    }
    
    .banner-section h1 {
        font-size: 28px !important;
    }
    
    /* Service and feature blocks */
    .service-block,
    .feature-block {
        padding: 20px !important;
    }
    
    /* Contact form specific */
    .contact-form .form-group input,
    .contact-form .form-group select,
    .contact-form .form-group textarea {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom */
    }
    
    /* Modal and popups */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    /* Tables - Stack on mobile */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }
    
    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table-responsive tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    
    .table-responsive td {
        border: none;
        position: relative;
        padding-left: 50%;
    }
    
    .table-responsive td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: bold;
    }
    
    /* Footer */
    .main-footer {
        text-align: center;
    }
    
    .main-footer .footer-column {
        margin-bottom: 30px;
    }
    
    .main-footer .social-links {
        justify-content: center;
    }
    
    /* Overflow prevention */
    * {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* iPhone X and similar notch handling */
@media (max-width: 375px) {
    .auto-container {
        padding: 0 12px;
    }
    
    h1, .h1 {
        font-size: 24px !important;
    }
    
    h2, .h2 {
        font-size: 20px !important;
    }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .banner-section,
    .page-title {
        min-height: 50vh !important;
        padding: 30px 0 !important;
    }
    
    .banner-section h1 {
        font-size: 24px !important;
    }
}

/* Fix for horizontal scrolling */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Ensure touch-friendly tap targets */
@media (pointer: coarse) {
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link,
    .dropdown-item {
        padding: 12px 16px !important;
    }
}