/* ============================================
   HEADER: fixed, slides + fades away on scroll down,
   reappears on scroll up. Sits ABOVE the tabs bar (z-index),
   so while visible it simply covers the tabs bar in the same
   vertical space - no coordination logic needed between them.
   ============================================ */
.site-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}
.site-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/* Static padding reserves the header's space in the page layout - no JS
   measurement, no spacer element. A plain fixed number, same technique
   used by every production site that does this (including the reference
   you shared - it uses a flat 100px, no dynamic calculation at all). */
#main-content {
    padding-top: 88px;
}

/* ============================================
   GLASS SORT TABS (Latest / Trending / Popular)
   ============================================ */
/* position:fixed, not sticky - sticky was confirmed to silently fail on
   this site (almost certainly an ancestor element somewhere with
   overflow set to non-visible, which breaks sticky with zero warning).
   Fixed doesn't share that fragility, so this is the reliable choice
   even though it means a couple of small JS lines below to shift it up
   when the header hides (sticky would've done that automatically). */
.tabs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 0.4rem;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto 1.5rem;

    /* Normal document flow by default - sits right where it's placed in
       the HTML (below the Popular Tags row), not floating on load. */
    position: relative;
    z-index: 40;
    transition: box-shadow 0.3s ease;
}
/* Only applied once JS confirms the page has scrolled past the tabs'
   natural position - this is what makes it pin to the top. Toggled
   together with the header's .header-hidden class, as one combined
   event (see app.js) - matches the requested behavior exactly: scrolling
   further into the page pins the tabs AND hides the header together;
   scrolling back un-pins and un-hides them together. */
.tabs.is-pinned {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18);
}
.tabs:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.14);
}

/* Reserves the tabs bar's space in the page layout only while pinned
   (position:fixed removes it from flow at that point) - grows/shrinks
   via JS exactly when .is-pinned toggles, matching the tabs bar's real
   height rather than a guessed static number, since this one genuinely
   needs to be precise to avoid a content jump. */
.sort-tabs-spacer {
    height: 0;
}

.tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease, transform 0.2s ease;
}
.tab svg { flex-shrink: 0; position: relative; z-index: 1; }
.tab span, .tab { z-index: 1; }

.tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-dark, #0F172A);
    transform: scale(1.03);
}
.tab:active:not(.active) { transform: scale(0.97); }

/* Rainbow gradients - a different pairing at every step from the
   reference site's palette, not a copy of it. */
.tab.active {
    color: #fff;
    transform: scale(1.02);
}
.tab[data-sort="latest"].active {
    background: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}
.tab[data-sort="trending"].active {
    background: linear-gradient(135deg, #FB923C 0%, #EC4899 100%);
    box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
}
.tab[data-sort="popular"].active {
    background: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
    box-shadow: 0 8px 20px -6px rgba(217, 70, 239, 0.5);
}

/* Subtle shimmer sweep across the active tab's gradient - not a static
   fill, a slow-drifting highlight that ties into the rainbow theme. */
.tab.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.35) 45%,
        transparent 70%);
    background-size: 200% 100%;
    animation: tabShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tabShimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@media (max-width: 480px) {
    .tabs.is-pinned {
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto;
        max-width: none;
    }
    .tab {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.82rem;
    }
}

/* ============================================
   CARD ANIMATIONS
   ============================================ */

/* Staggered entrance - cards fade/slide in one after another instead of
   popping in all at once, whether on initial load, tab switch, or Load
   More. */
.pcard {
    animation: pcardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pcardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.prompt-feed .pcard:nth-child(1) { animation-delay: 0ms; }
.prompt-feed .pcard:nth-child(2) { animation-delay: 60ms; }
.prompt-feed .pcard:nth-child(3) { animation-delay: 120ms; }
.prompt-feed .pcard:nth-child(4) { animation-delay: 180ms; }
.prompt-feed .pcard:nth-child(5) { animation-delay: 240ms; }
.prompt-feed .pcard:nth-child(6) { animation-delay: 300ms; }
.prompt-feed .pcard:nth-child(n+7) { animation-delay: 340ms; }

/* Color-matched glow: on hover, each card's shadow tints toward an
   average color sampled from its own image (set inline per-card by JS -
   see app.js). Falls back to the brand color if JS hasn't run yet or a
   color couldn't be sampled. */
.pcard {
    --pcard-glow: rgba(0, 168, 120, 0.35);
    transition: transform 0.3s ease, box-shadow 0.4s ease;
}
.pcard:hover {
    box-shadow: 0 20px 45px -12px var(--pcard-glow);
}

.logo-image {
    height: 40px;
    width: auto;
    display: block;
}

/* ============================================
   LIKE BUTTON: SELF-CONTAINED RAINBOW BURST
   ============================================ */
/* Deliberately built to NEVER leave the button's own small bounding box -
   no getBoundingClientRect(), no position:fixed overlay, no escaping the
   card's overflow:hidden. Three previous attempts at an escaping-particle
   effect all broke in different ways (clipping, oversized/mispositioned
   overlay) because they depended on viewport math and clipping-ancestor
   interactions. This has none of those failure points by design: a
   rainbow ring pulses from directly behind the button and fades within
   ~20px of it, well inside the button's own safe area (it sits 14px from
   the card edge), so there's nothing left that CAN go wrong the same way. */
.pcard__like::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    background: conic-gradient(from 0deg,
        #FF3B30, #FF9500, #FFCC00, #34C759, #00A878, #007AFF, #AF52DE, #FF3B30);
    opacity: 0;
    transform: scale(0.5);
    z-index: -1;
    pointer-events: none;
}
.pcard__like.liked::before {
    animation: pbRainbowBurst 0.6s ease-out;
}
@keyframes pbRainbowBurst {
    0% { opacity: 0.85; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.7); }
}

.pcard__like.liked svg {
    animation: pbHeartPop 0.4s cubic-bezier(.17, .89, .32, 1.49);
}
@keyframes pbHeartPop {
    0% { transform: scale(1); }
    30% { transform: scale(0.7); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ============================================
   CLEAN PILL BREADCRUMB (prompt detail page)
   ============================================ */
.breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #E2E8E4);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    overflow: hidden;
}
.breadcrumb-home {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #64748B);
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.breadcrumb-home:hover { color: var(--primary, #00A878); }

.breadcrumb-chevron {
    color: var(--border, #E2E8E4);
    flex-shrink: 0;
}

.breadcrumb-link {
    color: var(--text-muted, #64748B);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.breadcrumb-link:hover { color: var(--primary, #00A878); }

.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

@media (max-width: 480px) {
    .breadcrumb-pill { padding: 0.45rem 0.8rem; gap: 0.4rem; }
    .breadcrumb-link { font-size: 0.8rem; }
    .breadcrumb-current { font-size: 0.72rem; padding: 0.28rem 0.7rem; max-width: 120px; }
}