/*
 * ImageLab - Mobile Enhancements
 * Version: 1.1 - NAV SELECTOR FIX & OVERRIDE REMOVAL
 * Optional mobile-specific optimizations
 * Updated: March 2026
 *
 * USAGE: Load after 12-responsiveness.css and before 13-print.css
 *
 * CHANGES FROM v1.0:
 * ✅ FIXED: Safe-area block targeted .mobile-menu which doesn't exist.
 *           04-header.css already handles .main-nav safe-area padding
 *           (padding-top: calc(5rem + env(safe-area-inset-top))).
 *           The duplicate .mobile-menu block has been removed entirely.
 * ✅ REMOVED: .main-nav a padding override (0.75rem 1rem + display: flex).
 *            04-header.css sets padding: 1rem 1.25rem on .main-nav a at mobile
 *            and uses justify-content: space-between for the chevron arrow.
 *            This file was overriding to smaller padding, breaking the chevron
 *            alignment and reducing the touch target size.
 * ✅ REMOVED: .back-to-top width/height/position override from the mobile block.
 *            09-page-specific.css owns all back-to-top sizing at mobile.
 *            The safe-area bottom/right adjustment is kept since that is NOT
 *            in 09-page-specific.css.
 *
 * PURPOSE: iOS fixes, touch targets, form optimizations, and safe-area support
 * for elements that are NOT already handled by their own component CSS files.
 */

/* ============================================
 * MOBILE-ONLY ENHANCEMENTS
 * ============================================ */

@media (max-width: 767px) {
    /* ============================================
     * iOS SPECIFIC FIXES
     * ============================================ */

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    * {
        -webkit-tap-highlight-color: rgba(183, 148, 246, 0.2);
    }

    button,
    input[type="submit"],
    input[type="button"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* ============================================
     * ENHANCED READABILITY
     * ============================================ */

    .glass-card,
    .service-detail-item {
        background: rgba(15, 22, 35, 0.90) !important;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    a {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ============================================
     * ENHANCED TOUCH TARGETS
     * NOTE: .main-nav a touch targets are owned by 04-header.css.
     *       Only non-nav elements are adjusted here.
     * ============================================ */

    .footer-links a,
    .footer-contact a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
    }

    /* ============================================
     * IMPROVED SPACING
     * ============================================ */

    .section-padding {
        padding: 3rem 0;
    }

    .services-grid {
        gap: 2rem;
    }

    /* ============================================
     * FORM OPTIMIZATIONS
     * ============================================ */

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
        min-height: 44px;
        padding: 12px 16px;
    }

    button[type="submit"],
    input[type="submit"] {
        width: 100%;
        min-height: 48px;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    /* ============================================
     * PERFORMANCE OPTIMIZATIONS
     * ============================================ */

    .fade-in-element {
        transition-duration: 0.4s;
    }

    .hero-image {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }

    body,
    .container {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
 * VERY SMALL SCREENS (320px–360px)
 * ============================================ */

@media (max-width: 360px) {
    .container {
        padding: 0 0.875rem;
    }

    .hero-content-wrapper .hero-content {
        padding: 1.125rem;
        margin: 0 0.625rem;
    }

    .hero-content-wrapper .hero-cta .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* ============================================
 * LANDSCAPE MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .section-padding {
        padding: 2rem 0;
    }

    .hero-content-wrapper {
        padding: 1.25rem 0;
    }

    .hero-content-wrapper .hero-content {
        padding: 1.125rem 1.5rem;
        max-width: 700px;
    }

    .hero-content-wrapper .hero-content h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .hero-content-wrapper .hero-description {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }
}

/* ============================================
 * SAFE AREA SUPPORT (iOS Notch / Dynamic Island)
 *
 * NOTE: .main-nav safe-area padding is already handled in 04-header.css:
 *   padding-top: calc(5rem + env(safe-area-inset-top))
 * The rules here cover elements NOT in 04-header.css.
 * ============================================ */

@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: calc(1rem + env(safe-area-inset-top));
    }

    .site-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    /*
     * Back-to-top safe-area position adjustment.
     * Size/base position is owned by 09-page-specific.css.
     * Only the safe-area offset is added here.
     */
    .back-to-top {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        right: calc(1.5rem + env(safe-area-inset-right));
    }

    .skip-link:focus {
        top: env(safe-area-inset-top, 0);
    }
}

/* ============================================
 * ACCESSIBILITY ENHANCEMENTS
 * ============================================ */

@media (max-width: 767px) {
    a:focus-visible,
    button:focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

/* ============================================
 * PRINT OVERRIDES FOR MOBILE
 * ============================================ */

@media print {
    .back-to-top {
        display: none !important;
    }

    .main-nav a,
    .footer-links a {
        min-height: auto;
        padding: 0;
    }
}

/* ============================================
 * REDUCED MOTION SUPPORT
 * ============================================ */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    a,
    button {
        transition: color 0.1s, background-color 0.1s, border-color 0.1s;
    }
}

/* ============================================
 * HIGH CONTRAST MODE
 * ============================================ */

@media (max-width: 767px) and (prefers-contrast: high) {
    .glass-card,
    .hero-content,
    .service-detail-item {
        background: rgba(0, 0, 0, 0.95) !important;
        border-width: 2px;
    }

    .btn {
        border-width: 2px;
    }
}