/* Arabic & Urdu Font Declarations and Theme Colors */

/* ===== FONT FACE DECLARATIONS ===== */

/* Uthman Taha Naskh - For Quranic Arabic text */
@font-face {
    font-family: 'Uthman Taha Naskh';
    src: url('../fonts/custom/KFGQPC_Uthman_Taha_Naskh_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Uthmanic Script HAFS - For Quranic text with Tajweed */
@font-face {
    font-family: 'Uthmanic Script HAFS';
    src: url('../fonts/custom/KFGQPC_Uthmanic_Script_HAFS_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Noto Sans Arabic - For general Arabic text and hadith */
@font-face {
    font-family: 'Noto Sans Arabic';
    src: url('../fonts/custom/NotoSansArabic-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Nastaleeq - For Urdu text */
@font-face {
    font-family: 'Nastaleeq';
    src: url('../fonts/custom/nastaleeq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ===== ENHANCED THEME COLORS ===== */
:root {
    /* Original theme colors - Updated to Golden Theme */
    --primary-color: #B1901F;
    --secondary-color: #C9A835;
    --accent-color: #B1901F;
    --gold-color: #B1901F;

    /* Enhanced Islamic theme colors - Updated to Golden */
    --islamic-green: #B1901F;
    --islamic-green-light: #C9A835;
    --islamic-green-lighter: rgba(177, 144, 31, 0.15);
    --islamic-gold: #B1901F;
    --islamic-gold-light: #C9A835;
    --quran-blue: #1e3a8a;
    --hadith-brown: #92400e;
    --hadith-brown-light: #d97706;

    /* Text colors for Arabic/Urdu */
    --arabic-text-primary: #000000;
    --arabic-text-secondary: #374151;
    --urdu-text-primary: #1f2937;
    --urdu-text-secondary: #6b7280;

    /* Background colors */
    --arabic-bg-light: #f8fafc;
    --arabic-bg-card: #ffffff;
    --hadith-bg-light: #fef7ed;
    --hadith-bg-card: #fffbf0;
    --quran-bg-light: #eff6ff;
    --quran-bg-card: #f0f9ff;

    /* Border colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-arabic: #B1901F;
    --border-urdu: #8b5cf6;
}

/* ===== ARABIC TEXT STYLING ===== */

/* Quranic Arabic Text */
.arabic-text,
.quran-arabic,
.verse-arabic,
.quranic-text {
    font-family: 'Uthman Taha Naskh', 'Uthmanic Script HAFS', 'Noto Sans Arabic', serif;
    font-size: 1.8rem;
    line-height: 2.2;
    color: var(--arabic-text-primary);
    direction: rtl;
    text-align: right;
    font-weight: normal;
    letter-spacing: 0.02em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Large Quranic text (for main display) */
.quran-text-large {
    font-family: 'Uthmanic Script HAFS', 'Uthman Taha Naskh', serif;
    font-size: 2.2rem;
    line-height: 2.5;
    color: var(--quran-blue);
    margin: 1.5rem 0;
}

/* Hadith Arabic text */
.hadith-text-arabic,
.hadith-arabic {
    font-family: 'Noto Sans Arabic', 'Uthman Taha Naskh', serif;
    font-size: 1.6rem;
    line-height: 2;
    color: var(--hadith-brown);
    direction: rtl;
    text-align: right;
    background: var(--hadith-bg-light);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-right: 4px solid var(--hadith-brown-light);
    margin: 1rem 0;
}

/* Arabic titles and headings */
.arabic-title,
.chapter-title-arabic,
.sura-name-arabic {
    font-family: 'Uthman Taha Naskh', 'Noto Sans Arabic', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--islamic-green);
    direction: rtl;
    text-align: right;
    font-weight: 500;
    margin: 0.5rem 0;
}

/* ===== URDU TEXT STYLING ===== */

/* Urdu text (hadith topics, translations) */
.urdu-text,
.hadith-title,
.hadith-topic,
.chapter-topic {
    font-family: 'Nastaleeq', 'Noto Sans Arabic', serif;
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--urdu-text-primary);
    direction: rtl;
    text-align: right;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Large Urdu titles */
.urdu-title-large {
    font-family: 'Nastaleeq', serif;
    font-size: 1.8rem;
    line-height: 2;
    color: var(--islamic-green);
    font-weight: 500;
}

/* Urdu translation text */
.urdu-translation,
.hadith-translation-urdu p {
    font-family: 'Nastaleeq', serif;
    font-size: 1.3rem;
    line-height: 1.9;
    color: var(--urdu-text-secondary);
    direction: rtl;
    text-align: right;
    background: var(--arabic-bg-light);
    padding: 1.2rem;
    border-radius: var(--border-radius);
    border-right: 3px solid var(--border-urdu);
    margin: 1rem 0;
}

/* ===== HADITH SPECIFIC STYLING ===== */

/* Hadith chapter cards */
.hadith-chapter-card {
    background: linear-gradient(135deg, var(--hadith-bg-card), var(--arabic-bg-card));
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    cursor: pointer;
}

.hadith-chapter-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--islamic-green-light);
}

.hadith-chapter-card .hadith-chapter-title {
    font-family: 'Nastaleeq', serif;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--islamic-green);
    direction: rtl;
    text-align: right;
    margin: 0.5rem 0;
    font-weight: 500;
}

.hadith-chapter-card .hadith-chapter-number {
    background: var(--islamic-green);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Hadith content cards */
.hadith-content-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-light);
    position: relative;
}

.hadith-content-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--islamic-gold), var(--hadith-brown-light));
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* Hadith header styling */
.hadith-header {
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.hadith-header h3 {
    color: var(--islamic-green);
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.hadith-meta-info {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.hadith-number,
.chapter-info {
    background: var(--islamic-green-lighter);
    color: var(--islamic-green);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.hadith-grade {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.hadith-grade.sahih {
    background: var(--accent-color);
    color: var(--primary-color);
}

/* ===== BOOK CARDS STYLING ===== */
.hadith-book-card {
    background: linear-gradient(135deg, var(--white), var(--arabic-bg-light));
    border: 2px solid var(--border-light);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.hadith-book-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: var(--islamic-green);
}

.hadith-book-card .book-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--islamic-green);
    margin: 0.5rem 0;
}

.hadith-book-card .book-title-arabic {
    font-family: 'Uthman Taha Naskh', serif;
    font-size: 1.4rem;
    color: var(--hadith-brown);
    direction: rtl;
    margin: 0.75rem 0;
}

.hadith-book-card .book-title-urdu {
    font-family: 'Nastaleeq', serif;
    font-size: 1.3rem;
    color: var(--urdu-text-primary);
    direction: rtl;
    margin: 0.5rem 0;
}

.hadith-book-card .book-author {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

.hadith-book-card .book-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.hadith-book-card .stat-item {
    background: var(--islamic-green-lighter);
    color: var(--islamic-green);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

    .arabic-text,
    .quran-arabic {
        font-size: 1.5rem;
        line-height: 2;
    }

    .urdu-text,
    .hadith-title {
        font-size: 1.2rem;
        line-height: 1.7;
    }

    .quran-text-large {
        font-size: 1.8rem;
        line-height: 2.2;
    }

    .hadith-chapter-card,
    .hadith-content-card {
        padding: 1rem;
        margin: 0.75rem 0;
    }
}

@media (max-width: 480px) {

    .arabic-text,
    .quran-arabic {
        font-size: 1.3rem;
        line-height: 1.9;
    }

    .urdu-text,
    .hadith-title {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

/* ===== ACCESSIBILITY & RTL ENHANCEMENTS ===== */

/* Better focus states for RTL text */
.arabic-text:focus,
.urdu-text:focus {
    outline: 2px solid var(--islamic-green);
    outline-offset: 2px;
}

/* Improved selection colors for Arabic/Urdu text */
.arabic-text::selection,
.urdu-text::selection {
    background: var(--islamic-green-lighter);
    color: var(--islamic-green);
}

/* Loading states */
.hadith-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--islamic-green);
}

/* Error states */
.hadith-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
}

/* Success states */
.hadith-success {
    background: var(--arabic-bg-light);
    border: 1px solid var(--islamic-green-lighter);
    color: var(--islamic-green);
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
}