/*
 * pages/portal.css - the FluentCommunity portal (/portal) inside our app shell.
 * Depends on tokens.css and app-shell.css (header pill, bottom nav, menu).
 *
 * Printed by inc/portal.php on the fluent_community/portal_head hook, after
 * the plugin's own colour variables. The variables go on "html body" so they
 * also win over any plugin stylesheet the app adds to the page later. The
 * portal is the plugin's own document: no base.css and no app-viewport.css
 * here, because the app scrolls the window and must not be locked.
 */

/* ==========================================================================
   BRAND VARIABLES
   --------------------------------------------------------------------------
   The plugin paints everything from --fcom-* variables on body. We map them
   to our tokens. The two metrics tell its sticky bars and its bottom padding
   where our header and bottom nav are; its JS stops writing them once its
   own header is gone, so ours are the only values.
   ========================================================================== */
html body {
    --fcom-primary-bg:           var(--cn-white);
    --fcom-secondary-bg:         transparent;   /* lets the brand gradient through */
    --fcom-secondary-content-bg: var(--cn-off-white);
    --fcom-active-bg:            var(--cn-lavender-20);
    --fcom-light-bg:             var(--cn-indigo-20);
    --fcom-deep-bg:              var(--cn-indigo);
    --fcom-menu-text:            var(--cn-indigo);
    --fcom-primary-text:         var(--cn-indigo);
    --fcom-secondary-text:       var(--cn-indigo-80);
    --fcom-text-off:             var(--cn-indigo-60);
    --fcom-primary-button:       var(--cn-cta-color);
    --fcom-primary-button-text:  var(--cn-white);
    --fcom-primary-border:       var(--cn-indigo-20);
    --fcom-secondary-border:     var(--cn-indigo-40);
    --fcom-highlight-bg:         var(--cn-peach-20);
    --fcom-text-link:            var(--cn-primary-color);
    --el-color-primary:          var(--cn-indigo);

    --fcom-header-height:      calc(var(--cn-header-top) + var(--cn-header-h) + var(--cn-space-3)) !important;
    --fcom-mobile-menu-height: var(--cn-footer-h) !important;

    font-family: var(--cn-primary-font);
    color: var(--cn-text-color);
    background-color: var(--cn-background-color);
    background-image: var(--cn-gradient-hero);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100vh;
}

/* The header pill is taller and lower from 769px. app-shell.css writes those
   two values (20px, 72px) by hand; keep them in step. */
@media (min-width: 769px) {
    html body {
        --fcom-header-height: calc(20px + 72px + var(--cn-space-3)) !important;
    }
}

.fluent_com,
.fluent_com button,
.fluent_com input,
.fluent_com textarea,
.fluent_com select {
    font-family: var(--cn-primary-font);
}

/* ==========================================================================
   LAYOUT WITHOUT THE PLUGIN CHROME
   --------------------------------------------------------------------------
   Its header and sidebar are not rendered (inc/portal.php). What is left of
   the sidebar column, and its own mobile bar, are taken out of the layout.
   ========================================================================== */
.fluent_com .fhr_content {
    padding-top: var(--fcom-header-height);
}

.fluent_com .feed_layout {
    padding-left: 0;
}

.fluent_com .spaces.fcom_space_list,
.fcom_mobile_menu {
    display: none !important;   /* the plugin shows its bar with display:block under 1024px */
}

/* The plugin's content header is opaque white; on the gradient it reads as a
   bar, so it gets the same glass as our header and nav. */
.fluent_com .fhr_content_layout_header {
    background-color: var(--cn-glass-bg);
    backdrop-filter: blur(var(--cn-glass-blur));
    -webkit-backdrop-filter: blur(var(--cn-glass-blur));
}