/* ============================================
   MOBILE OPTIMIZATION FIXES
   April 2026 — comprehensive mobile audit fixes
   ============================================ */

/* ============================================
   1. SCROLLABLE TAB NAVIGATION
   Fixes: About, ADU, Projects tab overflow
   ============================================ */

/* Generic scrollable tabs pattern */
.about-tabs,
.adu-tabs-container,
.adu-tabs,
.project-tabs,
.project-filter-tabs,
.tab-navigation,
.tabs-container,
.filter-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    white-space: nowrap;
    display: flex !important;
    gap: 0;
    padding-bottom: 2px;
}

.about-tabs::-webkit-scrollbar,
.adu-tabs-container::-webkit-scrollbar,
.adu-tabs::-webkit-scrollbar,
.project-tabs::-webkit-scrollbar,
.project-filter-tabs::-webkit-scrollbar,
.tab-navigation::-webkit-scrollbar,
.tabs-container::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar {
    display: none;
}

/* Ensure tab items don't wrap */
.about-tabs a,
.about-tabs button,
.adu-tabs a,
.adu-tabs button,
.adu-tabs-container a,
.adu-tabs-container button,
.project-tabs a,
.project-tabs button,
.project-filter-tabs a,
.project-filter-tabs button,
.tab-navigation a,
.tab-navigation button,
.tabs-container a,
.tabs-container button,
.filter-tabs a,
.filter-tabs button,
.tab-btn,
.filter-btn,
.project-tab {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Scroll fade indicator on the right edge */
@media (max-width: 768px) {
    .about-tabs-wrapper,
    .adu-tabs-wrapper,
    .project-tabs-wrapper,
    .tabs-wrapper {
        position: relative;
    }

    .about-tabs-wrapper::after,
    .adu-tabs-wrapper::after,
    .project-tabs-wrapper::after,
    .tabs-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to left, var(--primary-color, #1c3f60), transparent);
        pointer-events: none;
        z-index: 2;
    }
}

/* ============================================
   2. TAP TARGET SIZES
   Minimum 44x44px for all interactive elements
   ============================================ */

/* Hamburger menu — increase from 30x30 to 48x48 */
@media (max-width: 768px) {
    .menu-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 10px !important;
    }
}

/* Footer text links — add padding for tap targets */
footer a[href^="mailto:"],
footer a[href^="tel:"],
.footer-contact a {
    display: inline-block;
    padding: 8px 0;
    min-height: 44px;
    line-height: 28px;
}

/* Footer social media icons */
.footer-social .social-item a,
.footer-social .social-icon,
.sidenav-social .social-icon,
.sidenav-social-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
}

.footer-social .social-logo,
.sidenav-social .social-logo {
    width: 24px;
    height: 24px;
}

/* Contact form radio buttons — larger tap targets */
@media (max-width: 768px) {
    .form-group input[type="radio"],
    .form-group input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }

    /* Make the radio/checkbox label row a bigger tap target */
    .form-group label:has(input[type="radio"]),
    .form-group label:has(input[type="checkbox"]),
    .radio-option,
    .radio-label,
    .checkbox-label {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
        cursor: pointer;
        gap: 8px;
    }

    /* For radio groups where input and label are siblings */
    .form-group input[type="radio"] + label,
    .form-group input[type="checkbox"] + label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 4px;
        cursor: pointer;
    }

    /* Submit button */
    .form-group button[type="submit"],
    .submit-btn,
    button.cta-button {
        min-height: 48px !important;
    }

    /* Project card "Inquire" buttons */
    .project-card .cta-button,
    .project-card a.cta-button,
    .project-inquire-btn {
        min-height: 44px !important;
        padding: 10px 20px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   3. BLOG HERO FIX — content offset
   ============================================ */
@media (max-width: 768px) {
    .blog-hero .hero-content,
    .blog-page .hero-content,
    .blog-listing-hero .hero-content {
        left: 0 !important;
        right: 0 !important;
        padding: 0 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        position: relative !important;
    }

    .blog-hero h1,
    .blog-listing-hero h1 {
        font-size: 2rem !important;
    }

    .blog-hero .hero-content p,
    .blog-listing-hero p {
        font-size: 0.95rem;
    }

    /* Fix any global hero-content offset */
    .hero-content {
        left: auto !important;
        max-width: 100% !important;
    }
}

/* ============================================
   4. ADU HERO H1 FIX — prevent text clipping
   ============================================ */
@media (max-width: 768px) {
    .adu-hero h1,
    .adu-page .hero-content h1 {
        font-size: 2rem !important;
        word-break: break-word;
        padding-right: 8px;
    }
}

/* ============================================
   5. NAV ICON LINKS — increase tap area
   ============================================ */
@media (max-width: 768px) {
    .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 0;
    }

    .sidenav-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   6. GENERAL MOBILE TYPOGRAPHY SAFETY
   ============================================ */
@media (max-width: 768px) {
    /* Ensure minimum readable font size */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Prevent long words from overflowing containers */
    h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* ============================================
   7. IMAGE OPTIMIZATION
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

/* Social SVG icons sizing */
img.social-logo[src$=".svg"] {
    width: 22px;
    height: 22px;
}