/* =============================================================================
 * OMNIUI DOCUMENTATION STYLES
 * Layout for component documentation pages
 * ============================================================================= */

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Override browser defaults that @layer can't beat */
h1, h2, h3, h4, h5, h6, p, pre {
    margin: 0;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--omni-font-sans);
    background: var(--omni-color-background);
    color: var(--omni-color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =============================================================================
 * LAYOUT
 * ============================================================================= */

/* Top Navbar */
.docs-topnav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--omni-space-4);
    background: var(--omni-color-surface);
    border-block-end: 1px solid var(--omni-color-border);
    z-index: 200;
}

.docs-topnav-brand {
    display: flex;
    align-items: center;
    gap: var(--omni-space-2);
    font-size: var(--omni-text-lg);
    font-weight: var(--omni-font-bold);
    color: var(--omni-color-text);
    text-decoration: none;
}

.docs-topnav-brand:hover {
    color: var(--omni-color-primary);
}

.docs-topnav-brand svg {
    color: var(--omni-color-primary);
}

.docs-topnav-actions {
    display: flex;
    align-items: center;
    gap: var(--omni-space-2);
}

/* Hide topnav hamburger on desktop */
.docs-nav-toggle-topnav {
    display: none;
}

/* Sidebar */
.docs-sidebar {
    position: fixed;
    inset-block-start: 56px;
    inset-inline-start: 0;
    inline-size: 260px;
    block-size: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--omni-color-surface);
    border-inline-end: 1px solid var(--omni-color-border);
    z-index: 100;
}

.docs-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--omni-space-2);
    padding: var(--omni-space-4);
    border-block-end: 1px solid var(--omni-color-border);
}

.docs-logo {
    font-size: var(--omni-text-xl);
    font-weight: var(--omni-font-bold);
    color: var(--omni-color-text);
    text-decoration: none;
}

.docs-logo:hover {
    color: var(--omni-color-primary);
}

/* Navigation */
.docs-nav {
    padding: var(--omni-space-4);
}

.docs-nav-section {
    margin-block-end: var(--omni-space-6);
}

.docs-nav-section h3 {
    font-size: var(--omni-text-xs);
    font-weight: var(--omni-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--omni-color-text-muted);
    margin-block: 0 var(--omni-space-2);
}

.docs-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-nav li {
    margin: 0;
}

.docs-nav-category {
    font-size: var(--omni-text-xs);
    font-weight: var(--omni-font-medium);
    color: var(--omni-color-text-muted);
    padding: var(--omni-space-3) var(--omni-space-2) var(--omni-space-1);
    margin-block-start: var(--omni-space-2);
}

.docs-nav a {
    display: block;
    padding: var(--omni-space-2);
    color: var(--omni-color-text);
    text-decoration: none;
    border-radius: var(--omni-radius-md);
    font-size: var(--omni-text-sm);
}

.docs-nav a:hover {
    background: var(--omni-color-surface-alt);
}

.docs-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--omni-color-primary) 15%, transparent);
    color: var(--omni-color-primary);
    font-weight: var(--omni-font-medium);
}

/* Main content */
.docs-main {
    margin-inline-start: 260px;
    margin-block-start: 56px;
    min-block-size: calc(100vh - 56px);
    display: grid;
    grid-template-columns: minmax(0, 900px) 200px;
    justify-content: center;
}

.docs-content {
    padding: var(--omni-space-8);
}

/* Table of contents */
.docs-toc {
    padding: var(--omni-space-8) var(--omni-space-4);
    position: sticky;
    inset-block-start: 0;
    block-size: fit-content;
}

.docs-toc h4 {
    font-size: var(--omni-text-xs);
    font-weight: var(--omni-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--omni-color-text-muted);
    margin-block: 0 var(--omni-space-3);
}

.docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-toc a {
    display: block;
    padding: var(--omni-space-1) 0;
    font-size: var(--omni-text-sm);
    color: var(--omni-color-text-muted);
    text-decoration: none;
}

.docs-toc a:hover {
    color: var(--omni-color-primary);
}

/* =============================================================================
 * CONTENT STYLES
 * ============================================================================= */

.docs-header {
    margin-block-end: var(--omni-space-8);
}

.docs-header-meta {
    margin-block-end: var(--omni-space-2);
}

.docs-header h1 {
    font-size: var(--omni-text-4xl);
    font-weight: var(--omni-font-bold);
    margin-block: 0 var(--omni-space-3);
    letter-spacing: -0.02em;
}

.docs-description {
    font-size: var(--omni-text-lg);
    color: var(--omni-color-text-muted);
    margin: 0;
}

.docs-section {
    margin-block-end: var(--omni-space-10);
}

.docs-section h2 {
    font-size: var(--omni-text-2xl);
    font-weight: var(--omni-font-semibold);
    margin-block: 0 var(--omni-space-4);
    padding-block-start: var(--omni-space-4);
    border-block-start: 1px solid var(--omni-color-border);
}

.docs-section > h3 {
    font-size: var(--omni-text-lg);
    font-weight: var(--omni-font-semibold);
    margin-block: var(--omni-space-6) var(--omni-space-3);
}

/* Preview box */
.docs-preview {
    padding: var(--omni-space-6);
    background: var(--omni-color-surface-alt);
    border: 1px solid var(--omni-color-border);
    border-radius: var(--omni-radius-lg) var(--omni-radius-lg) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--omni-space-3);
    align-items: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Block-level preview - for grids and full-width children */
.docs-preview:has(.omni-grid-2, .omni-grid-3, .omni-grid-4, .omni-bento-grid) {
    display: block;
}

.docs-preview + .omni-code-block {
    border-radius: 0 0 var(--omni-radius-lg) var(--omni-radius-lg);
    margin-block-start: -1px;
}

/* Accessibility list */
.docs-a11y-list {
    margin: 0;
    padding-inline-start: var(--omni-space-6);
}

.docs-a11y-list li {
    margin-block-end: var(--omni-space-2);
}

/* Related components */
.docs-related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--omni-space-2);
}

/* =============================================================================
 * MOBILE NAVIGATION
 * ============================================================================= */

.docs-nav-toggle {
    display: none;
    position: fixed;
    inset-block-start: var(--omni-space-3);
    inset-inline-start: var(--omni-space-3);
    z-index: 200;
}

@media (max-width: 1024px) {
    .docs-toc {
        display: none;
    }

    .docs-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .docs-topnav {
        padding-inline: var(--omni-space-3);
    }

    .docs-topnav-brand span {
        display: none;
    }

    .docs-nav-toggle-topnav {
        display: flex;
    }

    .docs-nav-toggle {
        display: none; /* Old toggle hidden, now in topnav */
    }

    .docs-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .docs-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--omni-shadow-xl);
    }

    .docs-main {
        margin-inline-start: 0;
        overflow-x: hidden;
    }

    .docs-content {
        padding: var(--omni-space-6) var(--omni-space-4);
        overflow-x: hidden;
        max-inline-size: 100vw;
    }

    /* Prevent header text overflow */
    .docs-header h1 {
        font-size: var(--omni-text-2xl);
        overflow-wrap: break-word;
    }

    .docs-description {
        font-size: var(--omni-text-base);
    }

    /* Preview boxes - horizontal scroll for overflow content */
    .docs-preview {
        padding: var(--omni-space-4);
        margin-inline: calc(var(--omni-space-4) * -1);
        border-radius: 0;
        border-inline: none;
    }

    .docs-preview + .omni-code-block {
        margin-inline: calc(var(--omni-space-4) * -1);
        border-radius: 0;
    }

    /* Tables - make scrollable on mobile */
    .docs-section .omni-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .docs-section .omni-table thead,
    .docs-section .omni-table tbody,
    .docs-section .omni-table tr {
        display: table;
        inline-size: 100%;
        table-layout: auto;
    }

    /* Code blocks - full width bleed on mobile */
    .docs-section > .omni-code-block {
        margin-inline: calc(var(--omni-space-4) * -1);
        border-radius: 0;
        border-inline: none;
    }
}

/* =============================================================================
 * THEME TOGGLE (in navbar)
 * ============================================================================= */

.theme-toggle {
    /* Now positioned in navbar via flexbox */
}

.theme-icon-dark { display: none; }
[data-color-mode="dark"] .theme-icon-light { display: none; }
[data-color-mode="dark"] .theme-icon-dark { display: block; }

/* =============================================================================
 * CODE STYLING
 * ============================================================================= */

code {
    font-family: var(--omni-font-mono);
    font-size: 0.875em;
    background: var(--omni-color-surface-alt);
    padding: 0.125em 0.375em;
    border-radius: var(--omni-radius-sm);
}

pre code {
    background: transparent;
    padding: 0;
}