/* CROSS-PLATFORM COMPATIBILITY PATCH */
/* Targets: Android, iOS, Windows, macOS optimization */

/* 1. NATIVE FONT STACK FALLBACKS */
/* Ensures the site looks good immediately before Google Fonts load, using native OS fonts */
body {
    font-family: 'Playfair Display', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* 2. TEXT SIZE ADJUSTMENT */
/* Prevents random font scaling on iOS/Android in landscape mode */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 3. SCROLLBAR STYLING - WINDOWS/DESKTOP */
/* Instead of hiding scrollbars completely (which hurts usability on Windows), use thin, modern ones */
@media (min-width: 769px) {

    html,
    body {
        scrollbar-width: thin;
        scrollbar-color: rgba(139, 111, 71, 0.3) transparent;
    }

    *::-webkit-scrollbar {
        display: block !important;
        /* Override style.css hiding */
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(139, 111, 71, 0.3);
        border-radius: 20px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    *::-webkit-scrollbar-thumb:hover {
        background-color: rgba(139, 111, 71, 0.6);
    }
}

/* 4. IOS SAFARI INPUT STYLING */
/* Removes inner shadows and fixes rounding on inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    /* Fixes bleed on rounded corners */
}

/* 5. SAFE AREA INSETS (IPHONE X+) */
/* Ensures content isn't hidden behind the notch or home bar */
.main-header,
.campaign-top-bar {
    padding-top: env(safe-area-inset-top);
}

.mobile-bottom-nav,
.footer-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* 6. FOCUS RINGS FOR ACCESSIBILITY (WINDOWS/KEYBOARD NAV) */
/* Replaces default blue outline with theme-matching ring */
:focus-visible {
    outline: 2px solid #8B6F47;
    outline-offset: 2px;
}

/* 7. ANDROID OVERSCROLL GLOW COLOR */
/* Matches the pull-to-refresh glow color with the theme */
body {
    overscroll-behavior-y: auto;
    /* Allow bounce to ensure scroll isn't locked */
}

.sidebar-menu,
.product-gallery-thumbnails,
.products-wrapper-scroll {
    overscroll-behavior: contain;
}

/* 8. HIGH CONTRAST MODE SUPPORT */
@media (forced-colors: active) {

    .btn,
    button,
    input {
        border: 1px solid ButtonText;
    }
}

/* 9. DVH (DYNAMIC VIEWPORT HEIGHT) FIX */
/* Fixes 100vh issues on mobile browsers with address bars */
.sidebar,
.sidebar-overlay,
.full-height-mobile {
    height: 100vh;
    /* Fallback */
    height: 100dvh;
}

/* 10. CRITICAL SCROLL FIX */
html,
body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}