/* =====================================================
   BASE — متغيرات + Reset + Typography
   DABYHA Theme v2.1 — FIXED
   ===================================================== */

/*
  FIX #1: تمت إزالة @import لـ Google Fonts من هنا.
  الخطوط تُحمَّل الآن عبر functions.php → wp_enqueue_style
  مع preconnect في wp_head — أسرع بـ 200–400ms.
*/

/* =====================================================
   CSS Variables — النظام الموحد للعلامة التجارية
   ===================================================== */
:root {
  /* ——— الألوان الأساسية ——— */
  /* FIX #2: --red كان hsl(358,60%,30%) = #8b1a1a
     البراند يتطلب #770404 — تم التصحيح */
  --red:              #770404;   /* Deep Maroon — اللون الأساسي */
  --red-hover:        #5F0303;   /* Primary Hover */
  --red-light:        #F5E8E7;   /* Badge Background خفيف */
  --red-border:       #D8CCC5;   /* Subtle Border */
  --red-accent:       #F80503;   /* Vibrant Red — للـ badges والـ hover فقط */

  /* أسماء بديلة مطابقة لملف البراند — لتوحيد الكود */
  --color-primary:       var(--red);
  --color-primary-hover: var(--red-hover);
  --color-primary-light: var(--red-light);
  --color-accent:        var(--red-accent);

  /* ——— ألوان مساعدة ——— */
  --gold:       #C7A56A;         /* Premium Gold */
  --gold-bg:    #F5EDD8;
  --green:      #6B8E5F;         /* Success / Trust / حلال */
  --green-bg:   hsl(145, 30%, 95%);

  /* ——— الخلفيات ——— */
  --white:         #ffffff;
  --bg:            #F7F3EF;      /* Warm Ivory — الخلفية الرئيسية */
  --bg-2:          #EFE6DE;      /* Soft Beige */
  --bg-card:       #ffffff;      /* Card White */
  --bg-dark:       #1E0E06;      /* Dark footer background */

  /* أسماء بديلة مطابقة لملف البراند */
  --color-bg-main: var(--bg);
  --color-bg-soft: var(--bg-2);
  --color-bg-card: var(--bg-card);

  /* ——— النصوص ——— */
  --text:          #343433;      /* Charcoal Gray */
  --text-2:        #5B5A58;      /* Secondary Text */
  --text-3:        #9A9A97;      /* Light Text */

  /* أسماء بديلة */
  --color-text-primary:   var(--text);
  --color-text-secondary: var(--text-2);
  --color-text-light:     var(--text-3);

  /* ——— الحدود ——— */
  --border:        #D8CCC5;      /* Subtle Border */
  --border-2:      #c8bdb6;

  --color-border:  var(--border);
  --color-divider: rgba(52, 52, 51, 0.1);

  /* ——— الألوان الوظيفية ——— */
  --color-success: #6B8E5F;
  --color-warning: #D4A574;
  --color-error:   #C24A3E;
  --color-gold:    #C7A56A;
  --color-silver:  #A8A8A5;

  /* ——— الظلال ——— */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow:     0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.14);
  --shadow-red: 0 6px 24px rgba(119, 4, 4, .28);

  /* ——— التقريب ——— */
  --r-sm:      8px;
  --r:         12px;
  --r-lg:      16px;
  --r-xl:      24px;
  --r-full:    9999px;

  /* أسماء بديلة مطابقة للبراند */
  --radius-btn:   12px;
  --radius-card:  18px;
  --radius-badge: 9999px;

  /* ——— الخط ——— */
  /* FIX #3: الخط الأصلي كان Cairo — البراند يفرض Noto Sans Arabic فقط */
  --font:    "Noto Sans Arabic", sans-serif;
  --font-ar: "Noto Sans Arabic", sans-serif;

  /* ——— الحاوية ——— */
  --container:    1280px;
  --container-px: 32px;
  --gap:          1.5rem;
  --section-py:   80px;

  /* ——— الهيدر ——— */
  --header-h: 64px;
}

/* =====================================================
   Reset
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);   /* FIX #4: كان --white، الآن Warm Ivory كما يحدد البراند */
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--red); }

ul, ol { list-style: none; }

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font);
  font-size: 14px;
}

/* =====================================================
   Typography — مطابق لـ typography scale في ملف البراند
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  font-family: var(--font);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem);   font-weight: 800; }
h2 { font-size: clamp(1.4rem,  3vw, 2rem);      font-weight: 700; }
h3 { font-size: clamp(1.1rem,  2vw, 1.4rem);    font-weight: 700; }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* =====================================================
   Container
   ===================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

@media (max-width: 768px) {
  .container { padding-inline: 1rem; }
  :root { --container-px: 16px; }
}

/* =====================================================
   Utility Classes
   ===================================================== */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }

.gap-1  { gap: .25rem; }
.gap-2  { gap: .5rem;  }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem;   }
.gap-5  { gap: 1.25rem;}
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem;   }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem;   }

.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11px; }
.text-lg     { font-size: 17px; }
.text-xl     { font-size: 20px; }

.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }

.text-red    { color: var(--red);   }
.text-muted  { color: var(--text-2);}
.text-white  { color: var(--white); }

.bg-white    { background: var(--white); }
.bg-light    { background: var(--bg); }
.bg-red      { background: var(--red); color: var(--white); }

.rounded      { border-radius: var(--r); }
.rounded-sm   { border-radius: var(--r-sm); }
.rounded-lg   { border-radius: var(--r-lg); }
.rounded-full { border-radius: var(--r-full); }

.overflow-hidden { overflow: hidden; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.fixed      { position: fixed; }
.sticky     { position: sticky; }
.inset-0    { inset: 0; }

.w-full     { width: 100%; }
.h-full     { height: 100%; }

.hidden     { display: none !important; }

.shadow     { box-shadow: var(--shadow); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-lg  { box-shadow: var(--shadow-lg); }

/* =====================================================
   Animations
   ===================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.anim-fade-up  { animation: fadeUp .6s ease both; }
.anim-slide-in { animation: slideIn .3s cubic-bezier(.32,.72,0,1) forwards; }

/* =====================================================
   Prose — للمقالات والصفحات الداخلية
   ===================================================== */
.prose         { max-width: 72ch; }
.prose h2,
.prose h3      { margin: 1.75rem 0 .75rem; }
.prose p       { margin-bottom: 1.25rem; color: var(--text-2); line-height: 1.85; }
.prose a       { color: var(--red); text-decoration: underline; }
.prose ul      { list-style: disc; padding-right: 1.5rem; margin-bottom: 1rem; }
.prose li      { margin-bottom: .4rem; color: var(--text-2); }
.prose-full    { max-width: none; }

/* =====================================================
   Responsive Helpers
   ===================================================== */
@media (max-width: 1024px) {
  .hide-lg { display: none !important; }
}
@media (max-width: 768px) {
  .hide-md { display: none !important; }
  .show-md { display: block !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hide-sm { display: none !important; }
  .grid-2  { grid-template-columns: 1fr; }
}