/*!
 * ============================================================
 * QD World — Mobile App-Like Experience + PWA install control
 * ------------------------------------------------------------
 * Everything in this file is scoped to mobile media queries
 * ONLY (max-width: 764px and 564px, matching the template's own
 * existing breakpoints). Nothing here has any effect on desktop
 * or laptop — style.css / color.css / plugins.css / qd-ai-mic.css
 * are not modified or overridden outside those breakpoints.
 *
 * Selectors are prefixed with the existing ".hero-slider-wrap"
 * ancestor (already present in the DOM) purely to win the
 * cascade against style.css's own mobile rules for the same
 * elements, without editing any HTML or using !important.
 *
 * The microphone (#qdAiMic, .qd-ai-mic, its ripple/label) is
 * never referenced here — its position, size and behavior are
 * entirely governed by the frozen css/qd-ai-mic.css and are
 * untouched by this file.
 * ============================================================
 */

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

    /* --- Hero text: moved further down, as compact as practical,
       so the top of the image (face) stays clear --- */
    .hero-slider-wrap .half-hero-wrap {
        top: 47%;
        max-width: calc(100% - 48px);
    }

    .hero-slider-wrap .half-hero-wrap .hhw_header {
        font-size: 9px;
        letter-spacing: 1.2px;
        margin-bottom: 3px;
    }

    .hero-slider-wrap .half-hero-wrap h1 {
        font-size: 24px;
        line-height: 27px;
        margin: 0 0 5px;
    }

    /* Narrower than the block itself, on purpose: wraps onto more,
       shorter lines instead of spanning wide, so it reads as a
       slim column rather than a broad band across the image. */
    .hero-slider-wrap .half-hero-wrap h4 {
        font-size: 10px;
        line-height: 15px;
        max-width: 90%;
        padding-top: 4px;
        padding-bottom: 0;
    }

    /* Smaller, easier-to-scan CTA — same color/text/link, just a
       more compact footprint. Still a comfortable tap target. */
    .hero-slider-wrap .half-hero-wrap .btn {
        margin-top: 6px;
        padding: 10px 22px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    /* --- Install control (Android/Chrome "beforeinstallprompt") ---
       Created by js/pwa.js only when the browser actually offers an
       install prompt, and only ever shown here on mobile widths —
       even if the event also fires on a desktop Chrome, this rule
       keeps it hidden there. Positioned in the header band, clear
       of the logo, the hamburger menu, the hero text, the mic/
       "Let's Talk", Start Explore, and the left-edge share/social
       rail. Respects the iOS notch/status-bar safe area so it never
       sits under system UI. */
    .qd-pwa-install {
        position: fixed;
        top: max(14px, env(safe-area-inset-top, 0px));
        right: 90px;
        z-index: 9999;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 20px;
        background: rgba(20, 20, 20, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-family: 'Mukta Vaani', sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 9px;
        letter-spacing: 1.2px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .qd-pwa-install:focus-visible {
        outline: 2px solid #ff7a00;
        outline-offset: 2px;
    }

    .qd-pwa-install__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ff7a00;
        flex: 0 0 auto;
    }
}

@media only screen and (max-width: 564px) {
    .hero-slider-wrap .half-hero-wrap {
        top: 43%;
        max-width: calc(100% - 40px);
    }

    .hero-slider-wrap .half-hero-wrap h1 {
        font-size: 21px;
        line-height: 24px;
    }

    .hero-slider-wrap .half-hero-wrap h4 {
        font-size: 9px;
        line-height: 13px;
        max-width: 86%;
    }

    .hero-slider-wrap .half-hero-wrap .btn {
        padding: 9px 18px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .qd-pwa-install {
        right: 80px;
        padding: 6px 10px;
        font-size: 8px;
    }
}

/* ============================================================
 * Installed-app (standalone) fullscreen fix — mobile only
 * ------------------------------------------------------------
 * Scoped by (display-mode: standalone), so this ONLY applies
 * once the site is installed and launched as an app — never in
 * a normal mobile browser tab (which already renders correctly,
 * unchanged) and never on desktop (also gated to max-width so a
 * desktop-installed PWA, if any, is unaffected too).
 *
 * The existing height chain (html/body/#main/.full-height) is
 * entirely height:100% in style.css, cascading down from html.
 * In standalone mode that "100%" can resolve against a slightly
 * different metric than what's actually visible once the
 * browser's own chrome (address bar, etc.) is gone, leaving a
 * blank strip above the OS navigation bar. Overriding just the
 * one root of that chain, html, to the dynamic viewport height
 * (100dvh, with a 100vh fallback for older engines) makes every
 * height:100% descendant resolve correctly against it — no other
 * element needs to change. calc() additionally reserves the
 * Android gesture-nav / iOS home-indicator safe area at the
 * bottom (0 on classic 3-button nav, where none is needed) by
 * shrinking the total available height, so existing bottom-
 * anchored controls (Start Explore, slider nav) end up sitting
 * just clear of it without their own CSS changing at all. This
 * does not hide, resize, or draw under the system navigation —
 * it only makes sure the app's own content stops exactly at the
 * space the OS actually leaves available, respecting it instead
 * of leaving a gap before it. */
@media only screen and (max-width: 764px) and (display-mode: standalone) {
    html {
        height: 100vh;
        height: 100dvh;
        height: calc(100dvh - env(safe-area-inset-bottom, 0px));
    }
}