/* ═══════════════════════════════════════════════
   htmxRazor Documentation Site — Layout & Styling
   ═══════════════════════════════════════════════ */

/* ── Reset for docs pages ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Grid Layout ── */
.docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 60px 1fr auto;
    grid-template-areas:
        "topbar topbar"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
    margin: 0;
}

.docs-layout--no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "main"
        "footer";
}

/* ── Topbar ── */
.docs-topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--rhx-space-xl);
    border-bottom: var(--rhx-border-width) solid var(--rhx-color-border);
    height: 60px;
}

.docs-topbar__start {
    display: flex;
    align-items: center;
    gap: var(--rhx-space-md);
}

.docs-topbar__end {
    display: flex;
    align-items: center;
    gap: var(--rhx-space-md);
}

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

.docs-topbar__logo:hover {
    color: var(--rhx-color-brand-500);
}

.docs-topbar__menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: var(--rhx-font-size-xl);
    cursor: pointer;
    color: var(--rhx-color-text);
    padding: var(--rhx-space-xs);
}

/* ── Sidebar ── */
.docs-sidebar {
    grid-area: sidebar;
    overflow-y: auto;
    padding: var(--rhx-space-lg) var(--rhx-space-md);
    border-right: var(--rhx-border-width) solid var(--rhx-color-border);
    background: var(--rhx-color-surface);
    height: calc(100vh - 60px);
    position: sticky;
    top: 60px;
}

/* ── Main Content ── */
.docs-main {
    grid-area: main;
    padding: var(--rhx-space-xl) var(--rhx-space-2xl);
    max-width: 960px;
    width: 100%;
}

.docs-layout--no-sidebar .docs-main {
    max-width: 100%;
    padding: 0;
}

/* ── Sidebar Navigation ── */
.docs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-nav__section {
    margin-bottom: var(--rhx-space-sm);
}

.docs-nav__heading {
    display: block;
    font-size: var(--rhx-font-size-xs);
    font-weight: var(--rhx-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rhx-color-text-muted);
    padding: var(--rhx-space-sm) var(--rhx-space-sm);
    margin-top: var(--rhx-space-md);
}

.docs-nav__link {
    display: block;
    padding: var(--rhx-space-xs) var(--rhx-space-sm);
    padding-left: var(--rhx-space-lg);
    color: var(--rhx-color-text);
    text-decoration: none;
    font-size: var(--rhx-font-size-sm);
    border-radius: var(--rhx-radius-md);
    transition: background-color 0.15s ease;
}

.docs-nav__link:hover {
    background: var(--rhx-color-neutral-100);
    color: var(--rhx-color-brand-600);
}

.docs-nav__link--active {
    background: var(--rhx-color-brand-50);
    color: var(--rhx-color-brand-700);
    font-weight: var(--rhx-font-weight-medium);
}

.docs-nav__sublink {
    display: block;
    padding: var(--rhx-space-xs) var(--rhx-space-sm);
    padding-left: var(--rhx-space-2xl);
    color: var(--rhx-color-text-muted);
    text-decoration: none;
    font-size: var(--rhx-font-size-sm);
    border-radius: var(--rhx-radius-md);
    transition: background-color 0.15s ease;
}

.docs-nav__sublink:hover {
    background: var(--rhx-color-neutral-100);
    color: var(--rhx-color-brand-600);
}

.docs-nav__sublink--active {
    color: var(--rhx-color-brand-700);
    font-weight: var(--rhx-font-weight-medium);
}

/* ── Hero ── */
.docs-hero {
    text-align: center;
    padding: var(--rhx-space-3xl) var(--rhx-space-xl);
    max-width: 800px;
    margin: 0 auto;
}

.docs-hero__title {
    font-size: 3.5rem;
    font-weight: var(--rhx-font-weight-bold);
    color: var(--rhx-color-text);
    margin: 0 0 var(--rhx-space-md);
    line-height: 1.1;
}

.docs-hero__subtitle {
    font-size: var(--rhx-font-size-xl);
    color: var(--rhx-color-text-muted);
    margin: 0 0 var(--rhx-space-xl);
    line-height: 1.5;
}

.docs-hero__actions {
    display: flex;
    gap: var(--rhx-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Features Grid ── */
.docs-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rhx-space-xl);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--rhx-space-2xl) var(--rhx-space-xl);
}

.docs-feature-card {
    text-align: center;
}

.docs-feature-card h3 {
    font-size: var(--rhx-font-size-lg);
    font-weight: var(--rhx-font-weight-semibold);
    margin: var(--rhx-space-md) 0 var(--rhx-space-sm);
    color: var(--rhx-color-text);
}

.docs-feature-card p {
    font-size: var(--rhx-font-size-sm);
    color: var(--rhx-color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Quick Start ── */
.docs-quickstart {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--rhx-space-2xl) var(--rhx-space-xl);
}

.docs-quickstart h2 {
    font-size: var(--rhx-font-size-2xl);
    font-weight: var(--rhx-font-weight-bold);
    text-align: center;
    margin-bottom: var(--rhx-space-xl);
    color: var(--rhx-color-text);
}

.docs-quickstart__step {
    margin-bottom: var(--rhx-space-lg);
}

.docs-quickstart__step h3 {
    font-size: var(--rhx-font-size-md);
    font-weight: var(--rhx-font-weight-semibold);
    margin-bottom: var(--rhx-space-sm);
    color: var(--rhx-color-text);
}

/* ── Category Grid ── */
.docs-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--rhx-space-lg);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--rhx-space-xl);
}

.docs-category-card {
    text-decoration: none;
    color: var(--rhx-color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.docs-category-card:hover {
    transform: translateY(-2px);
}

/* ── Component Page ── */
.docs-component-page {
    max-width: 100%;
}

.docs-component-header {
    margin-bottom: var(--rhx-space-2xl);
    padding-bottom: var(--rhx-space-xl);
    border-bottom: var(--rhx-border-width) solid var(--rhx-color-border);
}

.docs-component-header h1 {
    font-size: var(--rhx-font-size-3xl);
    font-weight: var(--rhx-font-weight-bold);
    margin: 0 0 var(--rhx-space-sm);
    color: var(--rhx-color-text);
}

.docs-component-header p {
    font-size: var(--rhx-font-size-md);
    color: var(--rhx-color-text-muted);
    margin: 0 0 var(--rhx-space-md);
    line-height: 1.6;
}

.docs-component-header code {
    font-size: var(--rhx-font-size-sm);
    background: var(--rhx-color-neutral-100);
    padding: var(--rhx-space-xs) var(--rhx-space-sm);
    border-radius: var(--rhx-radius-sm);
    color: var(--rhx-color-brand-600);
}

/* ── Component Sections ── */
.docs-component-section {
    margin-bottom: var(--rhx-space-2xl);
}

.docs-component-section h2 {
    font-size: var(--rhx-font-size-xl);
    font-weight: var(--rhx-font-weight-bold);
    margin: 0 0 var(--rhx-space-lg);
    color: var(--rhx-color-text);
}

.docs-component-section h3 {
    font-size: var(--rhx-font-size-lg);
    font-weight: var(--rhx-font-weight-semibold);
    margin: 0 0 var(--rhx-space-md);
    color: var(--rhx-color-text);
}

/* ── Example Blocks ── */
.docs-example {
    margin-bottom: var(--rhx-space-xl);
}

.docs-example h3 {
    font-size: var(--rhx-font-size-md);
    font-weight: var(--rhx-font-weight-semibold);
    margin-bottom: var(--rhx-space-md);
    color: var(--rhx-color-text);
}

.docs-preview {
    padding: var(--rhx-space-xl);
    border: var(--rhx-border-width) solid var(--rhx-color-border);
    border-radius: var(--rhx-radius-lg);
    background: var(--rhx-color-surface);
    display: flex;
    flex-wrap: wrap;
    gap: var(--rhx-space-md);
    align-items: center;
}

.docs-preview--vertical {
    flex-direction: column;
    align-items: stretch;
}

/* ── Code Blocks ── */
.docs-code {
    position: relative;
    overflow-x: auto;
    background: var(--rhx-color-neutral-900);
    color: var(--rhx-color-neutral-100);
    border-radius: var(--rhx-radius-lg);
    padding: var(--rhx-space-lg);
    font-size: var(--rhx-font-size-sm);
    line-height: 1.6;
}

.docs-code pre {
    margin: 0;
    white-space: pre;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

.docs-code code {
    font-family: inherit;
    background: none;
    padding: 0;
    color: inherit;
}

.docs-code__copy {
    position: absolute;
    top: var(--rhx-space-sm);
    right: var(--rhx-space-sm);
}

/* ── Property Table ── */
.docs-property-table {
    overflow-x: auto;
}

.docs-property-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rhx-font-size-sm);
}

.docs-property-table th {
    text-align: left;
    padding: var(--rhx-space-sm) var(--rhx-space-md);
    background: var(--rhx-color-neutral-50);
    border-bottom: 2px solid var(--rhx-color-border);
    font-weight: var(--rhx-font-weight-semibold);
    color: var(--rhx-color-text);
    white-space: nowrap;
}

.docs-property-table td {
    padding: var(--rhx-space-sm) var(--rhx-space-md);
    border-bottom: var(--rhx-border-width) solid var(--rhx-color-border);
    color: var(--rhx-color-text);
    vertical-align: top;
}

.docs-property-table td code {
    font-size: var(--rhx-font-size-xs);
    background: var(950);
    padding: 2px var(--rhx-space-xs);
    border-radius: var(--rhx-radius-sm);
    color: var(--rhx-color-neutral-50);
    white-space: nowrap;
}

/* ── Prose (Getting Started) ── */
.docs-prose {
    max-width: 720px;
    line-height: 1.7;
    color: var(--rhx-color-text);
}

.docs-prose h1 {
    font-size: var(--rhx-font-size-3xl);
    font-weight: var(--rhx-font-weight-bold);
    margin: 0 0 var(--rhx-space-md);
}

.docs-prose h2 {
    font-size: var(--rhx-font-size-xl);
    font-weight: var(--rhx-font-weight-bold);
    margin: var(--rhx-space-2xl) 0 var(--rhx-space-md);
    padding-bottom: var(--rhx-space-sm);
    border-bottom: var(--rhx-border-width) solid var(--rhx-color-border);
}

.docs-prose h3 {
    font-size: var(--rhx-font-size-lg);
    font-weight: var(--rhx-font-weight-semibold);
    margin: var(--rhx-space-xl) 0 var(--rhx-space-sm);
}

.docs-prose p {
    margin: 0 0 var(--rhx-space-md);
}

.docs-prose ul,
.docs-prose ol {
    margin: 0 0 var(--rhx-space-md);
    padding-left: var(--rhx-space-xl);
}

.docs-prose li {
    margin-bottom: var(--rhx-space-xs);
}

.docs-prose code:not(.docs-code code) {
    font-size: 0.9em;
    background: var(--rhx-color-neutral-950);*/
    padding: 2px var(--rhx-space-xs);
    border-radius: var(--rhx-radius-sm);
    color: var(--rhx-color-neutral-50);*/
}

.docs-prose a {
    color: var(--rhx-color-neutral-50);
    text-decoration: none;
}

.docs-prose a:hover {
    text-decoration: underline;
}

/* ── Accessibility Section ── */
.docs-a11y-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-a11y-list li {
    padding: var(--rhx-space-sm) 0;
    border-bottom: var(--rhx-border-width) solid var(--rhx-color-border);
    font-size: var(--rhx-font-size-sm);
    color: var(--rhx-color-text);
}

.docs-a11y-list li:last-child {
    border-bottom: none;
}

/* ── Responsive ── */
@@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main"
            "footer";
    }

    .docs-sidebar {
        display: none;
    }

    .docs-topbar__menu-btn {
        display: block;
    }

    .docs-main {
        padding: var(--rhx-space-lg);
    }

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

    .docs-hero__title {
        font-size: 2.5rem;
    }

    .docs-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .docs-footer__brand {
        flex-direction: column;
        gap: var(--rhx-space-sm);
    }

    .docs-footer__legal {
        flex-direction: column;
        gap: var(--rhx-space-xs);
    }

    .docs-footer__dot {
        display: none;
    }
}

/* ── Footer ── */
.docs-footer {
    grid-area: footer;
    border-top: 2px solid var(--rhx-color-brand-500);
    padding: var(--rhx-space-xl) var(--rhx-space-xl);
    background: var(--rhx-color-surface);
}

.docs-footer__inner {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rhx-space-md);
    font-size: var(--rhx-font-size-sm);
    color: var(--rhx-color-text-muted);
}

.docs-footer__inner a {
    color: var(--rhx-color-brand-500);
    text-decoration: none;
}

.docs-footer__inner a:hover {
    text-decoration: underline;
}

.docs-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--rhx-space-md);
}

.docs-footer__name {
    font-weight: var(--rhx-font-weight-semibold);
    color: var(--rhx-color-brand-500);
    font-size: var(--rhx-font-size-md);
}

.docs-footer__version {
    display: inline-block;
    padding: 2px var(--rhx-space-sm);
    font-size: var(--rhx-font-size-xs);
    font-weight: var(--rhx-font-weight-medium);
    background: var(--rhx-color-brand-50);
    color: var(--rhx-color-brand-700);
    border-radius: var(--rhx-radius-full);
    line-height: 1.4;
}

.docs-footer__separator {
    width: 100%;
    max-width: 12rem;
    border: none;
    border-top: var(--rhx-border-width) solid var(--rhx-color-border);
    margin: 0;
}

.docs-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--rhx-space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.docs-footer__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: var(--rhx-radius-full);
    background: var(--rhx-color-text-muted);
}