/*
Theme Name:        Fasla
Theme URI:         https://faslapub.com/
Author:            Fasla Publishing House
Author URI:        https://faslapub.com/
Description:       ثيم ووردبريس مخصص لدار فاصلة للنشر، مبني من الصفر (وليس Child Theme)، يدعم ووكومرس (WooCommerce) بالكامل لعرض وبيع الكتب، ومصمم بهوية بصرية عربية RTL أولاً.
Version:           1.0.0
Requires at least: 6.0
Tested up to:       6.6
Requires PHP:       7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       fasla
Tags:              custom-background, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, translation-ready, e-commerce, woocommerce
*/

/* =========================================================
   جدول المحتويات (Table of Contents)
   1.0  المتغيرات العامة (CSS Variables)
   2.0  إعادة الضبط الأساسية (Reset)
   3.0  العناصر الأساسية (Typography & Base)
   4.0  الحاويات والشبكة (Layout / Container / Grid)
   5.0  الهيدر (Header)
   6.0  القوائم (Navigation Menus)
   7.0  المحتوى الرئيسي (Content / Posts / Pages)
   8.0  الفوتر (Footer)
   9.0  النماذج والأزرار (Forms & Buttons)
   10.0 عناصر مساعدة (Utilities / Accessibility)
   11.0 ووكومرس (WooCommerce)
   12.0 الاستجابة (Responsive / Media Queries)
   ========================================================= */

/* =========================================================
   1.0 المتغيرات العامة
   ملاحظة: القيم دي مبدئية بهوية "دار نشر" (كريمي + عنابي + ذهبي).
   ممكن تتظبط بسهولة هنا لو حبيت تقرّبها أكتر من ألوان الموقع الأصلي.
   ========================================================= */
:root{
    --fasla-color-bg:            #FAF6EF; /* خلفية عامة كريمي فاتح */
    --fasla-color-bg-alt:        #F1E9DA; /* خلفية بديلة (سكاشن) */
    --fasla-color-surface:       #FFFFFF; /* خلفية الكروت */
    --fasla-color-text:          #2B211C; /* لون النص الأساسي */
    --fasla-color-text-muted:    #6B5F55; /* نص ثانوي */
    --fasla-color-primary:       #7A1F2B; /* عنابي - اللون الأساسي للهوية */
    --fasla-color-primary-dark:  #5C1620;
    --fasla-color-secondary:     #C9A227; /* ذهبي - للتمييز والعروض */
    --fasla-color-border:        #E7DCC9;
    --fasla-color-success:       #3E7A4C;
    --fasla-color-danger:        #B3261E;

    --fasla-font-heading: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
    --fasla-font-body:    "Tajawal", "Segoe UI", Tahoma, sans-serif;

    --fasla-radius-sm: 6px;
    --fasla-radius-md: 12px;
    --fasla-radius-lg: 20px;

    --fasla-shadow-sm: 0 1px 3px rgba(43, 33, 28, 0.08);
    --fasla-shadow-md: 0 6px 20px rgba(43, 33, 28, 0.10);

    --fasla-container-width: 1240px;
    --fasla-gap: 24px;

    --fasla-transition: all 0.2s ease-in-out;
}

/* =========================================================
   2.0 إعادة الضبط الأساسية
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
    margin: 0;
    background-color: var(--fasla-color-bg);
    color: var(--fasla-color-text);
    font-family: var(--fasla-font-body);
    font-size: 16px;
    line-height: 1.75;
    direction: rtl;
    text-align: right;
}

img{ max-width: 100%; height: auto; display: block; }

a{
    color: var(--fasla-color-primary);
    text-decoration: none;
    transition: var(--fasla-transition);
}
a:hover, a:focus{ color: var(--fasla-color-primary-dark); }

ul, ol{ margin: 0; padding: 0; list-style: none; }

figure{ margin: 0; }

table{ width: 100%; border-collapse: collapse; }

/* =========================================================
   3.0 العناصر الأساسية / التايبوغرافي
   ========================================================= */
h1, h2, h3, h4, h5, h6{
    font-family: var(--fasla-font-heading);
    font-weight: 700;
    color: var(--fasla-color-text);
    line-height: 1.35;
    margin: 0 0 .6em;
}
h1{ font-size: clamp(28px, 4vw, 42px); }
h2{ font-size: clamp(22px, 3vw, 32px); }
h3{ font-size: clamp(18px, 2.4vw, 24px); }
h4{ font-size: 18px; }

p{ margin: 0 0 1.2em; }

/* =========================================================
   4.0 الحاويات والشبكة
   ========================================================= */
.fasla-container{
    width: 100%;
    max-width: var(--fasla-container-width);
    margin-inline: auto;
    padding-inline: 20px;
}

.fasla-grid{
    display: grid;
    gap: var(--fasla-gap);
}

.fasla-section{ padding-block: 56px; }
.fasla-section--alt{ background-color: var(--fasla-color-bg-alt); }

.screen-reader-text{
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
.screen-reader-text:focus{
    position: fixed; top: 10px; inset-inline-end: 10px;
    width: auto; height: auto;
    padding: 10px 16px;
    background: var(--fasla-color-primary);
    color: #fff;
    z-index: 100000;
    border-radius: var(--fasla-radius-sm);
}

/* =========================================================
   5.0 الهيدر
   ========================================================= */
.site-header{
    background: var(--fasla-color-surface);
    border-bottom: 1px solid var(--fasla-color-border);
    position: sticky;
    top: 0;
    z-index: 999;
}
.site-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 14px;
}
.site-branding{ display: flex; align-items: center; gap: 12px; }
.site-branding .custom-logo{ max-height: 56px; width: auto; }
.site-title{ font-size: 22px; margin: 0; }
.site-title a{ color: var(--fasla-color-text); }
.site-description{ font-size: 13px; color: var(--fasla-color-text-muted); margin: 0; }

.site-header__actions{ display: flex; align-items: center; gap: 18px; }
.header-cart-icon{ position: relative; }
.header-cart-count{
    position: absolute;
    top: -8px; inset-inline-start: -10px;
    background: var(--fasla-color-primary);
    color: #fff;
    font-size: 11px;
    min-width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   6.0 القوائم
   ========================================================= */
.main-navigation ul{
    display: flex;
    align-items: center;
    gap: 6px;
}
.main-navigation a{
    display: inline-block;
    padding: 10px 14px;
    color: var(--fasla-color-text);
    font-weight: 600;
    border-radius: var(--fasla-radius-sm);
}
.main-navigation a:hover{
    background: var(--fasla-color-bg-alt);
    color: var(--fasla-color-primary);
}
.main-navigation .current-menu-item > a{ color: var(--fasla-color-primary); }

.menu-toggle{
    display: none;
    background: transparent;
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
}

/* =========================================================
   7.0 المحتوى الرئيسي
   ========================================================= */
.site-main{ padding-block: 40px; }

.entry-header{ margin-bottom: 24px; }
.entry-title{ margin-bottom: .3em; }
.entry-meta{ color: var(--fasla-color-text-muted); font-size: 14px; }
.entry-content{ font-size: 17px; }
.entry-content img{ border-radius: var(--fasla-radius-md); }

.fasla-card{
    background: var(--fasla-color-surface);
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-md);
    box-shadow: var(--fasla-shadow-sm);
    overflow: hidden;
    transition: var(--fasla-transition);
}
.fasla-card:hover{ box-shadow: var(--fasla-shadow-md); transform: translateY(-2px); }

.pagination, .nav-links{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.pagination a, .pagination span,
.nav-links a, .nav-links span{
    padding: 8px 14px;
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-sm);
}
.pagination .current, .nav-links .current{
    background: var(--fasla-color-primary);
    color: #fff;
    border-color: var(--fasla-color-primary);
}

/* الشريط الجانبي */
.widget-area .widget{
    background: var(--fasla-color-surface);
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-md);
    padding: 20px;
    margin-bottom: 24px;
}
.widget-title{ font-size: 17px; margin-bottom: 14px; }

/* =========================================================
   8.0 الفوتر
   ========================================================= */
.site-footer{
    background: var(--fasla-color-primary);
    color: #f5ece2;
    margin-top: 64px;
}
.site-footer a{ color: #f5ece2; }
.site-footer a:hover{ color: var(--fasla-color-secondary); }
.footer-widgets{
    padding-block: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--fasla-gap);
}
.site-info{
    border-top: 1px solid rgba(255,255,255,.15);
    padding-block: 18px;
    text-align: center;
    font-size: 13px;
}

/* =========================================================
   9.0 النماذج والأزرار
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea{
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-sm);
    background: var(--fasla-color-surface);
    color: var(--fasla-color-text);
    font-family: var(--fasla-font-body);
}
input:focus, select:focus, textarea:focus{
    outline: none;
    border-color: var(--fasla-color-primary);
}

.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit{
    display: inline-block;
    background: var(--fasla-color-primary);
    color: #fff !important;
    border: none;
    padding: 12px 24px;
    border-radius: var(--fasla-radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--fasla-transition);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
    background: var(--fasla-color-primary-dark);
}

/* =========================================================
   10.0 عناصر مساعدة
   ========================================================= */
.text-muted{ color: var(--fasla-color-text-muted); }
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.mb-0{ margin-bottom: 0; }

/* =========================================================
   11.0 ووكومرس (سيتم استكمال التفاصيل في ملفات لاحقة)
   ========================================================= */

/* الهيدر الإضافي الخاص بصفحات المتجر (header-shop.php) */
.shop-header{
    background: var(--fasla-color-primary);
    color: #fff;
    padding-block: 28px;
}
.shop-header__inner{ text-align: center; }
.shop-breadcrumb{
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    opacity: .85;
}
.shop-breadcrumb a{ color: #fff; text-decoration: underline; }
.shop-breadcrumb a:hover{ color: var(--fasla-color-secondary); }
.shop-header__title{
    color: #fff;
    margin-bottom: 6px;
}
.shop-header__desc{
    color: #f1e6d8;
    max-width: 640px;
    margin-inline: auto;
    font-size: 15px;
}
.shop-header__desc p{ margin-bottom: 0; }
.shop-header__count{
    margin: 10px 0 0;
    display: inline-block;
    background: rgba(255,255,255,.12);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 13px;
}
.shop-navigation{
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.shop-navigation ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.shop-navigation a{
    display: inline-block;
    padding: 6px 14px;
    color: #f5ece2;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
}
.shop-navigation a:hover,
.shop-navigation .current-cat > a{
    background: var(--fasla-color-secondary);
    border-color: var(--fasla-color-secondary);
    color: #2b211c;
}

.woocommerce ul.products{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--fasla-gap);
    list-style: none;
}
.woocommerce ul.products li.product{
    background: var(--fasla-color-surface);
    border: 1px solid var(--fasla-color-border);
    border-radius: var(--fasla-radius-md);
    padding: 14px;
    text-align: center;
}
.woocommerce ul.products li.product img{
    border-radius: var(--fasla-radius-sm);
    margin-bottom: 12px;
}
.woocommerce span.onsale{
    background: var(--fasla-color-secondary);
    color: #2b211c;
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}
.woocommerce ul.products li.product .price{
    color: var(--fasla-color-primary);
    font-weight: 700;
}
.woocommerce ul.products li.product .price del{
    color: var(--fasla-color-text-muted);
    opacity: .7;
    margin-inline-end: 6px;
}

/* =========================================================
   12.0 الاستجابة
   ========================================================= */
@media (max-width: 1024px){
    .woocommerce ul.products{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 782px){
    .menu-toggle{ display: inline-block; }
    .main-navigation ul{
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        background: var(--fasla-color-surface);
        border-top: 1px solid var(--fasla-color-border);
        padding: 10px;
    }
    .main-navigation.toggled ul{ display: flex; }
    .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); }
    .footer-widgets{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
    /* هتفضل عمودين حتى على أصغر الشاشات (حسب المطلوب: 4 ديسكتوب / 2 موبايل) */
    .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fasla-product-card__body{ padding: 10px; }
}