/*
 * Shared shell/layout overrides.
 *
 * This file is loaded after the legacy inline stylesheet in index.html so the
 * shared navigation, search, footer, and scroll-performance rules can be tuned
 * without digging through the large app template.
 */

:root {
    --shell-green: #173323;
    --shell-ink: #39281c;
    --shell-red: #8C1515;
    --shell-cream: #EFD8AE;
    --shell-cream-deep: #DEBA7E;
    --shell-paper: #FFFCF2;
    --shell-paper-tint: #FFF5DC;
    --shell-line: rgba(118, 79, 45, 0.16);
    --shell-shadow: rgba(87, 56, 28, 0.16);
    --shell-shadow-strong: rgba(87, 56, 28, 0.24);
}

body,
.flyer-wall-page,
.ai-result-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(255,244,222,0.50), transparent 28%),
        linear-gradient(180deg, #F7E8C8 0%, var(--shell-cream) 32%, var(--shell-cream-deep) 100%) !important;
    color: var(--shell-ink) !important;
}

/* Signed-in app navbar */
.app-header {
    background:
        linear-gradient(180deg, rgba(255,250,239,0.72), rgba(232,202,151,0.84)),
        var(--shell-cream) !important;
    padding: 16px clamp(18px, 5vw, 64px) !important;
    border-bottom: 1px solid rgba(126, 86, 48, 0.14) !important;
    box-shadow: 0 12px 28px rgba(89, 57, 28, 0.12) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

.app-header-left {
    gap: 12px !important;
    padding: 8px 16px 8px 8px !important;
    background: rgba(255, 246, 226, 0.48) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 8px 18px rgba(89,57,28,0.10) !important;
    min-height: 52px !important;
}

.app-logo {
    width: 42px !important;
    height: 42px !important;
    background: #fff4d6 !important;
    border: 1px solid rgba(126, 86, 48, 0.16) !important;
    box-shadow: 0 6px 14px rgba(89, 57, 28, 0.14) !important;
}

.app-logo .sprout-mascot::before,
.public-home-brand .sprout-mascot::before {
    box-shadow: none !important;
}

.app-title {
    color: var(--shell-ink) !important;
    font-size: 22px !important;
}

.app-nav {
    gap: 10px !important;
    padding: 8px !important;
    background: rgba(255, 243, 218, 0.46) !important;
    border: 1px solid rgba(255,255,255,0.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 8px 18px rgba(89,57,28,0.10) !important;
    min-height: 58px !important;
    overflow: visible !important;
}

.app-nav-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 252, 244, 0.86) !important;
    border: 1px solid rgba(126, 86, 48, 0.12) !important;
    color: var(--shell-ink) !important;
    box-shadow: 0 6px 14px rgba(89,57,28,0.10) !important;
    flex: 0 0 44px !important;
}

.nav-leaderboard {
    min-height: 44px !important;
    padding: 10px 15px !important;
}

.profile-avatar-frame-sm {
    width: 34px !important;
    height: 34px !important;
}

/* Public landing navbar */
.public-home-nav {
    padding: 16px clamp(18px, 5vw, 64px) !important;
    background:
        linear-gradient(180deg, rgba(255,250,239,0.70), rgba(232,202,151,0.84)),
        var(--shell-cream) !important;
    border-bottom: 1px solid rgba(126, 86, 48, 0.12) !important;
    box-shadow: 0 10px 24px rgba(89,57,28,0.10) !important;
}

.public-home-brand {
    gap: 12px !important;
    padding: 8px 16px 8px 8px !important;
    background: rgba(255,255,255,0.48) !important;
    border: 1px solid rgba(255,255,255,0.68) !important;
    box-shadow: 0 8px 18px rgba(89,57,28,0.10) !important;
    color: var(--shell-ink) !important;
    font-size: clamp(23px, 2.9vw, 28px) !important;
    min-height: 56px !important;
}

.public-home-brand .sprout-mascot {
    --sprout-size: 42px !important;
}

.public-home-actions {
    gap: 12px !important;
}

.public-home-button {
    padding: 13px 22px !important;
    background: rgba(255,252,244,0.88) !important;
    border: 1px solid rgba(126,86,48,0.14) !important;
    box-shadow: 0 8px 18px rgba(89,57,28,0.12) !important;
    color: var(--shell-ink) !important;
    font-size: 15px !important;
}

.public-home,
.public-home-shell,
.home-page {
    background:
        radial-gradient(circle at 24% 14%, rgba(255,244,222,0.58), transparent 28%),
        linear-gradient(180deg, var(--shell-cream) 0%, var(--shell-cream-deep) 100%) !important;
}

/* Event pages */
.flyer-wall-page {
    background-attachment: scroll !important;
}

.flyer-wall-page::before {
    display: none !important;
}

.flyer-wall-page .smart-search-container,
.ai-result-page .ai-event-toolbar,
.flyer-wall-page .tab-container,
.flyer-filter-strip {
    background:
        linear-gradient(180deg, rgba(255,252,244,0.78), rgba(241,217,177,0.82)),
        rgba(239,216,174,0.82) !important;
    border-color: rgba(126, 86, 48, 0.13) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.90),
        0 14px 28px rgba(89,57,28,0.11) !important;
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}

.flyer-wall-page .smart-search-bar,
.ai-result-page .ai-event-search-row .smart-search-bar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,248,234,0.90)) !important;
    border: 2px solid rgba(255,255,255,0.90) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 12px 26px rgba(89,57,28,0.14) !important;
    backdrop-filter: blur(20px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

.flyer-wall-page .filter-btn,
.flyer-wall-page .filter-btn:nth-child(n),
.flyer-wall-page .tab-button,
.flyer-wall-page .tab-button:nth-child(n),
.flyer-wall-page .map-filter-btn,
.flyer-wall-page .event-card-vibe-tag,
.flyer-wall-page .event-card-save-btn {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,247,232,0.82)) !important;
    border: 1px solid rgba(255,255,255,0.86) !important;
    color: var(--shell-ink) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 9px 18px rgba(89,57,28,0.12) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

.flyer-wall-page .filter-btn.active,
.flyer-wall-page .filter-btn[aria-selected="true"],
.flyer-wall-page .tab-button.active {
    background: linear-gradient(180deg, var(--shell-red), #a92520) !important;
    border-color: rgba(255,255,255,0.34) !important;
    color: white !important;
    box-shadow: 0 12px 24px rgba(140,21,21,0.20) !important;
}

.event-card {
    content-visibility: auto;
    contain-intrinsic-size: 360px 560px;
    will-change: auto !important;
}

.flyer-wall-page .event-card,
.flyer-wall-page .event-card:nth-child(n) {
    overflow: visible !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.12) 42%),
        var(--shell-paper) !important;
    border: 1px solid rgba(126, 86, 48, 0.12) !important;
    border-radius: 18px !important;
    box-shadow:
        0 22px 42px rgba(89,57,28,0.15),
        0 2px 0 rgba(255,255,255,0.82) inset !important;
    transform: rotate(var(--flyer-tilt, -0.8deg)) translateY(0) !important;
}

.flyer-wall-page .event-card:nth-child(6n + 1) { background-color: #fffdf4 !important; }
.flyer-wall-page .event-card:nth-child(6n + 2) { background-color: #fbfff3 !important; }
.flyer-wall-page .event-card:nth-child(6n + 3) { background-color: #fff7ee !important; }
.flyer-wall-page .event-card:nth-child(6n + 4) { background-color: #fffaf0 !important; }
.flyer-wall-page .event-card:nth-child(6n + 5) { background-color: #f5fbff !important; }
.flyer-wall-page .event-card:nth-child(6n) { background-color: #fff9f6 !important; }

.flyer-wall-page .event-card::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    width: min(220px, 48%) !important;
    height: 26px !important;
    display: block !important;
    border-radius: 8px !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.30), transparent 30%, rgba(255,255,255,0.20) 62%, transparent),
        linear-gradient(var(--tape, rgba(255,224,117,0.82)), var(--tape, rgba(255,224,117,0.82))) !important;
    border: 1px solid rgba(255,255,255,0.36) !important;
    box-shadow: 0 8px 16px rgba(89,57,28,0.12) !important;
    opacity: 0.96 !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.flyer-wall-page .event-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 8px -6px -8px 8px !important;
    display: block !important;
    border-radius: 20px !important;
    background: rgba(226, 190, 129, 0.12) !important;
    z-index: -1 !important;
    transform: rotate(-0.6deg) !important;
    pointer-events: none !important;
}

.event-card-pin,
.event-sheet-pin,
.pushpin-head,
.pushpin-neck,
.pushpin-needle {
    display: none !important;
}

.flyer-wall-page .event-card:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.01) !important;
    box-shadow:
        0 28px 50px rgba(89,57,28,0.19),
        0 2px 0 rgba(255,255,255,0.88) inset !important;
}

.flyer-wall-page .event-card-image {
    border-radius: 16px 16px 10px 10px !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
}

.flyer-wall-page .event-card-content {
    background: transparent !important;
}

.event-pin-sheet {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tape, #ffe075) 32%, white), var(--shell-paper) 46%) !important;
    border-top: 8px solid var(--tape, #ffe075) !important;
    box-shadow: 0 -18px 46px rgba(89,57,28,0.22) !important;
}

.event-pin-sheet .bottom-sheet-header {
    position: relative;
}

.event-sheet-tape {
    position: absolute;
    top: 12px;
    left: 50%;
    width: min(320px, 64%);
    height: 28px;
    border-radius: 9px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.32), transparent 30%, rgba(255,255,255,0.20) 62%, transparent),
        linear-gradient(var(--tape, #ffe075), var(--tape, #ffe075));
    border: 1px solid rgba(255,255,255,0.36);
    box-shadow: 0 10px 18px rgba(89,57,28,0.12);
    transform: translateX(-50%) rotate(-1deg);
    pointer-events: none;
}

.public-home-footer,
.app-footer {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,248,232,0.92)),
        var(--shell-cream) !important;
    border-top: 1px solid rgba(126, 86, 48, 0.14) !important;
    box-shadow: 0 -12px 28px rgba(89,57,28,0.10) !important;
    color: var(--shell-ink) !important;
}

.public-home-footer-grid article,
.public-home-footer-contact-pill,
.app-footer-links button {
    background: rgba(255,252,244,0.78) !important;
    border: 1px solid rgba(126,86,48,0.12) !important;
    box-shadow: 0 8px 18px rgba(89,57,28,0.10) !important;
}

.sprout-search-jump,
.flyer-wall-page .create-event-fab,
.leaderboard-shell,
.friend-matcher-board,
.ai-result-page .ai-result-card {
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}

@media (max-width: 520px) {
    .app-header {
        padding: 12px 8px !important;
    }

    .app-logo {
        width: 34px !important;
        height: 34px !important;
    }

    .app-nav-btn,
    .nav-leaderboard {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .app-logo .sprout-mascot {
        --sprout-size: 30px !important;
    }

    .app-title {
        font-size: 16px !important;
    }

    .flyer-wall-page .event-card::before {
        width: min(180px, 58%) !important;
    }
}