/*
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.8.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;
}


.satwa-form-wrap{max-width:860px;margin:0 auto;}
.satwa-contact-form{background:linear-gradient(160deg,var(--satwa-navy-800),var(--satwa-navy-900));border:1px solid var(--satwa-line);border-radius:var(--satwa-radius-lg);padding:28px;}
.satwa-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px;}
.satwa-contact-form label{display:flex;flex-direction:column;gap:8px;color:var(--satwa-ivory);font-weight:700;font-size:.9rem;}
.satwa-contact-form input,.satwa-contact-form select,.satwa-contact-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--satwa-line);border-radius:12px;background:rgba(6,15,31,.72);color:var(--satwa-ivory);padding:13px 14px;font-family:var(--satwa-font);}
.satwa-contact-form input:focus,.satwa-contact-form select:focus,.satwa-contact-form textarea:focus{outline:2px solid var(--satwa-gold-400);outline-offset:1px;}
.satwa-form-full{grid-column:1/-1;}
.satwa-form-success,.satwa-form-error{max-width:860px;margin:0 auto 18px;padding:14px 16px;border-radius:12px;line-height:1.7;}
.satwa-form-success{border:1px solid var(--satwa-line);background:rgba(212,166,42,.08);color:var(--satwa-gold-300);}
.satwa-form-error{border:1px solid rgba(220,80,80,.35);background:rgba(120,20,20,.12);color:#f3b4b4;}
@media(max-width:640px){.satwa-form-grid{grid-template-columns:1fr;}.satwa-form-full{grid-column:auto;}.satwa-contact-form{padding:20px;}}

/* ========================================================================== 
   13) SATWA FINAL PAGES — responsive cards, links, content width, accessibility
   ========================================================================== */
.satwa-service-card-link,
.satwa-service-detail-card.satwa-service-card-link{display:block;text-decoration:none;color:inherit;}
.satwa-service-card-link h3,.satwa-service-card-link h2{color:var(--satwa-gold-300)!important;}
.satwa-card-link{display:inline-block;margin-top:16px;color:var(--satwa-gold-300)!important;font-weight:800;font-size:.86rem;}
.satwa-service-card-link:hover,.satwa-service-detail-card.satwa-service-card-link:hover{transform:translateY(-4px);border-color:var(--satwa-gold-500);}
.satwa-story-block{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.satwa-story-block p{color:var(--satwa-slate-300)!important;font-size:.98rem;line-height:1.95;margin:0;}
.satwa-section .satwa-service-detail-card{height:100%;box-sizing:border-box;}
.satwa-form-note{max-width:820px;margin:0 auto;padding:28px;border:1px dashed var(--satwa-line);border-radius:var(--satwa-radius-lg);color:var(--satwa-slate-300);line-height:1.9;text-align:center;background:rgba(11,27,51,.45);}
.satwa-section-head p{line-height:1.8;}
.satwa-page-hero{position:relative;overflow:hidden;}
.satwa-page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(var(--satwa-line) 1px,transparent 1px),linear-gradient(90deg,var(--satwa-line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,black 25%,transparent 85%);}
.satwa-page-hero>*{position:relative;z-index:1;}
.satwa-service-checklist li{line-height:1.75;}
.satwa-faq-item summary:focus-visible,.satwa-card-link:focus-visible,.satwa-service-card-link:focus-visible{outline:2px solid var(--satwa-gold-300);outline-offset:4px;}
@media (max-width: 900px){.satwa-services-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.satwa-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 640px){
 .satwa-services-detail-grid,.satwa-services-grid,.satwa-usp-grid,.satwa-steps-grid{grid-template-columns:1fr;}
 .satwa-service-detail-card{padding:24px 20px;}
 .satwa-story-block p{font-size:.93rem;}
 .satwa-page-hero h1{font-size:clamp(1.65rem,8vw,2.15rem);}
 .satwa-section-head{margin-bottom:32px;}
 .satwa-service-card,.satwa-usp-card,.satwa-step-card{padding:24px 20px;}
}

/* SATWA BLOG SYSTEM v2 */
.satwa-blog-archive-section{background:#f7f9fc;}
.satwa-blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;}
.satwa-blog-filter a{padding:9px 14px;border:1px solid #dfe5ec;border-radius:999px;text-decoration:none;font-weight:700;color:#243044;background:#fff;}
.satwa-blog-filter a.is-active{background:#f47b20;color:#fff;border-color:#f47b20;}
.satwa-blog-grid-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.satwa-blog-card-live{background:#fff;border:1px solid #e3e7ed;border-radius:20px;overflow:hidden;box-shadow:0 8px 28px rgba(10,22,40,.06);height:100%;display:flex;flex-direction:column;}
.satwa-blog-card-live .thumb{aspect-ratio:16/9;background:#eef2f7;overflow:hidden;}
.satwa-blog-card-live .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.satwa-blog-card-live .thumb.placeholder{display:flex;align-items:center;justify-content:center;color:#9aa6b5;font-weight:800;}
.satwa-blog-card-live .body{padding:22px;display:flex;flex-direction:column;flex:1;}
.satwa-blog-card-live .cat{font-size:.78rem;color:#e66f18;font-weight:800;margin-bottom:8px;}
.satwa-blog-card-live h3{margin:0 0 10px;font-size:1.15rem;line-height:1.55;color:#101827;}
.satwa-blog-card-live h3 a{text-decoration:none;color:inherit;}
.satwa-blog-card-live p{margin:0 0 16px;color:#667085;line-height:1.9;}
.satwa-blog-card-live .read{margin-top:auto;color:#e66f18;font-weight:800;text-decoration:none;}
.satwa-blog-pagination{display:flex;justify-content:center;gap:8px;margin-top:30px;flex-wrap:wrap;}
.satwa-blog-pagination a,.satwa-blog-pagination span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dde3ea;border-radius:12px;background:#fff;text-decoration:none;color:#243044;font-weight:800;}
.satwa-blog-pagination .current{background:#f47b20;color:#fff;border-color:#f47b20;}
.satwa-article{background:#f7f9fc;}
.satwa-article-hero{background:#081221;color:#fff;border-radius:0 0 28px 28px;padding:62px 7%;margin-bottom:32px;}
.satwa-article-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.5rem);line-height:1.35;margin:8px 0 16px;max-width:1000px;}
.satwa-article-hero p{color:#cbd5e1;max-width:900px;font-size:1.05rem;line-height:2;}
.satwa-article-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;color:#f6a35d;font-weight:800;}
.satwa-article-layout{max-width:1180px;margin:0 auto;padding:0 20px 60px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start;}
.satwa-article-main{background:#fff;border:1px solid #e3e7ed;border-radius:22px;padding:clamp(24px,4vw,52px);box-shadow:0 8px 30px rgba(10,22,40,.05);overflow:hidden;}
.satwa-article-main h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.5;color:#111827;margin:34px 0 14px;}
.satwa-article-main p,.satwa-article-main li{font-size:1.02rem;line-height:2.05;color:#4b5563;}
.satwa-article-main ul{padding-right:24px;}
.satwa-lead{font-size:1.18rem!important;color:#253246!important;font-weight:600;}
.satwa-local-box{margin:28px 0;padding:22px;border-right:4px solid #f47b20;background:#fff7f0;border-radius:14px;}
.satwa-local-box p{margin:6px 0 0;}
.satwa-article-faq details{border:1px solid #e1e6ec;border-radius:14px;background:#fff;margin:10px 0;padding:16px 18px;}
.satwa-article-faq summary{cursor:pointer;font-weight:800;color:#1f2937;}
.satwa-article-faq p{margin:12px 0 0;}
.satwa-article-aside{display:grid;gap:18px;position:sticky;top:24px;}
.satwa-aside-card{background:#fff;border:1px solid #e3e7ed;border-radius:20px;padding:22px;box-shadow:0 8px 30px rgba(10,22,40,.05);}
.satwa-aside-card h3{margin:6px 0 12px;color:#111827;}
.satwa-aside-card p,.satwa-aside-card li{color:#667085;line-height:1.9;}
.satwa-aside-card ul{padding-right:20px;}
.satwa-aside-card a{color:#e66f18;font-weight:800;text-decoration:none;}
.satwa-aside-card .satwa-btn-solid{display:inline-block;padding:11px 16px;border-radius:12px;margin-top:8px;}
@media(max-width:900px){.satwa-blog-grid-live{grid-template-columns:repeat(2,minmax(0,1fr));}.satwa-article-layout{grid-template-columns:1fr;}.satwa-article-aside{position:static;grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.satwa-blog-grid-live{grid-template-columns:1fr;}.satwa-article-hero{padding:44px 20px;}.satwa-article-layout{padding:0 12px 40px;}.satwa-article-main{padding:22px 18px;}.satwa-article-aside{grid-template-columns:1fr;}.satwa-blog-filter{gap:7px;}.satwa-blog-filter a{font-size:.86rem;}}

.satwa-auto-hero{max-width:1180px;margin:24px auto 0;padding:0 20px;}
.satwa-auto-hero img{width:100%;max-height:520px;object-fit:cover;border-radius:22px;display:block;border:1px solid #e3e7ed;}
.satwa-auto-hero figcaption{font-size:.78rem;color:#7b8794;margin-top:7px;text-align:right;}
.satwa-related-articles{max-width:1180px;margin:28px auto 0;padding:0 20px 60px;}
.satwa-related-articles h2{color:#111827;margin:8px 0 18px;}
@media(max-width:620px){.satwa-auto-hero{padding:0 12px;}.satwa-auto-hero img{border-radius:16px;}.satwa-related-articles{padding:0 12px 40px;}}

/* SATWA BLOG V2 — compact header-to-content spacing and four editorial groups */
.satwa-blog-hub,.satwa-blog-group-page{direction:rtl}
.satwa-blog-hub{padding:10px 20px 50px;background:#f7f9fc}
.satwa-blog-intro,.satwa-blog-group-intro{max-width:920px;margin:0 auto 14px;text-align:right}
.satwa-blog-intro .satwa-kicker,.satwa-blog-group-intro .satwa-kicker{margin-bottom:4px}
.satwa-blog-intro p,.satwa-blog-group-intro p{margin:0;color:#667085;line-height:1.8}
.satwa-blog-groups{max-width:1200px;margin:10px auto 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.satwa-blog-group-card{display:flex;flex-direction:column;gap:5px;padding:18px;background:#fff;border:1px solid #e1e6ed;border-radius:18px;text-decoration:none;box-shadow:0 6px 22px rgba(10,22,40,.05);transition:transform .2s ease,box-shadow .2s ease}
.satwa-blog-group-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,22,40,.09)}
.satwa-blog-group-card span{font-size:.75rem;font-weight:800;color:#f47b20}
.satwa-blog-group-card strong{font-size:1.02rem;color:#101827}
.satwa-blog-group-card small{color:#667085;line-height:1.7}
.satwa-blog-latest{max-width:1200px;margin:0 auto}
.satwa-blog-latest .satwa-section-head{margin:0 0 12px}
.satwa-blog-latest .satwa-section-head h2{margin:2px 0 0}
.satwa-blog-group-page{padding:10px 20px 50px;background:#f7f9fc}
.satwa-blog-group-page .satwa-blog-filter{margin:0 0 14px}
.satwa-blog-group-page .satwa-blog-grid-live{margin-top:0}
.satwa-blog-card-live .date{font-size:.72rem;color:#7a8492;margin-bottom:8px}
.satwa-blog-empty{grid-column:1/-1;padding:30px;background:#fff;border:1px solid #e3e7ed;border-radius:18px;text-align:center;color:#667085}
/* Prevent the theme's generic page-title area from creating a large empty band before our blog content. */
body.page-id-0 .satwa-blog-hub{margin-top:0}
.entry-content:has(.satwa-blog-hub),.entry-content:has(.satwa-blog-group-page){padding-top:0!important}
.entry-content:has(.satwa-blog-hub) .satwa-page-hero,.entry-content:has(.satwa-blog-group-page) .satwa-page-hero{padding-top:0}
@media(max-width:900px){.satwa-blog-groups{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.satwa-blog-hub,.satwa-blog-group-page{padding:6px 12px 35px}.satwa-blog-groups{grid-template-columns:1fr;gap:10px;margin-bottom:20px}.satwa-blog-group-card{padding:15px}.satwa-blog-intro,.satwa-blog-group-intro{margin-bottom:10px}.satwa-blog-latest .satwa-section-head{margin-bottom:8px}}
.satwa-blog-context .content-area{padding-top:0!important}
.satwa-blog-context .entry-content{margin-top:0!important;padding-top:0!important}
.satwa-blog-context .entry-hero-container{padding-top:10px!important;padding-bottom:8px!important;margin-bottom:0!important}
.satwa-blog-context .entry-hero-container .entry-title{margin-bottom:0!important}
.satwa-blog-context .satwa-blog-hub,.satwa-blog-context .satwa-blog-group-page{margin-top:0!important}
.satwa-article-hero h1{display:none!important}