/*
Theme Name: Jazly Menu
Author: Chef Mostafa Saper
Description: قالب مخصص لعرض قائمة طعام المطعم ومنتجات المحمصة بتصميم كلاسيكي نظيف.
Version: 1.0
Text Domain: jazly-menu
*/
/* =========================================================
   تطبيق خطوط جازلي الفاخرة (Jazly Editorial Fonts)
   ========================================================= */

/* 1. استيراد الخطوط الاحترافية من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..800&family=Tajawal:wght@400;500;700;800&display=swap');

/* 2. خط النصوص العامة والجسم الرئيسي للموقع (Body Text) */
html, body, p, span, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif !important;
}

/* 3. خط العناوين الفاخرة (Serif Headlines) - مثل تصميم هوستينجر تماماً */
h1, h2, h3, .font-display {
    font-family: 'Playfair Display', 'Amiri', serif !important;
}

/* 4. خط القوائم والأزرار والعناوين الفرعية الصغيرة */
nav a, 
.uppercase, 
.tracking-widest, 
.tracking-wider, 
.jazly-touch-btn {
    font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif !important;
}

/* 5. تأثير النص الكلاسيكي المائل (Italic Accent) */
em, i, .font-italic, .italic {
    font-family: 'Playfair Display', 'Amiri', serif !important;
    font-style: italic !important;
}
/* Remove header line/border on scroll */
#jazly-header {
    border-bottom: none !important;
    box-shadow: none !important;
}
/* تصغير اللوجو في الموبايل لمنع التداخل */
.custom-logo, 
header img, 
#jazly-header img {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
}
/* =========================================================
   تأثيرات اللمس والتفاعل الفاخرة (Jazly Mobile Touch UX)
   ========================================================= */

/* 1. إلغاء المربع الأزرق/الرمادي الافتراضي اللي بيظهر في الموبايل عند الضغط */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. كلاس التفاعل لكروت الأصناف والأقسام */
.jazly-touch-card {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.2s ease, 
                box-shadow 0.2s ease !important;
    will-change: transform;
}

/* التفاعل لحظة الضغط بالأصبع (Touch Down) */
.jazly-touch-card:active {
    transform: scale(0.97) !important; /* انكماش خفيف جداً */
    border-color: rgba(212, 175, 55, 0.8) !important; /* توهج الحواف باللون الذهبي */
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important; /* إضاءة ذهبية خفيفة حول الكارت */
}

/* 3. تأثير الضغط على أزرار التصنيفات واللغة */
.jazly-touch-btn {
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.jazly-touch-btn:active {
    transform: scale(0.92) !important;
    opacity: 0.9;
}
/* تصغير زرار اللغة الدائري العائم في الموبايل */
.lang-switch-btn, 
a[href*="lang="] {
    width: 46px !important;
    height: 46px !important;
    font-size: 12px !important;
}
/* =========================================================
   معالجة كسر وتفكك الحروف العربية (Arabic Font Fix)
   ========================================================= */

/* 1. إلغاء تباعد الحروف التلقائي في النصوص العربية لربط الكلمات */
body, h1, h2, h3, h4, h5, h6, p, a, span, div {
    letter-spacing: normal !important;
}

/* 2. تفعيل الاتصال والتناغم الطبيعي للحروف العربية (Ligatures & Kerning) */
* {
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 3. تطبيق التباعد على النصوص الإنجليزية فقط دون التأثير على العربية */
:lang(en) .uppercase, 
:lang(en) .tracking-widest, 
:lang(en) .tracking-wider {
    letter-spacing: 0.15em !important;
}