/* =========================================
   Universe IT — Mobile Optimizations (FIXED)
   ========================================= */

/* ── 1. Dynamic Viewport Height (iOS Safari) ── */
@supports (height: 100dvh) {
    .min-h-screen-mobile {
        min-height: 100dvh;
    }
    .h-screen-mobile {
        height: 100dvh;
    }
}

@supports not (height: 100dvh) {
    .min-h-screen-mobile {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* ── 2. Safe Area Insets ── */
@supports (padding-top: env(safe-area-inset-top)) {
    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .safe-area-left {
        padding-left: env(safe-area-inset-left);
    }
    .safe-area-right {
        padding-right: env(safe-area-inset-right);
    }
}

/* iPhone 14 Pro / Pro Max */
@media only screen 
    and (device-width: 393px) 
    and (device-height: 852px) 
    and (-webkit-device-pixel-ratio: 3),
    only screen 
    and (device-width: 430px) 
    and (device-height: 932px) 
    and (-webkit-device-pixel-ratio: 3) {
    .dynamic-island-padding {
        padding-top: max(3rem, env(safe-area-inset-top));
    }
}

/* ── 3. Schermi pieghevoli ── */
@media (screen-fold-posture: folded) {
    .fold-optimize {
        font-size: 0.875rem;
    }
    .fold-optimize h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    .fold-optimize .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 400px) and (max-width: 300px) {
    .zflip-external {
        display: none;
    }
    .zflip-external-hero {
        min-height: auto;
        padding: 1rem;
    }
}

/* ── 4. iOS Form Zoom Prevention ── */
input, textarea, select {
    font-size: 16px !important;
}

/* ── 5. Touch Targets ── */
button, a, input[type="submit"], input[type="button"], .touch-target {
    min-height: 44px;
    min-width: 44px;
}

a {
    padding: 2px 0;
}

/* ── 6. Landscape mobile optimization ── */
@media (max-height: 500px) and (orientation: landscape) {
    .landscape-optimize {
        min-height: auto;
    }
    .landscape-optimize h1 {
        font-size: 2rem;
    }
    .landscape-optimize .grid-cols-2,
    .landscape-optimize .grid-cols-3,
    .landscape-optimize .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 7. Scrollbar styling ── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* ── 8. Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-fast,
    .page-transition,
    .animate-bounce {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── 9. Fix per iOS elastic overscroll (solo su touch devices) ── */
@supports (-webkit-touch-callout: none) {
    body {
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 10. Prevent horizontal overflow solo su body, NON su html ── */
body {
    overflow-x: hidden;
}

/* ── 11. iOS tap highlight color ── */
a, button {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
}

/* ── 12. Fix per sticky hover su touch devices ── */
@media (hover: none) {
    .hover\:bg-blue-500:active {
        background-color: #3b82f6;
    }
}

/* ── 13. Galaxy S23/S24 / Pixel 7/8 specific ── */
@media screen and (max-width: 412px) {
    .galaxy-pixel-optimize h1 {
        font-size: 2.25rem;
        line-height: 1.1;
    }
    .galaxy-pixel-optimize p {
        font-size: 1rem;
    }
}

/* ── 14. Navbar mobile fix ── */
@media (max-width: 1023px) {
    .mobile-nav-open {
        overflow: hidden;
    }
    .mobile-nav-overlay {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* =========================================
   MOBILE OVERRIDES
   ========================================= */

/* ── Hero mobile ── */
@media (max-width: 640px) {
    .min-h-screen {
        min-height: 100dvh !important;
    }
    h1.text-6xl,
    h1.text-5xl,
    h1.text-7xl,
    h1.text-8xl {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    h2.text-5xl,
    h2.text-6xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }
    h3.text-4xl,
    h3.text-3xl {
        font-size: 1.5rem !important;
    }
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .py-32 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .py-28 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .py-40 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .gap-20 {
        gap: 2rem !important;
    }
    .gap-8 {
        gap: 1rem !important;
    }
    .h-52 {
        height: 10rem !important;
    }
    .h-16 {
        height: 3rem !important;
    }
}

/* ── Small phones ── */
@media (max-width: 375px) {
    h1.text-6xl,
    h1.text-5xl,
    h1.text-7xl,
    h1.text-8xl {
        font-size: 2rem !important;
    }
    h2.text-5xl,
    h2.text-6xl {
        font-size: 1.75rem !important;
    }
    .px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── Galaxy Z Flip folded ── */
@media (max-height: 400px) {
    .min-h-screen {
        min-height: auto !important;
    }
    h1 {
        font-size: 1.75rem !important;
    }
    p.text-xl {
        font-size: 1rem !important;
    }
}

/* ── iPhone notch fix ── */
@supports (padding-top: env(safe-area-inset-top)) {
    header,
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .min-h-screen {
        min-height: auto !important;
    }
    h1 {
        font-size: 2rem !important;
    }
    .py-32,
    .py-28 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ── Tablets ── */
@media (min-width: 641px) and (max-width: 1023px) {
    h1.text-6xl,
    h1.text-7xl,
    h1.text-8xl {
        font-size: 3.5rem !important;
    }
    h2.text-5xl,
    h2.text-6xl {
        font-size: 2.5rem !important;
    }
}