/*
 * Mobile-Specific Styles
 * This file contains all mobile view formatting
 * Changes here apply only to mobile layouts (max-width: 768px)
 * 
 * This file should be loaded after the main style.css to ensure proper overrides
 */

/* Base font size increase of 20% for mobile */
@media (max-width: 768px) {
    html {
        font-size: 19.2px; /* 16px * 1.2 = 19.2px (20% increase) */
    }
    
    body {
        font-size: 19.2px; /* Base body font size increased by 20% */
        line-height: 1.5;
    }
    
    /* Increase all heading sizes proportionally */
    h1 {
        font-size: 38.4px !important; /* 32px * 1.2 */
    }
    
    h2 {
        font-size: 36px !important; /* 30px * 1.2 */
    }
    
    h3 {
        font-size: 24px !important; /* 20px * 1.2 */
    }
    
    h4 {
        font-size: 21.6px !important; /* 18px * 1.2 */
    }
    
    h5 {
        font-size: 19.2px !important; /* 16px * 1.2 */
    }
    
    h6 {
        font-size: 18px !important; /* 15px * 1.2 */
    }
    
    /* Increase paragraph and general text */
    p {
        font-size: 19.2px; !important;
    }
    
    /* Increase button text */
    .btn {
        font-size: 19.2px;
    }
    
    /* Increase form elements */
    input, textarea, select, .form-control {
        font-size: 19.2px;
    }
    
    /* Increase navigation text */
    .nav-link, .navbar-nav .nav-link, .main-nav a {
        font-size: 19.2px;
    }
    
    /* Increase card text */
    .card-body, .card-title, .card-text {
        font-size: 19.2px;
    }
    
    /* Increase list items */
    li, ul li, ol li {
        font-size: 20px; !important;
    }
    
    /* Increase small text classes */
    .text-sm, small {
        font-size: 18px !important; /* 14px * 1.2 */
    }
    
    /* Increase extra small text */
    .text-xs {
        font-size: 16px !important; /* 12px * 1.2 */
    }
    
    /* Increase large text */
    .text-lg {
        font-size: 22.8px !important; /* 19px * 1.2 */
    }
    
    /* Increase extra large text */
    .text-xl {
        font-size: 24px !important; /* 20px * 1.2 */
    }
    
    /* Increase breadcrumb text */
    .breadcrumb, .breadcrumb-item, .breadcrumb-item a {
        font-size: 19.2px;
    }
    
    /* Increase table text */
    table, th, td, .table {
        font-size: 19.2px;
    }
    
    /* Increase modal text */
    .modal-body, .modal-title, .modal-header {
        font-size: 19.2px;
    }
    
    /* Increase badge and label text */
    .badge, .label {
        font-size: 19.2px;
    }
    
    /* Increase listing item text */
    .listing-title, .listing-content, .listing-title a {
        font-size: 22px; !important;
    }
    
    /* Increase filter sidebar text */
    .filter-sidebar, .filter-section-title, .filter-options {
        font-size: 19.2px;
    }
    
    /* Increase time slot text */
    .time-slot {
        font-size: 19.2px;
    }
    
    /* Increase booking summary text */
    .booking-summary-title, .booking-summary-content {
        font-size: 19.2px;
    }
    
    /* Increase page header text */
    .page-header h1, .page-header h2 {
        font-size: 30px !important; /* Adjusted for mobile */
    }
    
    /* Increase footer text */
    footer, footer a, footer p {
        font-size: 21px;
    }
}

/* Additional mobile-specific adjustments for smaller screens */
@media (max-width: 575.98px) {
    html {
        font-size: 18px; /* Slightly smaller for very small screens, still 12.5% increase from 16px */
    }
    
    body {
        font-size: 14px; important;
    }
    
    h1 {
        font-size: 27px !important;
    }
    
    h2 {
        font-size: 33.6px !important; /* 28px * 1.2 */
    }
    
    h3 {
        font-size: 24px !important; /* 18px * 1.2 */
    }
    
    .page-header h1, .page-header h2 {
        font-size: 28px !important;
    }

    .base-structure-tag {
        font-size: 13px !important;
    }

    .sport-type-tag {
        font-size: 13px !important;
    }

    .court-size-tag {
        font-size: 13px !important;
    }

    .slot-item-text {
        font-size: 15px !important;
    }


}