/* Accessibility Tools Styles */

/* Header Accessibility Button */
.accessibility-button {
    background: var(--toolbar-btn-bg, var(--bg-secondary));
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--toolbar-btn-radius, 50%);
}

.accessibility-button img {
    width: 20px;
    height: 20px;
}

.accessibility-button svg {
    width: 20px;
    height: 20px;
    stroke: var(--toolbar-btn-color, var(--text-primary));
}

.accessibility-button:hover {
    background: var(--toolbar-btn-hover-bg, var(--bg-tertiary));
    transform: translateY(-2px);
}

.accessibility-button:hover svg {
    stroke: var(--toolbar-btn-hover-color, var(--color-primary));
}

.accessibility-button:active {
    transform: scale(0.95);
}

/* Accessibility Panel */
.accessibility-panel {
    position: fixed;
    top: 107px;
    right: 60px;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    max-height: calc(100vh - 127px);
    overflow-y: auto;
}

/* RTL positioning - left side */
[dir="rtl"] .accessibility-panel,
body.rtl .accessibility-panel {
    right: auto;
    left: 60px;
}

.accessibility-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.accessibility-panel-header {
    padding: 20px;
    background: var(--bg-light, #f8f9fa);
    color: var(--text-color, #2c3e50);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accessibility-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-family: var(--font-headings, inherit);
}

.accessibility-close {
    background: transparent;
    border: none;
    color: var(--text-light, #7f8c8d);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
    font-weight: 300;
}

.accessibility-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color, #2c3e50);
}

.accessibility-panel-content {
    padding: 20px;
}

/* Control Groups */
.accessibility-control {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.accessibility-control:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.accessibility-control-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    font-size: 0.95rem;
    font-family: var(--font-headings, inherit);
}

/* Font Size Control */
.font-size-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.font-size-btn {
    background: #2c3e50;
    color: white;
    border: 1px solid #2c3e50;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    font-family: var(--font-headings, inherit);
}

.font-size-btn:hover {
    background: #34495e;
    border-color: #34495e;
}

.font-size-btn:active {
    transform: scale(0.95);
}

.font-size-display {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
}

/* Toggle Switches */
.accessibility-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 13px;
    transition: background 0.3s;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.accessibility-toggle input {
    display: none;
}

.accessibility-toggle input:checked + .toggle-switch {
    background: #2c3e50;
}

.accessibility-toggle input:checked + .toggle-switch::after {
    transform: translateX(24px);
}

/* Reset Button */
.reset-accessibility-btn {
    width: 100%;
    padding: 12px;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-headings, inherit);
    margin-top: 10px;
}

.reset-accessibility-btn:hover {
    background: #d32f2f;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

/* Reading Ruler */
.reading-ruler {
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(44, 62, 80, 0.8);
    pointer-events: none;
    z-index: 9997;
    display: none;
    box-shadow: 0 0 10px rgba(44, 62, 80, 0.5);
}

.reading-ruler.active {
    display: block;
}

.reading-ruler::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(44, 62, 80, 0.2));
}

.reading-ruler::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, transparent, rgba(44, 62, 80, 0.2));
}

/* Text Highlight on Hover */
body.text-highlight-active p:hover,
body.text-highlight-active li:hover,
body.text-highlight-active h2:hover,
body.text-highlight-active h3:hover,
body.text-highlight-active h4:hover,
body.text-highlight-active blockquote:hover {
    background: rgba(255, 235, 59, 0.3) !important;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

/* Font Type Selector */
.font-type-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: var(--font-headings, inherit);
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.font-type-select:hover {
    border-color: #2c3e50;
}

.font-type-select:focus {
    outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Font Type Classes */
body.font-default {
    /* Keep original fonts - no override */
}

body.font-tajawal,
body.font-tajawal * {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
}

body.font-naskh,
body.font-naskh * {
    font-family: 'Noto Naskh Arabic', 'Amiri', serif !important;
}

/* Font Size Adjustments - Apply ONLY to chapter CONTENT (exclude title/subtitle) */
/* Industry-standard typographic scale with 1.125 ratio */
/* Normal = Desktop: 1.1rem content, 1.6rem headings | Mobile: 1rem content, 1.3rem headings */
/* IMPORTANT: Mobile rules use normal priority to allow chapter-specific overrides */

/* Small font size - 0.889 scale from normal (1 / 1.125) */
body[data-font-size="small"] .content-body p,
body[data-font-size="small"] .content-body li,
body[data-font-size="small"] .content-body blockquote,
body[data-font-size="small"] .content-body div {
    font-size: 0.98rem !important;  /* Desktop: ~15.7px (1.1 × 0.889) */
    line-height: 1.7 !important;
}

body[data-font-size="small"] .content-body h2,
body[data-font-size="small"] .content-body h3,
body[data-font-size="small"] .content-body h4 {
    font-size: 1.42rem !important;  /* Desktop: ~22.7px (1.6 × 0.889) */
}

@media (max-width: 768px) {
    body[data-font-size="small"] .content-body p,
    body[data-font-size="small"] .content-body li,
    body[data-font-size="small"] .content-body blockquote,
    body[data-font-size="small"] .content-body div {
        font-size: 0.889rem;  /* Mobile: ~14.2px (1 × 0.889) - no !important to allow chapter overrides */
    }
    
    body[data-font-size="small"] .content-body h2,
    body[data-font-size="small"] .content-body h3,
    body[data-font-size="small"] .content-body h4 {
        font-size: 1.156rem;  /* Mobile: ~18.5px (1.3 × 0.889) - no !important to allow chapter overrides */
    }
}

/* Normal font size - baseline as specified */
body[data-font-size="normal"] .content-body p,
body[data-font-size="normal"] .content-body li,
body[data-font-size="normal"] .content-body blockquote,
body[data-font-size="normal"] .content-body div {
    font-size: 1.1rem !important;  /* Desktop: ~17.6px (baseline) */
    line-height: 1.8 !important;
}

body[data-font-size="normal"] .content-body h2,
body[data-font-size="normal"] .content-body h3,
body[data-font-size="normal"] .content-body h4 {
    font-size: 1.6rem !important;  /* Desktop: ~25.6px (baseline) */
}

@media (max-width: 768px) {
    body[data-font-size="normal"] .content-body p,
    body[data-font-size="normal"] .content-body li,
    body[data-font-size="normal"] .content-body blockquote,
    body[data-font-size="normal"] .content-body div {
        font-size: 1rem;  /* Mobile: 16px (baseline) - no !important to allow chapter overrides */
    }
    
    body[data-font-size="normal"] .content-body h2,
    body[data-font-size="normal"] .content-body h3,
    body[data-font-size="normal"] .content-body h4 {
        font-size: 1.3rem;  /* Mobile: ~20.8px (baseline) - no !important to allow chapter overrides */
    }
}

/* Large font size - 1.125x from normal */
body[data-font-size="large"] .content-body p,
body[data-font-size="large"] .content-body li,
body[data-font-size="large"] .content-body blockquote,
body[data-font-size="large"] .content-body div {
    font-size: 1.24rem !important;  /* Desktop: ~19.8px (1.1 × 1.125) */
    line-height: 1.85 !important;
}

body[data-font-size="large"] .content-body h2,
body[data-font-size="large"] .content-body h3,
body[data-font-size="large"] .content-body h4 {
    font-size: 1.8rem !important;  /* Desktop: ~28.8px (1.6 × 1.125) */
}

@media (max-width: 768px) {
    body[data-font-size="large"] .content-body p,
    body[data-font-size="large"] .content-body li,
    body[data-font-size="large"] .content-body blockquote,
    body[data-font-size="large"] .content-body div {
        font-size: 1.125rem;  /* Mobile: 18px (1 × 1.125) - no !important to allow chapter overrides */
    }
    
    body[data-font-size="large"] .content-body h2,
    body[data-font-size="large"] .content-body h3,
    body[data-font-size="large"] .content-body h4 {
        font-size: 1.4625rem;  /* Mobile: ~23.4px (1.3 × 1.125) - no !important to allow chapter overrides */
    }
}

/* Extra Large font size - 1.266x from normal (1.125²) */
body[data-font-size="xlarge"] .content-body p,
body[data-font-size="xlarge"] .content-body li,
body[data-font-size="xlarge"] .content-body blockquote,
body[data-font-size="xlarge"] .content-body div {
    font-size: 1.39rem !important;  /* Desktop: ~22.2px (1.1 × 1.266) */
    line-height: 1.9 !important;
}

body[data-font-size="xlarge"] .content-body h2,
body[data-font-size="xlarge"] .content-body h3,
body[data-font-size="xlarge"] .content-body h4 {
    font-size: 2.03rem !important;  /* Desktop: ~32.5px (1.6 × 1.266) */
}

@media (max-width: 768px) {
    body[data-font-size="xlarge"] .content-body p,
    body[data-font-size="xlarge"] .content-body li,
    body[data-font-size="xlarge"] .content-body blockquote,
    body[data-font-size="xlarge"] .content-body div {
        font-size: 1.266rem;  /* Mobile: ~20.3px (1 × 1.266) - no !important to allow chapter overrides */
    }
    
    body[data-font-size="xlarge"] .content-body h2,
    body[data-font-size="xlarge"] .content-body h3,
    body[data-font-size="xlarge"] .content-body h4 {
        font-size: 1.646rem;  /* Mobile: ~26.3px (1.3 × 1.266) - no !important to allow chapter overrides */
    }
}

/* Huge font size - 1.424x from normal (1.125³) */
body[data-font-size="huge"] .content-body p,
body[data-font-size="huge"] .content-body li,
body[data-font-size="huge"] .content-body blockquote,
body[data-font-size="huge"] .content-body div {
    font-size: 1.57rem !important;  /* Desktop: ~25.1px (1.1 × 1.424) */
    line-height: 2 !important;
}

body[data-font-size="huge"] .content-body h2,
body[data-font-size="huge"] .content-body h3,
body[data-font-size="huge"] .content-body h4 {
    font-size: 2.28rem !important;  /* Desktop: ~36.5px (1.6 × 1.424) */
}

@media (max-width: 768px) {
    body[data-font-size="huge"] .content-body p,
    body[data-font-size="huge"] .content-body li,
    body[data-font-size="huge"] .content-body blockquote,
    body[data-font-size="huge"] .content-body div {
        font-size: 1.424rem;  /* Mobile: ~22.8px (1 × 1.424) - no !important to allow chapter overrides */
    }
    
    body[data-font-size="huge"] .content-body h2,
    body[data-font-size="huge"] .content-body h3,
    body[data-font-size="huge"] .content-body h4 {
        font-size: 1.851rem;  /* Mobile: ~29.6px (1.3 × 1.424) - no !important to allow chapter overrides */
    }
}

/* IMPORTANT: Exclude audio player and other UI elements from font size changes */
/* Reset audio player elements to their original sizes */
body[data-font-size] .audio-player-container,
body[data-font-size] .audio-player-container * {
    font-size: inherit;
}

body[data-font-size] .audio-time-compact {
    font-size: 12px !important;
}

body[data-font-size] .audio-player-title {
    font-size: 16px !important;
}

body[data-font-size] .audio-speed-btn,
body[data-font-size] .audio-speed-btn-compact {
    font-size: 12px !important;
}

body[data-font-size] .audio-current-time,
body[data-font-size] .audio-duration {
    font-size: 14px !important;
}

body[data-font-size] .toc-reading-time {
    font-size: 16px !important;
}

body[data-font-size] .section-reading-time {
    font-size: 16px !important;
}

/* Exclude chapter TOC from font size changes */
body[data-font-size] .chapter-toc,
body[data-font-size] .chapter-toc * {
    font-size: inherit;
}

body[data-font-size] .chapter-toc h3 {
    font-size: 1rem !important;
}

body[data-font-size] .chapter-toc-link {
    font-size: 0.95rem !important;
}

/* Exclude accessibility panel from font size changes */
body[data-font-size] .accessibility-panel * {
    font-size: inherit;
}

/* Dark Mode Adjustments */
body[data-theme="dark"] .accessibility-panel {
    background: var(--bg-dark, #2c3e50);
    color: var(--text-color, white);
}

body[data-theme="dark"] .accessibility-panel-header {
    background: var(--bg-color, #1a1a1a);
    color: var(--text-color, white);
    border-bottom-color: var(--border-color, #444);
}

body[data-theme="dark"] .accessibility-panel-header h3 {
    color: var(--text-color, white);
}

body[data-theme="dark"] .accessibility-close {
    color: var(--text-light, #ccc);
}

body[data-theme="dark"] .accessibility-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color, white);
}

body[data-theme="dark"] .accessibility-control {
    border-bottom-color: var(--border-color, #444);
}

body[data-theme="dark"] .accessibility-control-label {
    color: var(--text-color, white);
}

body[data-theme="dark"] .font-size-btn {
    background: var(--bg-secondary, #34495e);
    border-color: var(--border-color, #444);
    color: var(--text-color, white);
}

body[data-theme="dark"] .font-size-btn:hover {
    background: #3d5266;
}

body[data-theme="dark"] .font-size-display {
    color: var(--text-color, white);
}

body[data-theme="dark"] .toggle-switch {
    background: var(--bg-secondary, #555);
}

body[data-theme="dark"] .accessibility-toggle input:checked + .toggle-switch {
    background: var(--color-primary, #4a90e2);
}

body[data-theme="dark"] .font-type-select {
    background: var(--bg-color, #1a1a1a);
    border-color: var(--border-color, #444);
    color: var(--text-color, white);
}

body[data-theme="dark"] .font-type-select:hover,
body[data-theme="dark"] .font-type-select:focus {
    border-color: var(--color-primary, #4a90e2);
}

body[data-theme="dark"] .reset-accessibility-btn {
    background: var(--accent-color, #f44336);
}

body[data-theme="dark"] .reset-accessibility-btn:hover {
    background: #d32f2f;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .accessibility-panel {
        left: 10px;
        right: 10px;
        width: auto;
    }
}