/* ============================================================================
   PAGE DISPLAY COMPONENT
   ============================================================================
   
   Text rendering and display styles for document page content.
   Handles typography, RTL layout, and text formatting for Arabic documents.
   
   Features:
   - RTL (right-to-left) text direction
   - Justified text alignment
   - Proper line height for Arabic script
   - Large, readable font size
   - Color scheme matching design system
   
   Note: XML tag rendering (headers, poetry, etc.) is handled by xml-tags.css
   Note: Match highlighting is handled by match-highlighting.css
   
   ============================================================================ */

/* ============================================================================
   PAGE DISPLAY CONTAINER
   ============================================================================ */

.page-display {
    direction: rtl;
    text-align: start;
}


/* ============================================================================
   PAGE TEXT CONTENT
   ============================================================================ */

.page-text {
    font-size: 1.25rem;
    line-height: var(--line-height-arabic);  /* 2.2 - optimal for Arabic */
    direction: rtl;
    text-align: justify;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
}


/* ============================================================================
   PLAIN TEXT (No Special Formatting)
   ============================================================================ */

.plain-text {
    /* No additional styling for plain text */
    /* Inherits from .page-text */
}


/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .page-text {
        font-size: 1.125rem;
        line-height: 2.0;
    }
}

@media (max-width: 480px) {
    .page-text {
        font-size: 1rem;
        line-height: 1.9;
        text-align: start;  /* Disable justify on very small screens */
    }
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .page-text {
        font-size: 12pt;
        line-height: 1.8;
        color: #000;
    }
}