/* ==================================================
   MOBILE-ONLY FIXES
   Scope: max-width: 992px (matches existing mobile breakpoint)
   Desktop styles are untouched.
   ================================================== */

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

    /* ----------------------------------------------------
       ISSUE 1 FIX: Mobile nav menu scroll
       ----------------------------------------------------
       Root cause: header.header-mobile expands its height via JS
       (menu_arrow / #menu-btn click handler) but has no scroll
       container or fixed positioning, so menu items below the
       viewport are unreachable. We turn the mobile header into
       a fixed, scrollable panel and lock background scroll via
       a JS-toggled body class.
    ---------------------------------------------------- */

    header.header-mobile {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;          /* never exceed the viewport */
        overflow-y: auto;           /* scroll the menu, not the page */
        -webkit-overflow-scrolling: touch; /* smooth iOS momentum scroll */
        overscroll-behavior: contain;      /* stop scroll chaining to body */
        z-index: 2000;              /* stay above page content */
    }

    /* Let the menu list itself shrink/scroll inside the fixed header
       rather than just being clipped */
    header.header-mobile #mainmenu {
        max-height: none;
        overflow: visible;
    }

    /* Prevent background page scroll while the mobile menu is open.
       Body class is toggled via JS (see mobile-fixes.js). */
    body.menu-open {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }

    /* Ensure menu remains usable/fixed after a menu item is tapped:
       JS removes .menu-open on item click, restoring normal scroll. */
}


/* ==================================================
   ISSUE 2 FIX: Floating buttons collision
   (#back-to-top vs .floating-buttons: call & whatsapp)
   ==================================================
   Root cause: #back-to-top is fixed at bottom:20px/right:20px,
   while .floating-buttons (call + whatsapp) sits at bottom:90px/
   right:30px independently. On small screens these footprints
   overlap because spacing was hardcoded for desktop-ish sizes
   and never accounted for #back-to-top's own height.
   Fix: stack everything in one consistent vertical rhythm using
   a CSS custom property for gap, and dynamically offset
   .floating-buttons above #back-to-top only on mobile.
---------------------------------------------------- */

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

    :root {
        --fab-gap: 16px;          /* space between stacked floating buttons */
        --fab-size: 52px;         /* matches existing mobile .floating-btn size */
        --back-to-top-size: 40px; /* matches #back-to-top width/height */
        --fab-edge-offset: 20px;  /* distance from screen edge */
    }

    /* Scroll-to-top stays bottom-right, fixed edge offset */
    #back-to-top {
        right: var(--fab-edge-offset) !important;
        bottom: var(--fab-edge-offset) !important;
        z-index: 1020; /* below floating call/whatsapp so it never visually fights them */
    }

    #back-to-top.show {
        bottom: var(--fab-edge-offset) !important;
    }

    /* Floating call/whatsapp stack starts ABOVE back-to-top with a clear gap,
       calculated from back-to-top's size + edge offset + desired gap.
       This avoids hardcoding a single "guessed" pixel value disconnected
       from back-to-top's actual footprint. */
    .floating-buttons {
        right: var(--fab-edge-offset) !important;
        bottom: calc(var(--back-to-top-size) + var(--fab-edge-offset) + var(--fab-gap)) !important;
        gap: var(--fab-gap) !important;
        z-index: 9999; /* above back-to-top */
    }

    .floating-btn {
        width: var(--fab-size);
        height: var(--fab-size);
    }
}

@media only screen and (max-width: 480px) {
    :root {
        --fab-gap: 12px;
        --fab-size: 46px;
        --back-to-top-size: 40px;
        --fab-edge-offset: 15px;
    }
}