/*
SIMPLE iPad Fix - Clean Approach
Reset all previous complex CSS and start fresh
*/

/* Reset any previous iPad fixes */
/* 
iPad Media Query Values:
- iPad Mini: 768x1024px
- iPad (9.7"): 768x1024px
- iPad Air: 820x1180px
- iPad Pro 10.5": 834x1194px
- iPad Pro 11": 834x1194px
- iPad Pro 12.9": 1024x1366px
*/

/* iPad Mini & Standard iPad (768x1024) */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* STEP 1: Fix navigation container */
    nav.bg-white .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* STEP 2: Logo section - Keep simple */
    nav .flex.items-center:first-child {
        flex-shrink: 0 !important;
        /*min-width: 60px !important;
        max-width: 120px !important;*/
    }
    
    .logo-image {
        height: 2.25rem !important;
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
        max-width: none !important;
    }
    
    /* STEP 3: Navigation menu - Make it fit properly */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 0 1rem !important;
        overflow: hidden !important;
    }
    
    /* STEP 4: Navigation links - Smaller but readable */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* STEP 5: Register button section */
    nav [class*="hidden"][class*="md:flex"][class*="flex-shrink-0"] {
        display: flex !important;
        flex-shrink: 0 !important;
        min-width: 100px !important;
        max-width: 150px !important;
    }
    
    /* STEP 6: Register button styling */
    nav .bg-primary {
        display: inline-block !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        background-color: #1E40AF !important;
        color: white !important;
        border-radius: 9999px !important;
    }
    
    /* STEP 7: Hide mobile menu button */
    nav [class*="md:hidden"] {
        display: none !important;
    }
    
    /* STEP 8: Hide hotline to save space */
    nav [class*="hidden"][class*="lg:flex"] {
        display: none !important;
    }
    
    /* STEP 9: Show desktop navigation */
    nav [class*="hidden"][class*="md:flex"] {
        display: flex !important;
    }
    
    /* STEP 10: Fix main content padding */
    main {
        padding-top: 80px !important;
    }
    
    /* STEP 11: Fix sections that might overflow */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* STEP 12: Hero section adjustments */
    .hero-gradient,
    .bg-gradient-to-br {
        padding: 3rem 1rem !important;
    }
    
    .hero-gradient h1,
    .bg-gradient-to-br h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-gradient p,
    .bg-gradient-to-br p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* STEP 13: Button adjustments */
    .hero-gradient .flex,
    .bg-gradient-to-br .flex {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .hero-gradient a,
    .bg-gradient-to-br a {
        min-width: 200px !important;
        text-align: center !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* STEP 14: Fix grid layouts */
    [class*="grid"][class*="md:grid-cols-3"],
    [class*="grid"][class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* STEP 15: Fix feature cards */
    .bg-white.p-6 {
        padding: 1rem !important;
    }
    
    .bg-white.p-6 h3 {
        font-size: 1rem !important;
    }
    
    .bg-white.p-6 p {
        font-size: 0.875rem !important;
    }
    .hotline-top {
        display: none !important;
    }
}

/* Portrait specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Navigation menu - more compact in portrait */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.4rem !important;
    }
    
    nav .bg-primary {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Hero section adjustments for portrait */
    .hero-gradient,
    .bg-gradient-to-br {
        padding: 2rem 1rem !important;
    }
    
    .hero-gradient h1,
    .bg-gradient-to-br h1 {
        font-size: 1.75rem !important;
    }
    .hotline-top {
        display: none !important;
    }
}

/* Landscape specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* More space available in landscape */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        gap: 0.75rem !important;
    }
    
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem !important;
    }
    
    nav .bg-primary {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Hero buttons can be side by side in landscape */
    .hero-gradient .flex,
    .bg-gradient-to-br .flex {
        flex-direction: row !important;
        justify-content: center !important;
    }
    
    /* 3 columns for grids in landscape */
    [class*="grid"][class*="md:grid-cols-3"],
    [class*="grid"][class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* iPad Air (820x1180) */
@media (min-width: 820px) and (max-width: 1180px) {
    /* STEP 1: Fix navigation container */
    nav.bg-white .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* STEP 2: Logo section */
    nav .flex.items-center:first-child {
        flex-shrink: 0 !important;
    }
    
    .logo-image {
        height: 2.5rem !important;
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
        max-width: none !important;
    }
    
    /* STEP 3: Navigation menu */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        margin: 0 1rem !important;
        overflow: hidden !important;
    }
    
    /* STEP 4: Navigation links */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Hide hotline and mobile menu */
    nav [class*="md:hidden"] {
        display: none !important;
    }
    
    nav [class*="hidden"][class*="lg:flex"] {
        display: none !important;
    }
    
    .hotline-top {
        display: none !important;
    }
}

/* iPad Pro 10.5" & 11" (834x1194) */
@media (min-width: 834px) and (max-width: 1194px) {
    /* STEP 1: Fix navigation container */
    nav.bg-white .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.75rem 1.5rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* STEP 2: Logo section */
    nav .flex.items-center:first-child {
        flex-shrink: 0 !important;
    }
    
    .logo-image {
        height: 2.75rem !important;
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
        max-width: none !important;
    }
    
    /* STEP 3: Navigation menu */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin: 0 1.5rem !important;
        overflow: hidden !important;
    }
    
    /* STEP 4: Navigation links */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Hide hotline and mobile menu */
    nav [class*="md:hidden"] {
        display: none !important;
    }
    
    nav [class*="hidden"][class*="lg:flex"] {
        display: none !important;
    }
    
    .hotline-top {
        display: none !important;
    }
}

/* iPad Pro 12.9" (1024x1366) */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* STEP 1: Fix navigation container */
    nav.bg-white .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 1rem 2rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* STEP 2: Logo section */
    nav .flex.items-center:first-child {
        flex-shrink: 0 !important;
    }
    
    .logo-image {
        height: 3rem !important;
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
        max-width: none !important;
    }
    
    /* STEP 3: Navigation menu */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        margin: 0 2rem !important;
        overflow: hidden !important;
    }
    
    /* STEP 4: Navigation links */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        font-size: 1rem !important;
        padding: 0.625rem 1rem !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Show hotline for larger iPad Pro */
    nav [class*="hidden"][class*="lg:flex"] {
        display: flex !important;
        font-size: 0.875rem !important;
    }
    
    /* Hide mobile menu */
    nav [class*="md:hidden"] {
        display: none !important;
    }
    
    .hotline-top {
        display: none !important;
    }
    
    /* Better grid layout for larger screen */
    [class*="grid"][class*="md:grid-cols-3"],
    [class*="grid"][class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

/* Specific iPad device detection using device-width */
/* iPad Mini (768x1024) */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
    .device-specific-ipad-mini {
        font-size: 0.75rem !important;
    }
}

/* iPad Air (820x1180) */
@media only screen 
  and (min-device-width: 820px) 
  and (max-device-width: 1180px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .device-specific-ipad-air {
        font-size: 0.875rem !important;
    }
}

/* iPad Pro 10.5" (834x1194) */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1194px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .device-specific-ipad-pro-10 {
        font-size: 0.9rem !important;
    }
}

/* iPad Pro 11" (834x1194) - Same as 10.5" but newer generation */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1194px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .device-specific-ipad-pro-11 {
        font-size: 0.9rem !important;
    }
}

/* iPad Pro 12.9" (1024x1366) */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .device-specific-ipad-pro-12 {
        font-size: 1rem !important;
    }
}

/* iPad specific orientation queries */
/* All iPads - Portrait mode */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) {
    
    /* More compact navigation in portrait */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] a {
        padding: 0.4rem 0.6rem !important;
    }
    
    /* Stack hero buttons in portrait */
    .hero-gradient .flex,
    .bg-gradient-to-br .flex {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
}

/* All iPads - Landscape mode */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) {
    
    /* More spacious navigation in landscape */
    nav [class*="hidden"][class*="md:flex"][class*="space-x-8"] {
        gap: 1rem !important;
    }
    
    /* Side by side hero buttons in landscape */
    .hero-gradient .flex,
    .bg-gradient-to-br .flex {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1.5rem !important;
    }
    
    /* Better grid layout in landscape */
    [class*="grid"][class*="md:grid-cols-3"],
    [class*="grid"][class*="lg:grid-cols-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}