/* Mobile sticky action bar - fixed three-button bar shown on phones and tablets only.
   Color comes from --suntop-base so the bar matches each site automatically.
   This file must load AFTER the theme CSS (it overrides .scroll-to-top.show and
   .page-wrapper), so its <link> goes last in header.php, after responsive.css. */
.mobile-sticky-bar {
    display: none;
}

@media (max-width: 991px) {
    .mobile-sticky-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        display: flex;
        background: var(--suntop-black);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    }

    .mobile-sticky-bar__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 6px;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
    }

    .mobile-sticky-bar__item + .mobile-sticky-bar__item {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }

    /* R3 names Call Now the primary CTA, so it is the one button carrying the accent
       against the navy bar. Without this every button rendered the same color and the
       rule's emphasis did not exist. White on the accent measures 8.4:1. */
    .mobile-sticky-bar__item.is-primary {
        background: var(--suntop-base);
    }

    .mobile-sticky-bar__item i {
        font-size: 18px;
    }

    .mobile-sticky-bar__item:hover,
    .mobile-sticky-bar__item:focus-visible {
        color: #fff;
        background: rgba(0, 0, 0, 0.12);
    }

    /* Keep the back-to-top button above the bar so they do not overlap */
    .scroll-to-top.show {
        bottom: 90px;
    }

    /* Match the bar's height so a fully-scrolled page ends flush with the bar:
       no white gap above it, no footer content hidden behind it. Keep this in
       sync with the bar's rendered height if the item padding or font changes. */
    .page-wrapper {
        padding-bottom: 56px;
    }
}