/* Mobile Responsive CSS for Better Tomorrow Challenges
   Only applies to mobile devices */

   @media only screen and (max-width: 768px) {
    /* Basic responsive setup */
    body {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* Main container */
    .main {
        width: 100% !important;
        float: none !important;
    }

    /* Links section */
    .links {
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 !important;
        text-align: center !important;
    }

    .links_green, .links_red {
        padding: 5px 10px !important;
        display: inline-block !important;
    }

    /* Logo section */
    .logo {
        width: 100% !important;
        height: auto !important;
    }

    .logo img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Content section */
    .content {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        background-repeat: repeat !important;
        background-size: 100% auto !important; 
        background-color: #fffbeb !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important; /* Allow content to flow naturally */
        touch-action: auto !important; /* Default touch behavior */
        position: relative !important; /* Establish positioning context */
    }

    /* Make all images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Footer section */
    .foot {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .foot_links_container {
        text-align: center !important;
        padding-right: 0 !important;
        float: none !important;
        padding-top: .1em !important;
    }

    /* Tables */
    .maintable, .forumtable_green, .forumtable_blue {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Forum topics */
    .forum_topic_green, .forum_topic_orange, .forum_topic_blue {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .forum_topic_left {
        width: 30% !important;
    }

    .forum_topic_right {
        width: 65% !important;
        padding-left: 5% !important;
    }

    /* Form elements */
    input[type="text"], input[type="password"], textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Additional mobile text handling for FAQ and long content pages */
    p, li, td, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    /* Specific styles for FAQ page */
    .content p {      
        word-break: break-word !important; /* Break words at any character if needed */
    }
    
    /* Ensure links don't break layout */
    a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: inline-block !important;
        max-width: 100% !important;
    }
    
    /* Basic scrolling setup for mobile devices */
    html {
        height: 100% !important;
        overflow-y: scroll !important; /* Always show vertical scrollbar */
        -webkit-overflow-scrolling: touch !important; /* Enable smooth scrolling on iOS */
    }
    
    body {
        min-height: 100% !important;
        position: relative !important;
        touch-action: manipulation !important; /* Improve touch handling */
    }

    p:not([align="center"]) {
        text-align: left !important
    }

    p[align="center"] {
        text-align: center !important;
    }

    p[style="text-align: center; font-size: 19px;"] {
        text-align: center !important;
    }

    .challenges, .challenge_links, .challenge_middleline {
        margin-left: 0px;
    }

    p[style="margin: 0;line-height: 30px;"] {
        display: none;
    }
    
    /* Fix scrolling issues on mobile devices */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* Remove tap highlight */
    }
    
    /* Ensure all scrollable containers have proper touch behavior */
    div, section, article, main, aside, nav {
        touch-action: auto !important; /* Default touch behavior */
    }
    
    /* Fix for specific mobile browsers that need momentum scrolling */
    .maintable, .forumtable_green, .forumtable_blue, .forum_topic_green, 
    .forum_topic_orange, .forum_topic_blue {
        -webkit-overflow-scrolling: touch !important;
        overflow: visible !important; /* Make sure content is not hidden */
    }
    
    /* Force hardware acceleration for smoother scrolling */
    .main, .content, .foot {
        -webkit-transform: translateZ(0) !important;
        -moz-transform: translateZ(0) !important;
        -ms-transform: translateZ(0) !important;
        -o-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
}