/* ============================================
   Reader Page Styles (PicoCSS Compliant)
   Extracted from templates/reader.php
   ============================================ */

/* Breadcrumbs */
.reader-breadcrumb {
    padding: 0.5rem 0;
}

.reader-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    align-items: center;
}

.reader-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.reader-breadcrumb .delim {
    color: var(--pico-muted-color);
    margin: 0 0.25rem;
}

/* Reader Header */
.reader-header {
    text-align: center;
    padding: 2rem 0;
}

.reader-header h3 {
    color: var(--pico-primary);
    margin-bottom: 0.5rem;
}

.reader-header .chapter-meta {
    color: var(--pico-muted-color);
    margin-bottom: 1rem;
}

/* Chapter Navigation */
.chapter-nav {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.chapter-nav .btn-nav {
    min-width: 120px;
}

.chapter-nav .btn-icon {
    min-width: 50px;
    padding: 0.75rem;
}

/* Pagination */
.reader-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    align-items: center;
}

.reader-pagination a {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
    text-decoration: none;
}

.reader-pagination .active {
    background: var(--pico-primary);
    color: white;
    border-color: var(--pico-primary);
}

/* Reader Stats */
.reader-stats {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--pico-muted-color);
}

/* Reading Options Panel */
.reading-options {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.reading-options .option-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reading-options button {
    padding: 0.3rem 0.6rem;
    min-width: auto;
    margin: 0;
}

.reading-options label {
    margin: 0;
    color: var(--pico-muted-color);
}


/* Chapter Divider */
.chap-divider {
    text-align: center;
    padding: 1rem 0;
}

.chap-divider img {
    max-width: 200px;
    height: auto;
    display: inline-block;
}

/* Content Protection (applied via JS when enabled) */
.content-protected {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.content-protected::selection {
    background: transparent;
}

/* NOTE: Use HTML5 hidden attribute instead of .hidden class */
/* Example: <div hidden>...</div> */


/* Icon alignment utility */
.icon-inline {
    vertical-align: text-bottom;
}

/* Chapter Navigation Header */
.chapter-nav-header {
    text-align: center;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
}

.chapter-title-block h4 {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}

.chapter-title-block h4 a {
    color: var(--pico-primary);
    text-decoration: none;
}

.chapter-title-block h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.chapter-info {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    color: var(--pico-muted-color);
    font-size: 0.85rem;
}

.chapter-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.chapter-nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chapter-nav-buttons a[role="button"],
.chapter-nav-buttons span[role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}


/* ==== Mobile Reader Navigation ==== */
@media (max-width: 768px) {

    /* Sticky top nav on mobile */
    .chapter-nav-header.sticky-mobile {
        position: sticky;
        top: 0;
        z-index: 100;
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .chapter-title-block h4 {
        font-size: 0.8rem;
    }

    .chapter-title-block h3 {
        font-size: 0.95rem;
    }

    .chapter-info {
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    /* Keep stat text visible on mobile */
    .chapter-stat .stat-text {
        display: inline;
    }

    /* Hide button text, show only icons */
    .chapter-nav-buttons .btn-text {
        display: none;
    }

    .chapter-nav-buttons a[role="button"],
    .chapter-nav-buttons span[role="button"] {
        padding: 0.5rem 0.6rem;
        min-width: auto;
    }

}

/* Very small screens */
@media (max-width: 400px) {
    .chapter-nav-header {
        padding: 0.75rem;
    }

    .chapter-nav-buttons a[role="button"],
    .chapter-nav-buttons span[role="button"] {
        padding: 0.4rem 0.5rem;
    }

    .chapter-nav-buttons svg {
        width: 16px;
        height: 16px;
    }
}

/* =========================================
   Global Overrides (User Requested)
   ========================================= */

/* Sticky Top Nav - Global Enable */
.chapter-nav-header.sticky-mobile {
    position: sticky;
    top: 0;
    z-index: 90;
    /* Higher than site-header (80) to cover it, but below dropdowns (1000) */
    /* Desktop: keep borders/radius */
}



@media (max-width: 768px) {


    /* TOC styles removed to rely on PicoCSS classless defaults */

}