/* ============================================================
   HAMASTA MEDIA — APP SHELL (phones, tablets and the installed app)
   Bottom tab bar, page-load progress bar and touch polish.
   Markup is injected by js/app-shell.js; nothing shows on desktop.
   ============================================================ */

:root {
    --hm-tab-h: 62px;
    --hm-tab-safe: env(safe-area-inset-bottom, 0px);
}

/* ── Page-load progress bar (all sizes) ── */
.hm-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #800000, #e8c766);
    z-index: 3000; opacity: 0; pointer-events: none;
    transition: width .4s ease, opacity .25s ease;
}
.hm-progress.run { opacity: 1; width: 80%; transition: width 6s cubic-bezier(.1, .6, .2, 1), opacity .2s; }

/* ── Bottom tab bar ── */
.hm-tabbar { display: none; }

@media (max-width: 900px) {
    .hm-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        height: calc(var(--hm-tab-h) + var(--hm-tab-safe));
        padding-bottom: var(--hm-tab-safe);
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid rgba(15, 23, 42, .08);
        box-shadow: 0 -4px 18px rgba(15, 23, 42, .06);
        transition: transform .25s ease;
    }
    .hm-tabbar.hide { transform: translateY(110%); }

    .hm-tab {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: #64748b; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
        font: 600 10.5px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .2px;
        -webkit-tap-highlight-color: transparent; position: relative;
    }
    .hm-tab i { font-size: 19px; line-height: 1; transition: transform .15s ease; }
    .hm-tab:active i { transform: scale(.86); }
    .hm-tab.active { color: #800000; }
    .hm-tab-badge {
        position: absolute; top: 6px; left: 50%; margin-left: 4px;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        background: #e11d48; color: #fff; border: 2px solid #fff;
        font: 700 10.5px/14px system-ui, sans-serif; text-align: center;
        box-shadow: 0 2px 6px rgba(225, 29, 72, .35);
    }
    .hm-tab.active::before {
        content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #800000;
    }

    /* Keep page content and floating buttons clear of the bar */
    body.hm-has-tabbar { padding-bottom: calc(var(--hm-tab-h) + var(--hm-tab-safe)) !important; }
    body.hm-has-tabbar .hm-pwa-bubble { bottom: calc(var(--hm-tab-h) + var(--hm-tab-safe) + 12px); }
    body.hm-has-tabbar .hm-pwa-tip { bottom: calc(var(--hm-tab-h) + var(--hm-tab-safe) + 68px); }
    body.hm-has-tabbar .back-to-top,
    body.hm-has-tabbar #backToTop,
    body.hm-has-tabbar .scroll-top { bottom: calc(var(--hm-tab-h) + var(--hm-tab-safe) + 14px) !important; }

    /* Snappier touch feel */
    a, button { -webkit-tap-highlight-color: transparent; }
}

/* ── Installed app only ── */
@media (display-mode: standalone) {
    html { overscroll-behavior-y: none; }
    body { -webkit-user-select: none; user-select: none; }
    p, li, h1, h2, h3, h4, blockquote, input, textarea, [contenteditable], .article-content, .article-body {
        -webkit-user-select: text; user-select: text;
    }
}

/* ── Footer "Download the app" badge (all sizes) ── */
.hm-app-badge {
    display: inline-flex; align-items: center; gap: 12px;
    align-self: flex-start; width: fit-content; max-width: 100%;
    margin-top: 18px; padding: 10px 18px 10px 10px;
    background: linear-gradient(135deg, #1a1a1f, #0b0b0e);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
    color: #fff; cursor: pointer; text-align: left;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.hm-app-badge:hover { transform: translateY(-2px); border-color: rgba(232, 199, 102, .6); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.hm-app-badge img { width: 34px; height: 34px; border-radius: 9px; background: #fff; flex: none; }
.hm-app-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.hm-app-badge small { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.hm-app-badge strong { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.hm-app-badge i { margin-left: 6px; color: #e8c766; font-size: 15px; }
@media (max-width: 768px) { .footer-brand .hm-app-badge { align-self: center; margin-left: auto; margin-right: auto; } }

/* ── Launch animation (installed app) ── */
/* Plain cover (no logo) in the manifest background colour, so only the video is seen */
html.hm-splashing::after {
    content: ''; position: fixed; inset: 0; z-index: 2147483000; background: #ffffff;
}
.hm-splash {
    position: fixed; inset: 0; z-index: 2147483001;
    background: #ffffff; display: flex; align-items: center; justify-content: center;
    transition: opacity .45s ease, transform .45s ease;
}
.hm-splash video { width: 100%; height: 100%; object-fit: cover; }
@media (min-aspect-ratio: 3/4) { .hm-splash video { object-fit: contain; } }
.hm-splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }

@media print { .hm-tabbar, .hm-progress, .hm-app-badge, .hm-splash { display: none !important; } }