/*
Theme Name: Satwa Child (سطوة للتسويق الالكتروني الحديث)
Theme URI: https://satwahq.com
Description: قالب ابن (Child Theme) مبني فوق قالب Kadence لصالح وكالة سطوة للتسويق الالكتروني الحديث. يضبط الهوية البصرية (الألوان الكحلية والذهبية، خط Cairo Variable الحديث، الشعار الذهبي الرسمي) وزر واتساب/اتصال عائم مخصص.
Author: Satwa Digital
Author URI: https://satwahq.com
Template: kadence
Version: 1.7.0
Text Domain: satwa-child
Domain Path: /languages
Requires PHP: 8.0
*/

/* ==========================================================================
   1) متغيرات الهوية البصرية (Design Tokens)
   عدّل القيم هنا فقط لتغيير الهوية الكاملة للموقع من مكان واحد.
   ========================================================================== */
:root{
  --satwa-navy-950:#060f1f;
  --satwa-navy-900:#0b1b33;
  --satwa-navy-800:#132a4d;
  --satwa-navy-700:#1b3660;
  --satwa-gold-500:#d4a62a;
  --satwa-gold-400:#e3bc4c;
  --satwa-gold-300:#f0cf72;
  --satwa-ivory:#f5f3ec;
  --satwa-slate-300:#a9b4c9;
  --satwa-slate-400:#8b96ad;
  --satwa-line:rgba(212,166,42,0.18);
  --satwa-radius-lg:22px;
  --satwa-radius-md:14px;
  --satwa-font: 'Cairo', sans-serif;
}

/* ==========================================================================
   2) الخط الأساسي — Cairo على كامل الموقع (يُحمَّل عبر functions.php)
   ========================================================================== */
body,
.entry-content,
.site-title,
h1, h2, h3, h4, h5, h6,
button, input, textarea, select {
  font-family: var(--satwa-font) !important;
}

/* ==========================================================================
   3) الخلفية العامة والألوان الأساسية — تظليل فوق ألوان Kadence الافتراضية
   ========================================================================== */
body{
  background-color: var(--satwa-navy-950);
  color: var(--satwa-ivory);
}

a{ color: var(--satwa-gold-400); }
a:hover{ color: var(--satwa-gold-300); }

.site-header,
.site-footer{
  background-color: var(--satwa-navy-900) !important;
  border-color: var(--satwa-line) !important;
}

/* ==========================================================================
   4) الأزرار — تطبيق نمط الأزرار الذهبية على أزرار Kadence
   ========================================================================== */
.kt-btn, .kb-button, .wp-block-button__link, button, input[type="submit"]{
  font-family: var(--satwa-font);
  font-weight: 800 !important;
  border-radius: 999px !important;
}

.satwa-btn-solid,
.kt-btn.satwa-btn-solid{
  background: linear-gradient(135deg, var(--satwa-gold-300), var(--satwa-gold-500)) !important;
  color: #1a1204 !important;
  border: none !important;
  box-shadow: 0 10px 24px -8px rgba(212,166,42,0.6);
}

.satwa-btn-outline,
.kt-btn.satwa-btn-outline{
  background: transparent !important;
  border: 1.5px solid var(--satwa-gold-500) !important;
  color: var(--satwa-gold-300) !important;
}

/* ==========================================================================
   5) البطاقات (خدمات / مدونة) — لو استُخدمت Kadence Info Box / Row Layout
   ========================================================================== */
.satwa-card,
.kb-infobox-id{
  background: linear-gradient(160deg, var(--satwa-navy-800), var(--satwa-navy-900)) !important;
  border: 1px solid var(--satwa-line) !important;
  border-radius: var(--satwa-radius-lg) !important;
}

/* ==========================================================================
   6) زر واتساب/الاتصال العائم — مضاف عبر functions.php في wp_footer
   جهة اليسار (RTL) بدل يمين — مطابق لتفضيل العميل
   ========================================================================== */
.satwa-fab-stack{
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}
.satwa-fab{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5);
  transition: transform .2s;
  text-decoration: none;
}
.satwa-fab:hover{ transform: scale(1.06); }
.satwa-fab-whatsapp{
  background: linear-gradient(135deg, var(--satwa-gold-300), var(--satwa-gold-500));
  color: #1a1204;
}
.satwa-fab-call{
  background: var(--satwa-navy-800);
  border: 1px solid var(--satwa-gold-500);
  color: var(--satwa-gold-300);
}
.satwa-fab svg{ width: 26px; height: 26px; }

@media (max-width: 600px){
  .satwa-fab-stack{ bottom: 18px; left: 18px; }
  .satwa-fab{ width: 50px; height: 50px; }
}

/* ==========================================================================
   7) خلفية الهيرو — نمط شبكي ذهبي خفيف (توقيع الهوية البصرية)
   يُضاف بإلحاق class="satwa-hero" على قسم Kadence Row Layout في الهيدر
   ========================================================================== */
.satwa-hero{
  position: relative;
  overflow: hidden;
}
.satwa-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(var(--satwa-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--satwa-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 85%);
}

/* ==========================================================================
   8) شريط تواصل الوكالة أسفل الفوتر (منفصل عن بيانات العميل)
   ========================================================================== */
.satwa-agency-bar{
  background: var(--satwa-navy-950);
  border-top: 1px solid var(--satwa-line);
  padding: 14px 20px;
  text-align: center;
  font-size: .78rem;
  color: var(--satwa-slate-400);
}
.satwa-agency-bar b{ color: var(--satwa-gold-300); }

/* ==========================================================================
   9) أقسام الصفحة الرئيسية — Custom HTML جاهزة للّصق (بديل بناء Kadence اليدوي)
   تُستخدم بإلحاق هذه الأصناف داخل عنصر "Custom HTML" في محرر ووردبريس مباشرة.
   راجع home-page-content-part1.html (الهيرو/ليش سطوة/الخدمات) و
   home-page-content-part2.html (خطوات العمل/آراء العملاء/المدونة/الأسئلة الشائعة/
   CTA ختامي) للمحتوى الجاهز الذي يستخدم هذه الأصناف.
   ========================================================================== */

/* -- قسم عام مشترك (رأس قسم Kicker + H2 + وصف) -- */
.satwa-section{
  background-color: var(--satwa-navy-950) !important;
  color: var(--satwa-ivory) !important;
  padding: 80px 24px;
}
.satwa-section-head{ max-width: 640px; margin: 0 auto 48px; text-align: center; }
.satwa-kicker{
  color: var(--satwa-gold-400) !important;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .3px;
  margin-bottom: 10px;
}
.satwa-section-head h2{
  color: var(--satwa-ivory) !important;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 900;
  margin: 0 0 12px;
}
.satwa-section-head p{ color: var(--satwa-slate-300) !important; margin: 0; font-size: .98rem; }

/* -- الهيرو -- */
.satwa-hero-section{
  background-color: var(--satwa-navy-950) !important;
  color: var(--satwa-ivory) !important;
  position: relative;
  padding: 96px 24px 80px;
  text-align: center;
  overflow: hidden;
}
.satwa-hero-section .satwa-eyebrow{
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--satwa-gold-500);
  color: var(--satwa-gold-300) !important;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: .82rem;
  margin-bottom: 22px;
}
.satwa-hero-section h1{
  color: var(--satwa-ivory) !important;
  position: relative; z-index: 2;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 900;
  margin: 0 auto 22px;
  max-width: 780px;
  line-height: 1.25;
}
.satwa-hero-section h1 span{ color: var(--satwa-gold-400) !important; }
.satwa-hero-section .satwa-hero-lead{
  position: relative; z-index: 2;
  max-width: 600px;
  margin: 0 auto 40px;
  color: var(--satwa-slate-300) !important;
}
.satwa-hero-ctas{
  position: relative; z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 64px;
}
.satwa-hero-stats{
  position: relative; z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
}
.satwa-hero-stats .stat{ text-align: center; }
.satwa-hero-stats .stat b{
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--satwa-gold-300) !important;
}
.satwa-hero-stats .stat span{ font-size: .85rem; color: var(--satwa-slate-300) !important; }

@media (max-width: 600px){
  .satwa-hero-section{ padding: 72px 18px 56px; }
  .satwa-section{ padding: 60px 18px; }
}

/* -- "ليش سطوة" (بطاقات مرقّمة) -- */
.satwa-usp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px;
}
.satwa-usp-card{
  background: var(--satwa-navy-900) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  padding: 30px 26px;
}
.satwa-usp-num{
  font-size: .78rem;
  font-weight: 800;
  color: var(--satwa-gold-500) !important;
  border: 1px solid var(--satwa-gold-500);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.satwa-usp-card h3{ color: var(--satwa-ivory) !important; margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; }
.satwa-usp-card p{ margin: 0; color: var(--satwa-slate-300) !important; font-size: .9rem; }

/* -- قسم الخدمات -- */
.satwa-services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 22px;
}
.satwa-service-card{
  background: linear-gradient(160deg, var(--satwa-navy-800), var(--satwa-navy-900)) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  padding: 32px 28px;
  transition: .25s;
}
.satwa-service-card:hover{
  border-color: var(--satwa-gold-500);
  transform: translateY(-4px);
}
.satwa-service-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(212,166,42,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.satwa-service-card h3{ margin: 0 0 10px; font-size: 1.08rem; font-weight: 800; color: var(--satwa-gold-300) !important; }
.satwa-service-card p{ margin: 0; color: var(--satwa-slate-300) !important; font-size: .9rem; }
.satwa-services-cta{ text-align: center; margin-top: 40px; }

/* -- خطوات العمل (4 خطوات مرقّمة) --
   المرحلة 9: يطبّق درس المرحلة 8 من البداية — خلفية صريحة + !important على الألوان. */
.satwa-steps-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 22px;
}
.satwa-step-card{
  background-color: var(--satwa-navy-900) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  padding: 30px 24px;
  text-align: center;
}
.satwa-step-num{
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--satwa-gold-500) !important;
  opacity: .85;
  margin-bottom: 10px;
}
.satwa-step-card h3{ color: var(--satwa-ivory) !important; margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; }
.satwa-step-card p{ margin: 0; color: var(--satwa-slate-300) !important; font-size: .88rem; }

/* -- آراء العملاء (Testimonials) -- */
.satwa-testimonials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 22px;
}
.satwa-testimonial-card{
  background-color: var(--satwa-navy-900) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  padding: 30px 26px;
}
.satwa-testimonial-stars{ color: var(--satwa-gold-400) !important; letter-spacing: 2px; margin-bottom: 14px; font-size: .95rem; }
.satwa-testimonial-quote{ color: var(--satwa-slate-300) !important; font-size: .92rem; margin: 0 0 18px; line-height: 1.7; }
.satwa-testimonial-author{ color: var(--satwa-gold-300) !important; font-weight: 800; font-size: .92rem; }
.satwa-testimonial-role{ display: block; color: var(--satwa-slate-400) !important; font-size: .8rem; font-weight: 400; margin-top: 2px; }

/* -- المدونة -- */
.satwa-blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 22px;
}
.satwa-blog-card{
  background-color: var(--satwa-navy-900) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  overflow: hidden;
}
.satwa-blog-thumb{
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  background: linear-gradient(160deg, var(--satwa-navy-800), var(--satwa-navy-700)) !important;
  color: var(--satwa-gold-400) !important;
}
.satwa-blog-body{ padding: 24px 22px; }
.satwa-blog-cat{ color: var(--satwa-gold-400) !important; font-weight: 700; font-size: .78rem; margin-bottom: 8px; }
.satwa-blog-card h3{ color: var(--satwa-ivory) !important; margin: 0 0 10px; font-size: 1rem; font-weight: 800; line-height: 1.5; }
.satwa-blog-card p{ margin: 0 0 14px; color: var(--satwa-slate-300) !important; font-size: .88rem; }
.satwa-blog-link{ color: var(--satwa-gold-300) !important; font-weight: 700; font-size: .88rem; text-decoration: none; }
.satwa-blog-link:hover{ color: var(--satwa-gold-400) !important; }

/* -- الأسئلة الشائعة (Accordion بدون JS، عبر details/summary أصلية) -- */
.satwa-faq-list{ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.satwa-faq-item{
  background-color: var(--satwa-navy-900) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-md);
  padding: 6px 22px;
}
.satwa-faq-item summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  color: var(--satwa-ivory) !important;
  font-weight: 800;
  font-size: .96rem;
}
.satwa-faq-item summary::-webkit-details-marker{ display: none; }
.satwa-faq-item summary::after{
  content: "+";
  flex-shrink: 0;
  color: var(--satwa-gold-400) !important;
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform .2s;
}
.satwa-faq-item[open] summary::after{ content: "−"; }
.satwa-faq-item p{ margin: 0 0 18px; color: var(--satwa-slate-300) !important; font-size: .9rem; line-height: 1.8; }

/* -- CTA ختامي -- */
.satwa-cta-section{
  background-color: var(--satwa-navy-900) !important;
  color: var(--satwa-ivory) !important;
  border: 1px solid var(--satwa-gold-500);
  border-radius: var(--satwa-radius-lg);
  margin: 0 24px;
  padding: 56px 24px;
  text-align: center;
}
.satwa-cta-section h2{ color: var(--satwa-ivory) !important; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; margin: 0 0 14px; }
.satwa-cta-section p{ color: var(--satwa-slate-300) !important; max-width: 560px; margin: 0 auto 30px; }

@media (max-width: 600px){
  .satwa-cta-section{ margin: 0 12px; padding: 44px 18px; }
}

/* ==========================================================================
   10) وضوح روابط القائمة الرئيسية في الهيدر/الفوتر + عرض اسم الموقع بجانب الشعار
   المرحلة 10: يعالج خلل تباين نص روابط القائمة (كانت تعتمد على لون Kadence
   الافتراضي بدل لون صريح، فتظهر باهتة على الخلفية الكحلية)، ويضيف نمط لعرض اسم
   الموقع دون تزاحمه مع روابط القائمة.
   ========================================================================== */

/* -- روابط القائمة (هيدر + فوتر): لون عاجي صريح دائماً، بغض النظر عن إعدادات
   Kadence Global Styles (نفس منطق !important المستخدم في القسم 9، درس المرحلة 8) -- */
.site-header nav a,
.site-header .main-navigation a,
.site-header .menu-link,
.site-header #site-navigation a,
.site-footer nav a,
.site-footer .menu-link{
  color: var(--satwa-ivory) !important;
}
.site-header nav a:hover,
.site-header .main-navigation a:hover,
.site-header .menu-link:hover,
.site-footer nav a:hover,
.site-footer .menu-link:hover{
  color: var(--satwa-gold-300) !important;
}
.site-header .current-menu-item > a,
.site-header .current_page_item > a{
  color: var(--satwa-gold-400) !important;
}

/* -- اسم الموقع بجانب الشعار (Site Title) --
   لتفعيله من لوحة التحكم: المظهر ← تخصيص (Customize) ← هوية الموقع (Site Identity) ←
   اختر "شعار + نص العنوان" (Logo Image and Site Title Text) بدل "شعار فقط" — هذا
   إعداد يدوي من ووردبريس، هذا القسم فقط ينسّق شكله بعد تفعيله.
   لمنع التزاحم مع روابط القائمة: حجم خط صغير نسبياً، ويختفي تلقائياً على شاشات
   الجوال (أقل من 782px، نفس نقطة انكسار قائمة الجوال في Kadence) ليبقى الشعار وحده
   ظاهراً هناك بجانب زر القائمة. */
.site-header .site-title{
  font-size: 1.05rem;
  font-weight: 800;
  margin-inline-start: 12px;
}
.site-header .site-title a{
  color: var(--satwa-ivory) !important;
}
.site-header .site-title a:hover{
  color: var(--satwa-gold-300) !important;
}
@media (max-width: 782px){
  .site-header .site-title{ display: none; }
}

/* ==========================================================================
   11) عناصر الصفحات الداخلية (غير الرئيسية) — هيدر صفحة + تفاصيل الخدمات
   المرحلة 11: أول تطبيق لنمط "كود جاهز للصق" (القرار التقني رقم 12) على صفحة
   غير الرئيسية. الأصناف هنا عامة ومُعدّة لإعادة الاستخدام في أي صفحة داخلية
   لاحقة (من نحن، تواصل معنا...) لا فقط صفحة الخدمات — راجع القرار التقني 19.
   ========================================================================== */

/* -- هيدر صفحة داخلية (Page Hero) — أخف من هيرو الرئيسية، بلا إحصائيات/أزرار -- */
.satwa-page-hero{
  background-color: var(--satwa-navy-950) !important;
  color: var(--satwa-ivory) !important;
  text-align: center;
  padding: 72px 24px 56px;
}
.satwa-page-hero .satwa-kicker{ color: var(--satwa-gold-400) !important; font-weight: 700; font-size: .85rem; margin-bottom: 12px; }
.satwa-page-hero h1{
  color: var(--satwa-ivory) !important;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  font-weight: 900;
  max-width: 760px;
  margin: 0 auto 14px;
  line-height: 1.3;
}
.satwa-page-hero p{ color: var(--satwa-slate-300) !important; max-width: 600px; margin: 0 auto; }

/* -- شبكة تفاصيل الخدمات (تُعيد استخدام .satwa-service-icon من القسم 9) -- */
.satwa-services-detail-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
  gap: 24px;
}
.satwa-service-detail-card{
  background: linear-gradient(160deg, var(--satwa-navy-800), var(--satwa-navy-900)) !important;
  border: 1px solid var(--satwa-line);
  border-radius: var(--satwa-radius-lg);
  padding: 32px 28px;
}
.satwa-service-detail-card .satwa-service-icon{ margin-bottom: 18px; }
.satwa-service-detail-card h2{ color: var(--satwa-gold-300) !important; font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; }
.satwa-service-detail-card > p{ color: var(--satwa-slate-300) !important; font-size: .92rem; margin: 0 0 18px; line-height: 1.7; }
.satwa-service-checklist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.satwa-service-checklist li{ display: flex; align-items: flex-start; gap: 10px; color: var(--satwa-ivory) !important; font-size: .88rem; }
.satwa-service-checklist li .check{ color: var(--satwa-gold-400) !important; font-weight: 800; flex-shrink: 0; }

@media (max-width: 600px){
  .satwa-page-hero{ padding: 56px 18px 44px; }
}

/* ==========================================================================
   12) صفحة "من نحن" — قصة الوكالة (فقرات نصية طويلة داخل صفحة داخلية)
   المرحلة 12: تُكمل نمط "كود جاهز للصق" لصفحة about. باقي عناصر الصفحة
   (الهيدر، شبكة القيم، صف الإحصائيات، CTA) تُعيد استخدام أصناف موجودة مسبقاً
   بالكامل (.satwa-page-hero من القسم 11، .satwa-usp-grid/.satwa-usp-card من
   القسم 9 لبطاقات القيم، .satwa-hero-stats من القسم 9 لصف الإحصائيات،
   .satwa-cta-section من القسم 9) — القسم الوحيد الجديد فعلياً هنا هو فقرات
   "قصتنا" النصية.
   ========================================================================== */
.satwa-story-block{
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.satwa-story-block p{
  color: var(--satwa-slate-300) !important;
  font-size: .96rem;
  line-height: 1.9;
  margin: 0;
}