/* Responsive CSS for Arcade Website
 * Ensures header and footer are always visible
 * Mobile hamburger menu functionality
 * Responsive design for all screen sizes
 */

/* ============================================
   FIXED HEADER AND FOOTER
   ============================================ */

/* Ensure header is always fixed at top */
.navbar-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    min-height: 50px; /* Standard navbar height */
}

/* Prevent navbar from expanding too much */
.navbar-fixed-top .navbar-collapse {
    max-height: calc(100vh - 50px) !important; /* Viewport height minus navbar header */
}

@media (max-width: 768px) {
    .navbar-fixed-top {
        max-height: 100vh;
        overflow-y: auto;
    }
    
    .navbar-fixed-top .navbar-collapse {
        max-height: calc(100vh - 50px) !important;
    }
}

/* Ensure footer is always fixed at bottom */
.navbar-fixed-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    /* Ensure footer is in root stacking context, not nested */
}

/* Force footer to be above timeline - override any timeline stacking contexts */
footer {
    z-index: 10000 !important;
    position: relative !important; /* Don't create stacking context */
}

footer .navbar-fixed-bottom {
    z-index: 10000 !important;
    position: fixed !important;
}

/* Ensure timeline containers don't create stacking contexts that interfere */
.timeline-page-container,
.timeline-layout,
.timeline-events-container,
.main-timeline {
    /* DO NOT add: transform, opacity < 1, filter, will-change, isolation */
    /* These properties create stacking contexts */
    position: relative;
    z-index: 1 !important;
}

/* Add padding to body to account for fixed header and footer */
body {
    padding-top: 50px !important; /* Adjust based on header height - navbar is typically 50px */
    padding-bottom: 25px !important; /* Adjust based on footer height - footer is now half height */
    box-sizing: border-box;
}

/* Ensure main content doesn't get hidden behind fixed elements */
#page-top {
    padding-top: 0;
}

/* Ensure content sections have proper spacing */
#header,
#about,
.intro,
.container {
    position: relative;
    z-index: 1;
}

/* ============================================
   MOBILE HAMBURGER MENU
   ============================================ */

/* Hamburger button styling - override Bootstrap defaults */
.navbar-toggle {
    display: none; /* Hidden on desktop */
    float: right;
    padding: 9px 10px !important;
    margin-top: 8px !important;
    margin-right: 15px !important;
    margin-bottom: 8px !important;
    background-color: transparent !important;
    background-image: url(../images/hamburger.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    cursor: pointer;
    width: 40px !important;
    height: 40px !important;
    position: relative;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: url(../images/hamburger.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
}

/* Hide Font Awesome icon and Bootstrap icon bars when using image */
.navbar-toggle .fa-bars {
    display: none !important;
    visibility: hidden !important;
}

.navbar-toggle .icon-bar {
    display: none !important;
    visibility: hidden !important;
}

/* Show hamburger on mobile */
@media (max-width: 768px) {
    .navbar-toggle {
        display: block !important;
        background-image: url(../images/hamburger.png) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important;
    }
    
    /* Hide regular nav items on mobile when collapsed */
    .navbar-main-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .navbar-main-collapse.in,
    .navbar-main-collapse.collapse.in {
        max-height: 500px; /* Limit max height to prevent taking entire screen */
        transition: max-height 0.3s ease-in;
        overflow-y: auto; /* Allow scrolling if menu is too tall */
    }
    
    /* Ensure navbar doesn't expand beyond viewport */
    .navbar-fixed-top {
        max-height: 100vh;
        overflow-y: auto;
    }
    
    /* Stack nav items vertically on mobile */
    .navbar-nav {
        margin: 0;
        padding: 0;
    }
    
    .navbar-nav > li {
        float: none;
        display: block;
        width: 100%;
    }
    
    .navbar-nav > li > a,
    .navbar-nav > li > button {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Dropdown menus full width on mobile */
    .dropdown-content {
        position: static !important;
        display: none;
        width: 100%;
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dropdown.active .dropdown-content,
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    /* Make dropdown buttons full width on mobile */
    .dropbtn {
        width: 100% !important;
        text-align: left !important;
    }
}

/* ============================================
   RESPONSIVE LAYOUT
   ============================================ */

/* Container adjustments */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3, h4 {
        font-size: 18px !important;
    }
    
    .intro-text h1 {
        font-size: 28px !important;
    }
    
    .navbar-brand {
        font-size: 16px !important;
        padding: 15px 10px !important;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================
   FOOTER STYLING
   ============================================ */

.footer,
.navbar-fixed-bottom {
    background-color: #121d1f !important;
    color: #f4f5f6 !important;
    padding: 5px 0 !important;
    text-align: center !important;
    min-height: 20px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

.footer p,
.navbar-fixed-bottom p {
    margin: 0 !important;
    padding: 5px 0 !important;
    font-size: 14px !important;
}

/* ============================================
   DROPDOWN MENU IMPROVEMENTS
   ============================================ */

/* Better dropdown positioning on mobile */
@media (max-width: 768px) {
    .dropdown {
        position: static;
    }
    
    .dropdown-content {
        left: 0 !important;
        top: auto !important;
        transform: none !important;
        position: relative;
        width: 100%;
        margin-top: 0;
    }
}

/* Desktop dropdown hover */
@media (min-width: 769px) {
    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
}

/* ============================================
   FORM RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    .header_login form {
        padding: 10px;
    }
    
    .header_login input {
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    
    .header_login button {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* ============================================
   TABLE RESPONSIVENESS
   ============================================ */

@media (max-width: 768px) {
    table {
        font-size: 12px;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
.hidden-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.visible-mobile {
    display: none;
}

@media (max-width: 768px) {
    .visible-mobile {
        display: block !important;
    }
}

/* ============================================
   FIX FOR HIGH SCORE GRID ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    .high-score-grid-container {
        padding: 0.5rem;
    }
    
    .high-score-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
}