/* Patch 1650: festival shell reliability and overflow repair. */

.ff-festival-navigation--flagship {
    position: relative;
    overflow: visible;
}

.ff-festival-navigation-frame {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    overflow: visible;
}

.ff-festival-navigation-rail {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0.125rem 0.25rem;
}

.ff-festival-navigation-rail::-webkit-scrollbar {
    display: none;
}

.ff-festival-more-nav--fixed {
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
}

.ff-festival-more-nav--fixed > details {
    position: relative;
}

.ff-festival-more-nav--fixed .ff-festival-more-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 80;
    width: min(19rem, calc(100vw - 2rem));
    max-height: min(70vh, 32rem);
    overflow-x: clip;
    overflow-y: auto;
}

.ff-festival-more-nav--fixed details:not([open]) .ff-festival-more-menu {
    display: none;
}

.ff-festival-more-nav--fixed details[open] .ff-festival-more-menu {
    display: block;
}

/* Patch 1651: every festival section gets the same navigation geometry.
   Some older section views wrap the shared nav in max-w-7xl while the
   flagship Overview uses its own wider shell. Center the shared navigation
   itself so those legacy wrappers can no longer change its apparent size. */
.ff-festival-navigation--flagship {
    width: min(96rem, calc(100vw - 2rem));
    max-width: none;
    margin-inline: 50%;
    transform: translateX(-50%);
}

/* Patch 1651B: normalize the festival identity hero across Overview and
   Live Map. The templates still differ internally, but the visible hero
   height, title, date, and location now follow one shared contract. */
.ff-festival-hero-stage,
.ff-festival-day-hero--live-map > div:first-child {
    height: 26rem !important;
}

/* Keep each festival banner visually distinctive. Contrast protection is
   concentrated behind the lower-left content instead of tinting the entire
   photograph with a brand-colored overlay. */
.ff-festival-hero-readability-scrim {
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgb(2 6 23 / 0.72) 0%,
            rgb(2 6 23 / 0.34) 34%,
            rgb(2 6 23 / 0.08) 62%,
            transparent 82%
        ),
        linear-gradient(
            to right,
            rgb(2 6 23 / 0.48) 0%,
            rgb(2 6 23 / 0.22) 36%,
            transparent 68%
        );
}

.ff-festival-hero-content {
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.58);
}

@media (min-width: 1024px) {
    .ff-festival-hero-readability-scrim {
        background:
            linear-gradient(
                to top,
                rgb(2 6 23 / 0.66) 0%,
                rgb(2 6 23 / 0.24) 30%,
                rgb(2 6 23 / 0.04) 58%,
                transparent 76%
            ),
            linear-gradient(
                to right,
                rgb(2 6 23 / 0.46) 0%,
                rgb(2 6 23 / 0.18) 32%,
                transparent 58%
            );
    }
}

.ff-festival-title,
.ff-festival-day-hero--live-map h1 {
    color: #fff !important;
    font-size: clamp(2.5rem, 5vw, 4.75rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.ff-festival-hero-kicker,
.ff-festival-day-hero--live-map .flex > p {
    color: #fed7aa !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
}

.ff-festival-hero-primary-meta,
.ff-festival-day-hero--live-map h1 + p {
    color: #f8fafc !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.ff-festival-live-map-readability-scrim {
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgb(2 6 23 / 0.68) 0%,
            rgb(2 6 23 / 0.26) 42%,
            transparent 78%
        ),
        linear-gradient(
            to right,
            rgb(2 6 23 / 0.36) 0%,
            transparent 58%
        ) !important;
}

@media (min-width: 640px) {
    .ff-festival-navigation-frame,
    .ff-festival-navigation-rail {
        gap: 0.75rem;
    }

    .ff-festival-navigation--flagship {
        width: min(96rem, calc(100vw - 3rem));
    }

    .ff-festival-hero-stage,
    .ff-festival-day-hero--live-map > div:first-child {
        height: 31rem !important;
    }
}

@media (min-width: 1024px) {
    .ff-festival-hero-stage,
    .ff-festival-day-hero--live-map > div:first-child {
        height: 35rem !important;
    }
}

/* Patch 1656: Secondary festival destinations intentionally share one
   identity rhythm. Overview remains the flagship exception and may keep
   its richer composition, while Activity, Photos, and Live Map align on
   hero height, title scale, date treatment, and venue/location legibility. */
.ff-festival-subpage-readability-scrim {
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgb(2 6 23 / 0.62) 0%,
            rgb(2 6 23 / 0.22) 38%,
            transparent 76%
        ),
        linear-gradient(
            to right,
            rgb(2 6 23 / 0.42) 0%,
            rgb(2 6 23 / 0.14) 38%,
            transparent 66%
        );
}

.ff-social-subpage-hero > div:first-child,
.ff-festival-day-hero--live-map > div:first-child {
    height: 24rem !important;
}

.ff-social-subpage-hero h1,
.ff-festival-day-hero--live-map h1 {
    color: #fff !important;
    font-size: clamp(2.25rem, 4.5vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.52);
}

.ff-social-subpage-hero--activity,
.ff-social-subpage-hero--photos,
.ff-festival-day-hero--live-map {
    isolation: isolate;
}

.ff-social-subpage-hero [class*="text-orange-"],
.ff-festival-day-hero--live-map [class*="text-orange-"] {
    color: #fed7aa !important;
}

.ff-social-subpage-hero [class*="text-slate-2"],
.ff-social-subpage-hero [class*="text-slate-3"],
.ff-festival-day-hero--live-map h1 + p {
    color: #f1f5f9 !important;
}

@media (min-width: 640px) {
    .ff-social-subpage-hero > div:first-child,
    .ff-festival-day-hero--live-map > div:first-child {
        height: 28rem !important;
    }
}

@media (min-width: 1024px) {
    .ff-social-subpage-hero > div:first-child,
    .ff-festival-day-hero--live-map > div:first-child {
        height: 31rem !important;
    }
}

/* Desktop member navigation should participate in the page's vertical flow.
   Flux's mobile scroll container remains untouched below the lg breakpoint. */
@media (min-width: 1024px) {
    .ff-member-sidebar {
        height: auto !important;
        min-height: calc(100vh - 4rem) !important;
        max-height: none !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .ff-member-sidebar-nav {
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .ff-member-sidebar-nav [data-flux-sidebar-item],
    .ff-member-sidebar-nav a {
        min-width: 0;
        max-width: 100%;
    }
}

/* Patch 1897: keep the four highest-value festival actions thumb-reachable
   on phones without changing desktop navigation or historical editions. */
.ff-festival-mobile-action-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.35rem;
    border: 1px solid rgb(228 228 231 / 0.9);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.08);
    backdrop-filter: blur(16px);
}

.ff-festival-mobile-action {
    display: flex;
    min-width: 0;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    border-radius: 0.75rem;
    color: rgb(82 82 91);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ff-festival-mobile-action:active {
    transform: scale(0.97);
}

.ff-festival-mobile-action.is-current {
    background: rgb(124 58 237 / 0.11);
    color: rgb(109 40 217);
}

.dark .ff-festival-mobile-action-dock {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(24 24 27 / 0.92);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.25);
}

.dark .ff-festival-mobile-action {
    color: rgb(212 212 216);
}

.dark .ff-festival-mobile-action.is-current {
    background: rgb(139 92 246 / 0.18);
    color: rgb(221 214 254);
}

@media (min-width: 640px) {
    .ff-festival-mobile-action-dock {
        display: none;
    }
}