/*
    Daman "app screen" — policy/info topic pages rendered as native-looking full-screen pages on a
    phone: a sticky back+title bar, and no storefront chrome.

    Opted in per topic via Topic.BodyCssClass = "daman-appscreen" (an existing admin field), so which
    pages get this is content, not code.

    Scoped to `body.daman-appscreen` AND a mobile media query. On desktop the page keeps its header
    and nav — a wide screen with no chrome reads as broken, not native.

    Plain CSS, loaded from the view: the Flex base theme excludes page-level stylesheets from its SCSS
    compile. Bump ?v= when editing.

    RTL: logical properties only. These pages are read right-to-left by most of their audience, and the
    back chevron in particular has to mirror.
*/

@media (max-width: 991.98px) {

    /* ---------- Hide the chrome ----------
       Everything that says "this is a website" goes: the shop header, the mega menu, the breadcrumb,
       the footer and the fixed bottom nav. What is left is the content and a way back.

       Selectors are deliberately explicit rather than a blanket `body > *:not(main)`: a blanket rule
       would also swallow the notification host, the cookie banner and any modal, and those still have
       to work here. */
    /* #header rather than the .shopbar inside it: hiding only the bar left its two wrappers standing,
       and an empty .shopbar-section still measured 17px — a strip of blank white above the back arrow
       that looked like a mistake because it was one. Nothing else lives in #header (the shopbar and
       the mega menu section, which is desktop-only anyway), and the off-canvas menu is a sibling of
       it, so it still opens. */
    body.daman-appscreen #header,
    body.daman-appscreen .shopbar,
    body.daman-appscreen .megamenu,
    body.daman-appscreen #topbar,
    body.daman-appscreen .breadcrumb,
    body.daman-appscreen .daman-bottomnav,
    body.daman-appscreen #footer {
        display: none !important;
    }

    /* The bottom nav reserves space via a body padding that is now dead weight. */
    body.daman-appscreen.daman-has-bottomnav {
        padding-bottom: 0 !important;
    }

    /* The other 24px above the bar. #content is a MARGIN on an element matched by id — the old
       `.content` selector here matched nothing on this page and zeroed a padding that was already 0,
       which is why the gap survived. The bar has to sit flush against the top of the viewport or it
       is not an app screen, it is a website with a strip missing. */
    body.daman-appscreen #content-wrapper,
    body.daman-appscreen .content {
        padding-block-start: 0;
    }

    body.daman-appscreen #content {
        margin-block-start: 0;
    }

    /* ---------- The bar ----------
       Sticky, not fixed: fixed would need the content padded by exactly the bar's height forever, and
       any drift shows as a strip of content hidden under it. Sticky occupies real space and cannot
       drift. It also keeps the bar out of the way of position:fixed descendants. */
    .dappbar {
        position: sticky;
        inset-block-start: 0;
        z-index: 1020;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-inline: .5rem;
        padding-block: .5rem;
        /* Clears the notch on a phone held in a case that thinks it is a spaceship. */
        padding-block-start: calc(.5rem + env(safe-area-inset-top));
        background: var(--body-bg, #fff);
        border-block-end: 1px solid rgba(128, 128, 128, .18);
        /* Full-bleed: the page container's gutters would inset the bar and break the illusion. */
        margin-inline: calc(var(--content-padding-x, 1rem) * -1);
    }

    .dappbar-back {
        flex: 0 0 auto;
        /* 44px: this is the only way out of a chrome-less page. It does not get to be fiddly. */
        inline-size: 44px;
        block-size: 44px;
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: inherit;
        border-radius: 50%;
    }

    .dappbar-back:active {
        background: rgba(128, 128, 128, .15);
    }

    /* A CSS chevron rather than an icon font: it must point at the reading START, which means it has
       to mirror in RTL. A glyph would need two icons and a direction check; a rotated border needs one
       rule and the [dir] override below. */
    .dappbar-chev {
        inline-size: .55rem;
        block-size: .55rem;
        border-inline-start: 2px solid currentColor;
        border-block-start: 2px solid currentColor;
        transform: rotate(-45deg);
        /* Nudged toward the point so it sits optically centred in the round tap target. */
        margin-inline-start: .18rem;
    }

    /* 45deg, not 135deg. In RTL the logical borders resolve to top + RIGHT, so the corner already
       points up-and-right; 135deg swung it a further quarter turn past the target and the button
       rendered as a DOWN chevron — read as "expand this", not "go back". 45deg lands it pointing at
       the inline start, which in RTL is the right edge. */
    [dir="rtl"] .dappbar-chev {
        transform: rotate(45deg);
        margin-inline-start: 0;
        margin-inline-end: .18rem;
    }

    .dappbar-title {
        flex: 1 1 auto;
        min-inline-size: 0;
        font-size: 1rem;
        font-weight: 700;
        /* One line, ellipsised: "سياسة الإرجاع والاسترداد" must not wrap the bar to two rows. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* Centred, with the back button balanced by an equal invisible box on the other side, so the
           title sits in the true middle regardless of its length. */
        text-align: center;
        padding-inline-end: 44px;
    }

    /* The topic's own H1 would repeat the title now in the bar. */
    body.daman-appscreen #topic-container > .topic-block > h1:first-child,
    body.daman-appscreen #topic-container > h1:first-child {
        display: none;
    }

    body.daman-appscreen #topic-container {
        padding-block: 1rem 2rem;
        font-size: .92rem;
        line-height: 1.65;
    }

    /* Long policy pages carry tables (shipping times, costs). A table wider than a phone must scroll
       inside its own box — never let the PAGE scroll sideways. */
    body.daman-appscreen #topic-container table {
        display: block;
        max-inline-size: 100%;
        overflow-x: auto;
        border-collapse: collapse;
    }

    body.daman-appscreen #topic-container th,
    body.daman-appscreen #topic-container td {
        padding: .5rem .6rem;
        border: 1px solid rgba(128, 128, 128, .25);
        white-space: nowrap;
    }
}