/*
Theme Name: rokn-afdal
Theme URI: https://rokn-alafdal.local/
Description: قالب احترافي لشركة الأفضل للخدمات المنزلية — هوية كحلي/ذهبي، متجاوب، WebP، SEO.
Author: NewVision
Version: 1.0.0
Text Domain: rokn-afdal
Tags: rtl-language-support, custom-menu, featured-images
*/

/* ===== Design Tokens ===== */
:root{
  --navy:#0e3a6b;
  --navy-dark:#0a2347;
  --navy-darker:#071a36;
  --gold:#c9a24b;
  --gold-light:#e0c074;
  --gold-dark:#a8842f;
  --bg:#f5f7fa;
  --surface:#e8edf3;
  --white:#ffffff;
  --text:#0a2347;
  --text-muted:#5a6b82;
  --line:#e2e8f0;
  --whatsapp:#25d366;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;
  --shadow-sm:0 4px 14px rgba(14,58,107,.08);
  --shadow:0 10px 30px rgba(14,58,107,.12);
  --shadow-gold:0 8px 22px rgba(201,162,75,.30);
  --container:1240px;
  --ff-head:'Cairo',sans-serif;
  --ff-body:'Tajawal','Cairo',sans-serif;
  --t:.28s cubic-bezier(.4,0,.2,1);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  font-size:16px;
  overflow-x:hidden;
  direction:rtl;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-head);line-height:1.4;color:var(--navy-dark);font-weight:700}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:var(--pill);
  font-family:var(--ff-head);font-weight:700;font-size:15px;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
  line-height:1;white-space:nowrap;
}
.btn i{font-size:18px}
.btn-gold{background:var(--gold);color:var(--navy-dark);box-shadow:var(--shadow-gold)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn-navy:hover{background:var(--navy-dark);transform:translateY(-2px)}
.btn-wa{background:var(--whatsapp);color:#fff}
.btn-wa:hover{background:#1ebd5a;transform:translateY(-2px)}
.btn-outline{background:transparent;border:1.5px solid var(--gold);color:var(--gold-dark)}
.btn-outline:hover{background:var(--gold);color:var(--navy-dark)}
.btn-ghost-light{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{border-color:var(--gold);color:var(--gold-light)}

/* ===== Section helpers ===== */
.section{padding:72px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 48px}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--gold-dark);font-family:var(--ff-head);font-weight:700;
  font-size:13.5px;letter-spacing:.3px;margin-bottom:18px;padding:8px 20px;border-radius:999px;
  background:rgba(201,162,75,.10);border:1px solid rgba(201,162,75,.4);
}
.section-head .eyebrow::before,.section-head .eyebrow::after{
  content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);border-radius:1px;flex-shrink:0
}
.section-head h2{font-size:clamp(28px,3.8vw,44px);margin-bottom:16px;font-weight:800;letter-spacing:-.5px}
.section-head h2 span{background:linear-gradient(90deg,var(--gold-dark),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-head p{color:var(--text-muted);font-size:16.5px;line-height:1.85}
.bg-soft{background:var(--surface)}

/* reveal animation (progressive enhancement: hidden only when JS is active) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

@media(max-width:768px){
  .section{padding:48px 0}
  .section-head{margin-bottom:34px}
  body{font-size:15px}
}