/* ==========================================================================
   FUDUMALA MOBILE OPTIMIZATIONS
   Enhanced mobile experience for all devices
   ========================================================================== */

/* Enhanced Mobile Navigation */
@media screen and (max-width: 991px) {
  /* Mobile menu container */
  .navbar6_menu {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    z-index: 999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Show menu when open */
  .navbar6_menu.nav-open {
    transform: translateY(0) !important;
  }
  
  /* Menu button styling */
  .navbar6_menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Hamburger menu animation */
  .menu-icon1_line-top,
  .menu-icon1_line-middle,
  .menu-icon1_line-bottom {
    transition: all 0.3s ease !important;
  }
  
  .w--open .menu-icon1_line-top {
    transform: rotate(45deg) translateY(8px) !important;
  }
  
  .w--open .menu-icon1_line-middle {
    opacity: 0 !important;
  }
  
  .w--open .menu-icon1_line-bottom {
    transform: rotate(-45deg) translateY(-8px) !important;
  }
  
  /* Menu sections */
  .navbar6_menu-left,
  .navbar6_menu-right {
    width: 100% !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  /* Mobile nav links */
  .navbar6_link {
    display: block !important;
    padding: 1rem !important;
    font-size: 1.125rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.2s ease !important;
  }
  
  .navbar6_link:hover,
  .navbar6_link:focus {
    background-color: rgba(107, 70, 193, 0.05) !important;
  }
  
  /* Mobile CTA button */
  .navbar6_menu-right .button {
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 1rem !important;
    text-align: center !important;
  }
}

/* Core Mobile Enhancements */
@media screen and (max-width: 991px) {
  /* Tablet optimizations */
  .padding-section-large {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .container-large {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Navigation improvements */
  .navbar6_menu-button {
    padding: 8px !important;
  }
  
  .navbar6_logo {
    height: 28px !important;
  }
}

@media screen and (max-width: 767px) {
  /* Mobile landscape optimizations */
  
  /* Typography scaling */
  .heading-style-h1-overlay {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .heading-style-h2 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }
  
  .heading-style-h3 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  .heading-style-h5 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
  
  .text-size-medium_overlay {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Container and spacing optimizations */
  .padding-section-large {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  .container-large {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .margin-bottom.margin-xxlarge {
    margin-bottom: 2rem !important;
  }
  
  .margin-bottom.margin-xlarge {
    margin-bottom: 1.5rem !important;
  }
  
  .margin-bottom.margin-large {
    margin-bottom: 1.25rem !important;
  }
  
  .margin-bottom.margin-medium {
    margin-bottom: 1rem !important;
  }
  
  /* Header optimizations */
  .header50_component {
    text-align: center !important;
  }
  
  .header50_background-image {
    min-height: 60vh !important;
  }
  
  /* Navigation improvements */
  .navbar6_container {
    padding: 0.75rem 1rem !important;
  }
  
  .navbar6_logo {
    height: 24px !important;
  }
  
  .navbar6_menu-button {
    padding: 6px !important;
  }
  
  /* Button group optimizations */
  .button-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .button-group .button {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Grid optimizations */
  .layout240_list.sponsor {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .layout240_item.sponsor {
    max-width: 100% !important;
  }
  
  /* Contact page grid */
  .contact13_component {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Footer optimizations */
  .footer5_top-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }
  
  .footer5_link-column {
    margin-bottom: 1rem !important;
  }
  
  .footer5_bottom-wrapper {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .footer5_legal-list {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  
  .footer5_social-icons {
    justify-content: center !important;
    gap: 1rem !important;
  }
}

@media screen and (max-width: 479px) {
  /* Mobile portrait optimizations */
  
  /* Enhanced typography for small screens */
  .heading-style-h1-overlay {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .heading-style-h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .heading-style-h3 {
    font-size: 1.375rem !important;
    line-height: 1.4 !important;
  }
  
  .text-size-medium_overlay {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* Tighter spacing for small screens */
  .padding-section-large {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .container-large {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
  
  /* Header optimizations */
  .header50_background-image {
    min-height: 50vh !important;
  }
  
  /* Navigation for small screens */
  .navbar6_container {
    padding: 0.5rem 0.875rem !important;
  }
  
  .navbar6_logo {
    height: 20px !important;
  }
  
  /* Enhanced button styling */
  .button-group .button {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
  }
  
  /* Grid gap reductions */
  .layout240_list.sponsor {
    gap: 1.25rem !important;
  }
  
  .contact13_component {
    gap: 1.5rem !important;
  }
  
  /* Margin reductions */
  .margin-bottom.margin-xxlarge {
    margin-bottom: 1.5rem !important;
  }
  
  .margin-bottom.margin-xlarge {
    margin-bottom: 1.25rem !important;
  }
  
  .margin-bottom.margin-large {
    margin-bottom: 1rem !important;
  }
}

/* ==========================================================================
   SPONSOR CARDS MOBILE OPTIMIZATION
   ========================================================================== */

/* Payment toggle mobile improvements */
@media screen and (max-width: 767px) {
  .payment-toggle {
    padding: 3px !important;
    margin-bottom: 10px !important;
  }
  
  .payment-option {
    padding: 6px 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
  }
  
  .recurring-info {
    padding: 10px !important;
    font-size: 0.8125rem !important;
    margin-bottom: 8px !important;
  }
  
  .sponsor-btn {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
  }
  
  .layout240_image.sponsor {
    max-height: 200px !important;
    object-fit: cover !important;
  }
}

@media screen and (max-width: 479px) {
  .payment-option {
    padding: 5px 6px !important;
    font-size: 0.75rem !important;
  }
  
  .recurring-info {
    padding: 8px !important;
    font-size: 0.75rem !important;
  }
  
  .sponsor-btn {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.8125rem !important;
  }
  
  .layout240_image.sponsor {
    max-height: 180px !important;
  }
}

/* ==========================================================================
   CONTACT PAGE MOBILE OPTIMIZATION
   ========================================================================== */

@media screen and (max-width: 767px) {
  .icon-featured-square-large {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 1rem auto !important;
  }
  
  .icon-1x1-xsmall .material-icons {
    font-size: 20px !important;
  }
  
  .contact13_item-content {
    text-align: center !important;
  }
  
  .text-style-link-02 {
    display: block !important;
    margin: 0.25rem 0 !important;
    word-break: break-all !important;
  }
}

@media screen and (max-width: 479px) {
  .icon-featured-square-large {
    width: 50px !important;
    height: 50px !important;
  }
  
  .icon-1x1-xsmall .material-icons {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   FORM AND INPUT MOBILE OPTIMIZATION
   ========================================================================== */

@media screen and (max-width: 767px) {
  .w-input,
  .w-select,
  .w-textarea {
    padding: 0.875rem !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
  }
  
  .w-form-done,
  .w-form-fail {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
  }
}

/* ==========================================================================
   IMAGE AND MEDIA MOBILE OPTIMIZATION
   ========================================================================== */

@media screen and (max-width: 767px) {
  .layout240_image-wrapper {
    margin-bottom: 1rem !important;
  }
  
  .layout240_image {
    border-radius: 8px !important;
  }
  
  .layout18_image {
    border-radius: 8px !important;
    max-height: 250px !important;
    object-fit: cover !important;
  }
  
  .header50_background-image {
    object-position: center center !important;
  }
  
  .cta3_background-image {
    object-position: center center !important;
  }
}

@media screen and (max-width: 479px) {
  .layout18_image {
    max-height: 200px !important;
  }
}

/* ==========================================================================
   SOCIAL SHARING MOBILE OPTIMIZATION
   ========================================================================== */

@media screen and (max-width: 767px) {
  .social-share-buttons {
    justify-content: center !important;
    gap: 1rem !important;
    padding: 1rem 0 !important;
  }
  
  .share-button {
    padding: 0.75rem !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
  }
  
  .share-button .material-icons {
    font-size: 20px !important;
  }
}

/* ==========================================================================
   PERFORMANCE AND ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Touch target improvements */
@media screen and (max-width: 767px) {
  .w-nav-link,
  .footer5_link,
  .button,
  .w-button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .payment-option {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Smooth scrolling for mobile */
@media screen and (max-width: 991px) {
  html {
    scroll-behavior: smooth !important;
  }
  
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
}

/* Enhanced focus states for mobile */
@media screen and (max-width: 767px) {
  .button:focus,
  .w-button:focus,
  .payment-option:focus {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
  }
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES FOR MOBILE VIEWPORT
   ========================================================================== */

:root {
  --vh: 1vh;
}

/* Mobile viewport height adjustments */
@media screen and (max-width: 767px) {
  .header50_background-image {
    height: calc(var(--vh, 1vh) * 50) !important;
    min-height: calc(var(--vh, 1vh) * 40) !important;
  }
  
  .section_header50 {
    min-height: calc(var(--vh, 1vh) * 50) !important;
  }
}

/* ==========================================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* Hardware acceleration for smoother animations */
  .payment-toggle,
  .payment-option,
  .sponsor-btn,
  .button {
    transform: translateZ(0) !important;
    will-change: transform, opacity !important;
  }
  
  /* Reduce animation complexity on mobile */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Optimize scrolling */
  body {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
}

/* ==========================================================================
   PWA AND STANDALONE APP OPTIMIZATIONS
   ========================================================================== */

@media all and (display-mode: standalone) {
  /* Styles for when site is added to home screen */
  .navbar6_component {
    padding-top: env(safe-area-inset-top) !important;
  }
  
  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* Safe area insets for iPhone X and newer */
@supports (padding: max(0px)) {
  .container-large {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* ==========================================================================
   DARK MODE MEDIA QUERY PREPARATION
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Prepare for dark mode if needed in future */
  .payment-toggle {
    background: #374151 !important;
  }
  
  .payment-option.active {
    background: #1f2937 !important;
    color: #60a5fa !important;
  }
}