/* Browser Compatibility - Firefox & Chromium */

/*
 * This file ensures cross-browser compatibility with Firefox and Chromium-based browsers
 * (Chrome, Edge, Opera, Brave, etc.)
 */

/* Smooth Scrolling - Firefox & Chromium */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Flexbox - Vendor Prefixes (for older browsers) */
.container,
.nav,
.profile-stats,
.post-actions,
.card-body,
.tabs,
.mobile-nav,
[style*="display: flex"] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* Transform - Vendor Prefixes */
[style*="transform"] {
    -webkit-transform: inherit;
    -moz-transform: inherit;
    -ms-transform: inherit;
    transform: inherit;
}

/* Transition - All transitions compatible */
[style*="transition"],
.nav-item,
.btn,
.card-item,
.tab,
.post,
.post-action {
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

/* Border Radius - Ensure compatibility */
[style*="border-radius"],
.btn,
.card,
.post-action,
.nav-item {
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
}

/* User Select - Prevent text selection issues */
button,
.btn,
.nav-item,
.tab {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Scrollbar Styling - Webkit (Chrome, Edge) & Firefox */
/* Webkit Browsers */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-bg-tertiary);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-secondary) var(--color-bg);
}

/* Input Autofill - Remove yellow background in Chrome/Chromium */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-secondary) inset;
    -webkit-text-fill-color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background-color 5000s ease-in-out 0s;
}

/* Focus Visible - Better keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Firefox Button Fixes */
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Image Rendering - Better quality */
img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Aspect Ratio - Polyfill for older browsers */
@supports not (aspect-ratio: 1) {
    .post-images img::before {
        content: '';
        display: block;
        padding-bottom: 100%;
    }
}

/* Sticky Position - Ensure compatibility */
.header,
.sidebar-left,
.search-wrapper {
    position: -webkit-sticky;
    position: sticky;
}

/* Grid Layout - Vendor Prefixes */
[style*="display: grid"] {
    display: -ms-grid;
    display: grid;
}

/* Object Fit - Ensure image sizing works */
img[style*="object-fit"] {
    -o-object-fit: cover;
    object-fit: cover;
}

/* Backdrop Filter - Fallback for Firefox < 103 */
@supports not (backdrop-filter: blur(12px)) {
    .header {
        background-color: var(--color-bg) !important;
    }
}

/* Appearance - Remove default styling */
button,
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Smooth Font Rendering */
body,
input,
textarea,
button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Will Change - Optimize animations */
.nav-item:hover,
.btn:hover,
.post:hover,
.card-item:hover {
    will-change: background-color, transform;
}

/* Firefox Input Number - Remove spinner */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Print Styles - Ensure compatibility */
@media print {
    .sidebar-left,
    .sidebar-right,
    .mobile-nav {
        display: none !important;
    }

    .main-content {
        border: none !important;
        max-width: 100% !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Safe Area - For mobile browsers (iOS Safari, etc.) */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-nav {
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    }
}

/* Reduce Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode - Windows High Contrast */
@media (prefers-contrast: high) {
    .nav-item:hover,
    .btn:hover,
    .card-item:hover {
        outline: 2px solid currentColor;
    }
}

/* Dark Mode - Ensure consistency */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}