/*
 * app-viewport.css - the locked viewport of the theme's app shell: html and
 * body do not scroll, the inner .cn-scroll-container does.
 * Depends on tokens.css. Loaded by the theme's shell pages only (functions.php,
 * cn_enqueue_styles). Never by a standalone landing, and never by the
 * FluentCommunity portal, whose app scrolls the window (pages/portal.css).
 */

html, body {
    height: 100%;
    overflow: hidden;
    background-color: var(--cn-background-color);
    /* Brand backdrop: the gradient lives here, not on the hero, so it also
       shows behind the header pill (as in the approved mockup). Sections with
       a solid background cover it as the page scrolls. */
    background-image: var(--cn-gradient-hero);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100vh;
    background-size: 100% 100dvh;
}

.cn-app-viewport {
    animation: cn-fade-in 0.5s ease 0.55s both;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* avoids the jump from the mobile address bar */
    width: 100%;
    position: relative;
}

.cn-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;   /* fixes the horizontal bar that 100vw was causing */
    padding-top: var(--cn-scroll-pad-top);
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   SCROLL CONTAINER SPACING
   ========================================================================== */
/* The last section on every page has to clear the bottom bar */
.cn-scroll-container > *:last-child {
    padding-bottom: var(--cn-scroll-pad-bottom);
}