/* ==========================================================================
   header-mobile-sticky.css
   Keeps the mobile top bar (and its side nav button) reachable at any scroll
   depth on EVERY page, matching the homepage.

   Why this file exists: style.css pins .navbar with position:fixed, but on
   mobile that is undone by mobile-logo-fix.css and navbar-responsive-fix.css,
   which both reset .navbar to position:relative so the centred-logo absolute
   positioning works. The homepage escapes that because mobile-homepage.css
   pins the wrapping <header> instead - and only index/about load it.

   So: pin <header> here (leaving .navbar relative, which the logo centring
   depends on) and reserve the header's height at the top of <main>.

   position:sticky is NOT usable - responsive.css sets overflow-x:hidden on
   html, which breaks sticky on iOS Safari. Hence fixed + a spacer.

   The spacer below is a no-JS floor; js/header-mobile-sticky.js overwrites it
   with the header's real measured height (which varies by breakpoint and
   shrinks on .scrolled).

   Load AFTER mobile-logo-fix.css / navbar-responsive-fix.css.
   ========================================================================== */

@media only screen and (max-width: 768px) {

    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
    }

    /* The header is out of flow now, so put its height back. 70px is the
       navbar min-height at this breakpoint (navbar-responsive-fix.css); the JS
       replaces it with the measured height and subtracts any margin-top the
       page already reserves, so pages like about.html (100px from
       hero-mobile-shared.css) don't end up with a doubled gap.

       The blog-style pages (blog.html and the article pages) have no <main> at
       all - their first section is a sibling of <header> and already carries
       its own top offset for the fixed navbar (.blog-hero margin-top:70px in
       blog-post.css, .blog-listing-hero padding-top:100px in blog-listing.css),
       so the JS targets that element instead and tops it up only if short.

       index.html is deliberately NOT given this stylesheet: it already pins
       its own header and offsets <main> through mobile-homepage.css. */
    body > main {
        padding-top: 70px;
    }
}