/*
Theme Name: BakryX
Theme URI: https://mohamedbakry.com
Author: Mohammad Bakry
Author URI: https://mohamedbakry.com
Description: قالب العرّاب محمد بكري لتعليم اللغة العربية — تصميم فخم وعصري داكن بلمسات كحلية ولهبية ذهبية، متجاوب بالكامل ومُعد ومخصص لمنصات التعليم التفاعلي، الدورات المتخصصة، والمراحل الدراسية.
Version: 1.0.1
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bakryx
Tags: education, rtl-language-support, custom-menu, featured-images, custom-logo, translation-ready, dark-theme
*/

/* ==========================================================================
   التنسيقات المخصصة لقالب العرّاب (تم تنظيف التكرارات وضبط التوافق)
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
}

/* الألواح والخلفيات التفاعلية */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(247, 83, 39, 0.15);
}

.dot-pattern {
    background-image: radial-gradient(circle at 50% 0%, rgba(247, 83, 39, 0.18) 1px, transparent 1px);
    background-size: 40px 40px;
}

.dot-pattern-dark {
    background-image: radial-gradient(circle at 50% 0%, rgba(247, 83, 39, 0.12) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* العلامات المائية */
.watermark {
    position: absolute;
    font-family: 'Zain-VF', 'Zain', sans-serif;
    font-size: 13rem;
    font-weight: 700;
    color: rgba(40, 41, 42, 0.04);
    z-index: 0;
    top: -60px;
    right: 0;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.watermark-dark {
    position: absolute;
    font-family: 'Zain-VF', 'Zain', sans-serif;
    font-size: 15rem;
    font-weight: 700;
    color: rgba(247, 83, 39, 0.04);
    z-index: 0;
    bottom: -80px;
    left: 0;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

/* التوهجات والزخارف */
.gold-glow {
    box-shadow: 0 0 24px rgba(247, 83, 39, 0.35);
}

.gold-soft-glow {
    box-shadow: 0 0 18px rgba(247, 83, 39, 0.2);
}

.underline-ornament {
    position: relative;
}

.underline-ornament::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: 0;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to left, #f75327, rgba(247, 83, 39, 0.15));
}

.underline-ornament.center::after {
    right: 50%;
    transform: translateX(50%);
}

/* الحركات والتحريك */
@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float-soft {
    animation: float-soft 5s ease-in-out infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    animation: marquee 30s linear infinite;
}

.reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* شريط التنقل */
#mainnav {
    transition: opacity .4s ease;
}

#mainnav.nav-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    animation: nav-drop .45s ease both;
}

@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-120%); }
    to { opacity: 1; transform: translateY(0); }
}

/* الأسئلة الشائعة */
.faq-item {
    transition: border-color .3s ease, box-shadow .3s ease;
}

.faq-item.open {
    border-color: rgba(247, 83, 39, .55);
    box-shadow: 0 12px 30px rgba(201, 63, 22, .18), 0 0 0 3px rgba(247, 83, 39, .08);
}

.faq-body {
    transition: max-height .4s ease;
}

.faq-hidden {
    display: none;
}

details.faq {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

details.faq summary {
    cursor: pointer;
    list-style: none;
}

details.faq summary::-webkit-details-marker {
    display: none;
}

details.faq summary .chev {
    transition: transform .3s ease;
}

details.faq[open] summary .chev {
    transform: rotate(90deg);
}

details.faq[open] summary {
    color: #f75327;
}

/* البطاقات والشرائح */
.chip, .grade-chip, .filter-chip {
    transition: all .25s ease;
}

.chip.active, .grade-chip.active, .grade-chip:hover, .filter-chip.active {
    background: #f75327;
    color: #1c1d1e;
    border-color: #f75327;
}

.filter-chip.active:hover {
    background: #ff7a52;
}

.post-card, .skill-card, .module-card, .plan-card, .grade-card, .course-card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.post-card:hover, .plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(28, 29, 30, .35);
}

.skill-card:hover, .module-card:hover, .grade-card:hover, .course-card:hover {
    transform: translateY(-5px);
    border-color: rgba(247, 83, 39, 0.45);
}

.related-card {
    transition: transform .3s ease, border-color .3s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(247, 83, 39, 0.5);
}

/* نص المقالات والمحتوى الأكاديمي */
.article-body {
    color: #d1d5db;
    font-size: 1.0625rem;
    line-height: 2.05;
}

.article-body > p {
    margin-bottom: 1.35rem;
}

.article-body > p.article-lead {
    color: #e5e7eb;
    font-size: 1.2rem;
    line-height: 1.95;
    border-right: 3px solid #f75327;
    padding-right: 1.1rem;
    margin-bottom: 1.9rem;
}

.article-body h2 {
    font-family: 'Zain-VF', 'Zain', sans-serif !important;
    color: #f5f6f7;
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 2.8rem 0 1.1rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(247, 83, 39, .22);
}

.article-body h3 {
    font-family: 'Zain-VF', 'Zain', sans-serif !important;
    color: #f5f6f7;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.8;
    margin: 1.8rem 0 .7rem;
    padding-right: .8rem;
    border-right: 3px solid rgba(247, 83, 39, .65);
}

.article-body blockquote {
    font-family: 'Zain-VF', 'Zain', sans-serif;
    color: #f5f6f7;
    font-size: 1.35rem;
    line-height: 1.9;
    margin: 2.4rem 0 0;
    padding: 1.3rem 1.5rem;
    background: rgba(247, 83, 39, .06);
    border-right: 4px solid #f75327;
    border-radius: .75rem;
}

/* النماذج وحقول الإدخال */
.field {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(247, 83, 39, 0.2);
    border-radius: 1rem;
    padding: 0.85rem 1.1rem;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.field:focus {
    border-color: #f75327;
    background: rgba(247, 83, 39, 0.06);
    box-shadow: 0 0 0 4px rgba(247, 83, 39, 0.08);
}

.input-error {
    border-color: #ef4444 !important;
}

/* الخطوط الزمنية والخطوات */
.step-item {
    position: relative;
    padding-right: 58px;
    padding-bottom: 26px;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 23px;
    top: 48px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(247, 83, 39, .5), rgba(247, 83, 39, .05));
}

.step-dot {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: rgba(247, 83, 39, .12);
    border: 1px solid rgba(247, 83, 39, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f75327;
    font-weight: 700;
    font-size: .85rem;
}