/**
 * Browser Compatibility CSS
 * Vendor prefixes e fallbacks per massima compatibilità
 * Compatible with: Chrome, Firefox, Safari, Edge, IE11
 */

/* ========================================
   BACKDROP FILTER (Safari/iOS Critical)
   ======================================== */
.backdrop-blur,
[class*="backdrop-blur"] {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ========================================
   TRANSFORMS
   ======================================== */
.transform,
[class*="transform"] {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.scale-105,
[class*="scale-"] {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* Hover transforms */
.hover\:scale-105:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.hover\:scale-110:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* Translate transforms */
.-translate-y-2,
[class*="translate-y"] {
    -webkit-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
}

/* ========================================
   TRANSITIONS
   ======================================== */
.transition,
.transition-all,
[class*="transition"] {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.transition-transform {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.duration-300 {
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
}

.duration-500 {
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
}

/* ========================================
   GRADIENTS (Fallbacks)
   ======================================== */
.bg-gradient-to-br,
.bg-gradient-to-r,
.bg-gradient-to-l,
[class*="bg-gradient"] {
    /* Fallback color */
    background-color: #008755;
}

/* Verde gradient */
.bg-gradient-verde {
    background: #008755; /* Fallback */
    background: -webkit-linear-gradient(135deg, #008755 0%, #00a86b 50%, #006b3f 100%);
    background: -o-linear-gradient(135deg, #008755 0%, #00a86b 50%, #006b3f 100%);
    background: linear-gradient(135deg, #008755 0%, #00a86b 50%, #006b3f 100%);
}

/* Blu gradient */
.bg-gradient-blu {
    background: #2F4A70; /* Fallback */
    background: -webkit-linear-gradient(135deg, #2F4A70 0%, #1e3a5f 100%);
    background: -o-linear-gradient(135deg, #2F4A70 0%, #1e3a5f 100%);
    background: linear-gradient(135deg, #2F4A70 0%, #1e3a5f 100%);
}

/* ========================================
   BOX SHADOW
   ======================================== */
.shadow-lg,
.shadow-xl,
.shadow-2xl,
[class*="shadow"] {
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ========================================
   FLEXBOX (IE11 Fixes)
   ======================================== */
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}

/* ========================================
   GRID (IE11 Fallback)
   ======================================== */
@supports not (display: grid) {
    .grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .grid-cols-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .grid-cols-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333%;
        flex: 0 0 33.333%;
    }
}

/* ========================================
   BORDER RADIUS
   ======================================== */
.rounded,
.rounded-lg,
.rounded-xl,
[class*="rounded"] {
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

.rounded-full {
    -webkit-border-radius: 9999px;
    border-radius: 9999px;
}

/* ========================================
   USER SELECT
   ======================================== */
.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ========================================
   APPEARANCE
   ======================================== */
.appearance-none,
select,
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ========================================
   FILTER (Safari/iOS)
   ======================================== */
.blur,
[class*="blur"] {
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.grayscale,
[class*="grayscale"] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* ========================================
   OBJECT FIT (IE11 Fallback)
   ======================================== */
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;'; /* IE11 polyfill trigger */
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
    font-family: 'object-fit: contain;'; /* IE11 polyfill trigger */
}

/* ========================================
   ANIMATIONS
   ======================================== */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes slideInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ========================================
   SMOOTH SCROLLING (Safari)
   ======================================== */
html {
    -webkit-scroll-behavior: smooth;
    scroll-behavior: smooth;
}

/* Disable for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        -webkit-scroll-behavior: auto !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   SAFE AREA (iPhone X+ Notch Support)
   ======================================== */
@supports (padding: max(0px)) {
    /* Safe area solo per i container interni, non per header/footer full-width */
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ========================================
   STICKY POSITIONING (Older Safari)
   ======================================== */
.sticky {
    position: -webkit-sticky;
    position: sticky;
}

/* ========================================
   CSS VARIABLES FALLBACK (IE11)
   ======================================== */
/* IE11 doesn't support CSS variables, use direct colors */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .text-verde-bosco { color: #008755 !important; }
    .bg-verde-bosco { background-color: #008755 !important; }
    .text-blu-brenta { color: #2F4A70 !important; }
    .bg-blu-brenta { background-color: #2F4A70 !important; }
    .border-verde-bosco { border-color: #008755 !important; }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    img {
        page-break-inside: avoid;
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ========================================
   LAZY LOADING IMAGE PLACEHOLDER
   ======================================== */
img[loading="lazy"] {
    background: #f0f0f0;
    min-height: 200px;
}

img[loading="lazy"].loaded {
    background: none;
    min-height: auto;
}

/* ========================================
   FOCUS VISIBLE (Accessibility)
   ======================================== */
.focus\:ring:focus,
.focus\:outline-none:focus {
    outline: 2px solid #008755;
    outline-offset: 2px;
}

@supports selector(:focus-visible) {
    .focus\:ring:focus:not(:focus-visible),
    .focus\:outline-none:focus:not(:focus-visible) {
        outline: none;
    }
}

/* ========================================
   TOUCH TARGETS (Mobile Accessibility)
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    button,
    a,
    input,
    select,
    textarea,
    .btn,
    .link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   MEGA MENU COMPATIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure mega menu renders correctly on all browsers */
.mega-menu {
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    /* Improve rendering on Safari */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Prevent flickering on transitions */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Ensure proper layering */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Fix for older Android browsers */
@supports (-webkit-overflow-scrolling: touch) {
    .mega-menu {
        -webkit-overflow-scrolling: touch;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .mega-menu {
        /* Fix Firefox rendering issues */
        background-clip: padding-box;
    }
}

/* Edge legacy fixes */
@supports (-ms-ime-align: auto) {
    .mega-menu {
        /* Fix Edge rendering */
        position: absolute;
    }
}

/* Safari-specific fixes for touch events */
@supports (-webkit-touch-callout: none) {
    .nav-item {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    .mega-menu-link {
        -webkit-tap-highlight-color: rgba(0, 135, 85, 0.1);
    }
}

/* Prevent text selection on menu items when clicking rapidly */
.nav-link,
.mega-menu-link {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection for menu descriptions */
.mega-menu-description {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Fix for Samsung Internet Browser */
@supports (-samsung-ime-mode: none) {
    .mega-menu {
        /* Samsung Internet specific fixes */
        will-change: auto;
    }
}

/* Opera specific fixes */
@supports (-o-transition: all) {
    .mega-menu {
        -o-transition: opacity 0.3s ease, visibility 0.3s ease;
    }
}