/* ==========================================================================
   Sitewide phone fixes — linked after aurora-bg.css on every page.
   ========================================================================== */

/* Anchor links land below the fixed header */
section[id] { scroll-margin-top: 72px; }

@media (max-width: 968px) {
    /* The rule that hides the header's Member Login button also hid the copy inside the
       menu drawer, so phones had no way to reach the login page */
    .mobile-nav .cta-button {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 0.8rem 2.2rem;
        border-radius: 50px;
    }
    /* Drawer fits shorter phones; content starts below the header (which keeps the close button) */
    .mobile-nav {
        gap: 0.35rem;
        padding: 76px 1rem 1.5rem;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .mobile-nav a { font-size: 1.3rem; padding: 0.7rem 2rem; }
}

@media (max-width: 600px) {
    /* Header: smaller logo and a round call button so the menu button always fits on screen
       (at full size the logo + phone pill pushed the menu button past the right edge) */
    nav, nav.scrolled { padding: 0.2rem 0; }
    .nav-container { padding: 0.45rem 1rem; gap: 0.5rem; }
    .nav-left { gap: 0.6rem; min-width: 0; }
    .logo img, nav.scrolled .logo img { height: 52px; animation: none; }
    .logo img:hover { transform: none; }
    .nav-phone {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
        background: rgba(0, 102, 51, 0.1);
    }
    /* number stays available to screen readers; the tap target dials it */
    .nav-phone span:not(.nav-phone-icon) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .nav-phone-icon { font-size: 1.25rem; }
    .mobile-menu-btn { flex-shrink: 0; margin-left: auto; }

    /* Sales page QR card was a fixed 500px-wide block with 3rem padding */
    .qr-card { display: block; max-width: 100%; padding: 1.5rem; box-sizing: border-box; }
    .qr-card img, .qr-code-display img { max-width: 100%; height: auto; }
}