/**
 * ios-fixes.css
 * Targeted CSS patches for Apple Safari (iOS & macOS) compatibility
 * King City Montessori School — kingcitymontessori.com
 *
 * Why this file exists:
 *  - Safari has known quirks with: 100vh, position:sticky, backdrop-filter,
 *    content-visibility, flex/grid, and touch scrolling.
 *  - These rules override or supplement the main stylesheets with
 *    -webkit- vendor prefixes and modern dvh/svh units.
 */

/* =============================================
   1. SAFE AREA INSETS (iPhone notch / home bar)
   ============================================= */

body {
    /* Prevent content from hiding behind iPhone notch or home bar */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    /* Universal Mobile Stability */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.header {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
}

.footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* =============================================
   2. VIEWPORT HEIGHT — iOS Safari 100vh Fix
   ============================================= */

/* iOS Safari includes the browser chrome in 100vh.
   Use -webkit-fill-available as fallback, dvh as modern fix. */
.header {
    /* Ensure the hero/header doesn't overflow on iOS */
    max-height: -webkit-fill-available;
}

/* =============================================
   3. STICKY POSITIONING — Safari requires -webkit-sticky
   ============================================= */

.header,
[style*="position: sticky"],
[style*="position:sticky"] {
    position: -webkit-sticky;
    position: sticky;
}

/* =============================================
   4. BACKDROP-FILTER — Safari vendor prefix
   ============================================= */

[style*="backdrop-filter"],
.glass-effect,
.modal-overlay,
#search-results {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

/* =============================================
   5. SMOOTH SCROLLING — iOS touch fix
   ============================================= */

.nav-mobile,
.dropdown-menu,
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
[style*="overflow: auto"],
[style*="overflow:auto"] {
    -webkit-overflow-scrolling: touch;
}

/* =============================================
   6. FLEXBOX & GRID — Safari older version fixes
   ============================================= */

/* Ensure flex containers render correctly */
.header-content,
.nav-list,
.benefits-grid,
.programs-grid,
.location-cards,
.cta-buttons,
.footer-content {
    display: -webkit-flex;
    display: flex;
}

.benefits-grid,
.programs-grid,
.location-cards {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Grid fallback for older Safari (uses flexbox instead) */
@supports not (display: grid) {
    .benefits-grid {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .benefit-card {
        width: calc(50% - 16px);
        margin: 8px;
    }

    .programs-grid {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .program-card {
        width: calc(50% - 24px);
        margin: 12px;
    }
}

/* =============================================
   7. OBJECT-FIT — Ensure images fill containers on iOS
   ============================================= */

.program-image img,
.benefit-image img,
.logo-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.logo-img {
    -o-object-fit: contain;
    object-fit: contain;
}

/* =============================================
   8. TRANSFORMS — Use -webkit- vendor prefix
   ============================================= */

.benefit-card,
.program-card,
.testimonial-card,
.event-card {
    -webkit-transform: translateZ(0);
    /* force GPU compositing on iOS */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* =============================================
   9. BUTTON & INPUT — Disable iOS tap highlight & zoom
   ============================================= */

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
    /* remove blue tap flash on iOS */
    touch-action: manipulation;
    /* remove 300ms tap delay */
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
    font-size: 16px;
    /* prevent iOS auto-zoom on focus */
    -webkit-appearance: none;
    appearance: none;
    /* standard property */
    /* remove native iOS/browser styling */
    border-radius: 0;
    /* fix iOS adding border-radius to inputs */
}

select {
    border-radius: var(--radius-sm);
}

/* =============================================
   10. ANIMATIONS — Reduce for iOS battery/performance
    ============================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        -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;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================
   11. MOBILE NAVIGATION — iOS panel fixes
   ============================================= */

.nav-mobile {
    /* Ensure panel is fully visible and scrollable on iOS */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-overflow-scrolling: touch;
    /* Fix: use dvh to account for iOS browser chrome */
    height: 100vh;
    height: 100dvh;
}

.nav-mobile.active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* =============================================
   12. HEADER BACKGROUND IMAGE — iOS fix
   ============================================= */

/* iOS Safari doesn't always render background-attachment: fixed correctly */
@supports (-webkit-touch-callout: none) {

    /* This targets iOS Safari only */
    .header,
    body.homepage::before {
        background-attachment: scroll !important;
        /* iOS doesn't support fixed bg properly */
    }
}

/* =============================================
   13. DROPDOWN MENUS — Touch device support
   ============================================= */

/* On touch devices (iOS), :hover doesn't fire reliably.
   The navigation.js already adds click handlers for dropdowns,
   but we also need to make sure active state is visible. */

@media (hover: none) and (pointer: coarse) {

    /* Touch/mobile: disable hover-only dropdown behavior */
    .nav-dropdown:hover .dropdown-menu {
        /* Don't show on hover — rely on JS click handler only */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nav-dropdown.active .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* Make nav links bigger for touch targets (min 44px Apple HIG) */
    .nav-mobile-list a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        padding: 12px 16px !important;
    }

    .nav-mobile-list li {
        margin-bottom: 4px;
    }
}

/* =============================================
   14. CONTENT SECTIONS — Force visibility on Safari
   ============================================= */

/* content-visibility:auto was removed from layout.css (Safari bug),
   but also explicitly force sections to be visible as a safety net */
main section,
.main-content section,
footer,
.footer,
.why-choose-us,
.programs-overview,
.location-section,
.final-cta,
.benefits-grid,
.programs-grid,
.location-cards {
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible;
    /* counteract any inherited content-visibility:auto */
}

/* =============================================
   15. SCROLLBAR — Custom scrollbar for iOS compatibility
   ============================================= */

/* Hide scrollbar visually on mobile (iOS hides it natively) */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* =============================================
   16. FINAL MOBILE OVERRIDES — FORCE VISIBILITY & LAYOUT
   ============================================= */

@media (max-width: 1023px) {

    /* Only hide specific desktop-only elements, but KEEP nav-desktop */
    .header-cta,
    .header-content>.header-cta,
    .header-search {
        display: none !important;
    }

    .nav-desktop {
        display: block !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .nav-list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 15px !important;
        padding: 5px !important;
    }

    .nav-link {
        font-size: 14px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
        color: #1a3a5a !important;
        /* Requested Dark Blue */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.8) !important;
    }

    /* Restore Hero Background and layout */
    .header {
        position: relative !important;
        background: linear-gradient(135deg, rgba(44, 95, 141, 0.35) 0%, rgba(90, 123, 165, 0.25) 100%),
            url('../images/homepage-bg-pink-tower.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 40px 20px !important;
        z-index: 1000 !important;
    }

    .header .container {
        position: relative !important;
        /* The anchor for absolute items */
        padding: 0 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
        min-height: 70px !important;
    }

    .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* Fix Logo for Mobile - Match Desktop Hero Style */
    .logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 0 auto !important;
    }

    .logo-img {
        width: 160px !important;
        height: 160px !important;
        border-radius: 50% !important;
        background: white !important;
        padding: 10px !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
        margin: 0 auto !important;
    }

    .logo-text {
        display: block !important;
        font-size: 22px !important;
        color: #1a3a5a !important;
        /* Requested Dark Blue */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
        margin-top: 10px !important;
    }

    /* V12: Remove White Overlay (User Request) */
    .header-content {
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 10px 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
    }


    /* V11: Global Grid Fix for "Out of Order" Characters */
    .contact-grid,
    .grid-2col,
    .grid-3col,
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Ensure text doesn't break character-by-character */
    p,
    h1,
    h2,
    h3,
    h4,
    a,
    li {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Show Schedule Tour Button on Mobile */
    .header-cta {
        display: block !important;
        margin-top: 10px !important;
    }

    /* Position Mobile Toggle correctly at the TOP RIGHT */
    .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 20px !important;
        top: 20px !important;
        z-index: 10001 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(5px) !important;
        padding: 10px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    .hamburger-line {
        background-color: white !important;
    }

    /* Final adjustments to Schedule Tour (v10 refinement) */
    .header-cta-mobile {
        display: block !important;
        margin-top: 20px !important;
    }
}