/* ============================================
   MOBILE HEADER FIX — Step 1
   Forces position:fixed on mobile (≤767px).
   Replaces broken sticky (killed by html/body height:100%).
   
   LOAD ORDER: After main.css, tiny.css, small.css, medium.css
   FILE: css/mobile-header-fix.css
   
   Does NOT modify any existing file.
   ============================================ */

/* --- Primary fix: fixed header on mobile --- */
@media (max-width: 767px) {

    /* Override sticky (main.css !important) and absolute (tiny/small.css) */
    header#header-cap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 30;
        background: rgba(250, 253, 255, 0.97);
    }

    /* Compensate: push content down by header height.
       --header-h is set by main.js measureHeader().
       Fallback 80px matches diagnostic measurement. */
    main#page-content {
        padding-top: var(--header-h, 80px);
    }

    article.page-article {
        background-image: none !important;
        background-color: transparent !important;
        padding-top: 0 !important;
    }

    article.page-article > section.content-wrapper {
        padding-top: 1em !important;
    }
}

/* --- Safety: short viewports also get fixed --- */
@media (max-width: 767px) and (max-height: 560px) {
    header#header-cap {
        position: fixed !important;
    }
}