/**
 * seo.css — FAK LAB MUSIC Programmatic SEO Styles
 * ══════════════════════════════════════════════════
 * Styles for elements injected by seo-router.js:
 *   • Breadcrumb navigation
 *   • Smart fallback content section
 *   • Individual fallback song cards
 *   • SEO page header / keyword heading
 *
 * Core Web Vitals considerations:
 *   - All layout defined here, no inline style shifts
 *   - Skeleton states prevent CLS (Cumulative Layout Shift)
 *   - Animations use transform/opacity only (no layout thrash)
 * ══════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════
   1. BREADCRUMB NAVIGATION
   Rendered above the search form on /play/, /artist/,
   and /song/ pages for schema + UX crawlability.
   ══════════════════════════════════════════════════ */

.seo-breadcrumb {
    margin-bottom: 0.75rem;
    padding: 0.4rem 0;
    animation: seo-fade-in 0.3s ease;
}

.seo-breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-family: var(--fm, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tx3, #475060);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.seo-bc-link {
    color: var(--tx3, #475060);
    text-decoration: none;
    transition: color 0.15s;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
}

.seo-bc-link:hover {
    color: var(--or, #00e5ff);
    background: var(--or-d, rgba(0, 229, 255, 0.08));
}

.seo-bc-sep {
    color: var(--tx4, #2e3848);
    font-size: 0.8rem;
    line-height: 1;
    user-select: none;
}

.seo-bc-current {
    color: var(--or, #00e5ff);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: var(--fd, 'Cabinet Grotesk', sans-serif);
    font-size: 0.75rem;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    background: var(--or-d, rgba(0, 229, 255, 0.08));
}

/* ══════════════════════════════════════════════════
   2. FALLBACK CONTENT WRAPPER
   Holds the "You might also like" heading + grid.
   Fades in smoothly to avoid layout jump.
   ══════════════════════════════════════════════════ */

.seo-fallback-wrap {
    animation: seo-fade-in 0.4s ease;
    padding-bottom: 2rem;
}

.seo-fallback-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--bd, rgba(0, 255, 255, 0.06));
}

.seo-fallback-title {
    font-family: var(--fd, 'Cabinet Grotesk', sans-serif);
    font-size: 1rem;
    font-weight: 900;
    color: var(--tx, #e8edf5);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-fallback-title i {
    color: var(--or, #00e5ff);
    font-size: 0.85rem;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

.seo-fallback-sub {
    font-family: var(--fm, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tx3, #475060);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seo-fallback-sub strong {
    color: var(--or, #00e5ff);
    font-weight: 900;
    text-transform: none;
}

.seo-fallback-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ══════════════════════════════════════════════════
   3. INDIVIDUAL FALLBACK SONG CARDS
   Each card contains title, artist, and a "Stream free"
   anchor link — the anchor is SEO-visible to crawlers
   even though clicking it triggers JS playback.
   ══════════════════════════════════════════════════ */

.seo-song-title {
    font-family: var(--fd, 'Cabinet Grotesk', sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--tx, #e8edf5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.seo-song-artist {
    font-family: var(--fm, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tx3, #475060);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
 * .seo-song-link
 * This anchor is the most important SEO element on the card.
 * It provides a crawlable href="/song/<title>/<artist>" that
 * Google can follow. Visually it's subtle (small, muted) but
 * fully accessible and never hidden from crawlers.
 */
.seo-song-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    font-family: var(--fm, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--or, #00e5ff);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.25);
    padding-bottom: 1px;
}

.seo-song-link::before {
    content: '\f144'; /* fa-play-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.55rem;
}

.seo-song-link:hover {
    opacity: 1;
    color: var(--pk, #ff00aa);
    border-bottom-color: rgba(255, 0, 170, 0.4);
}

/* ══════════════════════════════════════════════════
   4. SEO THIN-CONTENT WARNING (dev/debug only)
   Shown briefly if the API is completely unavailable.
   Hidden via JS once content loads. Never shown to
   end users in production — only visible during testing.
   ══════════════════════════════════════════════════ */

#seo-thin-warning {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    border-radius: 10px;
    background: var(--rs-d, rgba(242, 95, 92, 0.1));
    border: 1px solid var(--rs, #f25f5c);
    font-family: var(--fm, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--rs, #f25f5c);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: seo-fade-in 0.3s ease;
}

#seo-thin-warning i { font-size: 0.9rem; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   5. SKELETON LOADER (anti-CLS)
   Rendered instantly before the API responds to give
   Google a stable layout to measure — prevents CLS.
   ══════════════════════════════════════════════════ */

.seo-skeleton-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--bd2, rgba(0, 255, 255, 0.12));
    background: var(--bg1, #13161e);
    margin-bottom: 0.75rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.seo-skeleton-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: var(--bg3, #1e2330);
    flex-shrink: 0;
}

.seo-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.seo-skeleton-line {
    height: 0.75rem;
    border-radius: 0.375rem;
    background: var(--bg3, #1e2330);
}

.seo-skeleton-line:first-child  { width: 70%; }
.seo-skeleton-line:last-child   { width: 45%; }

/* ══════════════════════════════════════════════════
   6. PAGE-LEVEL SEO HEADING
   The <h1> on /play/ and /artist/ pages is updated by
   seo-router.js to contain the keyword. These rules
   ensure consistent visual treatment across all pages.
   ══════════════════════════════════════════════════ */

#view-search h1[data-seo-keyword] {
    /* Keyword heading gets a slightly more prominent size */
    font-size: 1.85rem !important;
    letter-spacing: -0.04em !important;
    line-height: 1.1 !important;
}

/* Sub-label shown below the h1 on SEO-driven pages */
.seo-page-subtitle {
    font-family: var(--fm, monospace);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tx3, #475060);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════
   7. SHARED ANIMATION
   ══════════════════════════════════════════════════ */

@keyframes seo-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ══════════════════════════════════════════════════
   8. RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .seo-breadcrumb-nav {
        font-size: 0.6rem;
    }

    .seo-fallback-title {
        font-size: 0.9rem;
    }

    .seo-song-title {
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .seo-fallback-grid {
        /* Two-column layout on wider screens */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .seo-skeleton-card {
        /* Match grid column span */
        margin-bottom: 0;
    }
}