/* ✅ Base Layout */
html, body {
    height: 100%;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    background: #f5f5f5;
}

/* ✅ Scroll-safe anchor jumps and content shifts */

html {
    /* if you have a fixed header of ~60px: */
    scroll-padding-top:    calc(60px + env(safe-area-inset-top, 15px));
    /* reserve room for footer (74px) */
    scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom, 15px));
}



/* ✅ Push content away from header & footer */
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;

    /* reserve 74px for footer + safe-area inset */
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 15px));
}

/* ✅ Global Module Spacing */
.main-content,
.page-wrapper,
.symptom-tracker-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ✅ Footer Navigation Buttons (inside .ma-footer-nav) */
.ma-nav-button {
    flex: 1;
    text-align: center;
    color: #4682B4 !important;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}
.ma-nav-button:hover,
.ma-nav-button:active {
    color: #3CB371 !important;
}
.ma-nav-button i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.2rem;
}

/* ✅ Responsive Adjustments for Mobile Devices */
@media (max-width: 768px) {
    html, body {
        font-size: 15px;
    }

    .module-container,
    .main-content,
    .page-wrapper,
    .symptom-tracker-container {
        margin-top: 10px;
        margin-bottom: 15px;
    }
}

/* ✅ Hard fallback for old Android browsers */
@supports not (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top:    40px;  /* if you need a header fallback */
        padding-bottom: 74px;
    }
}