/**
 * Shri Jayam Associates - Responsive Stylesheets
 * Mobile-first & Desktop fluid adaptive stylesheet supporting:
 * - Small Mobile (320px - 480px)
 * - Standard Mobile & Phablet (481px - 767px)
 * - Tablet (768px - 1023px)
 * - Desktop (1024px - 1439px)
 * - Ultra-wide Displays (1440px+)
 */

/* ==========================================================================
   GLOBAL MOBILE RESET & BASE FLUID RULES (All Screens)
   ========================================================================== */
html, body {
    width: 100%;
    overflow-x: hidden;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure inputs do not trigger auto-zoom on iOS Safari */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    font-size: 16px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table container auto-scroll on narrow devices */
.table-responsive,
.bp-specs-grid-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   MOBILE DEVICES (320px to 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Headings fluid typography */
    h1, .hp-hero-h1, .ms-hero-title, .cta-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
        line-height: 1.25 !important;
    }

    h2, .section-title, .ms-section-title {
        font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
        line-height: 1.3 !important;
    }

    h3, .service-card-title, .ms-card-title, .business-card-title {
        font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
    }

    /* Sub-nav Brand Responsiveness */
    .sub-nav-brand-title {
        font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important;
    }

    .sub-nav-brand-subtitle {
        font-size: clamp(0.68rem, 2.8vw, 0.75rem) !important;
    }

    /* Top Bar Mobile Layout */
    .top-bar-left {
        flex-direction: column;
        gap: 6px;
        align-items: center;
        text-align: center;
    }

    .top-bar-container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* Main Header Layout */
    .header-container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo-area .brand-title {
        font-size: 1.1rem;
    }

    .logo-area .brand-subtitle {
        font-size: 0.72rem;
    }

    /* Hero Section Padding & CTA stack */
    .hp-hero, .ms-hero, .subpage-hero {
        padding: 2.5rem 0 3rem;
    }

    .ms-hero-desc {
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
    }

    .cta-buttons, .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .cta-buttons .btn, .hero-buttons .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Grid Layouts Stack */
    .grid, .hp-grid-3, .hp-grid-4, .hp-grid-2, .ms-grid-container, .ms-grid-2, .ms-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-contact-info li {
        justify-content: center;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* Card inner spacing & image alignment */
    .card, .ms-card, .service-card, .business-card-content, .bp-showcase {
        padding: 18px !important;
    }

    .bp-showcase-title {
        font-size: 1.25rem !important;
    }

    .ms-card {
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 8px;
    }

    .ms-card > img,
    .ms-card > div:has(img),
    .ms-card > .ms-card-image,
    .ms-card > .ms-card-img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   TABLET DEVICES (768px to 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 1.02rem;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.4rem; }

    .grid, .hp-grid-3, .hp-grid-4, .ms-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .footer-bottom-container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .cta-title {
        font-size: 2.25rem;
    }
}

/* ==========================================================================
   DESKTOP DEVICES (1024px and up)
   ========================================================================== */
@media (min-width: 1024px) {
    .mobile-toggle {
        display: none !important;
    }

    .desktop-nav {
        display: block !important;
    }

    .header-cta {
        display: block !important;
    }

    .mobile-nav {
        display: none !important;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1.25fr 1.5fr;
    }

    .container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   LARGE WIDE-SCREEN MONITORS (1440px and up)
   ========================================================================== */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }

    h1 { font-size: 3.5rem; }
}

/* ==========================================================================
   ACCESSIBILITY & TOUCH OPTIMIZATIONS FOR MOBILE & TABLETS
   ========================================================================== */
@media (max-width: 1023px) {
    .nav-link, 
    .btn, 
    .social-icon,
    .mobile-link,
    .mobile-dropdown-trigger {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    .logo-area {
        min-height: 44px;
    }

    .dropdown-menu {
        display: none !important;
    }
}