/**
 * Sefaria Library - EXACT Sefaria Design Recreation
 * High specificity to prevent WordPress theme overrides
 * Load with priority 9999 to ensure it loads last
 */

/* ========================================
   CRITICAL: Reset any theme overrides
   ======================================== */

body .sefaria-library-browse,
body .sefaria-category-view,
body .sefaria-book-container,
body .sefaria-reader,
body .sefaria-library-browse *,
body .sefaria-category-view *,
body .sefaria-book-container *,
body .sefaria-reader * {
    box-sizing: border-box !important;
}

/* ========================================
   1. EXACT SEFARIA LAYOUT - Two Column
   ======================================== */

body .sefaria-library-browse {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.6 !important;
    color: #333333 !important;
    background: #FFFFFF !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 60px !important;
}

@media (max-width: 1024px) {
    body .sefaria-library-browse {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }
}

/* ========================================
   2. MAIN CONTENT COLUMN (Left)
   ======================================== */

body .sefaria-category-grid {
    display: block !important;
    grid-column: 1 !important;
    width: 100% !important;
}

body .sefaria-category-card {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    position: relative !important;
}

/* Colored horizontal separator lines (refined Sefaria style) */
body .sefaria-category-card::after {
    content: '' !important;
    display: block !important;
    height: 1px !important;
    width: 100% !important;
    margin: 24px 0 28px 0 !important;
    background: #E0E0E0 !important;
    clear: both !important;
    opacity: 0.6 !important;
}

/* Subtle colored accent on separator (optional - can be removed for cleaner look) */
body .sefaria-category-card:nth-child(1)::after { 
    border-top: 2px solid #0066CC !important; 
    background: transparent !important;
    height: 0 !important;
    margin: 24px 0 28px 0 !important;
}
body .sefaria-category-card:nth-child(2)::after { border-top: 2px solid #00A86B !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(3)::after { border-top: 2px solid #FFB020 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(4)::after { border-top: 2px solid #FF6B35 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(5)::after { border-top: 2px solid #DC3545 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(6)::after { border-top: 2px solid #9333EA !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(7)::after { border-top: 2px solid #0066CC !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(8)::after { border-top: 2px solid #00A86B !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(9)::after { border-top: 2px solid #FFB020 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(10)::after { border-top: 2px solid #FF6B35 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(11)::after { border-top: 2px solid #DC3545 !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(12)::after { border-top: 2px solid #9333EA !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(13)::after { border-top: 2px solid #0066CC !important; background: transparent !important; height: 0 !important; }
body .sefaria-category-card:nth-child(14)::after { border-top: 2px solid #00A86B !important; background: transparent !important; height: 0 !important; }


body .sefaria-category-card:last-child::after {
    display: none !important;
}

body .sefaria-category-card a {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 30px !important;
}

body .sefaria-category-card .category-content {
    flex: 1 !important;
}

body .sefaria-category-card .category-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif !important;
    color: #1A1A1A !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
}

body .sefaria-category-card .category-description {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.7 !important;
    font-style: normal !important;
    max-width: 600px !important;
}

body .sefaria-category-card .category-hebrew {
    font-family: "Taamey Frank CLM", "SBL Hebrew", "Times New Roman", serif !important;
    font-size: 16px !important;
    direction: rtl !important;
    text-align: right !important;
    color: #888888 !important;
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
}

body .sefaria-category-card:hover .category-title {
    color: #0066CC !important;
}

body .sefaria-category-card a:hover {
    text-decoration: none !important;
}

/* ========================================
   3. SIDEBAR (Right Column) - Sefaria Style
   ======================================== */

body .sefaria-sidebar {
    grid-column: 2 !important;
    position: sticky !important;
    top: 40px !important;
    align-self: start !important;
    height: fit-content !important;
    padding-left: 20px !important;
}

@media (max-width: 1024px) {
    body .sefaria-sidebar {
        grid-column: 1 !important;
        position: static !important;
        margin-top: 50px !important;
        padding-left: 0 !important;
        border-top: 1px solid #E8E8E8 !important;
        padding-top: 40px !important;
    }
}

body .sefaria-sidebar-section {
    margin-bottom: 36px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px solid #E8E8E8 !important;
}

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

body .sefaria-sidebar-section h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
}

body .sefaria-sidebar-section p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #666666 !important;
    margin: 0 0 12px 0 !important;
}

body .sefaria-sidebar-section a {
    color: #0066CC !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

body .sefaria-sidebar-section a:hover {
    text-decoration: underline !important;
    color: #0052A3 !important;
}

body .sefaria-sidebar-section .start-reading-btn {
    display: inline-block !important;
    padding: 10px 18px !important;
    background: #0066CC !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    transition: background 0.2s ease !important;
}

body .sefaria-sidebar-section .start-reading-btn:hover {
    background: #0052A3 !important;
    text-decoration: none !important;
}

/* ========================================
   4. HEADER - "Browse the Library"
   ======================================== */

body .sefaria-header {
    grid-column: 1 / -1 !important;
    text-align: left !important;
    margin-bottom: 50px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #E8E8E8 !important;
}

body .sefaria-header h1 {
    font-size: 32px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif !important;
    color: #1A1A1A !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

body .sefaria-subtitle {
    font-size: 13px !important;
    color: #999999 !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* ========================================
   5. CATEGORY VIEW PAGE (Tanakh-style)
   ======================================== */

body .sefaria-category-view {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    background: #FFFFFF !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 60px !important;
}

@media (max-width: 1024px) {
    body .sefaria-category-view {
        grid-template-columns: 1fr !important;
        padding: 40px 20px !important;
        gap: 40px !important;
    }
}

body .category-main-content {
    grid-column: 1 !important;
}

body .category-sidebar {
    grid-column: 2 !important;
    position: sticky !important;
    top: 40px !important;
    align-self: start !important;
    height: fit-content !important;
    padding-left: 20px !important;
}

@media (max-width: 1024px) {
    body .category-sidebar {
        grid-column: 1 !important;
        position: static !important;
        padding-left: 0 !important;
        margin-top: 40px !important;
        border-top: 1px solid #E8E8E8 !important;
        padding-top: 40px !important;
    }
}

body .category-header {
    margin-bottom: 30px !important;
    text-align: center !important;
}

body .category-header h1 {
    font-size: 36px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif !important;
    color: #1A1A1A !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.02em !important;
}

body .category-header .hebrew {
    font-family: "Taamey Frank CLM", "SBL Hebrew", "Times New Roman", serif !important;
    font-size: 24px !important;
    text-align: center !important;
    direction: rtl !important;
    color: #666666 !important;
    margin: 8px 0 0 0 !important;
    font-weight: 400 !important;
}

body .category-header .back-link {
    display: inline-block !important;
    margin-top: 20px !important;
    color: #0066CC !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

body .category-header .back-link:hover {
    text-decoration: underline !important;
}

body .category-description-intro {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.7 !important;
    margin: 0 0 40px 0 !important;
    text-align: center !important;
}

body .category-header .description {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #666 !important;
    max-width: 800px !important;
    margin: 30px auto 0 auto !important;
    text-align: left !important;
}

body .sefaria-books-list {
    display: block !important;
}

body .book-section {
    margin-bottom: 50px !important;
}

body .book-section .section-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid #E8E8E8 !important;
    letter-spacing: 0.05em !important;
}

body .sefaria-books-grid {
    display: block !important;
    grid-column: 1 !important;
}

body .sefaria-book-item {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 28px 0 !important;
    margin: 0 0 28px 0 !important;
    border-bottom: 1px solid #E8E8E8 !important;
}

body .sefaria-book-item:last-child {
    border-bottom: none !important;
}

body .sefaria-book-item a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

body .sefaria-book-item .book-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

body .sefaria-book-item .book-title:hover {
    color: #0066CC !important;
}

body .sefaria-book-item .book-description {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #666666 !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    max-width: 700px !important;
}

body .sefaria-book-item .hebrew {
    font-family: "Taamey Frank CLM", "SBL Hebrew", "Times New Roman", serif !important;
    font-size: 16px !important;
    direction: rtl !important;
    color: #888888 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

body .sefaria-book-card {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

body .sefaria-book-card::after {
    content: '' !important;
    display: block !important;
    height: 1px !important;
    background: #E0E0E0 !important;
    margin: 25px 0 0 0 !important;
}

body .sefaria-book-card:last-child::after {
    display: none !important;
}

body .sefaria-book-card a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

body .sefaria-book-card h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

body .sefaria-book-card .hebrew {
    font-family: "Taamey Frank CLM", "SBL Hebrew", "Times New Roman", serif !important;
    font-size: 16px !important;
    direction: rtl !important;
    text-align: right !important;
    color: #666 !important;
    margin: 5px 0 8px 0 !important;
}

body .sefaria-book-card .description {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #666 !important;
    margin: 0 !important;
    padding-left: 20px !important;
}

body .sefaria-book-card:hover h3 {
    color: #0066CC !important;
}

/* ========================================
   6. BOOK CONTENTS PAGE (Genesis-style)
   ======================================== */

body .sefaria-book-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    background: #FFFFFF !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
}

body .book-header h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
    font-family: "Libertinus Serif", "Times New Roman", serif !important;
    color: #333 !important;
    margin: 0 0 10px 0 !important;
}

body .book-header h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #666 !important;
    margin: 0 0 30px 0 !important;
    letter-spacing: 1px !important;
}

body .start-reading-btn {
    display: inline-block !important;
    padding: 12px 24px !important;
    background: #0066CC !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 20px 0 30px 0 !important;
}

body .start-reading-btn:hover {
    background: #0052A3 !important;
}

body .book-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #E0E0E0 !important;
    margin: 30px 0 20px 0 !important;
}

body .book-tabs .tab {
    padding: 12px 24px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666 !important;
    cursor: pointer !important;
    margin-right: 20px !important;
}

body .book-tabs .tab.active {
    color: #0066CC !important;
    border-bottom-color: #0066CC !important;
}

body .sefaria-chapter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
    gap: 12px !important;
    margin: 30px 0 !important;
    max-width: 600px !important;
}

body .chapter-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

body .chapter-button:hover {
    background: #F5F5F5 !important;
    border-color: #0066CC !important;
    color: #0066CC !important;
}

/* ========================================
   7. TEXT READER - Bilingual Display
   ======================================== */

body .sefaria-reader {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
    background: #FFFFFF !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body .sefaria-reader-header {
    background: #F8F9FA !important;
    padding: 20px 40px !important;
    border-bottom: 1px solid #E0E0E0 !important;
}

body .reader-title h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 5px 0 !important;
}

body .reader-title .translation-source {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
}

body .reader-controls {
    display: flex !important;
    gap: 15px !important;
    padding: 15px 40px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E0E0E0 !important;
    flex-wrap: wrap !important;
}

body .lang-selector,
body .reader-control-btn {
    padding: 8px 16px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    font-size: 14px !important;
    cursor: pointer !important;
    color: #333 !important;
}

body .lang-selector:hover,
body .reader-control-btn:hover {
    background: #F5F5F5 !important;
}

body .reader-main-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 40px !important;
}

@media (min-width: 768px) {
    body .reader-main-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
    }
}

body .text-column {
    padding: 0 !important;
}

body .verse,
body .hebrew-verse {
    padding: 10px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    line-height: 1.8 !important;
    display: flex !important;
    align-items: flex-start !important;
}

body .hebrew-verse {
    direction: rtl !important;
    text-align: right !important;
    font-family: "Taamey Frank CLM", "SBL Hebrew", "Times New Roman", serif !important;
    font-size: 18px !important;
}

body .verse {
    font-size: 16px !important;
    color: #333 !important;
}

body .verse:hover,
body .hebrew-verse:hover {
    background: #F8F9FA !important;
}

body .verse.active,
body .hebrew-verse.active {
    background: #E3F2FD !important;
}

body .verse-number {
    display: inline-block !important;
    min-width: 30px !important;
    font-weight: 700 !important;
    color: #999 !important;
    margin-right: 12px !important;
    font-size: 12px !important;
    vertical-align: top !important;
    padding-top: 3px !important;
}

body .hebrew-verse .verse-number {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* ========================================
   8. MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    body .sefaria-library-browse,
    body .sefaria-category-view {
        padding: 20px 15px !important;
        gap: 30px !important;
    }
    
    body .sefaria-header h1 {
        font-size: 28px !important;
    }
    
    body .sefaria-category-card .category-title {
        font-size: 18px !important;
    }
    
    body .sefaria-reader-header {
        padding: 15px 20px !important;
    }
    
    body .reader-main-container {
        padding: 20px 15px !important;
        gap: 30px !important;
    }
    
    body .chapter-button {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   9. UTILITY CLASSES
   ======================================== */

body .back-link {
    display: inline-block !important;
    margin-top: 20px !important;
    color: #0066CC !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

body .back-link:hover {
    text-decoration: underline !important;
}

body .category-count {
    display: inline-block !important;
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 10px !important;
}

/* Hide main grid when viewing specific category */
.sefaria-category-view:not(:empty) ~ .sefaria-category-grid,
.sefaria-category-view:not(:empty) ~ .sefaria-sidebar {
    display: none !important;
}