/**
 * Franchise top ribbon — one flat, fixed-size bar on every page.
 * Colour = the school's sidebar colour (--erp-sidebar-bg-solid on <body>).
 * No gradient, blobs, mesh, sheen, glow, shadow or blur. CSS only.
 * Loaded last (franchise-layout-start.php) and every rule out-ranks the older ribbon
 * sheets: html + body.fr-portal + doubled .fr-premium-ribbon + !important.
 * The "White" (gov) ribbon theme keeps its own flat white look (:not(.fr-theme-gov-white)).
 */

/* ---- decoration off (all themes) ---- */
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__fx,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__mesh,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__sheen,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__orb,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__campus,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__wash {
    display: none !important;
}
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon {
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    border-radius: 1.15rem !important;
}
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__title,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__year-select,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__year-badge,
html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__cta {
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- colour: follows the sidebar (flat, solid) ---- */
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon {
    background-color: var(--erp-sidebar-bg-solid, #041c34) !important;
    border: 0 !important;
    color: #fff !important;
}
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__title,
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__nav {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__year-label {
    color: rgba(255, 255, 255, 0.72) !important;
}
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__actions-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__year-select,
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__year-badge,
html body.fr-portal:not(.fr-theme-gov-white) .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__cta {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* ---- one size, one layout on every page (desktop / tablet) ---- */
@media (min-width: 768px) {
    /* 4.5rem ribbon + .75rem/.85rem topbar padding; sidebar spacer shares this variable */
    html body.fr-portal {
        --fr-chrome-ribbon-h: 6.1rem !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon {
        min-height: 4.5rem !important;
        height: auto !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__inner.fr-premium-ribbon__inner {
        min-height: 4.5rem !important;
        padding: 0.5rem 1.5rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem 1rem !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon {
        overflow-x: clip !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__lockup,
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__copy {
        width: auto !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__copy .fr-premium-ribbon__title.fr-premium-ribbon__title {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__nav {
        margin: 0.15rem 0 0 !important;
        font-size: 0.8125rem !important;
        text-align: left !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__rail.fr-premium-ribbon__rail {
        position: static !important;
        transform: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem 0.75rem !important;
        max-width: 100% !important;
        margin: 0 0 0 auto !important;
    }
    /* ribbon buttons sit in ONE row (they used to stack and make the bar ~190px tall) */
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__actions-panel,
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__actions {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__action-row.fr-premium-ribbon__action-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.4rem 0.5rem !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__action-row > * {
        margin: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
        min-height: 2.25rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        font-size: 0.8125rem !important;
        white-space: nowrap !important;
    }
}

/* ---- phones: same flat colour, natural height ---- */
@media (max-width: 767px) {
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon {
        min-height: 3.5rem !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    html body.fr-portal .fr-portal-topbar .fr-premium-ribbon.fr-premium-ribbon .fr-premium-ribbon__inner.fr-premium-ribbon__inner {
        min-height: 3.5rem !important;
    }
}