/* ═══════════════════════════════════════════════════════════════════════════
   mobile-header.css — the top search bar as a floating pill.

   Mobile.css draws .mobile-header as a full-width opaque strip pinned to the
   top. This restyles it to match the bottom navigation: the bar itself becomes
   an invisible, click-through frame and only the search control is a surface,
   so the page keeps showing through and scrolls underneath it.

   The frosted-glass values are taken from .khone-nav in footer.css so the two
   bars read as one design.

   Loaded only by _Layout.Responsive, so pages still on the old layout — Index
   among them — keep the current strip until they are converted.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

    .mobile-header {
        height: auto;
        padding: calc(10px + var(--safe-top, 0px)) 12px 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* The frame must not swallow taps meant for the content beneath it. */
        pointer-events: none;
    }

        /* The bar spans the row so the pill inside it can match the bottom one. */
        .mobile-header .header-left {
            pointer-events: auto;
            flex: 1;
            min-width: 0;
            padding: 0;
            padding: 0;
        }

        .mobile-header .header-right {
            pointer-events: auto;
        }

        /*
       Same footprint as .khone-nav: full width up to 460px, centred, 6px of
       padding and a 27px radius, with its frosted-glass surface.
    */
        .mobile-header .search-box {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 460px;
            margin: 0 auto;
            padding: 6px;
            border: 1px solid rgba(255, 255, 255, .55);
            border-radius: 27px;
            background: rgba(255, 255, 255, .62);
            -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
            box-shadow: 0 8px 28px rgba(58, 70, 61, .14), 0 1px 2px rgba(58, 70, 61, .05), inset 0 1px 0 rgba(255, 255, 255, .5);
        }

            .mobile-header .search-box a {
                display: flex;
                align-items: center;
                width: 100%;
            }

            /* The artwork is already the right size — it just needs to fill the row. */
            .mobile-header .search-box img {
                width: 100%;
                height: auto;
            }

    /* Same fallback the bottom bar uses where backdrop-filter is unsupported. */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .mobile-header .search-box {
            background: rgba(255, 255, 255, .95);
            border-color: rgba(87, 99, 89, .12);
        }
    }

    /*
       With the strip gone the old clearance is too deep. Mobile.css reserves
       var(--header-h) + 8px = 68px for a 60px opaque bar; the pill needs only
       enough room to sit above the first line, and content scrolling beneath
       it is now intended.
    */
    .content-wrapper {
        padding-top: calc(var(--safe-top, 0px) + 8px);
    }
}

/*
   Where the floating search pill is shown, the page starts below it.

   The pill is fixed, and the clearance above was cut to 8px so content
   scrolls under it — which is right once the visitor scrolls, but at rest it
   put the first banner behind the pill. :has() asks whether this page renders
   the pill at all; pages without it keep the 8px.
*/
@media (max-width: 899px) {
    body:has(.mobile-header) .content-wrapper {
        padding-top: calc(var(--safe-top, 0px) + 68px);
    }
}