/* 
  Mobile Surgical Optimization 
  Focus: Performance, CLS Stability, and Accessibility
*/

/* 1. Mobile Tap Targets (WCAG 2.1 AA focus) */
@media (max-width: 768px) {

    /* Navbar links */
    #mobile-menu a,
    #global-header a,
    nav a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Footer Social Links */
    footer .flex.gap-4 a {
        min-width: 48px !important;
        min-height: 48px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Generic buttons & CTAs */
    button,
    .btn,
    a[class*="bg-gpGreen"],
    a[class*="bg-[#166534]"] {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 2. Mobile Contrast Adjustments (High Glare legibility) */
    .text-gray-600,
    .text-gray-500 {
        color: #444444 !important;
        /* Darker for mobile glare */
    }

    body.bg-black .text-gray-400,
    body.bg-gpBlack .text-gray-300 {
        color: #e5e7eb !important;
    }
}

/* 3. CLS & Visual Stability */
img {
    content-visibility: auto;
}

/* Reserve space for icons */
.fa,
.fas,
.far,
.fab {
    display: inline-block;
    min-width: 1em;
}

/* 4. Font Rendering Optimization */
/* Already applied in main CSS, but ensuring it's global */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}