/* Mobile Layout and Animation Fixes for Pass Plus S.O.M. */

/* Mobile Navigation - Remove hamburger, show simplified nav */
@media (max-width: 767px) {
  /* Force hide hamburger menu with stronger selectors */
  html body .nav_menu-button,
  html body .nav_menu-button.w-nav-button,
  html body .w-nav-button { 
    display: none !important; 
    visibility: hidden !important;
  }
  
  /* Hide left text nav on mobile (remove stray “Instructors”) */
  html body .nav_menu,
  html body .nav_menu.w-nav-menu,
  html body .nav_menu-list {
    display: none !important;
    visibility: hidden !important;
  }
  
  html body .nav_link { display: none !important; }
  
  /* Make nav more compact on mobile */
  html body .nav_container {
    padding: 10px !important;
  }
  
  html body .nav_logo .paragraph_large {
    font-size: 1rem !important;
  }
  
  /* Hide less important nav items on very small screens */
  @media (max-width: 480px) {
    html body .nav_menu-list-item:nth-child(2),
    html body .nav_menu-list-item:nth-child(3) {
      display: none !important;
    }
  }

/* Disable parallax animations on mobile devices with maximum specificity */
  /* Stop all ix_ animation classes on mobile with !important */
  html body [class*="ix_"],
  html body div[class*="ix_"],
  html body .ix_parallax-x-left-0-to--20,
  html body .ix_hero-to-place-trigger,
  html body .ix_custom_hero-to-place-wrapper {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  
  /* Override any JavaScript-applied inline styles */
  html body [data-w-id] {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* Global mobile typography adjustments to ensure headings fit */
  html body h1 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-wrap: balance; }
  html body h2 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-wrap: balance; }
  html body .subheading { font-size: clamp(14px, 4.2vw, 16px) !important; line-height: 1.45 !important; }

  /* Fix hero section layout specifically */
  html body .ix_hero-to-place-trigger {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }
  
  html body .ix_parallax-x-left-0-to--20 {
    transform: none !important;
    animation: none !important;
    position: static !important;
  }
  
  /* Mobile Hero Images - 3 images same size, side by side */
  html body .mobile-hero-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px 10px !important;
  }
  
  /* Mobile hero: show two equal squares; hide the third tile */
  html body .ix_custom_hero-to-place-wrapper.is-item-2 { display: none !important; }
  
  /* Make the two visible tiles equal squares */
  html body .ix_custom_hero-to-place-wrapper,
  html body .ix_custom_hero-to-place-wrapper.is-item-1,
  html body .ix_custom_hero-to-place-wrapper.is-item-4 {
    position: static !important;
    transform: none !important;
    transition: none !important;
    flex: 0 0 calc(50% - 10px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  /* Ensure images fill their square wrappers */
  html body .mobile-hero-grid .image_cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* Replace brittle 100vh heights from Webflow interactions/classes on mobile */
  html body .ix_trigger-100-vh,
  html body .ix_hero-intro-slide-up-100vh,
  html body .section.is-hero {
    height: auto !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
  }
  
  /* Override Webflow's JavaScript transforms with extreme specificity */
  html body .flex_horizontal.is-align-center.is-x-center.gap-medium {
    transform: none !important;
    will-change: auto !important;
    animation: none !important;
    position: static !important;
  }
  
  /* Make images responsive */
  html body .ix_custom_hero-to-place-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  
  /* Ensure container doesn't overflow */
  html body .container.is-max {
    overflow: hidden !important;
  }
  
  /* Make section images smaller on mobile */
  html body .ix_sticky-card .image_cover,
  html body .card img {
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  /* Make card grids stack on mobile */
  html body .grid_2-col.tablet-1-col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Center align card content on mobile */
  html body .card .header {
    text-align: center !important;
  }

  /* Ensure text fits in the three feature cards */
  html body #how-it-works .ix_sticky-card .header h2,
  html body .ix_sticky-card .header h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    word-break: break-word;
    hyphens: auto;
    margin: 4px 0 8px 0 !important;
  }
  html body #how-it-works .ix_sticky-card .header .subheading,
  html body .ix_sticky-card .header .subheading {
    font-size: 16px !important;
    line-height: 1.45 !important;
    max-width: 36ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Full-width buttons inside the cards so they don’t squeeze text */
  html body .ix_sticky-card .button-group { gap: 8px !important; }
  html body .ix_sticky-card .button-group .button,
  html body .ix_sticky-card .button-group .w-button {
    width: 100% !important;
  }

  /* Option 1 (active): Hide images inside the three cards on phones to give text maximum space */
  html body #how-it-works .ix_sticky-card img,
  html body #how-it-works .ix_sticky-card .image_cover,
  html body .ix_sticky-card .image_cover {
    display: none !important;
  }

  /* Make headings/subheadings a touch smaller to be extra safe */
  html body #how-it-works .ix_sticky-card .header h2,
  html body .ix_sticky-card .header h2 { font-size: 24px !important; }
  html body #how-it-works .ix_sticky-card .header .subheading,
  html body .ix_sticky-card .header .subheading { font-size: 15px !important; }

  /* Keep the card content nicely centered and constrained */
  html body .ix_sticky-card .header { max-width: 40ch; margin-left: auto; margin-right: auto; }

  /* If you decide to hide the entire card block on phones, uncomment below:
     html body #how-it-works .ix_sticky-card { display: none !important; }
  */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html body * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  html body [class*="ix_"] {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* This targets touch devices specifically */
  html body [class*="ix_"] {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  
  /* Disable problematic Webflow interactions */
  html body [data-w-id] {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

/* JavaScript override - add this as a script tag alternative */
@media (max-width: 767px) {
  /* Use CSS to completely disable transforms EXCEPT for chat widget */
  html body *:not(.ppsom-chat-bubble):not(.ppsom-chat-window):not(#chatkit-container):not(#chatkit-container *) {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
  }

  /* Target specific Webflow elements but exclude chat */
  html body [style*="transform"]:not(.ppsom-chat-bubble):not(.ppsom-chat-window):not(#chatkit-container):not(#chatkit-container *),
  html body [style*="translate"]:not(.ppsom-chat-bubble):not(.ppsom-chat-window):not(#chatkit-container):not(#chatkit-container *),
  html body [style*="matrix"]:not(.ppsom-chat-bubble):not(.ppsom-chat-window):not(#chatkit-container):not(#chatkit-container *) {
    transform: none !important;
  }

  /* IMPORTANT: Allow chat widget to use transforms */
  html body .ppsom-chat-bubble,
  html body .ppsom-chat-window,
  html body #chatkit-container,
  html body #chatkit-container * {
    transform: initial !important;
    -webkit-transform: initial !important;
  }
}

/* Mobile card vertical centering fix */
@media (max-width: 767px) {
  /* Center content vertically inside the cards on the How it works section */
  html body #how-it-works .card.card_body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Convert the inner grid to a flex column and remove the forced aspect ratio */
  html body #how-it-works .card.card_body .w-layout-grid.grid_2-col.tablet-1-col.ratio_3x2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    aspect-ratio: auto !important;
  }
  /* Ensure the header block sizes to content and stays centered */
  html body #how-it-works .card.card_body .header {
    width: 100% !important;
    max-width: 40ch !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* Buttons: keep a comfortable width and center them */
  html body #how-it-works .card.card_body .button-group {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  html body #how-it-works .card.card_body .button-group .button,
  html body #how-it-works .card.card_body .button-group .w-button {
    width: auto !important;
    min-width: 200px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
}


/* Ensure phone landscape matches phone portrait visuals */
@media (orientation: landscape) and (max-height: 480px) {
  /* Treat as phone: disable animations/transforms like portrait */
  html body [class*="ix_"],
  html body div[class*="ix_"],
  html body .ix_parallax-x-left-0-to--20,
  html body .ix_hero-to-place-trigger,
  html body .ix_custom_hero-to-place-wrapper,
  html body [data-w-id] {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    opacity: 1 !important;
  }

  /* Hero: same two-square layout as portrait */
  html body .mobile-hero-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px 10px !important;
  }
  html body .ix_custom_hero-to-place-wrapper.is-item-2 { 
    display: none !important; 
  }
  html body .ix_custom_hero-to-place-wrapper,
  html body .ix_custom_hero-to-place-wrapper.is-item-1,
  html body .ix_custom_hero-to-place-wrapper.is-item-4 {
    position: static !important;
    transform: none !important;
    transition: none !important;
    flex: 0 0 calc(50% - 10px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  html body .mobile-hero-grid .image_cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* Sections: stack grids and hide big imagery like portrait */
  html body .grid_2-col.tablet-1-col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  html body #how-it-works .ix_sticky-card img,
  html body #how-it-works .ix_sticky-card .image_cover,
  html body .ix_sticky-card .image_cover {
    display: none !important;
  }

  /* Ensure hero section height behaves (avoid 100vh issues) */
  html body .section.is-hero {
    height: auto !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
  }
}

/* --- Additional hardening: stop scroll snap and slider transforms on mobile --- */
@media (max-width: 767px) {
  /* Disable scroll snap and smooth scrolling to avoid jumpy card motion */
  html, body { scroll-behavior: auto !important; }
  html, body, .w-slider, .w-slider-mask, .w-slide, .w-tabs, .w-tab-content, .w-dyn-list, .w-layout-grid, .collection-list, .collection-list-wrapper {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
  }

  /* Neutralize common slider/card transforms and transitions */
  .w-slider, .w-slider-mask, .w-slide, .w-slider-nav, .w-dyn-list, .w-dyn-items, .w-dyn-item,
  .collection-list, .collection-list-wrapper, .w-layout-grid,
  .card, [class*="card"], [class*="tile"], [class*="carousel"], [class*="slider"], [class*="gallery"] {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}


/* --- Mobile chat widget hard kill-switch (common third-party embeds) --- */
@media (max-width: 767px) {
  /* Hide common third-party chat launchers and iframes on phones */
  #tidio-chat,
  #tidio-chat iframe,
  .crisp-client,
  #crisp-chatbox,
  #tawkchat-minified-wrapper,
  #tawkchat-container,
  #tawkchat-status-text-container,
  .intercom-lightweight-app,
  .intercom-launcher,
  .intercom-namespace,
  .intercom-messenger-frame,
  .fb_dialog,
  #fb-root + .fb_dialog,
  .zEWidget-launcher,
  #launcher,
  .hsconversations-iframe,
  #hubspot-messages-iframe-container,
  #hubspot-messages-iframe,
  .hs-chat-widget,
  .fc_frame,
  .fc-widget,
  .fc_widget,
  #smartsupp-widget,
  .smartsupp,
  .smartsupp-widget,
  #tlkio,
  #helpcrunch-widget,
  #helpcrunch-iframe,
  #drift-widget-container,
  .drift-frame-controller,
  #drift-frame-controller,
  #freshchat-container,
  .freshchat-container,
  .freshchat-snackbar,
  #zohoHCAsapLauncher,
  .zohoHCLauncher,
  #livechat-compact-container,
  #livechat-eye-catcher,
  #livechat-full,
  #lc_chat_layout,
  #zsiqwidget,
  .widget-visible,
  #tidio-chat iframe[title*="chat" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}