/*
 * ALTARS STUDIO - MOBILE & iOS SAFARI FIXES
 * Critical fixes for iPhone/iPad Safari and mobile browsers
 */

/* ==========================================
   iOS SAFARI SPECIFIC FIXES
   ========================================== */

/* Prevent iOS text size adjustment */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix iOS Safari viewport height issues with bottom bar */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Prevent horizontal scroll */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Smooth scrolling on iOS */
body, html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Fix iOS Safari fixed positioning - force hardware acceleration */
nav {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Ensure backdrop-filter works on all iOS versions */
nav, .glass-panel, .glass-panel-wide, .glass-highlight {
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
}

/* ==========================================
   FIX HERO SECTION SCROLLING - ALL DEVICES
   ========================================== */

.hero-cinematic,
.hero-cinematic * {
    overflow-x: hidden !important;
}

.hero-cinematic {
    overflow-y: hidden !important;
}

.hero-background {
    overflow: hidden !important;
}

.hero-content-panel {
    overflow: hidden !important;
    max-height: none !important;
}

.hero-content-panel * {
    overflow: visible !important; /* Allow text to wrap naturally */
}

/* ==========================================
   FIX PREMIUM CIRCLE ICONS OVERFLOW
   ========================================== */

/* Prevent circles from being cut off and keep them perfectly circular */
.premium-circle-icon {
    overflow: visible !important;
    margin: 0 auto 2rem !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Keep inner circle elements perfectly circular too */
.circle-core {
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Ensure parent containers don't clip the circles */
.why-item, .service-item, .card, .scroll-reveal:has(.premium-circle-icon) {
    overflow: visible !important;
}

/* Add extra spacing to containers with circles to prevent clipping */
.grid-3 .card,
.why-item,
.grid-3 .scroll-reveal:has(.premium-circle-icon) {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
    overflow: visible !important;
}

/* ==========================================
   MOBILE NAVIGATION FIXES
   ========================================== */

@media (max-width: 1024px) {
    /* Ensure nav is always visible on mobile and doesn't overflow */
    nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Make navigation container responsive */
    .nav-container {
        padding: 0 1rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Ensure logo is visible */
    .logo {
        font-size: 1.25rem;
        z-index: 1000;
    }

    .logo-mark {
        width: 28px;
        height: 28px;
    }

    .logo span {
        display: inline !important;
        font-size: 1rem;
    }

    /* Make mobile menu toggle larger and more tappable */
    .mobile-menu-toggle {
        display: block !important;
        font-size: 1.75rem !important;
        padding: 0.75rem !important;
        min-width: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(212, 175, 106, 0.2);
        z-index: 1001;
    }

    /* Fix mobile menu dropdown */
    .nav-links {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        transform: translateY(-150%) !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        gap: 1.5rem !important;
        z-index: 999 !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box !important;
    }

    .nav-links.active {
        transform: translateY(0) !important;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 1rem;
        font-size: 1rem !important;
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(212, 175, 106, 0.2);
    }
}

/* ==========================================
   MOBILE TYPOGRAPHY
   ========================================== */

@media (max-width: 768px) {
    /* Hero text sizing */
    .hero-title, .hero-cinematic .hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .hero-tagline {
        font-size: 0.75rem !important;
        letter-spacing: 0.1em !important;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(2rem, 7vw, 3rem) !important;
        line-height: 1.2 !important;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    /* Body text */
    p, li, span {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* Button text */
    .btn {
        font-size: 0.9rem !important;
        padding: 0.875rem 1.5rem !important;
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(212, 175, 106, 0.2);
    }
}

/* ==========================================
   PREVENT HORIZONTAL OVERFLOW - ALL DEVICES
   ========================================== */

/* Ensure all major elements stay within viewport - except circles */
*:not(.premium-circle-icon):not(.circle-core),
*:not(.premium-circle-icon):not(.circle-core)::before,
*:not(.premium-circle-icon):not(.circle-core)::after {
    max-width: 100%;
}

section, header, footer, main, article, aside, nav {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Divs need special handling to allow circle overflow */
div {
    max-width: 100vw;
}

/* Only hide horizontal overflow, allow vertical */
div:not(.premium-circle-icon):not(.circle-core):not(.why-item):not(.card) {
    overflow-x: hidden;
}

/* Ensure images don't cause overflow */
img, picture, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure containers don't overflow */
.container, .nav-container, .hero-content, .hero-content-panel {
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================
   MOBILE LAYOUT FIXES
   ========================================== */

@media (max-width: 768px) {
    /* Force all sections to stay in viewport */
    section, .section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Allow vertical overflow for sections with circles */
    section:has(.premium-circle-icon), .section:has(.premium-circle-icon) {
        overflow-y: visible !important;
    }

    /* Container padding */
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Only containers with circles get vertical overflow visible */
    .container:has(.premium-circle-icon) {
        overflow-y: visible !important;
    }

    /* Section padding */
    .section {
        padding: 3rem 0 !important;
    }

    /* Premium circles mobile adjustments - keep perfectly circular */
    .premium-circle-icon {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        min-height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        overflow: visible !important;
        margin: 0 auto 1.5rem !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .circle-core {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Ensure cards with circles have enough space */
    .card:has(.premium-circle-icon),
    .why-item,
    .scroll-reveal:has(.premium-circle-icon) {
        padding: 3rem 1.5rem 2.5rem !important;
        overflow: visible !important;
    }

    /* Hero section - prevent scrollbars */
    .hero-cinematic {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding: 6rem 1rem 3rem !important;
        overflow: hidden !important; /* Force hidden on both axes */
        position: relative !important;
    }

    .hero-background {
        overflow: hidden !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }

    .hero-background img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-background::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }

    .hero-content-panel {
        width: 95% !important;
        max-width: 100% !important;
        padding: 2.5rem 1.5rem !important;
        margin: 0 auto !important;
        overflow: hidden !important; /* No scrollbars on panel */
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Ensure hero text doesn't cause overflow */
    .hero-content-panel .hero-title,
    .hero-content-panel .hero-subtitle,
    .hero-content-panel .hero-tagline,
    .hero-content-panel .hero-cta {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .hero-content-panel .hero-cta {
        width: 100% !important;
    }

    .hero-content-panel .hero-cta .btn {
        max-width: 100% !important;
    }

    /* Cards and panels */
    .glass-panel, .glass-panel-wide, .glass-highlight {
        padding: 2rem 1.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Only panels with circles get vertical overflow */
    .glass-panel:has(.premium-circle-icon),
    .glass-panel-wide:has(.premium-circle-icon),
    .glass-highlight:has(.premium-circle-icon) {
        overflow-y: visible !important;
    }

    .card {
        padding: 2rem 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Only cards with circles get vertical overflow */
    .card:has(.premium-circle-icon) {
        overflow-y: visible !important;
    }

    /* Fix any row/grid elements that might overflow */
    .row, .grid, .flex-row, .grid-3 {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Only grids with circles get vertical overflow */
    .row:has(.premium-circle-icon),
    .grid:has(.premium-circle-icon),
    .flex-row:has(.premium-circle-icon),
    .grid-3:has(.premium-circle-icon) {
        overflow-y: visible !important;
    }

    /* Ensure hero background doesn't cause overflow */
    .hero-background, .hero-cinematic {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important; /* Both axes hidden for hero */
    }

    /* Grid layouts */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Service cards */
    .service-card-premium {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    /* Founder/Studio profiles */
    .founder-profile, .studio-profile {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .founder-image {
        margin: 0 !important;
        height: 400px !important;
        border-radius: 0 !important;
        border-right: none !important;
        border-bottom: 3px solid var(--accent-gold) !important;
    }

    .founder-content, .studio-content {
        padding: 2rem 1.5rem !important;
    }

    /* Form inputs - iOS friendly */
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 1rem !important;
        min-height: 44px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .form-textarea {
        min-height: 120px !important;
    }
}

/* ==========================================
   TOUCH-FRIENDLY INTERACTIONS
   ========================================== */

/* Remove tap highlight color except where specified */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Add tap highlight only to interactive elements */
a, button, input, textarea, select {
    -webkit-tap-highlight-color: rgba(212, 175, 106, 0.2);
}

/* Ensure minimum tap target size (44x44px Apple guideline) */
a, button, .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   SMALL MOBILE (< 480px)
   ========================================== */

@media (max-width: 480px) {
    /* Extra small text adjustments */
    .hero-title {
        font-size: 2rem !important;
    }

    .section-title {
        font-size: 1.75rem !important;
    }

    /* Reduce spacing */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .glass-panel, .glass-panel-wide {
        padding: 1.5rem 1rem !important;
    }

    .hero-content-panel {
        padding: 2rem 1.25rem !important;
    }

    /* Stack buttons */
    .hero-cta {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100%;
    }

    .hero-cta .btn {
        width: 100% !important;
    }
}

/* ==========================================
   LANDSCAPE MOBILE
   ========================================== */

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    /* Fix hero in landscape */
    .hero-cinematic {
        min-height: auto;
        padding: 5rem 1rem 2rem !important;
    }

    .hero-content-panel {
        padding: 2rem 1.5rem !important;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-cta {
        flex-direction: row !important;
        gap: 1rem !important;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    nav, .mobile-menu-toggle, .cookie-consent {
        display: none !important;
    }
}