/* ============================================
   PLATFORM-SPECIFIC STYLES
   ============================================ */

/* Platform Detection Classes
   - .platform-maui: Applied in MAUI app
   - .platform-web: Applied in WebUI
   - .platform-mobile-browser: Applied via JavaScript detection
   - .platform-android: Applied on Android devices (browser or MAUI)
   - .platform-ios: Applied on iOS devices (browser or MAUI)
*/

/* MAUI App Specific Styles */
.platform-maui body {
    /* MAUI WebView specific adjustments */
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    user-select: none; /* Prevent text selection in app */
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y pinch-zoom; /* Allow vertical scrolling and pinch-zoom, but enable touch for other interactions */
}

/* Ensure clickable elements work on iOS and Android */
.platform-maui button,
.platform-maui [role="button"],
.platform-maui .dropdown,
.platform-maui .dropdown-menu__item,
.platform-maui .class-filters__section-header,
.platform-maui .class-filters__checkbox-label,
.platform-maui .class-filters__remove-all,
.platform-maui .group-classes-page__filters-button,
.platform-maui .consumer-button,
.platform-maui .services-carousel__card,
.platform-maui .card,
.platform-maui article[role="button"],
.platform-maui [onclick],
.platform-maui [@onclick] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    cursor: pointer;
    pointer-events: auto !important;
    -webkit-user-select: none;
    user-select: none;
}

.platform-maui .home-page__reviews > :not(.section-header):last-child {
    /* MAUI may need different padding due to safe areas */
    padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
}

/* Mobile Browser Specific Styles */
.platform-mobile-browser body {
    /* Mobile browser specific adjustments */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.10);
}

/* Desktop Browser Specific Styles */
.platform-web body {
    /* Desktop browser specific adjustments */
    cursor: default;
}

/* Responsive Breakpoints - Platform-specific adjustments */
@media (max-width: 48rem) {
    /* MAUI specific mobile adjustments */
    .platform-maui .home-page__reviews > :not(.section-header):last-child {
        padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
    }
}

/* Touch Device Detection */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices (mobile browsers and MAUI) */
    .home-page__reviews {
        /* Adjust for touch interactions */
        -webkit-overflow-scrolling: touch;
    }
}

/* Non-touch Device Detection */
@media (hover: hover) and (pointer: fine) {
    /* Desktop/mouse devices */
    .home-page__reviews-list {
        /* Desktop-specific adjustments */
    }
}

/* Safe Area Support (iOS/MAUI) */
@supports (padding: max(0px)) {
    .platform-maui .home-page__reviews > :not(.section-header):last-child {
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    }
}

/* Android-specific status bar spacing for top nav bar */
/* CSS variable is injected by WindowInsetsListener, with fallback defined in variables.css */
.platform-maui .top-nav-bar {
    padding-top: var(--safe-area-inset-top);
}

/* MAUI bottom safe area handling */
/* Ensures content doesn't overlap with iOS home indicator or Android navigation bar */
/* CSS variables are set by:
   - iOS: env(safe-area-inset-bottom) from webkit viewport-fit=cover
   - Android: WindowInsetsListener injecting --safe-area-inset-bottom */
.platform-maui .safe-area-bottom {
    padding-bottom: var(--safe-area-inset-bottom);
}