/*
Theme Name: شركة الخبراء كلين
Theme URI: https://qotb.agency/
Author: وكالة قطب
Author URI: https://qotb.agency/
Description: قالب ووردبريس احترافي متجاوب لشركات تنظيف وعزل الخزانات، بتصميم عربي RTL بالكامل، ألوان أزرق بحري وذهبي وتركواز، سريع وخفيف ومتوافق مع السيو. يدعم التخصيص الكامل عبر لوحة تحكم ووردبريس (Customizer) وخدمات ديناميكية عبر نوع محتوى مخصص.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: alkhubara-clean
Tags: rtl-language-support, custom-menu, featured-images, translation-ready, custom-colors
*/

/* =============================
   0) المتغيرات الأساسية (تُستبدل قيمها ديناميكيًا من الـ Customizer عبر header.php)
============================= */
:root{
  --navy:#0e2a47;
  --navy-dark:#081a2e;
  --turquoise:#12a3ad;
  --gold:#d4af37;
  --gold-light:#e8c874;
  --white:#ffffff;
  --text:#1c2b3a;
  --text-light:#5a6b7a;
  --bg-light:#f6f9fb;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(14,42,71,.12);
  --shadow-lg:0 20px 50px rgba(14,42,71,.18);
  --container:1180px;
}

/* =============================
   1) إعادة ضبط عامة
============================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo','Tajawal',Tahoma,Arial,sans-serif;
  direction:rtl;
  text-align:center;
  color:var(--text);
  background:var(--white);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-weight:800;line-height:1.35;color:var(--navy-dark)}
h1{font-size:clamp(30px,5vw,52px)}
h2{font-size:clamp(24px,4vw,36px)}
h3{font-size:20px}
p{color:var(--text-light)}
.section{padding:80px 0}
.section-alt{background:var(--bg-light)}
.eyebrow{
  display:inline-block;background:linear-gradient(90deg,var(--gold),var(--gold-light));
  color:var(--navy-dark);font-weight:700;font-size:14px;padding:6px 18px;border-radius:50px;margin-bottom:16px;
}
.section-head{max-width:720px;margin:0 auto 50px}
.section-head p{margin-top:14px;font-size:17px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:50px;
  font-weight:800;font-size:16px;transition:.25s;white-space:nowrap;
}
.btn-gold{background:linear-gradient(90deg,var(--gold),var(--gold-light));color:var(--navy-dark);box-shadow:0 8px 24px rgba(212,175,55,.4)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(212,175,55,.5)}
.btn-outline{border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-turquoise{background:var(--turquoise);color:#fff;box-shadow:0 8px 24px rgba(18,163,173,.35)}
.btn-turquoise:hover{transform:translateY(-3px)}
.svg-icon{width:32px;height:32px;flex-shrink:0}

/* =============================
   2) الهيدر / التنقل
============================= */
.site-header{
  position:sticky;top:0;z-index:999;background:rgba(14,42,71,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:var(--container);margin:0 auto}
.site-branding{display:flex;align-items:center;gap:10px}
.site-branding img{max-height:46px;border-radius:8px}
.site-title{color:#fff;font-weight:800;font-size:20px}
.site-title span{color:var(--gold-light)}
.main-nav ul{display:flex;gap:8px;align-items:center}
.main-nav a{color:#e9eef3;font-weight:700;padding:10px 16px;border-radius:50px;font-size:15px;transition:.2s}
.main-nav a:hover{background:rgba(255,255,255,.1);color:var(--gold-light)}
.header-cta{display:flex;gap:10px;align-items:center}
.header-cta .btn{padding:11px 20px;font-size:14px}
.menu-toggle{display:none;background:none;color:#fff;font-size:26px}

/* =============================
   3) قسم الهيرو
============================= */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);
  color:#fff;text-align:center;padding:60px 20px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%,rgba(18,163,173,.35),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(212,175,55,.25),transparent 50%);
  animation:driftBg 14s ease-in-out infinite alternate;
}
@keyframes driftBg{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-20px,10px)}}
.hero-waves{position:absolute;bottom:-2px;right:0;left:0;line-height:0;z-index:2}
.hero-content{position:relative;z-index:3;max-width:820px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);padding:8px 20px;border-radius:50px;font-size:14px;
  font-weight:700;margin-bottom:24px;color:var(--gold-light);
}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 em{color:var(--gold-light);font-style:normal}
.hero p.lead{font-size:19px;color:#dbe6ee;max-width:620px;margin:0 auto 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:30px}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;margin-top:30px}
.hero-stat b{display:block;font-size:26px;color:var(--gold-light)}
.hero-stat span{font-size:13px;color:#c3d2dd}

/* =============================
   4) بطاقات الخدمات
============================= */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.service-card{
  background:#fff;border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);
  transition:.3s;text-align:center;border:1px solid #eef2f5;position:relative;overflow:hidden;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--gold-light)}
.service-icon{
  width:70px;height:70px;border-radius:18px;background:linear-gradient(135deg,var(--navy),var(--turquoise));
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.service-icon svg{width:34px;height:34px;stroke:#fff;fill:none}
.service-card h3{margin-bottom:10px}
.service-card p{font-size:15px;margin-bottom:16px}
.service-price{
  display:inline-block;font-weight:800;color:var(--navy-dark);background:var(--bg-light);
  padding:8px 18px;border-radius:50px;font-size:14px;margin-bottom:18px;
}
.service-card .btn{width:100%;justify-content:center;padding:12px 20px;font-size:14px}
.service-thumb{width:100%;height:170px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:20px}

/* =============================
   5) من نحن
============================= */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;text-align:right}
.about-media{position:relative}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:380px;object-fit:cover}
.about-media::after{
  content:"";position:absolute;inset:-14px -14px auto auto;width:140px;height:140px;
  border:8px solid var(--gold-light);border-radius:20px;z-index:-1;top:auto;bottom:-14px;left:-14px;right:auto;
}
.about-text h2{text-align:right}
.about-list{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.about-list li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-weight:700}
.about-list svg{width:24px;height:24px;flex-shrink:0;color:var(--turquoise)}

/* =============================
   6) المميزات
============================= */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.feature-item{padding:30px 20px;text-align:center}
.feature-item .service-icon{background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.feature-item .service-icon svg{stroke:var(--navy-dark)}
.feature-item h3{font-size:18px;margin-bottom:8px}
.feature-item p{font-size:14px}

/* =============================
   7) المقالات
============================= */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;text-align:right}
.post-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-card img{width:100%;height:190px;object-fit:cover}
.post-card .post-body{padding:22px}
.post-date{font-size:13px;color:var(--turquoise);font-weight:700;margin-bottom:8px;display:block}
.post-card h3{margin-bottom:10px}
.post-card h3 a:hover{color:var(--turquoise)}
.post-card p{font-size:14px}
.post-more{margin-top:14px;display:inline-block;color:var(--navy);font-weight:800;font-size:14px}

/* =============================
   8) شريط CTA
============================= */
.cta-strip{
  background:linear-gradient(120deg,var(--navy),var(--navy-dark));color:#fff;text-align:center;
  padding:60px 20px;border-radius:var(--radius);margin:0 20px;
}
.cta-strip h2{color:#fff}
.cta-strip p{color:#cfe0eb;margin:14px 0 26px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =============================
   9) الفوتر
============================= */
.site-footer{background:var(--navy-dark);color:#cfe0eb;padding-top:60px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;text-align:right;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-col h4{color:#fff;margin-bottom:18px;font-size:17px}
.footer-col p{color:#a9bccb;font-size:14px}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:#a9bccb;font-size:14px;transition:.2s}
.footer-col ul a:hover{color:var(--gold-light)}
.footer-contact li{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-bottom:12px;font-size:14px}
.footer-contact svg{width:18px;height:18px;color:var(--gold-light);flex-shrink:0}
.footer-bottom{padding:22px 0;text-align:center;font-size:13px;color:#8ba0b1}
.footer-bottom a{color:var(--gold-light);font-weight:700}

/* =============================
   10) أزرار عائمة (واتساب / اتصال)
============================= */
.floating-actions{position:fixed;bottom:22px;left:18px;z-index:1000;display:flex;flex-direction:column;gap:12px}
.fab{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);color:#fff;position:relative;
}
.fab svg{width:28px;height:28px}
.fab-whatsapp{background:#25D366;animation:pulse 2.2s infinite}
.fab-call{background:var(--gold);color:var(--navy-dark)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* شريط سفلي ثابت للجوال فقط */
.mobile-cta-bar{display:none}

/* =============================
   11) صفحات المقالات المفردة
============================= */
.page-banner{
  background:linear-gradient(160deg,var(--navy),var(--navy-dark));color:#fff;
  padding:70px 20px 50px;text-align:center;position:relative;background-size:cover;background-position:center;
}
.page-banner.has-image{background-blend-mode:overlay;background-color:rgba(8,26,46,.75)}
.page-banner h1{color:#fff}
.page-banner .meta{color:var(--gold-light);font-size:14px;font-weight:700;margin-top:10px}
.single-content{max-width:820px;margin:0 auto;padding:60px 20px;text-align:right}
.single-content img{border-radius:var(--radius-sm);margin:20px 0}
.single-content h2,.single-content h3{text-align:right;margin:26px 0 12px}
.single-content p{color:var(--text);margin-bottom:16px;font-size:16px}
.single-content ul,.single-content ol{text-align:right;margin:0 24px 16px;color:var(--text)}
.single-content a{color:var(--turquoise);text-decoration:underline}
.single-cta{margin-top:40px;padding:26px;background:var(--bg-light);border-radius:var(--radius);text-align:center}

/* =============================
   12) عناصر مساعدة
============================= */
.text-center{text-align:center}
.mt-30{margin-top:30px}

/* =============================
   13) الاستجابة للشاشات (تصميم مضغوط وخفيف على الجوال + خط أوضح قليلًا)
============================= */
@media (max-width:980px){
  .about-wrap{grid-template-columns:1fr;text-align:center}
  .about-text h2{text-align:center}
  .about-list li{justify-content:center;text-align:right}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:16.5px}
  .main-nav,.header-cta .btn-outline{display:none}
  .menu-toggle{display:block}
  .main-nav.open{
    display:flex;position:absolute;top:100%;right:0;left:0;background:var(--navy-dark);
    flex-direction:column;padding:14px 20px;gap:4px;
  }
  .main-nav.open ul{flex-direction:column;width:100%}
  .main-nav.open a{display:block;padding:12px 10px}
  .hero{min-height:auto;padding:56px 16px 64px}
  .hero-badge{font-size:12.5px;padding:6px 14px}
  .hero p.lead{font-size:16.5px}
  .hero-actions .btn{padding:14px 24px;font-size:15px;width:100%;justify-content:center}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero-stats{gap:22px}
  .section{padding:50px 0}
  .section-head{margin-bottom:32px}
  .service-card{padding:26px 20px}
  .cta-strip{padding:40px 18px;margin:0 12px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{justify-content:center}
  .footer-grid{grid-template-columns:1fr;text-align:center;gap:26px}
  .footer-contact li{justify-content:center}
  .footer-col ul{padding:0}
  .fab{width:50px;height:50px}
  .fab svg{width:24px;height:24px}
  .floating-actions{bottom:78px;left:14px;gap:10px}
  .mobile-cta-bar{
    display:flex;position:fixed;bottom:0;right:0;left:0;z-index:998;
    background:var(--navy-dark);padding:10px 12px;gap:10px;box-shadow:0 -6px 20px rgba(0,0,0,.25);
  }
  .mobile-cta-bar .btn{flex:1;justify-content:center;padding:13px 10px;font-size:14.5px}
  .single-content{padding:40px 16px 80px}
  .page-banner{padding:50px 16px 36px}
}
@media (max-width:420px){
  .hero h1{font-size:27px}
  .service-icon{width:60px;height:60px}
  .service-icon svg{width:28px;height:28px}
}