/* =====================================================================
   theme.css — الهوية البصرية الموحدة لموقع مؤسسة الرحاب للمقاولات
   يُحمَّل بعد تنسيقات كل صفحة ليطبّق: اللوحة المعتمدة + خط Cairo
   + هيرو الصفحات الفرعية + نموذج التواصل المشترك
   -------------------------------------------------------------------
   اللوحة المعتمدة (عدّلها من هنا فقط):
   الخلفية الرئيسية      #D6D6D6
   بطاقات الخدمات        #3B5945
   النص على الفاتح       #292D29
   النص على الداكن       #FFFFFF
   ذهبي                  #C5A45D
   لمسة نباتية (ميرمية)  #A9B99A
   أخضر عميق للطبقات     #263D30
   ===================================================================== */

/* ---------- 1) المتغيرات العامة ---------- */
html body{
  --bg:#D6D6D6; --bg2:#E1E1DD; --card:#3B5945;
  --line:rgba(38,61,48,.2); --txt:#292D29; --mut:#4C544C;
  --grn:#3B5945; --gold:#C5A45D; --deep:#263D30; --sage:#A9B99A;
  background:var(--bg); color:var(--txt);
}

/* ---------- 2) خط Cairo ---------- */
html body,
html body h1, html body h2, html body h3, html body h4,
html body .brand b, html body .num, html body .step b.n, html body .hero-stats b,
html body .btn, html body input, html body select, html body textarea, html body button{
  font-family:"Cairo","Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  letter-spacing:0;
}
html body{line-height:1.95}
html body h1, html body h2, html body h3, html body h4{font-weight:700;line-height:1.55;color:var(--txt)}
html body h1{font-weight:800}
html body .btn{font-weight:700}
html body .brand b{font-weight:800}

/* ---------- 3) الترويسة والتنقل ---------- */
html body .hd{background:rgba(214,214,214,.95);border-bottom:1px solid var(--line)}
html body .brand b{color:var(--grn)}
html body .brand .b-ic{background:linear-gradient(135deg,#4a6e55,#3B5945);color:#fff;border-color:var(--gold)}
html body .nav a{color:var(--txt)}
html body .nav a:hover, html body .nav a.act{color:var(--grn);background:rgba(59,89,69,.1)}
html body .burger{color:var(--grn);border-color:var(--line)}
@media(max-width:860px){html body .nav{background:#D6D6D6;border-bottom:1px solid var(--line)}}

/* ---------- 4) الأزرار ---------- */
html body .btn-gold{background:var(--grn);color:#fff;border-color:var(--grn)}
html body .btn-gold:hover{background:#2F4A39;box-shadow:0 10px 22px -10px rgba(38,61,48,.55)}
html body .btn-wa{background:#2E7D5B;color:#fff}
html body .btn-wa:hover{background:#263D30}
html body .btn-ghost{border-color:var(--gold);color:var(--grn)}
html body .btn-ghost:hover{background:rgba(197,164,93,.15);color:var(--grn);border-color:var(--gold)}
html body :focus-visible{outline:2px solid var(--grn)}

/* ---------- 5) هيرو الرئيسية (قسم داكن على صورة) ---------- */
html body .hero::after{background:linear-gradient(to left,rgba(38,61,48,.94) 15%,rgba(38,61,48,.7) 55%,rgba(38,61,48,.4)),linear-gradient(to top,var(--bg) 2%,transparent 30%)}
html body .hero h1, html body .hero h2{color:#fff}
html body .hero h1 em{color:var(--sage)}
html body .hero p{color:#E7ECE5}
html body .hero .hero-tag{background:rgba(38,61,48,.6);border-color:rgba(169,185,154,.5);color:#E7ECE5}
html body .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
html body .hero .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
html body .hero-stats b{color:var(--gold)}
html body .hero-stats small{color:#D3DCCF}
html body .hero-tag{background:rgba(59,89,69,.1);border:1px solid rgba(59,89,69,.3);color:var(--grn)}
html body .sec-head .tag{color:var(--grn);border-color:var(--gold)}

/* ---------- 6) هيرو الصفحات الفرعية: صورة خلفية + طبقة خضراء عميقة ----------
   تُطبَّق على وسم <section class="subhero" style="background-image:url(...)">
   الذي يغلّف مسار التنقل وعنوان كل صفحة فرعية */
.subhero{position:relative;background-color:#263D30;background-size:cover;background-position:center;padding:30px 0 46px;overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(38,61,48,.93) 18%,rgba(38,61,48,.75) 58%,rgba(38,61,48,.55))}
.subhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.subhero .wrap{position:relative;z-index:2}
html body .subhero .crumb{color:#D3DCCF}
html body .subhero .crumb a{color:#E7ECE5}
html body .subhero .crumb a:hover{color:var(--gold)}
html body .subhero .crumb .sep{color:var(--gold)}
html body .subhero .page-hero h1{color:#FFFFFF;text-shadow:0 2px 14px rgba(0,0,0,.25)}
html body .subhero .page-hero p{color:#E7ECE5!important}
html body .subhero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
html body .subhero .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
/* حركة دخول هادئة لعنوان الهيرو ومحتواه */
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html body .subhero .crumb{animation:heroRise .55s ease both}
html body .subhero .page-hero h1{animation:heroRise .8s .1s ease both}
html body .subhero .page-hero p{animation:heroRise .8s .25s ease both}
html body .subhero .hero-btns{animation:heroRise .8s .4s ease both}
@media (prefers-reduced-motion:reduce){html body .subhero *{animation:none!important}}
@media(max-width:640px){.subhero{padding:18px 0 36px}}

/* ---------- 7) بطاقات الخدمات: خلفية خضراء + ضباب متدرج + الأيقونة ---------- */
html body .svc{background:#3B5945;border:1px solid rgba(197,164,93,.45);box-shadow:0 10px 26px -18px rgba(38,61,48,.55)}
html body .svc:hover{border-color:var(--gold);box-shadow:0 26px 50px -24px rgba(38,61,48,.6)}
html body .svc-img::before{background:linear-gradient(to top,#3B5945 2%,rgba(59,89,69,.88) 16%,rgba(59,89,69,.45) 42%,rgba(59,89,69,0) 68%)}
html body .svc-img::after{background:radial-gradient(closest-side,rgba(59,89,69,.95),rgba(59,89,69,0))}
html body .num{background:rgba(38,61,48,.65);border-color:rgba(255,255,255,.35);color:#fff}
html body .leaf{background:radial-gradient(circle at 35% 30%,#4a6e55,#263D30);border:1px solid var(--gold);color:#FFFFFF;box-shadow:0 0 0 9px rgba(59,89,69,.85),0 8px 18px -6px rgba(38,61,48,.5)}
html body .leaf .icon{color:var(--sage)}
html body .svc h3{color:#FFFFFF}
html body .svc-body>p{color:#D9E2DA}
html body .feats span{color:#E7ECE5}
html body .feats .icon{color:var(--sage)}
html body .more{color:var(--gold)}
html body .more i{border-color:var(--gold);color:var(--gold)}
html body .more:hover i{background:var(--gold);color:#263D30}

/* ---------- 8) الأقسام والبطاقات العامة ---------- */
html body .sec-alt{background:var(--bg2)}
html body .step, html body .val, html body .area, html body .art, html body .cc,
html body .faq details, html body .side-box, html body .form-box{background:#fff;border-color:rgba(197,164,93,.4)}
html body .step:hover, html body .val:hover, html body .area:hover, html body .art:hover, html body .cc:hover{border-color:var(--gold)}
html body .step p, html body .val p, html body .art p, html body .faq-a, html body .cc small, html body .area small{color:var(--mut)}
html body .tick-list li, html body .prose p, html body .prose li, html body .side-box li{color:var(--txt)}
html body .tick-list .icon, html body .side-box .icon, html body .val .icon, html body .cc .icon{color:var(--grn)}
html body .area .icon{color:var(--gold)}
html body .prose li::before{background:var(--gold)}
html body .prose h2, html body .side-box h3{color:var(--grn)}
html body .prose a, html body .faq-a a{color:var(--grn)!important;text-decoration-color:var(--gold)}
html body .step b.n{color:var(--gold)}
html body .chip{border-color:var(--line);color:var(--txt)}
html body .chip:hover{border-color:var(--gold);color:var(--grn);background:rgba(197,164,93,.15)}
html body .faq summary::after{color:var(--gold)}
html body .img-fallback{background:linear-gradient(135deg,#A9B99A,#D6D6D6)}
html body .intro-img, html body .pimg, html body .art-hero, html body .slider{border-color:rgba(197,164,93,.4)}
html body .sl-dots button.cur{background:var(--gold)}

/* ---------- 9) الأقسام الداكنة المختارة: شريط الدعوة والتذييل ---------- */
html body .cta-band{background:var(--deep);border-color:rgba(197,164,93,.45)}
html body .cta-band h2{color:#fff}
html body .cta-band p{color:#D3DCCF!important}
html body .cta-band .icon{color:var(--sage)}
html body .cta-band .btn-gold{background:var(--gold);color:#263D30;border-color:var(--gold)}
html body .cta-band .btn-gold:hover{background:#d4b56f}
html body .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
html body .ft{background:var(--deep);border-top:3px solid var(--gold)}
html body .ft h4{color:var(--gold)}
html body .ft .brand b{color:#fff}
html body .ft .brand small, html body .ft p, html body .ft a, html body .ft-bottom{color:#D3DCCF}
html body .ft a:hover{color:var(--gold)}
html body .ft-bottom{border-top-color:rgba(255,255,255,.12)}
html body .soc a{border-color:rgba(255,255,255,.2);color:#D3DCCF}
html body .soc a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 10) نموذج التواصل (صفحة اتصل بنا + النموذج المشترك) ---------- */
html body .field label, html body .cf-field label{color:var(--txt);font-weight:600}
html body .field label b, html body .cf-field label b{color:var(--gold)}
html body .field input, html body .field select, html body .field textarea,
html body .cf-field input, html body .cf-field select, html body .cf-field textarea{
  width:100%;background:#fff;border:1px solid rgba(59,89,69,.3);border-radius:12px;padding:12px 14px;color:var(--txt);font-size:.95rem
}
html body .field :is(input,select,textarea):focus, html body .cf-field :is(input,select,textarea):focus{border-color:var(--grn);outline:none;box-shadow:0 0 0 3px rgba(59,89,69,.14)}
html body .field .err, html body .cf-field .err{color:#A33A3A}
html body .field.bad :is(input,select), html body .cf-field.bad :is(input,select){border-color:#A33A3A}
html body .form-fallback, html body .cf-fallback{background:#F5ECD8;border:1px solid var(--gold);color:#5a4a1f}
.cf-sec{padding:66px 0;background:var(--bg2);border-top:1px solid var(--line)}
.cf-sec .wrap{max-width:1180px;margin:auto;padding:0 20px}
.cf-head{text-align:center;max-width:640px;margin:0 auto 30px}
.cf-head .tag{display:inline-flex;align-items:center;gap:8px;color:var(--grn);border:1px solid var(--gold);border-radius:999px;padding:4px 16px;font-size:.82rem;margin-bottom:12px}
.cf-head h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--txt)}
.cf-head p{color:var(--mut);margin-top:6px}
.cf-box{background:#fff;border:1px solid rgba(197,164,93,.4);border-radius:22px;padding:30px;max-width:900px;margin:auto;box-shadow:0 10px 30px -20px rgba(38,61,48,.4)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field label{display:block;font-size:.9rem;margin-bottom:6px}
.cf-field textarea{resize:vertical;min-height:110px}
.cf-field .err{font-size:.8rem;display:none;margin-top:4px}
.cf-field.bad .err{display:block}
.cf-full{grid-column:1/-1}
.cf-note{color:var(--mut);font-size:.83rem;margin-top:12px;text-align:center}
.cf-fallback{display:none;border-radius:12px;padding:14px 16px;margin-top:14px;font-size:.9rem}
.cf-fallback a{color:var(--grn);font-weight:700}
@media(max-width:640px){.cf-grid{grid-template-columns:1fr}.cf-sec{padding:48px 0}.cf-box{padding:22px}}

/* ---------- 11) شعارا الموقع ---------- */
/* شعار الترويسة الثابتة: حجم مدمج لا يزيد ارتفاع الشريط (74px) — النسبة محفوظة بـ object-fit */
html body .hd .brand-logo{border-radius:10px;display:block;height:52px;width:auto;max-width:150px;object-fit:contain;flex:none}
@media(max-width:860px){html body .hd .brand-logo{border-radius:10px;height:46px;max-width:130px}}
@media(max-width:420px){html body .hd .brand-logo{border-radius:10px;height:40px;max-width:90px}}
/* شعار التذييل: فوق اسم المؤسسة، على لوحة رمادية فاتحة من اللوحة المعتمدة لضمان وضوحه على الأخضر العميق (ملف الصورة نفسه يبقى شفافاً) */
html body .footer-logo-link{display:inline-block;margin-bottom:16px;line-height:0}
html body .footer-logo{display:block;width:auto;max-width:190px;height:auto;object-fit:contain;background:rgba(255,255,255,.08);padding:10px 14px;border-radius:14px;border:1px solid rgba(150,205,165,.25)}
@media(max-width:640px){html body .footer-logo{max-width:160px}}
/* إن فشل تحميل أي شعار لا يظهر خلفية بديلة تشوّه الترويسة أو التذييل */
html body .brand.img-fallback, html body .ft .img-fallback{background:none}