/* ========================================
   Wide-Screen Sidebar — Article + Homepage (W1, W2)
   ======================================== */

/* --- Layout Grids --- */

/* Article pages: left pager + centered content + 320px right sidebar */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 240px minmax(auto, 800px) 320px 1fr;
    grid-template-areas: ". pager content questions .";
}

/* Place children into grid areas */
.article-layout > .article-body,
.article-layout > .article-content-area {
    grid-area: content;
}

.article-layout > .article-pager {
    grid-area: pager;
}

.article-layout > .article-questions {
    grid-area: questions;
}

/* --- Left Pager Panel (cross-links) --- */

.article-pager {
    position: sticky;
    top: calc(var(--header-height, 85px) + var(--space-md, 16px));
    align-self: start;
    max-height: calc(100vh - var(--header-height, 85px) - var(--space-2xl, 40px));
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--box-background-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    font-size: 0.9em;
}

.article-pager[hidden] {
    display: none;
}

.dark-mode .article-pager {
    background: var(--box-background-dark);
    box-shadow: var(--shadow-sm-dark);
}

/* Cross-link list inside pager */
.article-pager .cross-link-section {
    margin: 0;
    padding: 0;
}

.article-pager .cross-link-label {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin: 0 0 var(--space-sm);
}

.article-pager .cross-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-pager .cross-link-list li {
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.article-pager .cross-link-list li:last-child {
    margin-bottom: 0;
}

.article-pager .cross-link {
    color: var(--link-color-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
}

.article-pager .cross-link:hover {
    text-decoration: underline;
    color: var(--link-hover-light);
}

.dark-mode .article-pager .cross-link {
    color: var(--link-color-dark);
}

.dark-mode .article-pager .cross-link:hover {
    color: var(--link-hover-dark);
}

.article-pager .cross-link-desc {
    display: block;
    font-size: 0.82em;
    opacity: 0.7;
    margin-top: 1px;
}

/* --- Questions Sidebar (Right Panel) --- */

.article-questions {
    position: sticky;
    top: calc(var(--header-height, 85px) + var(--space-md, 16px));
    align-self: start;
    max-height: calc(100vh - var(--header-height, 85px) - var(--space-2xl, 40px));
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--box-background-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);

    /* Hidden until hero scrolls past */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Visible state — toggled by JS */
.article-questions.sidebar-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Dark mode */
.dark-mode .article-questions {
    background: var(--box-background-dark);
    box-shadow: var(--shadow-sm-dark);
}

/* Hide scrollbar but keep functionality */
.article-questions::-webkit-scrollbar {
    width: 4px;
}

.article-questions::-webkit-scrollbar-thumb {
    background: var(--border-color-light);
    border-radius: 2px;
}

.dark-mode .article-questions::-webkit-scrollbar-thumb {
    background: var(--border-color-dark);
}

/* --- Sidebar Sections --- */

.sidebar-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color-light);
}

.sidebar-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dark-mode .sidebar-section {
    border-bottom-color: var(--border-color-dark);
}

.sidebar-section h3 {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin: 0 0 var(--space-sm);
}

/* --- TOC / Page Index --- */

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

.toc-item {
    display: block;
    padding: var(--space-xs) 0;
    padding-left: var(--space-sm);
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--text-color-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.toc-item:hover {
    color: var(--link-hover-light);
    border-left-color: var(--border-color-light);
}

.toc-item--h3 {
    padding-left: calc(var(--space-sm) + var(--space-md));
    font-size: 0.82em;
    opacity: 0.85;
}

/* Active heading — scroll-spy highlight */
.toc-item--active {
    color: var(--primary-navy);
    border-left-color: var(--primary-accent);
    font-weight: 600;
}

.dark-mode .toc-item {
    color: var(--text-color-dark);
}

.dark-mode .toc-item:hover {
    color: var(--link-hover-dark);
}

.dark-mode .toc-item--active {
    color: var(--primary-azure);
    border-left-color: var(--primary-azure);
}

/* --- TOC Collapsible (Mobile) --- */

.toc-collapsible {
    display: none;
}

.toc-collapsible summary {
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-subtle-light);
    border-radius: var(--radius-md);
    user-select: none;
}

.toc-collapsible summary:hover {
    background: var(--surface-hover-light);
}

.dark-mode .toc-collapsible summary {
    background: var(--surface-subtle-dark);
}

.dark-mode .toc-collapsible summary:hover {
    background: var(--surface-hover-dark);
}

.toc-collapsible[open] summary {
    margin-bottom: var(--space-sm);
}

.toc-collapsible .toc-list {
    padding-left: var(--space-md);
}

/* --- Sidebar CTA (Compact) --- */

.sidebar-cta h4 {
    font-size: 1em;
    margin: 0 0 var(--space-sm);
    line-height: 1.3;
}

.sidebar-cta p {
    font-size: 0.85em;
    margin: 0 0 var(--space-sm);
    opacity: 0.8;
    line-height: 1.4;
}

.sidebar-cta .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-cta .cta-buttons .product-cta {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.85em;
    text-align: center;
}

/* --- Sidebar Questions (Compact) --- */

.sidebar-questions {
    margin: 0;
}

.sidebar-questions .review-questions {
    padding: 0;
    margin: 0;
}

.sidebar-questions .review-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-questions .review-questions li {
    font-size: 0.85em;
    padding: var(--space-xs) 0;
    cursor: pointer;
    line-height: 1.4;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.sidebar-questions .review-questions li:hover {
    opacity: 1;
}

.sidebar-questions .review-questions .click-hint {
    display: none;
}

/* Questions rendered directly inside .article-questions sidebar (from questions.html include) */
.article-questions .review-questions {
    padding: 0;
    margin: 0;
    max-width: none;
}

.article-questions .review-questions.section {
    padding-block: 0;
}

.article-questions .review-questions h2 {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin: 0 0 var(--space-sm);
    padding: 0;
}

.article-questions .review-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-questions .review-questions li {
    font-size: 0.85em;
    padding: var(--space-xs) 0;
    cursor: pointer;
    line-height: 1.4;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    border: none;
    border-radius: 0;
    min-height: auto;
    gap: var(--space-sm);
}

.article-questions .review-questions li:hover {
    opacity: 1;
    background: transparent;
    box-shadow: none;
}

.article-questions .review-questions .click-hint {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary-accent);
    opacity: 0.5;
}

.article-questions .review-questions li span {
    font-size: 1em;
}

/* --- Responsive: hide sidebars on narrow screens --- */

@media (max-width: 1199px) {
    .article-layout {
        display: block;
    }

    .article-pager,
    .article-questions {
        display: none;
    }

    /* Show collapsible TOC at top of article body */
    .toc-collapsible {
        display: block;
        margin-bottom: var(--space-lg);
    }
}

/* --- Responsive: sidebar visible on wide screens --- */

@media (min-width: 1200px) {
    /* Hide bottom-of-page questions and CTA on wide screens
       (they render in sidebar instead) */
    .article-body .review-questions,
    .article-body > .cta-section {
        display: none;
    }

    /* Hide collapsible TOC on wide screens */
    .toc-collapsible {
        display: none;
    }
}