/* \wwwroot\css\HomePage\categories.css */
.categories-header {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
    font-size: 1.80rem; /* larger, matches prominence of hero */
    font-weight: 700;
    /* avoid hard fixed width so long category names can display
       allow single-line display and wrap only if necessary */
    max-width: none;
    color: #004dac; /* high contrast for dark backgrounds */
    padding: 0px 60px 0px 0;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    text-align: left;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: visible;
}

.category-name {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
    font-size: 2.4rem;
    font-weight: 600;
    color: #ffffff;
    padding: 10px 12px;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    text-align: left;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    /* keep category names on one line where possible */
    white-space: nowrap;
    overflow: visible;
}

.category-section {
    padding: 0px 0;
    /* Ensure in-page jumps land the category header below the fixed navbar.
       Adjust value to match your navbar height (default ~80px) plus a small gap. */
    scroll-margin-top: 88px;
}

.category-title {
    font-weight: 700;
    margin-bottom: 0px;
}

/* Note: Old .cat-container, .cat-scroll, .book-card, .cover-wrapper, .book-cover, 
   and .book-title classes removed. Categories now use the unified _ShelfRow.cshtml 
   component with standardized .shelf-book-card classes from books.css */

.cat-arrow {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #333;
    padding: 0 4px;
    flex-shrink: 0;
    line-height: 1;
}

.empty-category {
    color: #777;
    font-size: 0.9rem;
    padding: 10px 0;
}

/* Responsive adjustment for smaller viewports where the header is shorter */
@media (max-width: 576px) {
    .category-section {
        scroll-margin-top: 72px;
    }
}