/* Al-Khalil SPC — shared stylesheet for the Arabic content pages.
   Tokens mirror index.html so the new pages read as one site. */
:root{
  --espresso:#241a12; --walnut:#4a3222; --bark:#6b4a30; --caramel:#a06a3c;
  --gold:#c69a5b; --sand:#efe4d4; --paper:#f7f0e6; --cream:#fbf7f0;
  --ink:#2b2018; --muted:#7c6a58; --line:rgba(74,50,34,.14);
  --line-soft:rgba(74,50,34,.08);
  --maxw:1060px; --r:14px; --whatsapp:#1fa855; --mail:#3d6f9e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Tajawal','Inter',system-ui,sans-serif;
  direction:rtl; text-align:right;
  color:var(--ink); background:var(--cream);
  line-height:1.85; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:22px}

/* ── nav ── */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,240,.92);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:34px;width:auto}
.brand b{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--espresso)}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:var(--walnut);flex-wrap:wrap}
.navlinks a:hover{color:var(--caramel)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-weight:700;font-size:14.5px;
  border:1px solid transparent;transition:.2s;text-decoration:none;font-family:inherit;
  cursor:pointer;white-space:nowrap;
}
.btn-wa{background:var(--whatsapp);color:#fff}
.btn-wa:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-mail{background:var(--mail);color:#fff}
.btn-mail:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--walnut);background:transparent}
.btn-ghost:hover{border-color:var(--caramel);color:var(--caramel)}
.btn-lg{padding:15px 28px;font-size:16px}
a.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}

/* ── breadcrumb ── */
.crumb{font-size:12.5px;color:var(--muted);padding:16px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--caramel)}
.crumb span{margin-inline:6px;opacity:.5}

/* ── hero ── */
.hero{padding:34px 0 30px;border-bottom:1px solid var(--line-soft)}
.kick{
  font-size:11px;font-weight:700;color:var(--caramel);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}
h1{
  font-size:clamp(27px,4.4vw,42px);font-weight:800;line-height:1.3;
  letter-spacing:-.01em;text-wrap:balance;margin-bottom:14px;
}
.lede{font-size:clamp(16px,2vw,18.5px);color:var(--walnut);max-width:62ch}
.herocta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}

/* ── sections ── */
section{padding:38px 0;border-bottom:1px solid var(--line-soft)}
section:last-of-type{border-bottom:0}
h2{
  font-size:clamp(21px,3vw,28px);font-weight:800;line-height:1.35;
  margin-bottom:14px;text-wrap:balance;
}
h3{font-size:18px;font-weight:700;margin-bottom:8px}
p{margin-bottom:14px;max-width:68ch}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 14px;padding-inline-start:22px}
li{margin-bottom:9px}
strong{font-weight:700;color:var(--espresso)}

/* ── cards ── */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));margin-top:6px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:0 1px 2px rgba(36,26,18,.04);
}
.card h3{color:var(--espresso)}
.card p{font-size:14.5px;color:var(--muted);margin-bottom:0}
.card .num{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--caramel);
  letter-spacing:.1em;display:block;margin-bottom:9px;
}

/* ── callout ── */
.note{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;margin:20px 0;
}
.note.warn{background:#fdf4ec;border-color:rgba(160,106,60,.28)}
.note b{color:var(--caramel)}

/* ── table ── */
.tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{padding:13px 15px;text-align:right;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--paper);font-weight:800;font-size:13px;color:var(--espresso);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.yes{color:#1f7a4d;font-weight:700}
td.no{color:#a8442a;font-weight:700}
td.mid{color:var(--muted)}
.best{background:rgba(198,154,91,.09)}

/* ── colour grid ── */
.swatches{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:8px}
.sw{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;display:block;transition:.2s;
}
.sw:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(36,26,18,.6);border-color:var(--caramel)}
.sw img{aspect-ratio:1/1;object-fit:cover;width:100%}
.sw .m{padding:11px 13px}
.sw .m b{display:block;font-size:14.5px;font-weight:700}
.sw .m span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sw .m i{
  font-style:normal;font-family:'Inter',sans-serif;font-size:11px;
  color:var(--caramel);font-weight:700;letter-spacing:.06em;
}

/* ── big swatch on a colour page ── */
.hero-sw{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 44px -26px rgba(36,26,18,.65);margin-bottom:6px;
}
.hero-sw img{width:100%;aspect-ratio:16/10;object-fit:cover}
.speclist{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.speclist div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.speclist div:last-child{border-bottom:0}
.speclist dt{color:var(--muted);font-weight:500}
.speclist dd{font-weight:700;text-align:left}

/* ── faq ── */
details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden}
summary{padding:15px 18px;font-weight:700;cursor:pointer;font-size:15.5px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:left;color:var(--caramel);font-weight:800;font-size:19px;line-height:1}
details[open] summary::after{content:"−"}
details .a{padding:0 18px 16px;color:var(--walnut);font-size:15px}

/* ── final cta ── */
.cta{background:var(--espresso);color:var(--paper);border-radius:18px;padding:36px 28px;margin:36px 0;text-align:center}
.cta h2{color:#fff;margin-bottom:10px}
.cta p{color:rgba(247,240,230,.82);margin:0 auto 20px;max-width:52ch}
.cta .herocta{justify-content:center;margin-top:0}

/* ── footer ── */
footer{background:var(--espresso);color:rgba(247,240,230,.72);padding:34px 0 26px;font-size:14px}
footer a{text-decoration:none}
footer a:hover{color:var(--gold)}
.fgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:22px}
.fgrid h4{color:#fff;font-size:13px;margin-bottom:9px;letter-spacing:.05em}
.fgrid a,.fgrid p{display:block;margin-bottom:6px;font-size:13.5px}
.fbot{border-top:1px solid rgba(247,240,230,.14);padding-top:16px;font-size:12.5px;opacity:.75}

/* ── floating whatsapp ── */
.wa-float{
  position:fixed;bottom:22px;left:22px;z-index:80;
  width:56px;height:56px;border-radius:50%;background:var(--whatsapp);
  display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px -8px rgba(31,168,85,.7);transition:.2s;
}
.wa-float:hover{transform:scale(1.07)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:640px){
  .navlinks{display:none}
  section{padding:30px 0}
  .cta{padding:28px 20px}
}