/* Public viewport and parish symbols. Loaded after the shared/page styles. */
.sm27-public-root {
    --sm27-safe-top: env(safe-area-inset-top, 0px);
    --sm27-safe-right: env(safe-area-inset-right, 0px);
    --sm27-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sm27-safe-left: env(safe-area-inset-left, 0px);
    --sm27-viewport-color: #f8f4ee;
}

.sm27-public-body .sm27-cross-icon {
    display: block;
    width: 24px;
    height: 30px;
    max-width: none;
    flex: 0 0 auto;
    object-fit: contain;
}

.sm27-public-body .sm27-mobile-brand-icon .sm27-cross-icon {
    width: 22px;
    height: 28px;
}

@media (max-width: 991px) {
    /* Paint the page underneath the system insets; inset only the controls. */
    html.sm27-public-root,
    .sm27-public-root body.sm27-public-body {
        min-height: 100%;
        background: var(--sm27-viewport-color);
    }

    .sm27-public-body .sm27-mobile-header {
        padding-top: var(--sm27-safe-top);
        padding-left: var(--sm27-safe-left);
        padding-right: var(--sm27-safe-right);
    }

    .sm27-public-body .sm27-hero-content {
        padding-top: calc(80px + var(--sm27-safe-top));
        padding-bottom: calc(49px + var(--sm27-safe-bottom));
    }

    .sm27-public-body .sm27-hero-content,
    .sm27-public-body .sm27-shell {
        max-width: calc(100% - 30px - var(--sm27-safe-left) - var(--sm27-safe-right));
    }

    /* The glass surface reaches the edges; its contents avoid the notch. */
    .sm27-public-body .sm27-mobile-sheet {
        top: var(--sm27-menu-top, 0px);
        right: 0;
        width: 100%;
        height: 100vh;
        height: var(--sm27-menu-height, 100dvh);
        max-height: none;
        border: 0;
        border-radius: 0;
        padding-top: var(--sm27-safe-top);
        padding-left: var(--sm27-safe-left);
        padding-right: var(--sm27-safe-right);
        transform: translateX(100%);
    }

    .sm27-public-body .sm27-mobile-sheet.active {
        transform: translateX(0);
    }

    .sm27-public-body .sm27-mobile-phone {
        padding-bottom: calc(12px + var(--sm27-safe-bottom));
    }

    .sm27-public-body .sm27-mobile-search input {
        font-size: 16px;
    }

    .sm27-public-body.sm27-mobile-menu-open {
        touch-action: auto;
    }

    .sm27-public-body .sm27-mobile-nav {
        touch-action: pan-y;
    }

    .sm27-public-body.sm27-mobile-menu-open .sm27-chat-launcher {
        visibility: hidden;
        pointer-events: none;
    }

    .sm27-public-body .sm27-footer {
        padding-bottom: calc(20px + var(--sm27-safe-bottom));
        padding-left: var(--sm27-safe-left);
        padding-right: var(--sm27-safe-right);
    }
}