/* ============================================
   FLIN Docs - Additional Styles
   Specific to documentation site
   ============================================ */

/* ========== Page Header (below main header) ========== */
.page-header {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-8);
}

.page-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
}

.page-description {
    color: var(--text-secondary);
    font-size: var(--text-lg);
}

/* ========== Prose Content ========== */
.prose {
    max-width: var(--max-width-prose);
    line-height: var(--leading-relaxed);
}

.prose h1, .prose h2, .prose h3, .prose h4 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    font-weight: var(--font-semibold);
}

.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose h4 { font-size: var(--text-lg); }

.prose p {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
}

.prose ul, .prose ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.prose li {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.prose a {
    color: var(--accent-violet);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast);
}

.prose a:hover {
    border-bottom-color: var(--accent-violet);
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    color: var(--accent-rose);
}

.prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* ========== Welcome Cards ========== */
.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.welcome-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.welcome-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
}

.welcome-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.welcome-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.welcome-card-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    flex: 1;
}

.welcome-card-arrow {
    margin-top: var(--space-4);
    color: var(--accent-gold);
    font-size: var(--text-sm);
}

/* ========== Level Indicators ========== */
.level {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.level-beginner {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent-emerald);
}

.level-intermediate {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-amber);
}

.level-advanced {
    background: rgba(244, 114, 182, 0.15);
    color: var(--accent-rose);
}

/* ========== App Cards ========== */
.app-card {
    position: relative;
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: all var(--duration-normal);
}

.app-card:hover {
    border-color: var(--border-medium);
}

.app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.app-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.app-card-command {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-deep);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feature-tag {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

/* ========== Callout Boxes ========== */
.callout {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    border-left: 4px solid;
}

.callout-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.callout-info {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--accent-violet);
}

.callout-tip {
    background: rgba(52, 211, 153, 0.1);
    border-color: var(--accent-emerald);
}

.callout-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--accent-amber);
}

/* ========== Next/Prev Navigation ========== */
.page-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-subtle);
}

.page-nav-link {
    flex: 1;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-fast);
}

.page-nav-link:hover {
    border-color: var(--accent-gold);
}

.page-nav-link.prev {
    text-align: left;
}

.page-nav-link.next {
    text-align: right;
}

.page-nav-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}

.page-nav-title {
    font-weight: var(--font-medium);
    color: var(--accent-gold);
}

/* ========== Docs Layout ========== */
.docs-layout {
    display: flex;
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--header-height);
}

.docs-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    padding: var(--space-6);
}

.docs-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-8);
    padding-bottom: var(--space-24);
}

/* Mobile sidebar */
@media (max-width: 1023px) {
    .docs-sidebar {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        width: 100%;
        max-width: 320px;
        z-index: var(--z-fixed);
        transition: left var(--duration-normal) var(--ease-out-expo);
    }

    .docs-sidebar.open {
        left: 0;
    }
}

/* ========== Sidebar Nav ========== */
.sidebar-nav {
    list-style: none;
}

.sidebar-nav-section {
    margin-bottom: var(--space-6);
}

.sidebar-nav-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-3);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast);
}

.sidebar-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-nav-item.active {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-violet);
}

.sidebar-nav-item-icon {
    width: 20px;
    text-align: center;
}

/* ========== Install Command ========== */
.install-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    margin: var(--space-6) 0;
}

.install-command code {
    color: var(--accent-emerald);
}

.install-command .prompt {
    color: var(--text-muted);
}

/* ========== Hero Specific for Docs ========== */
.docs-hero {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    max-width: 800px;
    margin: 0 auto;
}

.docs-hero-title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    margin-bottom: var(--space-4);
}

.docs-hero-subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.docs-hero-code {
    max-width: 500px;
    margin: 0 auto var(--space-8);
}

/* ========== External Links ========== */
.external-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-subtle);
}

.external-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all var(--duration-fast);
}

.external-link:hover {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

/* ========== FLIN Logo for Docs ========== */
.flin-logo-docs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.flin-logo-docs svg {
    width: 32px;
    height: 32px;
}

.flin-logo-docs span {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.flin-logo-docs .docs-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: var(--space-2);
}