/* ===== دروس القرآن الكريم — التنسيق العام ===== */

:root {
    --deep-green: #1b4d3e;
    --mid-green: #2d6a4f;
    --soft-green: #d8f3dc;
    --gold: #c9a227;
    --gold-light: #f6efd9;
    --ink: #212529;
    --paper: #faf9f6;
}

/* App-like touch behaviour: no blue tap-highlight flash on mobile. */
* {
    -webkit-tap-highlight-color: transparent;
}

/* UI chrome should not be text-selectable on long-press (lesson content stays selectable). */
.navbar, .btn, .list-group-item, .card-header, .breadcrumb,
.lesson-nav-link, .prof-sidebar, .page-link {
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: "Noto Naskh Arabic", "Amiri", serif;
    background-color: var(--paper);
    color: var(--ink);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6 { font-family: "Amiri", "Noto Naskh Arabic", serif; }

/* --- Navbar --- */
.site-navbar {
    background-color: var(--deep-green);
}
.site-navbar .navbar-brand,
.site-navbar .nav-link {
    color: #fff;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--gold);
}
.site-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .4);
}
.site-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.search-input { min-width: 220px; }

.btn-accent {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #fff;
    font-weight: 600;
}
.btn-accent:hover { background-color: #b08d1f; border-color: #b08d1f; color: #fff; }

.btn-deep {
    background-color: var(--mid-green);
    border-color: var(--mid-green);
    color: #fff;
}
.btn-deep:hover { background-color: var(--deep-green); border-color: var(--deep-green); color: #fff; }

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, var(--deep-green) 0%, var(--mid-green) 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2rem;
}
.hero .bsmlh {
    font-family: "Amiri", serif;
    font-size: 1.6rem;
    color: var(--gold-light);
}

/* --- Cards --- */
.card { border: none; box-shadow: 0 2px 10px rgba(27, 77, 62, .08); border-radius: .8rem; }
.card-clickable { transition: box-shadow .15s ease, transform .15s ease; }
.card-clickable:hover {
    box-shadow: 0 4px 16px rgba(27, 77, 62, .18);
    transform: translateY(-2px);
}
.card-header { background-color: var(--soft-green); font-weight: 600; }
.course-card .card-title { color: var(--deep-green); }
.card a { text-decoration: none; }

.section-title {
    color: var(--deep-green);
    border-inline-start: 5px solid var(--gold);
    padding-inline-start: .75rem;
    margin-bottom: 1.5rem;
}

/* --- Lesson page --- */
.audio-player-wrap {
    background-color: var(--soft-green);
    border-radius: .8rem;
    padding: 1.25rem;
}
audio { width: 100%; }

.lesson-nav-link {
    color: var(--deep-green);
    text-decoration: none;
    font-weight: 600;
}
.lesson-nav-link:hover { color: var(--gold); }

.resource-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .6rem;
    padding: .75rem 1rem;
}

.comment-box {
    background: #fff;
    border-inline-start: 4px solid var(--soft-green);
    border-radius: .5rem;
    padding: .9rem 1.1rem;
}
.comment-box.professor-reply {
    border-inline-start-color: var(--gold);
    background: var(--gold-light);
}

.question-box {
    background: #fff;
    border-radius: .6rem;
    padding: 1rem 1.2rem;
    border: 1px solid #e9ecef;
}
.answer-box {
    background: var(--soft-green);
    border-radius: .5rem;
    padding: .8rem 1rem;
    margin-top: .6rem;
}

/* --- Progress --- */
.progress { height: .5rem; background-color: #e9ecef; }
.progress-bar { background-color: var(--mid-green); }

/* --- Footer --- */
.site-footer {
    background-color: var(--deep-green);
    color: #fff;
}

/* --- Professor dashboard --- */
.prof-sidebar .list-group-item {
    border: none;
    border-radius: .5rem !important;
    margin-bottom: .25rem;
    color: var(--ink);
}
.prof-sidebar .list-group-item.active {
    background-color: var(--mid-green);
    border-color: var(--mid-green);
    color: #fff;
}
.stat-card { text-align: center; }
.stat-card .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--deep-green);
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .hero { padding: 2rem 1.25rem; }
    .search-input { min-width: 100%; }
}