/**
 * Mobile app shell for huntsvillesprinklerrepair.com (2026-10-04)
 * Loaded with media="(max-width: 768px)" so it never applies (or blocks rendering) on desktop.
 * - Fixed bottom tab bar (Call / Request / Services / Emergency / Menu) with safe-area inset
 * - Compact sticky top app bar
 */
@media (max-width: 768px) {
    :root { --hsr-tabbar-h: 62px; --hsr-topbar-h: 56px; }

    body { padding-bottom: calc(var(--hsr-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; }
    /* flow-root stops the hero/page-header margin-top collapsing through <body>, so body never "moves" during progressive render (CLS 0) */
    body { display: flow-root; }

    /* the old full-width call bar is replaced by the tab bar's Call button */
    .mobile-call-bar { display: none !important; }

    /* ---- compact top app bar ---- */
    .site-header {
        height: calc(var(--hsr-topbar-h) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
        display: flex;
        align-items: center;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .18);
    }
    .site-header .header-inner { width: 100%; padding: 0; gap: 10px; }
    .site-logo { min-width: 0; flex: 1 1 auto; }
    .site-logo .site-title {
        font-size: 1.08rem; line-height: 1.2; letter-spacing: .01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    }
    .site-logo img { height: 36px; }
    .mobile-menu-toggle {
        width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
        border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14);
    }
    .hamburger-icon { width: 20px; height: 15px; }
    .hero-section { margin-top: calc(var(--hsr-topbar-h) + env(safe-area-inset-top, 0px)); }
    .page-header {
        margin-top: calc(var(--hsr-topbar-h) + env(safe-area-inset-top, 0px));
        padding: 2.25rem 1.1rem 2rem;
    }

    /* ---- bottom tab bar ---- */
    .app-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        height: calc(var(--hsr-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -2px 14px rgba(0, 0, 0, .10);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        contain: layout paint;
    }
    .app-tab {
        flex: 1 1 0; min-width: 0; min-height: 48px; height: var(--hsr-tabbar-h);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        position: relative; margin: 0; padding: 6px 2px 5px;
        background: none; border: 0; border-radius: 0; cursor: pointer;
        color: #4a5568; text-decoration: none;
        font: 600 11px/1.1 'Segoe UI', Arial, sans-serif; letter-spacing: .01em;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    .app-tab-icon {
        display: flex; align-items: center; justify-content: center;
        width: 46px; height: 28px; border-radius: 14px;
        transition: background-color .15s ease, color .15s ease;
    }
    .app-tab .hsr-icon { font-size: 20px; vertical-align: 0; }
    .app-tab-label { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-tab:active .app-tab-icon { background: rgba(44, 82, 130, .12); }
    .app-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 10px; }

    /* active page */
    .app-tab.is-active, .app-tab.is-open { color: var(--primary); }
    .app-tab.is-active .app-tab-icon, .app-tab.is-open .app-tab-icon { background: rgba(44, 82, 130, .14); }
    .app-tab.is-active::before {
        content: ''; position: absolute; top: 0; left: 26%; right: 26%;
        height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
    }

    /* Call = primary action, Emergency = red accent */
    .app-tab--call { color: var(--primary); }
    .app-tab--call .app-tab-icon { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(44, 82, 130, .35); }
    .app-tab--emergency .app-tab-icon { color: #c53030; }
    .app-tab--emergency.is-active { color: #c53030; }
    .app-tab--emergency.is-active::before { background: #c53030; }
    .app-tab--emergency.is-active .app-tab-icon { background: rgba(197, 48, 48, .12); }

    /* keep the floating scroll-to-top button above the tab bar */
    .scroll-to-top {
        bottom: calc(var(--hsr-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important; width: 44px !important; height: 44px !important;
    }

    /* slide-out menu sits above the tab bar and clears the notch / home indicator */
    .mobile-menu { padding-top: calc(2rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
    .mobile-menu-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; top: calc(.75rem + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .app-tab-icon, .mobile-menu { transition: none; }
}