/*
 * Phoenix 99 gradient background
 * Based on the supplied dark-to-Phoenix-blue reference.
 */

html {
    min-height: 100%;
    background: #176add;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(
            180deg,
            #222425 0%,
            #21324a 18%,
            #1e416c 36%,
            #1c508f 56%,
            #1960b8 78%,
            #176add 100%
        );
    background-attachment: fixed;
}

/* Keep the main content area transparent so the gradient shows through. */
.page {
    background: transparent;
}

/*
 * Slightly soften shadows against the darker background without changing
 * the white card/panel design.
 */
.event-card,
.panel,
.event-detail,
.auth-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Headings that sit directly on the gradient need to remain readable. */
.page > .title-row h1,
.page > .title-row .muted,
.calendar-head h1,
.calendar-head strong {
    color: #ffffff;
}

.page > .title-row .muted {
    opacity: .82;
}

@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }
}