/* Mobile fixes for main page - iPhone optimization */

/* Small mobile devices (up to 640px) */
@media only screen and (max-width: 640px) {
  /* Fix excessive header spacing */
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 3rem !important; /* Much smaller padding */
  }
  
  .mxd-page-content.inner-page-content {
    padding-top: 3rem !important; /* Minimal padding */
  }
  
  /* Hero section adjustments - move animation up */
  .hero-section,
  .mxd-hero {
    min-height: calc(100vh - 100px);
    padding-top: 20px !important;
    padding-bottom: 40px;
  }
  
  /* Fix hero-07 specific spacing - animation starts much higher */
  .mxd-hero-07 {
    padding-top: 20px !important;
    min-height: calc(100vh - 20px) !important;
  }
  
  .mxd-hero-07__wrap {
    padding-top: 0 !important;
    margin-top: -20px !important;
  }
  
  .mxd-hero-07__top {
    margin-top: -30px !important;
    padding-top: 0 !important;
  }
  
  /* Fix sections with pre-title padding */
  .mxd-section.padding-pre-title {
    padding-top: 4rem !important;
  }
  
  .mxd-section.padding-mtext-pre-title {
    padding-top: 3.5rem !important;
  }
  
  /* Fix animation container position - move much higher */
  .mxd-hero__animation,
  .hero-animation,
  .animation-container,
  .hero-07-circle__image {
    margin-top: -60px !important;
    position: relative !important;
    top: -20px !important;
  }
  
  /* Also move scroll tags up */
  .hero-scroll-tag {
    margin-top: -40px !important;
  }
  
  /* Reduce section paddings */
  .mxd-section,
  section {
    padding: 60px 0 !important;
  }
  
  /* Text size optimizations - MUCH BIGGER on mobile */
  .mxd-heading-1,
  .h1,
  h1 {
    font-size: clamp(2.5rem, 9vw, 3.5rem) !important;
    line-height: 1.1;
    font-weight: 700 !important;
  }
  
  .mxd-heading-2,
  .h2,
  h2 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.2;
    font-weight: 600 !important;
  }
  
  .mxd-heading-3,
  .h3,
  h3 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    line-height: 1.25;
    font-weight: 600 !important;
  }
  
  .mxd-text-lead,
  .lead {
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    line-height: 1.5;
  }
  
  /* Package titles and section headers - MUCH BIGGER */
  .mxd-card__title,
  .package-title,
  .section-title,
  .mxd-section-title__title,
  .mxd-section-title__hrtitle,
  .mxd-heading__title,
  .pricing-header__title,
  .mxd-accordion__title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  
  /* Section descriptions */
  .mxd-section-title__hrdescr,
  .mxd-heading__text {
    font-size: 1.3rem !important;
    line-height: 1.5 !important;
  }
  
  /* Regular paragraph text */
  p,
  .mxd-text {
    font-size: 16px !important;
    line-height: 1.6;
  }
  
  /* Container padding adjustments */
  .container,
  .mxd-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Navigation adjustments */
  .mxd-header {
    height: auto;
    min-height: 60px;
  }
  
  .mxd-nav__wrap {
    padding: 15px 20px;
  }
  
  /* Button sizes for better touch targets */
  .btn,
  .mxd-button,
  button {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 14px;
  }
  
  /* Fix any overflow issues */
  body {
    overflow-x: hidden;
  }
  
  .mxd-wrapper {
    overflow-x: hidden;
  }
}

/* iPhone specific (up to 414px) */
@media only screen and (max-width: 414px) {
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 4rem !important;
  }
  
  .mxd-page-content.inner-page-content {
    padding-top: 3.5rem !important;
  }
  
  /* Hero 07 specific for iPhone */
  .mxd-hero-07 {
    padding-top: 10px !important;
    min-height: calc(100svh - 10px) !important;
  }
  
  .mxd-hero-07__wrap {
    margin-top: -40px !important;
  }
  
  .mxd-hero-07__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
    margin-top: -10px !important;
  }
  
  /* Move animation circle up on iPhone */
  .hero-07-circle__image {
    margin-top: -80px !important;
    transform: scale(0.85) !important;
    position: relative !important;
    top: -30px !important;
  }
  
  /* Fix sections spacing */
  .mxd-section.padding-pre-title {
    padding-top: 3rem !important;
  }
  
  .mxd-section.padding-mtext-pre-title {
    padding-top: 2.5rem !important;
  }
  
  /* Larger text on iPhone */
  .mxd-heading-1,
  .h1,
  h1 {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
  }
  
  .mxd-heading-2,
  .h2,
  h2 {
    font-size: 1.9rem !important;
    font-weight: 600 !important;
  }
  
  .mxd-heading-3,
  .h3,
  h3 {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
  }
  
  .mxd-text-lead,
  .lead {
    font-size: 1.15rem !important;
  }
  
  /* Package and card titles */
  .mxd-card__title,
  .package-title,
  .section-title {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
  }
  
  /* Even smaller container padding */
  .container,
  .mxd-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Small iPhone (SE, 12 mini - up to 375px) */
@media only screen and (max-width: 375px) {
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 3.5rem !important;
  }
  
  /* Even more compact hero for small phones */
  .mxd-hero-07 {
    padding-top: 5px !important;
    min-height: calc(100svh - 5px) !important;
  }
  
  .mxd-hero-07__wrap {
    margin-top: -50px !important;
  }
  
  .mxd-hero-07__title {
    font-size: 1.8rem !important;
    margin-bottom: 5px !important;
    margin-top: -15px !important;
  }
  
  .hero-07-circle__image {
    margin-top: -90px !important;
    transform: scale(0.8) !important;
    position: relative !important;
    top: -40px !important;
  }
  
  .mxd-section.padding-pre-title {
    padding-top: 2.5rem !important;
  }
  
  .mxd-heading-1,
  .h1,
  h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
  }
  
  .mxd-heading-2,
  .h2,
  h2 {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
  
  .mxd-heading-3,
  .h3,
  h3 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
  }
  
  /* Package and card titles on small phones */
  .mxd-card__title,
  .package-title,
  .section-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
  }
  
  body {
    font-size: 14px;
  }
}

/* Fix for landscape orientation on mobile */
@media only screen and (max-width: 812px) and (orientation: landscape) {
  .mxd-wrapper.padding-top-pre-title {
    padding-top: 5rem !important;
  }
  
  .hero-section,
  .mxd-hero {
    min-height: calc(100vh - 60px);
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

/* Ensure animations don't cause layout shifts on mobile */
@media only screen and (max-width: 768px) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0.3s !important;
  }
  
  /* Reduce motion for performance */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Hide theme switcher on mobile and force light mode */
@media only screen and (max-width: 768px) {
  /* Hide all theme switching elements */
  .mxd-color-switcher,
  #color-switcher,
  .mxd-theme-mode,
  .theme-mode-switcher,
  .theme-switcher,
  .theme-mode,
  .dark-mode-toggle,
  .light-mode-toggle,
  [class*="theme-switch"],
  [class*="theme-toggle"],
  [class*="dark-mode-switch"],
  [class*="light-mode-switch"],
  [class*="color-switch"],
  .mxd-header__theme,
  .header-theme-mode,
  .mxd-nav__theme,
  #theme-toggle,
  #theme-switcher,
  [data-theme-toggle],
  [data-theme-switcher] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Force light theme colors on mobile */
  body,
  html,
  .mxd-wrapper {
    background-color: #FAF7F6 !important;
    color: #161616 !important;
  }
  
  /* Override any dark mode classes */
  body.dark-mode,
  html.dark-mode,
  body[data-theme="dark"],
  html[data-theme="dark"],
  .dark-mode,
  [data-theme="dark"] {
    background-color: #FAF7F6 !important;
    color: #161616 !important;
  }
  
  /* Force light theme on all sections */
  .mxd-section,
  section,
  .mxd-hero,
  .mxd-header,
  .mxd-footer {
    background-color: transparent !important;
    color: #161616 !important;
  }
  
  /* Ensure text remains dark */
  h1, h2, h3, h4, h5, h6,
  p, span, a, li, td, th,
  .mxd-text,
  .mxd-heading {
    color: #161616 !important;
  }
  
  /* Keep links visible */
  a {
    color: #0066cc !important;
  }
  
  a:hover {
    color: #0052a3 !important;
  }
}